diff --git a/paas-ce/lesscode/.babelrc b/paas-ce/lesscode/.babelrc
index f9bfa61de..0beca1ece 100644
--- a/paas-ce/lesscode/.babelrc
+++ b/paas-ce/lesscode/.babelrc
@@ -18,6 +18,7 @@
         "lodash",
         "@babel/plugin-syntax-dynamic-import",
         ["@babel/plugin-proposal-decorators", { "legacy": true }],
+        ["@babel/plugin-proposal-class-properties", { "loose" : true }],
         "@babel/plugin-proposal-function-sent",
         "@babel/plugin-proposal-export-namespace-from",
         "@babel/plugin-proposal-numeric-separator",
@@ -32,6 +33,7 @@
             "plugins": [
                 "istanbul",
                 ["@babel/plugin-proposal-decorators", { "legacy": true }],
+                ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                 "@babel/plugin-proposal-function-sent",
                 "@babel/plugin-proposal-export-namespace-from",
                 "@babel/plugin-proposal-numeric-separator",
diff --git a/paas-ce/lesscode/.eslintrc.js b/paas-ce/lesscode/.eslintrc.js
index 4c059beb1..171060591 100644
--- a/paas-ce/lesscode/.eslintrc.js
+++ b/paas-ce/lesscode/.eslintrc.js
@@ -2,7 +2,10 @@ module.exports = {
     root: true,
     parserOptions: {
         parser: 'babel-eslint',
-        sourceType: 'module'
+        sourceType: 'module',
+        ecmaFeatures: {
+            legacyDecorators: true
+        }
     },
     env: {
         browser: true
@@ -23,7 +26,8 @@ module.exports = {
         APP_CODE: false,
         ENV: false,
         monaco: false,
-        ResizeSensor: false
+        ResizeSensor: false,
+        define: false
     },
     // add your custom rules hered
     rules: {
diff --git a/paas-ce/lesscode/.gitignore b/paas-ce/lesscode/.gitignore
index de7b1fc8b..f3b76f6ce 100644
--- a/paas-ce/lesscode/.gitignore
+++ b/paas-ce/lesscode/.gitignore
@@ -26,3 +26,5 @@ lib/client/static/lib-manifest.json
 lib/client/static/lib.bundle.js
 lib/client/static/vue-layout-demo*.vue
 !lib/client/static/ResizeSensor.js
+lib/server/conf/data-base.js
+lib/server/conf/http.js
diff --git a/paas-ce/lesscode/README.md b/paas-ce/lesscode/README.md
index c3f6bb03d..19d064238 100644
--- a/paas-ce/lesscode/README.md
+++ b/paas-ce/lesscode/README.md
@@ -92,6 +92,7 @@
 ## 安装部署
 - [本地开发部署](./docs/install/dev_install.md)
 - [生产环境部署](./docs/install/prod_install.md)
+- [数据库说明](./docs/install/database.md)
 
 ## 开发文档
 - [自定义组件开发文档](./docs/develop/dev_com.md)
diff --git a/paas-ce/lesscode/docs/install/database.md b/paas-ce/lesscode/docs/install/database.md
new file mode 100644
index 000000000..fe6d9496f
--- /dev/null
+++ b/paas-ce/lesscode/docs/install/database.md
@@ -0,0 +1,17 @@
+# 蓝鲸智云PaaS平台社区版之可视化开发平台
+
+## 数据库说明
+
+需要用户自己提供 MySQL 服务并做 db 授权。本地开发和生产环境的数据库初始化和变更流程是一样的，都需要自己执行SQL对数据库进行修改。执行 SQL 分两种，初始化时执行的 SQL 和升级时执行的 SQL。SQL 文件存放于 `lesscode/lib/server/model/sql` 文件夹下。
+
+## 数据库配置说明
+
+在本地开发和生产环境中，需要依照 [数据库配置示例](../../lib/server/conf/data-base.js.example) 在 `lesscode/lib/server/conf` 中新建 `data-base.js` 文件（复制 `data-base.js.example`，并删除 `.example`即可）。然后依照 `data-base.js.example` 的注释填写数据库的配置信息。
+
+## 数据库初始化说明
+
+在 `lesscode/lib/server/model/sql` 文件夹下，每次发版都会新建一个文件夹，以发布日期命名，里面的 `initial.sql` 为安装该版本需要的所有 SQL，包含了建表语句和初始化数据。初次安装的时候，需要手动执行该SQL，即完成了数据库初始化。注意：如果不是数据库初始化，执行该 SQL 会导致数据丢失。如果是升级，请按照数据库表结构变更来操作。
+
+## 数据库表结构变更说明
+
+在 `lesscode/lib/server/model/sql` 文件夹下，每次发布还会生成 `update.sql`，`update.sql` 是从上一个版本升级到这个版本的 SQL 语句，包含了修改表结构语句和初始化数据。如果这次升级数据库，跨越了3个版本，那么这3个版本的 `update.sql` 需要按照版本顺序都执行一次，即完成了数据库表结构变更。
diff --git a/paas-ce/lesscode/lib/client/build/webpack.base.conf.js b/paas-ce/lesscode/lib/client/build/webpack.base.conf.js
index 8ece8b4d6..cd91c0263 100644
--- a/paas-ce/lesscode/lib/client/build/webpack.base.conf.js
+++ b/paas-ce/lesscode/lib/client/build/webpack.base.conf.js
@@ -97,8 +97,8 @@ module.exports = {
                             resolve(__dirname, '..', 'src'),
                             resolve(__dirname, '../../../node_modules', 'bk-magic-vue'),
                             resolve(__dirname, '../../../node_modules', 'monaco-editor'),
-                            resolve(__dirname, '../../../node_modules', 'vue-echarts'),
-                            resolve(__dirname, '../../../node_modules', 'resize-detector')
+                            resolve(__dirname, '../../../node_modules', 'vue-echarts')
+                            // resolve(__dirname, '../../../node_modules', 'resize-detector')
                         ],
                         cacheDirectory: resolve(__dirname, '..', '.webpack_cache'),
                         presets: [
diff --git a/paas-ce/lesscode/lib/client/src/App.vue b/paas-ce/lesscode/lib/client/src/App.vue
index 0592c4863..970d8f791 100644
--- a/paas-ce/lesscode/lib/client/src/App.vue
+++ b/paas-ce/lesscode/lib/client/src/App.vue
@@ -21,11 +21,12 @@
             </transition>
         </div>
     </section>
-
 </template>
 <script>
     import { mapGetters } from 'vuex'
 
+    import { bus } from './common/bus'
+
     export default {
         name: 'app',
 
@@ -42,17 +43,21 @@
             }
         },
 
-        created () {
+        mounted () {
             const platform = window.navigator.platform.toLowerCase()
             if (platform.indexOf('win') === 0) {
                 this.systemCls = 'win'
             }
+            bus.$on('redirect-login', data => {
+                window.location.replace(data.loginUrl)
+            })
         }
     }
 </script>
 
 <style lang="postcss">
     @import './css/reset.css';
+    @import './css/common.css';
     @import './css/bk-patch.css';
     @import "@/css/mixins/scroller";
 
diff --git a/paas-ce/lesscode/lib/client/src/api/index.js b/paas-ce/lesscode/lib/client/src/api/index.js
index 6b34421b8..f7ac8f7f7 100644
--- a/paas-ce/lesscode/lib/client/src/api/index.js
+++ b/paas-ce/lesscode/lib/client/src/api/index.js
@@ -9,7 +9,6 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import Vue from 'vue'
 import axios from 'axios'
 import cookie from 'cookie'
 
@@ -136,7 +135,7 @@ async function getPromise (method, url, data, userConfig = {}) {
  * @param {Function} promise 拒绝函数
  */
 function handleResponse ({ config, response, resolve, reject }) {
-    if (!response.data && config.globalError) {
+    if (response.code !== 0 && config.globalError) {
         reject({ message: response.message })
     } else {
         resolve(config.originalResponse ? response : response.data, config)
@@ -163,13 +162,14 @@ function handleReject (error, config) {
         const { status, data } = error.response
         const nextError = { message: error.message, response: error.response }
         if (status === 401) {
-            bus.$emit('show-login-modal')
+            bus.$emit('redirect-login', nextError.response.data.data || {})
         } else if (data && data.message) {
             nextError.message = data.message
+            messageError(nextError.message)
         } else if (status === 500) {
             nextError.message = '服务器内部出错'
+            messageError(nextError.message)
         }
-        messageError(nextError.message)
         console.error(nextError.message)
         return Promise.reject(nextError)
     }
@@ -224,8 +224,6 @@ function getCancelToken () {
     }
 }
 
-Vue.prototype.$http = http
-
 export default http
 
 // 跨域处理
diff --git a/paas-ce/lesscode/lib/client/src/api/pureAxios.js b/paas-ce/lesscode/lib/client/src/api/pureAxios.js
new file mode 100644
index 000000000..3a29498b3
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/api/pureAxios.js
@@ -0,0 +1,207 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import axios from 'axios'
+
+import CachedPromise from './cached-promise'
+import RequestQueue from './request-queue'
+import { messageError } from '@/common/bkmagic'
+
+// axios 实例
+const axiosInstance = axios.create({
+    xsrfCookieName: 'bkiam_csrftoken',
+    xsrfHeaderName: 'X-CSRFToken',
+    withCredentials: true,
+    baseURL: `${AJAX_URL_PREFIX}`
+})
+
+/**
+ * response interceptor
+ */
+axiosInstance.interceptors.response.use(
+    response => response.data,
+    error => Promise.reject(error)
+)
+
+const http = {
+    queue: new RequestQueue(),
+    cache: new CachedPromise(),
+    cancelRequest: requestId => {
+        return http.queue.cancel(requestId)
+    },
+    cancelCache: requestId => http.cache.delete(requestId),
+    cancel: requestId => Promise.all([http.cancelRequest(requestId), http.cancelCache(requestId)])
+}
+
+const methodsWithoutData = ['delete', 'get', 'head', 'options', 'connect', 'trace']
+const methodsWithData = ['post', 'put', 'patch']
+const allMethods = [...methodsWithoutData, ...methodsWithData]
+
+// 在自定义对象 http 上添加各请求方法
+allMethods.forEach(method => {
+    Object.defineProperty(http, method, {
+        get () {
+            return getRequest(method)
+        }
+        // get: () => getRequest(method)
+    })
+})
+
+/**
+ * 获取 http 不同请求方式对应的函数
+ *
+ * @param {string} http method 与 axios 实例中的 method 保持一致
+ *
+ * @return {Function} 实际调用的请求函数
+ */
+function getRequest (method) {
+    if (methodsWithData.includes(method)) {
+        return (url, data, config) => getPromise(method, url, data, config)
+    }
+    return (url, config) => getPromise(method, url, null, config)
+}
+
+/**
+ * 实际发起 http 请求的函数，根据配置调用缓存的 promise 或者发起新的请求
+ *
+ * @param {method} http method 与 axios 实例中的 method 保持一致
+ * @param {string} 请求地址
+ * @param {Object} 需要传递的数据, 仅 post/put/patch 三种请求方式可用
+ * @param {Object} 用户配置，包含 axios 的配置与本系统自定义配置
+ *
+ * @return {Promise} 本次http请求的Promise
+ */
+async function getPromise (method, url, data, userConfig = {}) {
+    const config = initConfig(method, url, userConfig)
+    let promise
+    if (config.cancelPrevious) {
+        await http.cancel(config.requestId)
+    }
+
+    if (config.clearCache) {
+        http.cache.delete(config.requestId)
+    } else {
+        promise = http.cache.get(config.requestId)
+    }
+
+    if (config.fromCache && promise) {
+        return promise
+    }
+
+    // eslint-disable-next-line no-async-promise-executor
+    promise = new Promise(async (resolve, reject) => {
+        const axiosRequest = methodsWithData.includes(method)
+            ? axiosInstance[method](url, data, config)
+            : axiosInstance[method](url, config)
+
+        try {
+            const response = await axiosRequest
+            Object.assign(config, response.config || {})
+            handleResponse({ config, response, resolve, reject })
+        } catch (error) {
+            Object.assign(config, error.config)
+            reject(error)
+        }
+    }).catch(error => {
+        return handleReject(error, config)
+    }).finally(() => {
+        // console.log('finally', config)
+    })
+
+    // 添加请求队列
+    http.queue.set(config)
+    // 添加请求缓存
+    http.cache.set(config.requestId, promise)
+
+    return promise
+}
+
+/**
+ * 处理 http 请求成功结果
+ *
+ * @param {Object} 请求配置
+ * @param {Object} cgi 原始返回数据
+ * @param {Function} promise 完成函数
+ * @param {Function} promise 拒绝函数
+ */
+function handleResponse ({ config, response, resolve }) {
+    resolve(response, config)
+    http.queue.delete(config.requestId)
+}
+
+/**
+ * 处理 http 请求失败结果
+ *
+ * @param {Object} Error 对象
+ * @param {config} 请求配置
+ *
+ * @return {Promise} promise 对象
+ */
+function handleReject (error, config) {
+    if (axios.isCancel(error)) {
+        return Promise.reject(error)
+    }
+
+    http.queue.delete(config.requestId)
+    let errMessage = error.message || error
+    if (typeof errMessage === 'string' && errMessage.match(/Network Error/)) errMessage = 'Network Error，网络不可用，有可能是跨域原因引起'
+    messageError(errMessage)
+    console.error(error)
+    return Promise.reject(error)
+}
+
+/**
+ * 初始化本系统 http 请求的各项配置
+ *
+ * @param {string} http method 与 axios 实例中的 method 保持一致
+ * @param {string} 请求地址, 结合 method 生成 requestId
+ * @param {Object} 用户配置，包含 axios 的配置与本系统自定义配置
+ *
+ * @return {Promise} 本次 http 请求的 Promise
+ */
+function initConfig (method, url, userConfig) {
+    const defaultConfig = {
+        ...getCancelToken(),
+        // http 请求默认 id
+        requestId: method + '_' + url,
+        // 是否全局捕获异常
+        globalError: true,
+        // 是否直接复用缓存的请求
+        fromCache: false,
+        // 是否在请求发起前清楚缓存
+        clearCache: false,
+        // 响应结果是否返回原始数据
+        originalResponse: true,
+        // 当路由变更时取消请求
+        cancelWhenRouteChange: true,
+        // 取消上次请求
+        cancelPrevious: true
+    }
+    return Object.assign(defaultConfig, userConfig)
+}
+
+/**
+ * 生成 http 请求的 cancelToken，用于取消尚未完成的请求
+ *
+ * @return {Object} {cancelToken: axios 实例使用的 cancelToken, cancelExcutor: 取消http请求的可执行函数}
+ */
+function getCancelToken () {
+    let cancelExcutor
+    const cancelToken = new axios.CancelToken(excutor => {
+        cancelExcutor = excutor
+    })
+    return {
+        cancelToken,
+        cancelExcutor
+    }
+}
+
+export default http
diff --git a/paas-ce/lesscode/lib/client/src/common/bkmagic.js b/paas-ce/lesscode/lib/client/src/common/bkmagic.js
index 918fb3a7b..510bdab72 100644
--- a/paas-ce/lesscode/lib/client/src/common/bkmagic.js
+++ b/paas-ce/lesscode/lib/client/src/common/bkmagic.js
@@ -12,10 +12,10 @@
 import Vue from 'vue'
 
 // 全量引入
-// import './fully-import'
+import './fully-import'
 
 // 按需引入
-import './demand-import'
+// import './demand-import'
 
 const Message = Vue.prototype.$bkMessage
 
diff --git a/paas-ce/lesscode/lib/client/src/common/fully-import.js b/paas-ce/lesscode/lib/client/src/common/fully-import.js
index b57beeec2..493608998 100644
--- a/paas-ce/lesscode/lib/client/src/common/fully-import.js
+++ b/paas-ce/lesscode/lib/client/src/common/fully-import.js
@@ -11,4 +11,11 @@
 
 import Vue from 'vue'
 import bkMagicVue from 'bk-magic-vue'
+import bkText from '@/components/patch/text'
+import bkImage from '@/components/patch/image'
+import chart from '@/components/patch/chart'
+
+Vue.use(bkText)
+Vue.use(bkImage)
+Vue.use(chart)
 Vue.use(bkMagicVue)
diff --git a/paas-ce/lesscode/lib/client/src/common/util.js b/paas-ce/lesscode/lib/client/src/common/util.js
index cc1af3c9a..87954b53c 100644
--- a/paas-ce/lesscode/lib/client/src/common/util.js
+++ b/paas-ce/lesscode/lib/client/src/common/util.js
@@ -595,3 +595,22 @@ export function transformTipsWidth (tips, width = 290) {
 export function isEmpty (obj) {
     return obj === null || obj === '' || obj === undefined
 }
+
+export const getOffset = target => {
+    let totalLeft = null
+    let totalTop = null
+    let par = target.offsetParent
+    totalLeft += target.offsetLeft
+    totalTop += target.offsetTop
+    while (par) {
+        if (navigator.userAgent.indexOf('MSIE 8.0') === -1) {
+            // 不是IE8我们才进行累加父级参照物的边框
+            totalTop += par.clientTop
+            totalLeft += par.clientLeft
+        }
+        totalTop += par.offsetTop
+        totalLeft += par.offsetLeft
+        par = par.offsetParent
+    }
+    return { left: totalLeft, top: totalTop }
+}
diff --git a/paas-ce/lesscode/lib/client/src/components/header.vue b/paas-ce/lesscode/lib/client/src/components/header.vue
index 341c490bd..02d86a3d8 100644
--- a/paas-ce/lesscode/lib/client/src/components/header.vue
+++ b/paas-ce/lesscode/lib/client/src/components/header.vue
@@ -11,7 +11,7 @@
 
 <template>
     <header class="mg-header">
-        <a href="https://magicbox.bk.tencent.com/static_api/v3/main/index.html" class="mg-logo">
+        <a :href="`${host}/${path}/main/index.html`" class="mg-logo">
             <img class="logo" src="../images/svg/bk-logo.svg" data-src="../images/bk-logo.svg">
             <img class="logo-text" src="../images/svg/bk-text.svg" data-src="../images/bk-text.svg">
             <strong>MagicBox</strong>
@@ -25,19 +25,22 @@
                             <ol>
                                 <dt>PC端</dt>
                                 <dd>
-                                    <a href="https://magicbox.bk.tencent.com/static_api/v3/index.html">jQuery组件1.0</a>
+                                    <a :href="`${host}/${path}/index.html`" :data-active="`${host}/${path}/index.html#detail/show\\?id=\\S+?&isPro=0`">jQuery组件1.0</a>
                                 </dd>
                                 <dd>
-                                    <a href="https://magicbox.bk.tencent.com/static_api/v3/index.html#index?isPro=1">jQuery组件2.0</a>
+                                    <a :href="`${host}/${path}/index.html#index?isPro=1`" :data-active="`${host}/${path}/index.html#detail/show\\?id=\\S+?&isPro=1`">jQuery组件2.0</a>
                                 </dd>
                                 <dd>
-                                    <a href="https://magicbox.bk.tencent.com/static_api/v3/components_vue/2.0/example/index.html#/">Vue组件</a>
+                                    <a :href="`${host}/${path}/components_vue/2.0/example/index.html`" :data-active="`/components_vue/\\S+?/`">Vue组件</a>
                                 </dd>
                             </ol>
                             <ol>
                                 <dt>移动端</dt>
                                 <dd>
-                                    <a href="https://magicbox.bk.tencent.com/static_api/v3/index.html#mobile/show">jQuery组件</a>
+                                    <a :href="`${host}/${path}/index.html#mobile/show`" :data-active="`${host}/${path}/index.html#mobile_detail/show\\?id=\\S+?`">jQuery组件</a>
+                                </dd>
+                                <dd>
+                                    <a target="_blank" href="https://developers.weixin.qq.com/miniprogram/dev/component/">微信小程序官方组件</a>
                                 </dd>
                                 <dd>
                                     <a target="_blank" href="https://developers.weixin.qq.com/miniprogram/dev/component/">微信小程序官方组件</a>
@@ -45,13 +48,16 @@
                             </ol>
                         </div>
                     </li>
-                    <li class="nav-item">
+                    <li class="nav-item active">
                         <a href="javascript: void(0);">可视化开发</a>
                         <div class="mg-sub-nav">
                             <ol>
                                 <dt>PC端</dt>
                                 <dd>
-                                    <a href="https://magicbox.bk.tencent.com/static_api/v3/index.html#build/show">jQuery组件</a>
+                                    <a :href="`${host}/${path}/index.html#build/show`">jQuery组件</a>
+                                </dd>
+                                <dd>
+                                    <a class="active" target="_blank" href="https://github.com/Tencent/bk-PaaS/blob/lesscode-master/paas-ce/lesscode/README.md">Vue组件</a>
                                 </dd>
                                 <dd>
                                     <a target="_blank" href="https://github.com/Tencent/bk-PaaS/blob/lesscode-master/paas-ce/lesscode/README.md">Vue组件</a>
@@ -60,7 +66,7 @@
                             <ol>
                                 <dt>移动端</dt>
                                 <dd>
-                                    <a href="https://magicbox.bk.tencent.com/static_api/v3/index.html#mobile_build/show">jQuery组件</a>
+                                    <a :href="`${host}/${path}/index.html#mobile_build/show`">jQuery组件</a>
                                 </dd>
                                 <dd>
                                     <a href="https://magicbox.bk.tencent.com/static_api/v3/index.html#wx_build/show">微信小程序</a>
@@ -69,7 +75,7 @@
                         </div>
                     </li>
                     <li class="nav-item">
-                        <a href="https://magicbox.bk.tencent.com/static_api/v3/index.html#templates">套餐样例</a>
+                        <a :href="`${host}/${path}/index.html#templates`">套餐样例</a>
                     </li>
                     <li class="nav-item">
                         <a href="javascript: void(0);">帮助</a>
@@ -77,431 +83,290 @@
                             <ol>
                                 <dt>规范</dt>
                                 <dd>
-                                    <a href="https://magicbox.bk.tencent.com/static_api/v3/index.html#doc/show?id=html_structure">前端规范</a>
+                                    <a href="https://bk.tencent.com/docs/document/5.1/19/4125" target="_blank">前端规范</a>
                                 </dd>
                                 <dd>
-                                    <a href="https://magicbox.bk.tencent.com/static_api/v3/index.html#design">设计规范</a>
+                                    <a :href="`${host}/${path}/index.html#design`">设计规范</a>
                                 </dd>
                                 <dd>
-                                    <a href="https://magicbox.bk.tencent.com/static_api/v3/index.html#css">辅助样式</a>
+                                    <a :href="`${host}/${path}/index.html#css`">辅助样式</a>
                                 </dd>
                             </ol>
                             <ol>
                                 <dt>下载</dt>
                                 <dd>
-                                    <a href="https://magicbox.bk.tencent.com/static_api/v3/index.html#about/show">模板下载</a>
+                                    <a :href="`${host}/${path}/index.html#about/show`">模板下载</a>
                                 </dd>
                                 <dd>
-                                    <a href="https://magicbox.bk.tencent.com/static_api/v3/index.html#plugin">组件包下载</a>
+                                    <a :href="`${host}/${path}/index.html#plugin`">组件包下载</a>
                                 </dd>
                             </ol>
                         </div>
                     </li>
                     <li class="nav-item">
-                        <a href="https://magicbox.bk.tencent.com/static_api/v3/index.html#start">新手起步</a>
+                        <a :href="`${host}/${path}/index.html#start`">新手起步</a>
+                    </li>
+                    <li>
+                        <a href="https://bk.tencent.com/s-mart/community" target="_blank">论坛交流</a>
                     </li>
                 </ul>
             </nav>
-        </div>
 
-        <div class="magic-button">
-            <a href="javascript:;" class="magic-top" id="mg-top" @click="handleGoTop" style="opacity: 0;">
-                <img src="../images/back_top.png" data-src="../images/back_top.png">
-            </a>
+            <template v-if="userName">
+                <div class="mg-user" id="mg-user">
+                    <strong class="name" id="mg-name">{{userName}}</strong>
+                </div>
+                <a href="javascript: void(0);" class="mg-login" @click="goLogin">退出</a>
+            </template>
+            <template v-else>
+                <a href="javascript: void(0);" class="mg-login" @click="goLogin">登录</a>
+            </template>
         </div>
     </header>
 </template>
 
 <script>
+    import { mapGetters } from 'vuex'
+
     export default {
         name: 'app-header',
         data () {
             return {
-                isTop: true,
-                timer: 0
+                userName: '',
+                host: 'https://magicbox.bk.tencent.com',
+                path: 'static_api/v3'
             }
         },
         computed: {
+            ...mapGetters(['user'])
         },
         mounted () {
-            this.init()
+            this.userName = this.user.username
         },
         methods: {
-            // 初始化底部工具（反馈、回到头部）
-            initFootTools () {
-                const topBtn = document.getElementById('mg-top')
-                this.isTop = true
-                // 滚动条滚动时触发
-                window.onscroll = function () {
-                    // 在滚动的时候增加判断,忘了的话很容易出错
-                    const osTop = document.documentElement.scrollTop || document.body.scrollTop
-                    if (osTop >= 200) {
-                        topBtn.style.opacity = '1'
-                    } else {
-                        topBtn.style.opacity = '0'
-                    }
-                    if (!this.isTop) {
-                        clearInterval(this.timer)
-                    }
-                    this.isTop = false
-                }
-            },
-
-            handleGoTop () {
-                this.isTop = false
-                clearInterval(this.timer)
-                this.timer = setInterval(() => {
-                    const osTop = document.documentElement.scrollTop || document.body.scrollTop
-                    // 减小的速度
-                    const isSpeed = Math.floor(-osTop / 6)
-                    document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed
-                    // 判断，然后清除定时器
-                    if (osTop < 200) {
-                        console.log('clear')
-                        clearInterval(this.timer)
-                    }
-                    this.isTop = true
-                }, 30)
-            },
-
-            // 初始化
-            init () {
-                this.initFootTools()
+            goLogin () {
+                window.location.href = this.user.loginRedirectUrl + '&c_url=' + encodeURIComponent(window.location.href)
             }
         }
     }
 </script>
 
-<style lang="postcss" scoped>
-    $navColor: #FFF;
-    $f16: 16px;
-    $f14: 14px;
-    $f13: 13px;
-    $f12: 12px;
-
-    html,
-    body,
-    div,
-    p,
-    ul,
-    li,
-    h1,
-    h2,
-    h3 {
-        padding: 0;
-        margin: 0;
+<style scoped>
+    html,body,div,p,ul,li,h1,h2,h3 {
+        padding:0;
+        margin:0;
     }
-
     strong {
-        font-weight: normal;
+        font-weight:normal;
     }
-
     a {
-        text-decoration: none;
+        text-decoration:none;
     }
-
     img {
-        vertical-align: middle;
+        vertical-align:middle;
     }
     * {
-        box-sizing: border-box;
-        outline: none;
+        box-sizing:border-box;
+        outline:none;
     }
-
     .fl {
-        float: left;
+        float:left;
     }
-
     .fr {
-        float: right;
+        float:right;
     }
-
     .f16 {
-        font-size: $f16;
+        font-size:16px;
     }
-
     .f14 {
-        font-size: $f14;
+        font-size:14px;
     }
-
     .f13 {
-        font-size: $f13;
+        font-size:13px;
     }
-
     .f12 {
-        font-size: $f12;
+        font-size:12px;
     }
-
     .hide {
-        display: none;
+        display:none;
     }
-
     .show {
-        display: block;
+        display:block;
     }
-
     .mg-header {
-        width: 100%;
-        min-width: 1280px;
-        height: 64px;
-        background: #14182F;
-        color: #FFF;
-        padding: 0 32px;
-        z-index: 1000;
-        position: fixed;
-        top: 0;
-
-        .mg-header-right {
-            float: right;
-        }
+        width:100%;
+        min-width:1280px;
+        height:64px;
+        background:#14182F;
+        color:#FFF;
+        padding:0 32px;
+        z-index:1000;
+        position:fixed;
+        top:0;
+    }
+    .mg-header .mg-header-right {
+        float:right;
     }
-
     .mg-logo {
-        float: left;
-        height: 64px;
-        color: #FFF;
-        font-size: 18px;
-        padding-top: 10px;
-
-        .logo {
-            vertical-align: middle;
-            height: 44px;
-            margin-right: 2px;
-        }
-
-        .logo-text {
-            vertical-align: middle;
-            height: 32px;
-            margin-right: 15px;
-        }
-
-        strong {
-            vertical-align: middle;
-            line-height: 31px;
-            border-left: 1px solid rgba(255, 255, 255, .3);
-            padding-left: 15px;
-            color: #FFF;
-        }
-
+        float:left;
+        height:64px;
+        color:#FFF;
+        font-size:18px;
+        padding-top:10px;
+    }
+    .mg-logo .logo {
+        vertical-align:middle;
+        height:44px;
+        margin-right:2px;
+    }
+    .mg-logo .logo-text {
+        vertical-align:middle;
+        height:32px;
+        margin-right:15px;
+    }
+    .mg-logo strong {
+        vertical-align:middle;
+        line-height:31px;
+        border-left:1px solid rgba(255,255,255,0.3);
+        padding-left:15px;
+        color:#FFF;
     }
-
     .mg-nav {
-        float: left;
-        margin: 20px 0 0 0;
-        border-right: 1px solid #373839;
-
-        > ul {
-            list-style: none;
-            float: right;
-
-            &::after {
-                content: '';
-                display: inline-block;
-                clear: both;
-            }
-
-            li {
-                float: left;
-                padding: 0 24px;
-                position: relative;
-
-                &:hover {
-                    .mg-sub-nav {
-                        display: flex;
-                    }
-
-                    > a {
-                        color: #4F94FE;
-                    }
-                }
-            }
-
-            a {
-                color: $navColor;
-                line-height: 14px;
-                text-decoration: none;
-                font-size: 14px;
-                transition: color ease 0.3s;
-
-                &:hover {
-                    color: #4F94FE;
-                }
-            }
-        }
-
-        .mg-sub-nav {
-            width: 310px;
-            background: #14182F;
-            position: absolute;
-            padding: 25px;
-            justify-content: space-between;
-            display: none;
-            left: 50%;
-            transform: translateX(-50%);
-            border-radius: 4px;
-            opacity: 0;
-            animation: fadeIn forwards ease 0.5s;
-            color: #C4C6CC;
-
-            > ol {
-                min-width: 110px;
-                float: left;
-                padding: 0;
-                margin: 15px 0 0;
-
-                dt {
-                    font-size: 14px;
-                    padding-bottom: 10px;
-                    border-bottom: 1px solid rgba(255, 255, 255, .3);
-                    margin-bottom: 8px;
-                }
-
-                dd {
-                    color: #FFF;
-                    font-size: $f12;
-                    line-height: 30px;
-                    padding: 0;
-                    margin: 0;
-                    text-align: left;
-
-                    > a {
-                        line-height: 30px;
-                    }
-                }
-            }
-        }
+        float:left;
+        margin:23px 0 0 0;
+        border-right:1px solid #373839;
+    }
+    .mg-nav > ul {
+        list-style:none;
+        float:right;
+    }
+    .mg-nav > ul::after {
+        content:'';
+        display:inline-block;
+        clear:both;
+    }
+    .mg-nav > ul li {
+        float:left;
+        padding:0 24px;
+        position:relative;
+    }
+    .mg-nav > ul li:hover .mg-sub-nav {
+        display:flex;
+    }
+    .mg-nav > ul li:hover > a {
+        color:#4F94FE;
+    }
+    .mg-nav > ul li.active > a {
+        color:#4F94FE;
+    }
+    .mg-nav > ul li.active::after {
+        content:'';
+        position:absolute;
+        left:0;
+        top:37px;
+        width:calc(100% - 44px);
+        height:4px;
+        margin-left:22px;
+        background:#4F94FE;
+    }
+    .mg-nav > ul li.active:hover::after {
+        display:none;
+    }
+    .mg-nav > ul a {
+        color:#FFF;
+        line-height:14px;
+        text-decoration:none;
+        font-size:14px;
+        transition:color ease 0.3s;
+    }
+    .mg-nav > ul a:hover,.mg-nav > ul a.active {
+        color:#4F94FE;
+    }
+    .mg-nav .mg-sub-nav {
+        width:310px;
+        background:#14182F;
+        position:absolute;
+        padding:25px;
+        justify-content:space-between;
+        display:none;
+        left:50%;
+        transform:translateX(-50%);
+        border-radius:4px;
+        opacity:0;
+        animation:fadeIn forwards ease 0.5s;
+        color:#C4C6CC;
+    }
+    .mg-nav .mg-sub-nav > ol {
+        min-width:110px;
+        float:left;
+        padding:0;
+        margin:15px 0 0;
+    }
+    .mg-nav .mg-sub-nav > ol dt {
+        font-size:14px;
+        padding-bottom:10px;
+        border-bottom:1px solid rgba(255,255,255,0.3);
+        margin-bottom:8px;
+    }
+    .mg-nav .mg-sub-nav > ol dd {
+        color:#FFF;
+        font-size:12px;
+        line-height:30px;
+        padding:0;
+        margin:0;
+        text-align:left;
+    }
+    .mg-nav .mg-sub-nav > ol dd > a {
+        line-height:30px;
+    }
+    .mg-nav .mg-sub-nav > ol dd > span {
+        font-size:14px;
+        color:#ccc;
+    }
+    .mg-nav .mg-sub-nav.more {
+        width:auto;
+        padding:18px;
+    }
+    .mg-nav .mg-sub-nav.more > ol {
+        min-width:86px;
     }
-
     .mg-user {
-        min-width: 100px;
-        float: left;
-        margin: 19px 0 0 0;
-        padding-left: 24px;
-        font-size: 14px;
-        color: $navColor;
-
-        .avatar {
-            width: 28px;
-            height: 28px;
-            border-radius: 50%;
-            vertical-align: middle;
-            margin-right: 5px;
-        }
+        min-width:100px;
+        float:left;
+        margin:23px 0 0 0;
+        padding-left:24px;
+        font-size:14px;
+        color:#FFF;
     }
-
     .mg-login {
-        float: left;
-        line-height: 28px;
-        margin: 19px 0 0 24px;
-        font-size: 14px;
-        color: $navColor;
-
-        &:hover {
-            color: #FFF;
-        }
+        float:left;
+        line-height:28px;
+        margin:18px 0 0 24px;
+        font-size:14px;
+        color:#FFF;
     }
-
-    .magic-button{
-        position: fixed;
-        right: 10px;
-        bottom: 50px;
-        a {
-            display: block;
-            width: 30px;
-            height: 30px;
-            line-height: 26px;
-            text-align: center;
-            background: #9a9a9a;
-            border-radius: 2px;
-            opacity: 0.7;
-            &:hover{
-                background: #454545;
-            }
-
-            > img {
-                width: 16px;
-            }
-        }
-        .magic-feedback{
-            margin-top: 5px;
-        }
+    .mg-login:hover {
+        color:#FFF;
     }
-
-    @media screen and (max-width: 1980px) {
+    @media screen and (max-width:1980px) {
         body {
-            background-size: 55% auto;
+            background-size:55% auto;
         }
     }
-
-    @media screen and (max-width: 1680px) {
+    @media screen and (max-width:1680px) {
         .my-components {
-            margin-bottom: 50px;
+            margin-bottom:50px;
         }
-
     }
-
-    @media screen and (max-width: 1280px) {
-        .mg-user,
-        .mg-login,
-        .mg-nav > ul a,
-        .mg-nav .mg-sub-nav > ol dt {
-            font-size: $f12;
+    @media screen and (max-width:1280px) {
+        .mg-user,.mg-login,.mg-nav > ul a,.mg-nav .mg-sub-nav > ol dt {
+            font-size:12px;
         }
-
-        .mg-nav > ul a {
-            font-size: $f12;
+        .mg-nav > ul a,.mg-nav .mg-sub-nav > ol dd > span {
+            font-size:12px;
         }
-
         .mg-nav .mg-sub-nav {
-            padding: 15px 25px;
-        }
-    }
-
-    @keyframes expand {
-        from {
-            width: 10%;
-        }
-
-        to {
-            width: 100%;
-        }
-    }
-
-    @keyframes fadeIn {
-        from {
-            opacity: 0;
-        }
-
-        to {
-            opacity: 1;
-        }
-    }
-
-    @keyframes fadeInDown {
-        0% {
-            top: -20px;
-            opacity: 0;
-        }
-
-        100% {
-            top: 5px;
-            opacity: 1;
-        }
-    }
-
-    @keyframes fadeOutDown {
-        0% {
-            top: 10px;
-            opacity: 1;
-        }
-
-        5% {
-            opacity: 0.2;
-        }
-
-        100% {
-            top: 100px;
-            opacity: 0;
+            padding:15px 25px;
         }
     }
 </style>
diff --git a/paas-ce/lesscode/lib/client/src/components/methods/funcForm.vue b/paas-ce/lesscode/lib/client/src/components/methods/funcForm.vue
new file mode 100644
index 000000000..9c1358eb4
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/components/methods/funcForm.vue
@@ -0,0 +1,291 @@
+<template>
+    <section :class="size" class="add-function">
+        <bk-form :label-width="84" :model="form" slot="content" class="add-main-form" ref="funcForm" :form-type="formType">
+            <bk-form-item label="函数名称" :required="true" :rules="[requireRule('函数名称'), nameRepeatRule, groupNameRule]" :key="`${form.id}funcName`" property="funcName" error-display-type="normal">
+                <bk-input v-model="form.funcName"></bk-input>
+            </bk-form-item>
+            <bk-form-item label="所属分类" :required="true" :rules="[requireRule('所属分类')]" key="funcGroupId" property="funcGroupId" error-display-type="normal">
+                <bk-select v-model="form.funcGroupId" :popover-options="{ appendTo: 'parent' }">
+                    <bk-option v-for="option in funcGroups"
+                        :key="option.id"
+                        :id="option.id"
+                        :name="option.groupName">
+                    </bk-option>
+                </bk-select>
+            </bk-form-item>
+            <bk-form-item label="模板" :key="`${form.id}funcType`" property="funcType">
+                <span v-for="temp in tempList"
+                    :key="temp.id"
+                    @click="form.funcType = temp.id"
+                    :class="['func-temp', { select: form.funcType === temp.id }]"
+                >{{ temp.name }}</span>
+            </bk-form-item>
+            <bk-form-item label="参数" :key="`${form.id}funcParams`" property="funcParams" :rules="[nameRule]" error-display-type="normal" desc="调用该函数参入的参数列表，输入后按回车添加参数">
+                <bk-tag-input v-model="form.funcParams"
+                    placeholder="请输入参数名称，由大小写英文字母、下划线、数字组成"
+                    :list="[]"
+                    :allow-create="true"
+                    :has-delete-icon="true">
+                </bk-tag-input>
+            </bk-form-item>
+            <template v-if="form.funcType === 1">
+                <bk-form-item label="远程参数" :key="`${form.id}funcCallBackParams`" property="remoteParams" :rules="[nameRule]" error-display-type="normal" desc="接口回调函数的参数列表，输入后按回车添加参数">
+                    <bk-tag-input v-model="form.remoteParams"
+                        placeholder="请输入参数名称，由大小写英文字母、下划线、数字组成"
+                        :list="[]"
+                        :allow-create="true"
+                        :has-delete-icon="true">
+                    </bk-tag-input>
+                </bk-form-item>
+                <bk-form-item label="Api Url" :required="true" :rules="[requireRule('Api Url')]" :key="`${form.id}funcApiUrl`" property="funcApiUrl" error-display-type="normal">
+                    <bk-input v-model="form.funcApiUrl" :placeholder="`请输入接口 URL，例如：${locationOrigin}/api/data/getMockData`"></bk-input>
+                </bk-form-item>
+                <bk-form-item label="Method" :required="true" :rules="[requireRule('Method')]" :key="`${form.id}funcMethod`" property="funcMethod" error-display-type="normal">
+                    <bk-select v-model="form.funcMethod" :clearable="false" :popover-options="{ appendTo: 'parent' }">
+                        <bk-option v-for="option in methodList"
+                            :key="option.id"
+                            :id="option.id"
+                            :name="option.name">
+                        </bk-option>
+                    </bk-select>
+                </bk-form-item>
+                <bk-form-item label="Api Data" :key="`${form.id}funcApiData`" property="funcApiData" desc="HTTP 请求（例如 POST）的请求体数据包。如果是GET请求，请在 Api Url 中填写请求头参数">
+                    <bk-input v-model="form.funcApiData" type="textarea" :rows="3" :maxlength="100" placeholder="请输入请求体数据包，例如：{ name: 'jack', age: 17 }"></bk-input>
+                </bk-form-item>
+            </template>
+            <bk-form-item label="函数简介" property="funcSummary" :key="`${form.id}funcSummary`">
+                <bk-input v-model="form.funcSummary" type="textarea" :rows="3" :maxlength="100"></bk-input>
+            </bk-form-item>
+        </bk-form>
+        <monaco :value.sync="form.funcBody" :height="monacoHeight" :width="monacoWidth" :full-screen="size !== 'small'" class="monaco" ref="monaco"></monaco>
+    </section>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+    import monaco from './monaco'
+
+    export default {
+        components: {
+            monaco
+        },
+
+        props: {
+            funcData: {
+                type: Object,
+                default: {}
+            },
+
+            size: {
+                type: String,
+                default: 'normal'
+            }
+        },
+
+        data () {
+            return {
+                form: {
+                    funcName: '',
+                    funcGroupId: undefined,
+                    funcType: 0,
+                    funcParams: [],
+                    remoteParams: [],
+                    funcApiUrl: '',
+                    funcMethod: 'get',
+                    funcApiData: '',
+                    funcSummary: '',
+                    funcBody: '',
+                    id: undefined
+                },
+                locationOrigin: location.origin,
+                startInit: false,
+                formChanged: false,
+                formType: 'horizontal',
+                monacoHeight: '100%',
+                monacoWidth: '100%',
+                groupNameRule: {
+                    validator: val => /^[A-Za-z_0-9]*$/.test(val),
+                    message: '由大小写英文字母、下划线、数字组成',
+                    trigger: 'blur'
+                },
+                nameRule: {
+                    validator: (val) => (val.every(x => /[A-Za-z_0-9]*/.test(x))),
+                    message: '由大小写英文字母、下划线、数字组成',
+                    trigger: 'blur'
+                },
+                tempList: [
+                    { id: 0, name: '空白函数' },
+                    { id: 1, name: '远程函数' }
+                ],
+                methodList: [
+                    { name: 'GET', id: 'get' },
+                    { name: 'POST', id: 'post' },
+                    { name: 'PUT', id: 'put' },
+                    { name: 'DELETE', id: 'delete' },
+                    { name: 'HEAD', id: 'head' },
+                    { name: 'OPTIONS', id: 'options' },
+                    { name: 'TRACE', id: 'trace' },
+                    { name: 'CONNECT', id: 'connect' },
+                    { name: 'PATCH', id: 'patch' }
+                ],
+                nameRepeatRule: {
+                    validator: (val) => {
+                        return !this.funcGroups.some((group) => {
+                            const functionList = group.functionList || []
+                            return functionList.some((func) => (func.funcName === val && func.id !== this.form.id))
+                        })
+                    },
+                    message: `函数名称在当前项目下重复，请修改后重试`,
+                    trigger: 'blur'
+                }
+            }
+        },
+
+        computed: {
+            ...mapGetters('functions', ['funcGroups'])
+        },
+
+        watch: {
+            funcData: {
+                handler () {
+                    const newFormData = JSON.parse(JSON.stringify(this.funcData), (a, b) => {
+                        if (b !== undefined && b !== null) return b
+                    })
+                    const defaultForm = {
+                        funcName: '',
+                        funcGroupId: undefined,
+                        funcType: 0,
+                        funcParams: [],
+                        funcApiUrl: '',
+                        funcMethod: 'get',
+                        funcApiData: '',
+                        funcSummary: '',
+                        funcBody: '',
+                        id: undefined
+                    }
+                    Object.assign(this.form, defaultForm, newFormData)
+                    this.startInit = true
+                    this.formChanged = false
+                },
+                immediate: true
+            },
+
+            form: {
+                handler (val) {
+                    if (this.startInit) {
+                        this.startInit = false
+                        return
+                    }
+                    this.$emit('formChange', val)
+                    this.formChanged = true
+                },
+                deep: true,
+                immediate: true
+            },
+
+            size: {
+                handler (val) {
+                    if (val === 'small') {
+                        this.formType = 'vertical'
+                        this.monacoHeight = '100%'
+                    } else {
+                        this.formType = 'horizontal'
+                        this.monacoHeight = '488'
+                    }
+                },
+                immediate: true
+            }
+        },
+
+        methods: {
+            requireRule (name) {
+                return {
+                    required: true,
+                    message: `${name}是必填项，请修改后重试`,
+                    trigger: 'blur'
+                }
+            },
+
+            validate () {
+                return new Promise((resolve, reject) => {
+                    this.$refs.funcForm.validate().then(() => {
+                        this.formChanged = false
+                        resolve(this.form)
+                    }, (validator) => {
+                        resolve()
+                        this.$bkMessage({ message: validator.content || validator, theme: 'error' })
+                    })
+                })
+            },
+
+            resize (width) {
+                const parent = document.querySelector('.method-layout')
+                const parentWidth = parent.offsetWidth
+                this.monacoWidth = 333 / 1033 * (parentWidth - width)
+                this.$nextTick(this.$refs.monaco.resize)
+            }
+        }
+    }
+</script>
+
+<style lang="postcss" scoped>
+    .add-function {
+        padding: 20px 30px;
+        .func-temp {
+            display: inline-block;
+            width: 140px;
+            max-width: calc(50% - 5px);
+            height: 30px;
+            line-height: 30px;
+            text-align: center;
+            background: #ffffff;
+            border: 1px solid #c4c6cc;
+            border-radius: 2px 0px 0px 2px;
+            color: #63656e;
+            box-sizing: content-box;
+            cursor: pointer;
+            &:first-child {
+                border-right: none;
+            }
+            &:last-child {
+                border-left: none;
+            }
+            &.select {
+                background: #e1ecff;
+                border: 1px solid #3a84ff;
+                color: #3a84ff;
+            }
+        }
+        .monaco {
+            margin-top: 20px;
+        }
+    }
+
+    .small {
+        display: flex;
+        flex-direction: row;
+        padding: 0;
+        .add-main-form{
+            flex: 333;
+            max-height: 100%;
+            min-width: 180px;
+            overflow-y: auto;
+            margin: 7px 0;
+            padding: 0 20px;
+            &::-webkit-scrollbar {
+                width: 6px;
+                height: 5px;
+            }
+            &::-webkit-scrollbar-thumb {
+                border-radius: 20px;
+                background-color: #dcdee5;
+                -webkit-box-shadow: inset 0 0 6px hsla(0, 0%, 80%, .3);
+            }
+        }
+        .monaco {
+            margin: 0;
+            flex: 700;
+            height: 100%;
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/components/methods/index.vue b/paas-ce/lesscode/lib/client/src/components/methods/index.vue
index 4d3475897..9fc1baae8 100644
--- a/paas-ce/lesscode/lib/client/src/components/methods/index.vue
+++ b/paas-ce/lesscode/lib/client/src/components/methods/index.vue
@@ -1,395 +1,473 @@
-<!--
-  Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
-  Copyright (C) 2017-2019 THL A29 Limited, a Tencent company. All rights reserved.
-  Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
-  http://opensource.org/licenses/MIT
-  Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
-  an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
-  specific language governing permissions and limitations under the License.
--->
-
 <template>
-    <bk-dialog :value="isShow"
-        class="method-main"
-        :confirm-fn="saveMethods"
-        @cancel="cancelMethod"
-        render-directive="if"
-        ok-text="保存"
-        :transfer="true"
-        :draggable="true"
-        :mask-close="false"
-        width="900"
-        title="函数管理">
-        <main class="method-main">
-            <bk-collapse v-model="activeName" class="method-list">
-                <h3 class="list-name">函数库</h3>
-                <bk-collapse-item @contextmenu.prevent="" :name="funGroup.name" v-for="(funGroup, index) in currentFunctionGroup" :key="funGroup.name">
-                    <div @mousedown="showAddMethod(funGroup)" class="method-fold">
-                        <span :title="funGroup.name">{{ funGroup.name }}</span>
-                        <bk-icon type="plus" @mousedown.stop="addMethod($event, index)" />
-                    </div>
-                    <div slot="content">
-                        <ul @contextmenu.prevent="" class="group-children" v-if="funGroup.children && funGroup.children.length">
-                            <li v-for="fun in funGroup.children"
-                                :key="fun.name"
-                                :title="fun.name"
-                                :class="[{ 'active': selectMethod.id === fun.id }, 'group-item']"
-                                @click="chooseMethod(fun)"
-                                @mousedown="showAddMethod(funGroup, fun)"
-                            >
-                                {{ fun.name }}
-                            </li>
-                        </ul>
-                        <span v-else class="group-item method-empty">暂无函数</span>
+    <transition name="fade">
+        <article class="function-home" v-if="show" @mousedown.self="closeFunction">
+            <layout class="function-main method-layout" @resize="resizeLayOut" :init-width="initWidth <= 240 ? 240 : initWidth" ref="methodMain">
+                <section slot="left" class="func-left">
+                    <h3 class="left-title">
+                        <span>函数库</span>
+                        <bk-popconfirm trigger="click" confirm-text="" cancel-text="" :on-hide="() => (groupNameErrMessage = '')">
+                            <div slot="content">
+                                <bk-input :class="['add-function-group', { 'input-error': groupNameErrMessage }]"
+                                    placeholder="请输入函数分类，多个分类 / 分隔，回车保存"
+                                    @enter="addFunctionGroup"
+                                    @focus="groupNameErrMessage = ''"
+                                    @input="groupNameErrMessage = ''"
+                                    v-model="groupNameStr"
+                                    right-icon="loading"
+                                    v-bkloading="{ isLoading: isAddLoading }"
+                                ></bk-input>
+                                <p class="input-err-message" v-if="groupNameErrMessage">{{ groupNameErrMessage }}</p>
+                            </div>
+                            <i class="bk-icon icon-plus" @click="groupNameStr = ''" v-bk-tooltips="{ content: '添加分类', placements: ['top'] }"></i>
+                        </bk-popconfirm>
+                    </h3>
+
+                    <bk-input class="left-input" placeholder="函数名称" :clearable="true" right-icon="bk-icon icon-search" v-model="searchFunctionStr"></bk-input>
+
+                    <vue-draggable v-model="groupList"
+                        :sort="true"
+                        :group="{ name: 'group-list' }"
+                        tag="ul"
+                        class="scroll-main group-list"
+                    >
+                        <li v-for="group in groupList" :key="group.id">
+                            <bk-input v-if="changeGroupIds.includes(group.id)"
+                                v-model="tempName"
+                                @enter="handleChangeGroupName(group)"
+                                @blur="handleChangeBlur(group.id)"
+                                v-bkloading="{ isLoading: isAddLoading }"
+                                size="small"
+                                :ref="group.id"
+                                class="change-group-name"
+                            ></bk-input>
+                            <h3 :class="[{ select: selectGroup === group.id }, 'group-item']" @click.self="expandGroup(group)" v-else>
+                                <i class="bk-drag-icon bk-drag-grag-fill hover-show" @click.self="expandGroup(group)"></i>
+                                <i class="bk-drag-icon bk-drag-angle-up-fill fold-icon" v-if="openGroupIds.includes(group.id)" @click.self="expandGroup(group)"></i>
+                                <i class="bk-drag-icon bk-drag-angle-right-fill fold-icon" v-else @click.self="expandGroup(group)"></i>
+                                <i class="bk-drag-icon bk-drag-folder-fill" @click.self="expandGroup(group)"></i>
+                                <span class="item-name" @click.self="expandGroup(group)" :title="group.groupName">{{ group.groupName }}</span>
+                                <bk-popconfirm trigger="click" ext-cls="label-pop" confirm-text="" cancel-text="" class="mr7" placement="bottom-start" :on-hide="() => (selectGroup = '')">
+                                    <div slot="content">
+                                        <ul class="more-list">
+                                            <li class="list-item" @click="changeGroupName(group)">重命名</li>
+                                            <li class="disable list-item" v-if="group.functionList.length" v-bk-tooltips="{ content: '该分类下有函数，不能删除', placements: ['bottom'] }">删除</li>
+                                            <li class="list-item" @click.stop="deleteItem(group.id, `删除分类（${group.groupName}）`, true)" v-else>删除</li>
+                                        </ul>
+                                    </div>
+                                    <i class="bk-drag-icon bk-drag-more-dot item-tool hover-show" @click="selectGroup = group.id"></i>
+                                </bk-popconfirm>
+                                <i class="bk-drag-icon bk-drag-add-line item-tool hover-show" @click.stop="handleAddFunc(group)" v-bk-tooltips="{ content: '添加函数', placements: ['top'] }"></i>
+                                <span class="item-num" @click.self="expandGroup(group)">{{ (group.functionList || []).length }}</span>
+                            </h3>
+                            <ul v-if="openGroupIds.includes(group.id)">
+                                <li v-for="func in group.functionList" :key="func.id" :class="['func-item', { select: func.id === chooseId }]" @click="chooseFunction(func)">
+                                    <span class="func-name" :title="func.funcName">{{ func.funcName }}</span>
+                                    <i class="bk-drag-icon bk-drag-close-line item-tool hover-show"
+                                        @click.stop="deleteItem(func.id, `删除函数【${func.funcName}】`, false)"
+                                        v-if="(func.pages || []).length <= 0"
+                                    ></i>
+                                    <i class="bk-drag-icon bk-drag-close-line hover-show disable" v-else @click.stop v-bk-tooltips="{ content: '该函数被页面引用，请修改后再删除', placements: ['top'] }"></i>
+                                </li>
+                            </ul>
+                        </li>
+                    </vue-draggable>
+                </section>
+
+                <main class="func-main">
+                    <func-form class="func-form" size="small" :func-data="curFunc" ref="func" @formChange="formChanged = true"></func-form>
+
+                    <footer class="main-footer">
+                        <bk-button theme="primary" @click="saveFunc" :loading="isSaving" :disabled="!formChanged">保存</bk-button>
+                    </footer>
+                </main>
+
+                <bk-dialog v-model="delObj.show"
+                    render-directive="if"
+                    theme="primary"
+                    ext-cls="delete-dialog-wrapper"
+                    title="确定删除？"
+                    width="400"
+                    footer-position="center"
+                    :mask-close="false"
+                    :auto-close="false"
+                >
+                    <p class="delete-content">{{ delObj.name }}</p>
+                    <div class="dialog-footer" slot="footer">
+                        <bk-button
+                            theme="danger"
+                            :loading="delObj.loading"
+                            @click="requestDelete">删除</bk-button>
+                        <bk-button @click="delObj.show = false" :disabled="delObj.loading">取消</bk-button>
                     </div>
-                </bk-collapse-item>
-                <bk-icon @click="addGroup" class="add-fold" type="folder-plus" />
-            </bk-collapse>
-
-            <section class="method-item">
-                <ul class="method-head" ref="method-head">
-                    <li class="head-item" v-if="selectMethod.id">
-                        <span class="head-title">函数名:</span>
-                        <span class="head-item-name" v-if="selectMethod.funName">{{ selectMethod.funName }}</span>
-                        <span class="head-item-click" @click="changeFunName">修改</span>
-                    </li>
-                    <li class="head-item" v-if="selectMethod.id">
-                        <span class="head-title">参数:</span>
-                        <span class="head-item-param" v-for="param in selectMethod.funParam" :key="param">
-                            {{ param }}<bk-icon type="close" @click="deleteFunParam(param)" />
-                        </span>
-                        <span class="head-item-click" @click="addFunParam">新增</span>
-                    </li>
-                </ul>
-                <section ref="monaco" class="method-body" :style="`height: ${height}`"></section>
-            </section>
-
-            <ul class="method-menu" @contextmenu.prevent="" v-bk-clickoutside="closeAddMethods" v-if="isShowAddMethods" :style="`left: ${addLeft}px; top: ${addTop}px`">
-                <li class="add-item" @click="addGroup" v-if="!currentMethod.child">添加文件夹</li>
-                <li class="add-item" @click="addMethod" v-if="!currentMethod.child">添加函数</li>
-                <li class="add-item" @click="deleteMethod">删除</li>
-            </ul>
-
-            <bk-dialog v-model="isShowName" :title="dialogTitle" header-position="left" :confirm-fn="confirmAddMethod" @cancel="methodName = ''">
-                <bk-input v-model="methodName" :placeholder="dialogPlaceHolder"></bk-input>
-            </bk-dialog>
-        </main>
-    </bk-dialog>
+                </bk-dialog>
+
+                <section class="icon-style">
+                    <span v-if="!isFull">
+                        <i class="bk-drag-icon bk-drag-code-full-screen" @click="openFullScreen"></i>
+                        <i class="bk-drag-icon bk-drag-close-line" @click="closeFunction"></i>
+                    </span>
+                    <span v-else @click="exitFullScreen" class="un-full-screen" style="right: 20px;">
+                        <i class="bk-drag-icon bk-drag-un-full-screen"></i>
+                        <span>退出全屏</span>
+                    </span>
+                </section>
+            </layout>
+        </article>
+    </transition>
 </template>
 
 <script>
-    import { mapGetters, mapMutations } from 'vuex'
-    import { uuid } from '@/common/util.js'
-    // import * as monaco from 'monaco-editor'
-    import { bkIcon } from 'bk-magic-vue'
+    import { mapActions, mapGetters } from 'vuex'
+    import layout from '@/components/ui/layout'
+    import funcForm from '@/components/methods/funcForm'
 
     export default {
         components: {
-            bkIcon
+            layout,
+            funcForm
         },
 
         props: {
-            isShow: {
-                type: Boolean
-            }
+            show: Boolean
         },
 
         data () {
             return {
-                activeName: '',
-                monacoInstance: {},
-                isShowAddMethods: false,
-                addLeft: 0,
-                addTop: 0,
-                isShowName: false,
-                currentFunctionGroup: {},
-                currentMethod: {},
-                methodName: '',
-                dialogTitle: '',
-                dialogPlaceHolder: '',
-                selectMethod: {},
-                height: '100%'
+                initWidth: document.documentElement.offsetWidth * 260 / 1920,
+                groupNameErrMessage: '',
+                groupNameStr: '',
+                searchFunctionStr: '',
+                chooseId: '',
+                selectGroup: '',
+                isAddLoading: false,
+                isLoadingGroup: false,
+                isSaving: false,
+                tempName: '',
+                isFull: false,
+                formChanged: false,
+                loadingGroupIds: [],
+                openGroupIds: [],
+                changeGroupIds: [],
+                delObj: {
+                    id: '',
+                    isDeleteGroup: false,
+                    loading: false,
+                    show: false,
+                    name: ''
+                }
             }
         },
 
         computed: {
-            ...mapGetters('drag', ['functionGroup'])
+            ...mapGetters('functions', ['funcGroups']),
+
+            groupList: {
+                get () {
+                    const funcReg = new RegExp(this.searchFunctionStr, 'i')
+                    const groupCopy = JSON.parse(JSON.stringify(this.funcGroups))
+                    groupCopy.forEach((group) => (group.functionList = group.functionList.filter(x => funcReg.test(x.funcName))))
+                    return groupCopy
+                },
+                set (list) {
+                    let order = 0
+                    list.forEach((group) => {
+                        group.order = order
+                        order++
+                    })
+                    this.editGroups(list)
+                }
+            },
+
+            curGroup () {
+                return this.funcGroups.find((group) => {
+                    return (group.functionList || []).findIndex((func) => (func.id === this.chooseId)) > -1
+                }) || {}
+            },
+
+            curFunc () {
+                return (this.curGroup.functionList || []).find(x => x.id === this.chooseId) || {}
+            }
         },
 
         watch: {
-            isShow (val) {
-                if (!val) return
-
-                this.currentFunctionGroup = JSON.parse(JSON.stringify(this.functionGroup))
-                setTimeout(() => {
-                    this.monacoInstance = monaco.editor.create(this.$refs.monaco, {
-                        value: '',
-                        language: 'javascript',
-                        fontSize: 14,
-                        fontFamily: 'Consolas',
-                        cursorBlinking: 'solid',
-                        theme: 'vs-dark',
-                        automaticLayout: true
-                    })
-                    const firstGroup = this.currentFunctionGroup[0] || {}
-                    const firstMethod = firstGroup.children[0] || {}
-                    this.activeName = firstGroup.name
-                    this.chooseMethod(firstMethod)
-                }, 0)
+            show (val) {
+                if (val) {
+                    this.initData()
+                    window.addEventListener('resize', this.handleFullScreen)
+                } else {
+                    window.removeEventListener('resize', this.handleFullScreen)
+                }
             }
         },
 
         methods: {
-            ...mapMutations('drag', ['setFunctionGroup']),
-
-            confirmAddMethod () {},
-
-            changeFunName () {
-                this.isShowName = true
-                this.methodName = this.selectMethod.funName
-                this.dialogTitle = '修改函数名称'
-                this.dialogPlaceHolder = '请输入函数名称，由大小写英文字母、下划线和数字组成'
-                this.confirmAddMethod = () => {
-                    const currentName = this.methodName.trim()
-                    if (currentName === '') {
-                        this.$bkMessage({ message: '函数名不能为空', theme: 'error', limit: 1 })
-                        return
-                    }
-
-                    if (/[^a-zA-Z0-9_]/g.test(currentName)) {
-                        this.$bkMessage({ message: '函数名称只能由大小写英文字母、下划线和数字组成', theme: 'error', limit: 1 })
-                        // this.methodName = ''
-                        return
-                    }
+            ...mapActions('functions', [
+                'getAllGroupFuncs',
+                'addFunc',
+                'editFunc',
+                'deleteGroup',
+                'deleteFunc',
+                'editGroups',
+                'addGroup'
+            ]),
+
+            initData () {
+                this.isLoadingGroup = true
+                const projectId = this.$route.params.projectId
+                this.getAllGroupFuncs(projectId).then(() => {
+                    const firstGroup = this.funcGroups[0] || {}
+                    this.openGroupIds.push(firstGroup.id)
+                    const funcList = firstGroup.functionList || []
+                    const firFunc = funcList[0] || {}
+                    this.chooseId = firFunc.id
+                }).catch((err) => {
+                    this.$bkMessage({ theme: 'error', message: err.message || err })
+                }).finally(() => {
+                    this.isLoadingGroup = false
+                })
+            },
 
-                    let repeatIndex = this.currentFunctionGroup.findIndex((group) => {
-                        const currentChildren = group.children
-                        return currentChildren.findIndex(x => x.funName === currentName && x.id !== this.selectMethod.id) > -1
+            chooseFunction (func) {
+                const confirmFn = () => {
+                    this.saveFunc().then(() => {
+                        this.chooseId = func.id
                     })
-
-                    while (repeatIndex > -1) {
-                        this.methodName = `${this.methodName}_copy`
-                        repeatIndex = this.currentFunctionGroup.findIndex((group) => {
-                            const currentChildren = group.children
-                            return currentChildren.findIndex(x => x.funName === this.methodName && x.id !== this.selectMethod.id) > -1
-                        })
-                    }
-
-                    this.selectMethod.name = this.methodName
-                    this.selectMethod.funName = this.methodName
-                    this.isShowName = false
                 }
-            },
-
-            addFunParam () {
-                this.isShowName = true
-                this.dialogTitle = '新增参数'
-                this.dialogPlaceHolder = '请输入参数名称，可以是大小写英文字母、下划线和数字'
-                this.confirmAddMethod = () => {
-                    if (this.methodName.trim() === '') {
-                        this.$bkMessage({ message: '参数名不能为空', theme: 'error', limit: 1 })
-                        return
-                    }
-                    if (/[^a-zA-Z0-9_]/g.test(this.methodName)) {
-                        this.$bkMessage({ message: '参数名称只能由大小写英文字母、下划线和数字组成', theme: 'error', limit: 1 })
-                        // this.methodName = ''
-                        return
-                    }
-                    let methodName = this.methodName
-                    let repeatIndex = this.selectMethod.funParam.findIndex((fun) => (fun === methodName))
-                    while (repeatIndex > -1) {
-                        methodName = `${methodName}_copy`
-                        repeatIndex = this.selectMethod.funParam.findIndex((fun) => (fun === methodName))
-                    }
-
-                    this.selectMethod.funParam.push(methodName)
-                    this.methodName = ''
-                    this.updateLayout()
-                    this.isShowName = false
+                const cancelFn = () => {
+                    this.chooseId = func.id
+                    this.formChanged = false
+                }
+                if (this.formChanged) {
+                    this.$bkInfo({
+                        title: '确认切换',
+                        subTitle: '不保存则会丢失当前数据',
+                        okText: '保存并切换',
+                        cancelText: '不保存',
+                        closeIcon: false,
+                        confirmFn,
+                        cancelFn
+                    })
+                } else {
+                    cancelFn()
                 }
             },
 
-            deleteFunParam (param) {
+            closeFunction () {
                 const confirmFn = () => {
-                    const index = this.selectMethod.funParam.findIndex(x => x === param)
-                    this.selectMethod.funParam.splice(index, 1)
-                    this.updateLayout()
+                    this.$emit('update:show', false)
+                    this.formChanged = false
                 }
+                if (this.formChanged) {
+                    this.$bkInfo({
+                        title: '请确认是否关闭',
+                        subTitle: '存在未保存的函数，关闭后不会保存更改',
+                        confirmFn
+                    })
+                } else {
+                    confirmFn()
+                }
+            },
 
-                this.$bkInfo({
-                    title: '确认删除该参数？',
-                    confirmFn
+            handleChangeBlur (id) {
+                const index = this.changeGroupIds.findIndex(x => x === id)
+                if (index > -1) this.changeGroupIds.splice(index, 1)
+            },
+
+            handleChangeGroupName (group) {
+                this.checkGroupName(this.tempName).then(() => {
+                    this.isAddLoading = true
+                    const postData = [Object.assign({}, group, { groupName: this.tempName })]
+                    return this.editGroups(postData).then(() => {
+                        this.$bkMessage({ theme: 'success', message: '修改成功' })
+                    }).finally(() => {
+                        this.isAddLoading = false
+                    })
+                }).catch((err) => {
+                    if (this.tempName !== group.groupName) this.$bkMessage({ theme: 'error', message: err.message || err })
+                }).finally(() => {
+                    const index = this.changeGroupIds.findIndex(x => x === group.id)
+                    this.changeGroupIds.splice(index, 1)
                 })
             },
 
-            saveMethods () {
-                const me = this
-                me.$bkInfo({
-                    title: '确认保存？',
-                    confirmFn: () => {
-                        me.saveCurrentMethod()
-                        me.setFunctionGroup(me.currentFunctionGroup)
-                        me.$emit('update:isShow', false)
-                        me.activeName = ''
-                        me.selectMethod = {}
-                    }
+            changeGroupName (group) {
+                this.changeGroupIds.push(group.id)
+                this.tempName = group.groupName
+                this.clickEmptyArea()
+                this.$nextTick(() => {
+                    const inputRef = this.$refs[group.id][0]
+                    inputRef.focus()
                 })
             },
 
-            saveCurrentMethod () {
-                if (!this.selectMethod.id) return
+            handleAddFunc (group) {
+                const untitledFunc = {
+                    funcName: 'Untitled',
+                    funcGroupId: group.id,
+                    funcType: 0
+                }
+                const groups = this.funcGroups || []
+                let index = groups.findIndex((group) => {
+                    const funcList = group.functionList || []
+                    return funcList.find(x => x.funcName === untitledFunc.funcName)
+                })
+                while (index >= 0) {
+                    if (/\d$/.test(untitledFunc.funcName)) untitledFunc.funcName = untitledFunc.funcName.replace(/\d$/, a => +a + 1)
+                    else untitledFunc.funcName = 'Untitled1'
+                    index = groups.findIndex((group) => {
+                        const funcList = group.functionList || []
+                        return funcList.find(x => x.funcName === untitledFunc.funcName)
+                    })
+                }
 
-                this.selectMethod.funBody = this.monacoInstance.getValue()
-                this.selectMethod.code = `function ${this.selectMethod.funName} (${this.selectMethod.funParam}) {${this.selectMethod.funBody}}`.replace('// 这里直接写函数体内容，具体请参考系统方法，这里的this指向VUE组件实例\r\n', '')
+                this.addFunc({ groupId: group.id, func: untitledFunc }).then((res) => {
+                    if (!this.openGroupIds.includes(group.id)) this.openGroupIds.push(group.id)
+                    this.chooseId = res.id
+                    this.$bkMessage({ theme: 'success', message: '添加函数成功' })
+                }).catch((err) => {
+                    this.$bkMessage({ theme: 'error', message: err.message || err })
+                })
             },
 
-            cancelMethod () {
-                this.$emit('update:isShow', false)
-                this.activeName = ''
-                this.selectMethod = {}
+            saveFunc () {
+                return this.$refs.func.validate().then((postData) => {
+                    if (!postData) return
+                    this.isSaving = true
+                    return this.editFunc({ groupId: this.curGroup.id, func: postData }).then((res) => {
+                        if (!this.openGroupIds.includes(res.funcGroupId)) this.openGroupIds.push(res.funcGroupId)
+                        this.chooseId = res.id
+                        this.formChanged = false
+                        this.$bkMessage({ theme: 'success', message: '修改函数成功' })
+                    }).catch((err) => {
+                        this.$bkMessage({ theme: 'error', message: err.message || err })
+                    }).finally(() => {
+                        this.isSaving = false
+                    })
+                })
             },
 
-            closeAddMethods () {
-                this.isShowAddMethods = false
+            deleteItem (id, name, isDeleteGroup) {
+                this.delObj.show = true
+                this.delObj.id = id
+                this.delObj.name = name
+                this.delObj.isDeleteGroup = isDeleteGroup
+                this.clickEmptyArea()
             },
 
-            chooseMethod (method) {
-                this.saveCurrentMethod()
-                this.monacoInstance.setValue(method.funBody)
-                this.selectMethod = method
-                this.updateLayout()
-            },
+            requestDelete () {
+                this.delObj.loading = true
+                const projectId = this.$route.params.projectId
+                const postData = { id: this.delObj.id, projectId }
+
+                const deleteFuncGroup = () => this.deleteGroup(postData)
+                const deleteFunc = () => {
+                    const curGroup = this.funcGroups.find(group => group.functionList.find(func => func.id === this.delObj.id))
+                    const funcList = curGroup.functionList || []
+                    return this.deleteFunc({ groupId: curGroup.id, funcId: this.delObj.id }).then(() => {
+                        if (this.delObj.id === this.chooseId) {
+                            this.formChanged = false
+                            const firstGroup = this.groupList[0]
+                            const curFuncList = funcList.length ? funcList : firstGroup.functionList
+                            const firstFunc = curFuncList[0]
+                            this.chooseId = firstFunc.id
+                        }
+                    })
+                }
 
-            updateLayout () {
-                this.$nextTick().then(() => {
-                    const headRef = this.$refs['method-head']
-                    this.height = `calc(100% - ${headRef.offsetHeight}px)`
-                    this.monacoInstance.layout()
-                    this.focusEditor()
+                const curMethod = this.delObj.isDeleteGroup ? deleteFuncGroup : deleteFunc
+                curMethod().then(() => {
+                    this.$bkMessage({ theme: 'success', message: '删除成功' })
+                    this.delObj.show = false
+                }).catch((err) => {
+                    this.$bkMessage({ theme: 'error', message: err.message || err })
+                }).finally(() => {
+                    this.delObj.loading = false
                 })
             },
 
-            showAddMethod (parent, child) {
-                if (event.button !== 2) return
-                this.addLeft = event.pageX - 3
-                this.addTop = event.pageY - 3
-                this.isShowAddMethods = true
-                this.currentMethod = { parent, child }
+            expandGroup (group) {
+                const index = this.openGroupIds.findIndex(x => x === group.id)
+                if (index > -1) this.openGroupIds.splice(index, 1)
+                else this.openGroupIds.push(group.id)
             },
 
-            addGroup () {
-                this.isShowName = true
-                this.dialogTitle = '新增文件夹'
-                this.dialogPlaceHolder = '请输入文件夹名称'
-                this.isShowAddMethods = false
-                this.confirmAddMethod = () => {
-                    this.methodName = this.methodName.trim()
-                    if (this.methodName === '') {
-                        this.$bkMessage({ message: '文件夹名不能为空', theme: 'error', limit: 1 })
-                        return
-                    }
-                    const id = uuid()
-                    const currentGroup = this.currentMethod.parent ? this.currentMethod.parent : this.currentFunctionGroup[this.currentFunctionGroup.length - 1]
-                    let repeatIndex = this.currentFunctionGroup.findIndex(x => x.name === this.methodName)
-                    while (repeatIndex > -1) {
-                        this.methodName = `${this.methodName}_copy`
-                        repeatIndex = this.currentFunctionGroup.findIndex(x => x.name === this.methodName)
-                    }
-                    const index = this.currentFunctionGroup.findIndex((x) => (x.id === currentGroup.id))
-                    this.currentFunctionGroup.splice(index + 1, 0, { name: this.methodName, id, children: [] })
-                    this.saveCurrentMethod()
-                    this.currentMethod = {}
-                    this.methodName = ''
-                    this.isShowName = false
-                }
+            clickEmptyArea () {
+                const btn = document.createElement('button')
+                document.body.appendChild(btn)
+                btn.click()
+                document.body.removeChild(btn)
             },
 
-            addMethod (event, index) {
-                this.isShowName = true
-                this.isShowAddMethods = false
-                this.dialogTitle = '新增函数'
-                this.dialogPlaceHolder = '请输入函数名称，由大小写英文字母、下划线和数字组成'
-                this.confirmAddMethod = () => {
-                    this.methodName = this.methodName.trim()
-                    if (this.methodName === '') {
-                        this.$bkMessage({ message: '函数名称不能为空', theme: 'error', limit: 1 })
-                        return
-                    }
-                    if (/[^a-zA-Z0-9_]/g.test(this.methodName)) {
-                        this.$bkMessage({ message: '函数名称只能由大小写英文字母、下划线和数字组成', theme: 'error', limit: 1 })
-                        // this.methodName = ''
-                        return
+            addFunctionGroup () {
+                this.checkGroupName(this.groupNameStr).then(() => {
+                    this.isAddLoading = true
+                    const projectId = this.$route.params.projectId
+                    const postData = {
+                        inputStr: this.groupNameStr,
+                        projectId
                     }
-                    this.saveCurrentMethod()
-                    const id = uuid()
-
-                    let repeatIndex = this.currentFunctionGroup.findIndex((group) => {
-                        const currentChildren = group.children
-                        return currentChildren.findIndex(x => x.funName === this.methodName) > -1
+                    this.addGroup(postData).then((res) => {
+                        this.groupNameStr = ''
+                        this.clickEmptyArea()
+                        this.$bkMessage({ theme: 'success', message: '添加成功' })
+                    }).finally(() => {
+                        this.isAddLoading = false
                     })
+                }).catch((err) => {
+                    this.groupNameErrMessage = err.message
+                })
+            },
 
-                    while (repeatIndex > -1) {
-                        this.methodName = `${this.methodName}_copy`
-                        repeatIndex = this.currentFunctionGroup.findIndex((group) => {
-                            const currentChildren = group.children
-                            return currentChildren.findIndex(x => x.funName === this.methodName) > -1
-                        })
-                    }
-                    const newMethod = {
-                        id,
-                        funParam: [],
-                        funName: this.methodName,
-                        funBody: '// 这里直接写函数体内容，具体请参考系统方法，这里的this指向VUE组件实例\r\n',
-                        name: this.methodName,
-                        code: ''
-                    }
-                    const currentGroup = index === undefined ? this.currentMethod.parent : this.currentFunctionGroup[index]
-                    currentGroup.children.push(newMethod)
-
-                    if (Array.isArray(this.activeName)) {
-                        const activeIndex = this.activeName.findIndex(x => x === currentGroup.name)
-                        if (activeIndex < 0) this.activeName.push(currentGroup.name)
-                    } else {
-                        this.activeName = this.activeName ? currentGroup.name : [this.activeName, currentGroup.name]
-                    }
-                    this.monacoInstance.setValue(newMethod.funBody)
-                    this.updateLayout()
-                    this.currentMethod = {}
-                    this.selectMethod = newMethod
-                    this.methodName = ''
-                    this.isShowName = false
-                }
+            checkGroupName (name = '') {
+                return new Promise((resolve, reject) => {
+                    const nameList = name.split('/')
+                    const nameNum = {}
+                    let hasRepeatName = false
+                    nameList.forEach((name) => {
+                        if (nameNum[name]) hasRepeatName = true
+                        else nameNum[name] = 1
+                    })
+                    if (hasRepeatName) reject(new Error('不能创建相同名字的分类'))
+                    else if (nameList.some(x => x === '')) reject(new Error('分类名不能为空'))
+                    else if (this.groupList.find(x => nameList.includes(x.groupName))) reject(new Error('分类名重复，请修改后重试'))
+                    else resolve()
+                })
             },
 
-            focusEditor () {
-                const editorModel = this.monacoInstance.getModel()
-                const line = editorModel.getLineCount()
-                const lastStr = editorModel.getLineContent(line)
-                const lastStrLength = lastStr.length + 1
-                this.monacoInstance.setSelection(new monaco.Selection(line, lastStrLength, line, lastStrLength))
-                this.monacoInstance.focus()
+            resizeLayOut (width) {
+                this.$refs.func.resize(width)
             },
 
-            deleteMethod () {
-                if (this.currentMethod.parent.id === 'system') {
-                    this.$bkMessage({ theme: 'error', message: '系统方法，不能删除', limit: 1 })
-                    return
+            exitFullScreen () {
+                const exitMethod = document.exitFullscreen // W3C
+                if (exitMethod) {
+                    exitMethod.call(document)
                 }
+            },
 
-                const confirmFn = () => {
-                    if (this.currentMethod.child) {
-                        const childIndex = this.currentMethod.parent.children.findIndex((x) => (x.id === this.currentMethod.child.id))
-                        this.currentMethod.parent.children.splice(childIndex, 1)
-                    } else {
-                        const parentIndex = this.currentFunctionGroup.findIndex((x) => (x.id === this.currentMethod.parent.id))
-                        this.currentFunctionGroup.splice(parentIndex, 1)
-                    }
+            openFullScreen () {
+                const element = this.$refs.methodMain.$el
+                const fullScreenMethod = element.requestFullScreen // W3C
+                    || element.webkitRequestFullScreen // FireFox
+                    || element.webkitExitFullscreen // Chrome等
+                    || element.msRequestFullscreen // IE11
+                if (fullScreenMethod) {
+                    fullScreenMethod.call(element)
+                } else {
+                    this.$bkMessage({
+                        showClose: true,
+                        message: '此浏览器不支持全屏操作，请使用chrome浏览器',
+                        type: 'warning'
+                    })
                 }
+            },
 
-                this.$bkInfo({
-                    title: '确认删除该函数？',
-                    confirmFn
+            handleFullScreen () {
+                this.isFull = document.fullscreenElement
+                this.$nextTick(() => {
+                    const leftEle = document.querySelector('.func-left')
+                    const width = leftEle.offsetWidth
+                    if (this.$refs.func) this.$refs.func.resize(width)
                 })
             }
         }
@@ -397,176 +475,314 @@
 </script>
 
 <style lang="postcss" scoped>
-    .method-main {
-        /deep/ .bk-dialog-tool {
-            min-height: 20px;
+    .function-home {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        background: rgba(0, 0, 0, 0.6);
+        z-index: 2000;
+        .function-main {
+            position: absolute;
+            width: 67.7%;
+            height: 61.5% !important;
+            min-height: 61.5%;
+            top: 19.8%;
+            left: 16.1%;
+            border-radius: 2px;
+            box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.2);
         }
-        /deep/ .bk-dialog-header {
-            padding: 3px 24px 12px;
+    }
+
+    .func-left {
+        height: 100%;
+        overflow: hidden;
+        background: #fff;
+        .group-list {
+            height: calc(100% - 115px);
+            margin-bottom: 10px;
+            overflow-y: auto;
+            .change-group-name {
+                margin: 5px 0;
+                padding: 0 4px;
+                height: 22px;
+                line-height: 22px;
+            }
+            /deep/ .sortable-ghost {
+                border: 1px dashed #3a84ff;
+                height: 32px;
+                line-height: 32px;
+                box-sizing: border-box;
+                .group-item {
+                    height: 30px;
+                    line-height: 30px;
+                    padding: 0 8px 0 19px;
+                }
+            }
         }
-        /deep/ .bk-dialog-body {
-            padding: 14px;
+        .scroll-main::-webkit-scrollbar {
+            width: 6px;
+            height: 5px;
         }
-        /deep/ .bk-dialog {
-            position: initial;
-            /* &.ease-enter-active.ease-enter-to {
-                animation: none!important;
-            } */
-            .bk-dialog-content {
-                top: calc(50vh - 324px)!important;
-            }
+        .scroll-main::-webkit-scrollbar-thumb {
+            border-radius: 20px;
+            background-color: #dcdee5;
+            -webkit-box-shadow: inset 0 0 6px hsla(0, 0%, 80%, .3);
         }
     }
 
-    .method-menu {
-        position: fixed;
-        background: #252526;
-        box-shadow: #000000 1px 1px 1px 1px;
-        width: 150px;
-        padding: 7px 0;
-        line-height: 32px;
-        .add-item {
-            padding: 0 20px;
-            color: #cccccc;
+    .func-main {
+        height: 100%;
+        overflow: hidden;
+        .func-form {
+            height: calc(100% - 50px);
+        }
+        .main-footer {
+            padding: 9px 20px;
+            height: 50px;
+            background: #fafbfd;
+            border: 1px solid #dcdee5;
+        }
+    }
+
+    .left-title {
+        margin: 0;
+        padding: 0 14px 0 22px;
+        height: 57px;
+        font-weight: normal;
+        color: #63656e;
+        border-bottom: 1px solid #dcdee5;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .icon-plus {
             cursor: pointer;
+            font-size: 26px;
             &:hover {
-                background: #094771;
+                color: #3a84ff;
             }
         }
     }
 
-    .method-main {
-        height: 500px;
+    .func-item {
         display: flex;
-        .method-list {
-            font-family: Consolas;
-            flex-basis: 150px;
-            background: #252526;
-            color: #cccccc;
-            position: relative;
-            .list-name {
-                height: 30px;
-                line-height: 30px;
-                font-size: 15px;
-                font-weight: normal;
-                text-align: center;
-                margin: 0;
-                padding: 0;
-                border-bottom: 1px solid #2a2d2e;
-                border-right: 1px solid #2a2d2e;
+        align-items: center;
+        padding: 0 9px 0 65px;
+        color: #63656e;
+        line-height: 32px;
+        cursor: pointer;
+        font-size: 12px;
+        .hover-show {
+            display: none;
+        }
+        .func-name {
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .bk-drag-icon {
+            font-size: 12px;
+        }
+        &:hover, &.select {
+            background: #e1ecff;
+            color: #3a84ff;
+            .hover-show {
+                display: block;
             }
-            .method-fold {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                span {
-                    flex: 1;
-                    max-width: 90px;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                }
+        }
+        .disable {
+            cursor: not-allowed;
+        }
+    }
+
+    .item-tool {
+        height: 22px;
+        width: 22px;
+        line-height: 22px;
+        text-align: center;
+        font-size: 16px;
+        display: inline-block;
+        cursor: pointer;
+        &:hover {
+            border-radius: 100px;
+            background: #fafbfd;
+        }
+    }
+
+    .group-item {
+        height: 32px;
+        display: flex;
+        align-items: center;
+        padding: 0 9px 0 20px;
+        margin: 0;
+        font-weight: normal;
+        font-size: 12px;
+        cursor: pointer;
+        position: relative;
+        .item-num {
+            margin-left: 10px;
+            height: 20px;
+            border-radius: 2px;
+            background: #f0f1f5;
+            color: #979ba5;
+            font-size: 12px;
+            line-height: 20px;
+            padding: 0 6px;
+            position: absolute;
+            right: 9px;
+            top: 6px;
+        }
+        i.hover-show {
+            display: none;
+        }
+        .mr7 {
+            margin-right: 7px;
+        }
+        .item-name {
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        &:hover, &.select {
+            background: #e1ecff;
+            color: #3a84ff;
+            padding-left: 4px;
+            .bk-drag-icon {
+                color: #3a84ff;
             }
-            .add-fold {
-                position: absolute;
-                bottom: 50px;
-                left: 50%;
-                transform: translateX(-50%);
+            .hover-show {
                 display: block;
-                cursor: pointer;
             }
-            /deep/ .bk-collapse-item-header{
-                height: 30px;
-                line-height: 30px;
-                .bk-icon {
-                    vertical-align: middle;
-                }
-                &:hover {
-                    color: #cccccc;
-                    background: #2a2d2e;
-                }
+            .item-num {
+                background: #a2c5fd;
+                color: #ffffff;
+            }
+        }
+        .bk-drag-icon {
+            color: #c4c6cc;
+            font-size: 12px;
+            &.bk-drag-grag-fill {
+                color: #c4c6cc;
+                margin-right: 4px;
             }
-            /deep/ .bk-collapse-item-content {
-                padding: 0;
+            &.bk-drag-folder-fill {
+                margin: 0 12px 0 8px;
+                font-size: 14px;
             }
-            .group-item {
-                color: #cccccc;
+            &.bk-drag-add-line {
+                margin-right: 36px;
+            }
+        }
+        .fold-icon {
+            font-size: 10px;
+        }
+    }
+
+    /deep/ .more-list {
+        padding: 5px 0;
+        width: 77px;
+        .list-item {
+            margin: 0;
+            padding: 0 11px;
+            line-height: 32px;
+            &:hover {
+                background: #e1ecff;
+                color: #3a84ff;
                 cursor: pointer;
-                height: 22px;
-                line-height: 22px;
-                padding: 0 15px 0 20px;
-                max-width: 150px;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                &:hover {
-                    background: #2a2d2e;
-                }
-                &.active {
-                    background: #37373d;
-                }
-                &.method-empty:hover {
-                    cursor: context-menu;
-                    background: #252526;
-                }
+            }
+            &.disable {
+                cursor: not-allowed;
+                color: rgb(196, 198, 204);
+                background: rgb(255, 255, 255);
             }
         }
-        .method-item {
-            height: 100%;
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            .method-head {
-                padding: 0 5px;
-                background: #252526;
-                color: #cccccc;
-                .head-item {
-                    line-height: 20px;
-                    margin-top: 6px;
-                    position: relative;
-                    padding-left: 60px;
-                    .head-title {
-                        position: absolute;
-                        left: 0;
-                        text-align: right;
-                        width: 60px;
-                    }
-                    &-name {
-                        display: inline-block;
-                        margin: 0 6px;
-                    }
-                    &-param {
-                        display: inline-block;
-                        margin: 0 6px;
-                        margin-bottom: 6px;
-                        border: 1px solid #fff;
-                        border-radius: 10px;
-                        padding: 2px 7px;
-                        line-height: 12px;
-                        font-size: 12px;
-                        /deep/ .icon-close {
-                            cursor: pointer;
-                            &:hover {
-                                color: #3c96ff;
-                            }
-                        }
-                    }
-                    &-click {
-                        cursor: pointer;
-                        color: #3c96ff;
-                        display: inline-block;
-                        margin-bottom: 6px;
-                        margin-left: 10px;
-                    }
-                    .head-input {
-                        margin: 0 16px;
-                        flex: 1;
-                    }
+    }
+
+    .left-input {
+        width: calc(100% - 12px);
+        margin: 9px 6px 7px;
+    }
+
+    .add-function-group {
+        width: 340px;
+        margin-top: 6px;
+    }
+
+    .input-error {
+        /deep/ input {
+            border-color: #ff5656;
+            color: #ff5656;
+        }
+    }
+
+    .input-err-message {
+        margin: 5px 0 -7px 0;
+        padding: 0;
+        color: #ff5656;
+    }
+
+    /deep/ .delete-dialog-wrapper {
+        .delete-content {
+            text-align: center;
+            font-size: 14px;
+            color: #63656e;
+            margin: 0;
+            word-break: break-all;
+        }
+        .bk-dialog-footer {
+            text-align: center;
+            padding: 0 65px 30px;
+            background-color: #fff;
+            border: none;
+            border-radius: 0;
+        }
+        .dialog-footer {
+            button {
+                width: 86px;
+                &:first-child {
+                    margin-right: 10px;
                 }
             }
-            .method-body {
-                flex: 1;
+        }
+    }
+    .icon-style {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        z-index: 1;
+        color: #C4C6CC;
+        cursor: pointer;
+        .bk-drag-icon {
+            width: 16px;
+            height: 16px;
+            color: #979ba5;
+            display: inline-block;
+        }
+        .un-full-screen {
+            width: 108px;
+            height: 36px;
+            line-height: 36px;
+            text-align: center;
+            opacity: 0.7;
+            background: #000000;
+            border-radius: 2px;
+            padding: 3px 6px;
+            &:hover {
+                opacity: 0.9;
             }
         }
     }
 </style>
+<style lang="postcss">
+    .label-pop {
+        .tippy-tooltip, .bk-popconfirm-content {
+            padding: 0;
+        }
+        .popconfirm-content {
+            margin: 0;
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/components/methods/label-list.vue b/paas-ce/lesscode/lib/client/src/components/methods/label-list.vue
new file mode 100644
index 000000000..dbf94ee57
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/components/methods/label-list.vue
@@ -0,0 +1,82 @@
+<template>
+    <section class="label-list-home">
+        <span v-for="item in list.slice(0, 1)" :key="item" :class="['label-item', 'label-first', { only: list.length === 1 }]" :title="item">{{ item }}</span>
+        <bk-popconfirm trigger="click" confirm-text="" cancel-text="" ext-cls="label-pop" v-if="list.slice(1).length">
+            <div slot="content">
+                <ul class="label-list">
+                    <li v-for="item in list.slice(1)" :key="item" class="label-item list-item">{{ item }}</li>
+                </ul>
+            </div>
+            <span class="label-item label-more">...</span>
+        </bk-popconfirm>
+        <span v-if="list.length <= 0">--</span>
+    </section>
+</template>
+
+<script>
+    export default {
+        props: {
+            list: Array
+        }
+    }
+</script>
+
+<style lang="postcss" scoped>
+    .label-list-home {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        .label-first {
+            max-width: calc(100% - 24px);
+            display: inline-block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &.only {
+                max-width: 100%;
+            }
+        }
+        .label-more {
+            width: 24px;
+            margin: 0;
+        }
+    }
+    .label-item {
+        color: #63656e;
+        background: #f0f1f5;
+        line-height: 24px;
+        padding: 0 8px;
+        font-size: 12px;
+        display: inline-block;
+        margin-right: 6px;
+    }
+    .label-list {
+        max-width: 460px;
+        padding: 8px 0 0 8px;
+        &:after {
+            content: '';
+            display: table;
+            clear: both;
+        }
+        .list-item {
+            float: left;
+            margin: 0 8px 8px 0;
+        }
+    }
+    .label-more {
+        cursor: pointer;
+        &:hover {
+            background: #c4c6cc;
+        }
+    }
+</style>
+<style lang="postcss">
+    .label-pop {
+        .tippy-tooltip, .bk-popconfirm-content {
+            padding: 0;
+        }
+        .popconfirm-content {
+            margin: 0;
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/components/methods/monaco.vue b/paas-ce/lesscode/lib/client/src/components/methods/monaco.vue
new file mode 100644
index 000000000..e4838360f
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/components/methods/monaco.vue
@@ -0,0 +1,204 @@
+<template>
+    <div ref="monacoEditor" :style="{ height: calcSize(renderHeight), width: calcSize(renderWidth), position: 'relative' }">
+        <template v-if="fullScreen">
+            <span v-if="!isFull" class="bk-drag-icon bk-drag-code-full-screen icon-style" @click="openFullScreen"> </span>
+            <span v-else @click="exitFullScreen" class="un-full-screen icon-style" style="right: 20px;">
+                <i class="bk-drag-icon bk-drag-un-full-screen"></i>
+                <span>退出全屏</span>
+            </span>
+        </template>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            fullScreen: Boolean,
+            value: String,
+            width: {
+                type: [String, Number],
+                default: 'auto'
+            },
+            height: {
+                type: [String, Number],
+                default: 320
+            },
+            options: Object
+        },
+
+        data () {
+            return {
+                initWidth: this.width,
+                initHeight: this.height,
+                renderWidth: this.width,
+                renderHeight: this.height,
+                isFull: false,
+                editor: {}
+            }
+        },
+
+        watch: {
+            options (options) {
+                if (this.editor) {
+                    this.editor.updateOptions(options)
+                    this.editor.layout()
+                }
+            },
+
+            value (newValue) {
+                if (this.editor) {
+                    if (newValue !== this.editor.getValue()) {
+                        this.editor.setValue(newValue)
+                    }
+                }
+            },
+
+            width (newVal) {
+                this.renderWidth = newVal
+                this.initWidth = this.width
+            },
+
+            height (newVal) {
+                this.renderHeight = newVal
+                this.initHeight = this.height
+            }
+        },
+
+        mounted () {
+            this.initMonaco()
+            window.addEventListener('resize', this.handleFullScreen)
+        },
+
+        beforeDestroy () {
+            window.removeEventListener('resize', this.handleFullScreen)
+            setTimeout(() => {
+                this.editor && this.editor.dispose()
+            }, 200)
+        },
+
+        methods: {
+            calcSize (size) {
+                const _size = size.toString()
+                if (_size.match(/^[\d\.]*$/)) return `${size}px`
+                else return _size
+            },
+
+            initMonaco () {
+                const options = Object.assign(
+                    {
+                        value: this.value,
+                        theme: 'vs-dark',
+                        language: 'javascript',
+                        fontSize: 14,
+                        fontFamily: 'Consolas',
+                        cursorBlinking: 'solid',
+                        minimap: {
+                            enabled: false // 关闭小地图
+                        }
+                    }, this.options)
+
+                this.editor = monaco.editor.create(this.$el, options)
+                this.editor.onDidChangeModelContent(event => {
+                    const value = this.editor.getValue()
+                    if (this.value !== value) {
+                        this.$emit('update:value', value)
+                    }
+                })
+                this.$nextTick(() => {
+                    this.editor.setValue(this.value)
+                })
+            },
+
+            handleFullScreen () {
+                if (document.fullscreenElement) {
+                    this.isFull = true
+                    return true
+                } else if (this.isFull) {
+                    this.isFull = false
+                    this.renderWidth = this.initWidth
+                    this.renderHeight = this.initHeight
+                    this.$nextTick().then(() => {
+                        this.editor.layout()
+                    })
+                }
+                return false
+            },
+
+            exitFullScreen () {
+                const exitMethod = document.exitFullscreen // W3C
+                if (exitMethod) {
+                    exitMethod.call(document)
+                }
+            },
+
+            openFullScreen () {
+                const element = this.$refs.monacoEditor
+                const fullScreenMethod = element.requestFullScreen // W3C
+                    || element.webkitRequestFullScreen // FireFox
+                    || element.webkitExitFullscreen // Chrome等
+                    || element.msRequestFullscreen // IE11
+                if (fullScreenMethod) {
+                    fullScreenMethod.call(element)
+                    this.renderWidth = window.screen.width
+                    this.renderHeight = window.screen.height
+                    this.$nextTick().then(() => {
+                        this.editor.layout()
+                    })
+                } else {
+                    this.$bkMessage({
+                        showClose: true,
+                        message: this.$t('此浏览器不支持全屏操作，请使用chrome浏览器'),
+                        type: 'warning'
+                    })
+                }
+            },
+
+            getMonaco () {
+                return this.editor
+            },
+
+            focus () {
+                this.editor.focus()
+            },
+
+            resize () {
+                this.editor.layout()
+            }
+        }
+    }
+</script>
+
+<style lang="postcss" scoped>
+    .icon-style {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        z-index: 1;
+        color: #C4C6CC;
+        cursor: pointer;
+    }
+    .bk-drag-icon {
+        width: 16px;
+        height: 16px;
+        color: #979ba5;
+        display: inline-block;
+    }
+    .un-full-screen {
+        width: 108px;
+        height: 36px;
+        line-height: 36px;
+        text-align: center;
+        opacity: 0.7;
+        background: #000000;
+        border-radius: 2px;
+        &:hover {
+            opacity: 0.9;
+        }
+    }
+    /deep/ .monaco-editor .overflow-guard {
+        padding-top: 20px;
+        .margin {
+            padding-top: 20px;
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/components/patch/chart/index.vue b/paas-ce/lesscode/lib/client/src/components/patch/chart/index.vue
index d771a2586..0516927b6 100644
--- a/paas-ce/lesscode/lib/client/src/components/patch/chart/index.vue
+++ b/paas-ce/lesscode/lib/client/src/components/patch/chart/index.vue
@@ -11,9 +11,9 @@
 
 <template>
     <div v-if="height" :style="computedStyle">
-        <echart :options="options" :auto-resize="true"></echart>
+        <echart :options="options" autoresize></echart>
     </div>
-    <echart v-else :options="options" :auto-resize="true"></echart>
+    <echart v-else :options="options" autoresize></echart>
 </template>
 
 <script>
diff --git a/paas-ce/lesscode/lib/client/src/components/project/page-dialog.vue b/paas-ce/lesscode/lib/client/src/components/project/page-dialog.vue
new file mode 100644
index 000000000..e42a5615a
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/components/project/page-dialog.vue
@@ -0,0 +1,143 @@
+<template>
+    <section>
+        <bk-dialog v-model="dialog.visible"
+            theme="primary"
+            :title="title"
+            width="600"
+            :mask-close="false"
+            :auto-close="false"
+            header-position="left"
+            ext-cls="page-operate-dialog"
+        >
+            <bk-form ref="dialogForm" class="dialog-form" :label-width="90" :rules="dialog.formRules" :model="dialog.formData">
+                <bk-form-item label="页面名称" required property="pageName">
+                    <bk-input ref="projectDialogInput"
+                        maxlength="60"
+                        v-model="dialog.formData.pageName"
+                        placeholder="请输入页面名称，60个字符以内">
+                    </bk-input>
+                </bk-form-item>
+            </bk-form>
+            <div class="dialog-footer" slot="footer">
+                <bk-button
+                    theme="primary"
+                    :disabled="currentName === dialog.formData.pageName || !dialog.formData.pageName"
+                    :loading="dialog.loading"
+                    @click="handleDialogConfirm">确定</bk-button>
+                <bk-button @click="handleDialogCancel" :disabled="dialog.loading">取消</bk-button>
+            </div>
+        </bk-dialog>
+    </section>
+</template>
+
+<script>
+    export default {
+        name: 'page-dialog',
+        props: {
+            action: {
+                type: String,
+                default: ''
+            },
+            currentName: {
+                type: String,
+                default: ''
+            },
+            reflashList: {
+                type: Function,
+                default: () => {}
+            }
+        },
+        data () {
+            return {
+                preName: '',
+                title: '',
+                actionName: '',
+                requestMethod: '',
+                dialog: {
+                    visible: false,
+                    loading: false,
+                    formData: {
+                        pageName: ''
+                    },
+                    formRules: {
+                        pageName: [
+                            {
+                                required: true,
+                                message: '必填项',
+                                trigger: 'blur'
+                            }
+                        ]
+                    }
+                }
+            }
+        },
+        computed: {
+            projectId () {
+                return this.$route.params.projectId
+            }
+        },
+        watch: {
+            'dialog.visible' (val) {
+                if (val) {
+                    setTimeout(() => {
+                        this.$refs.projectDialogInput && this.$refs.projectDialogInput.$el.querySelector('input').focus()
+                    }, 50)
+                }
+            },
+            action (val) {
+                this.title = val === 'create' ? '新建页面' : (this.action === 'rename' ? '重命名' : '复制页面')
+                this.requestMethod = val === 'create' ? 'page/create' : (this.action === 'rename' ? 'page/update' : 'page/copy')
+                this.actionName = val === 'create' ? '新建' : (this.action === 'rename' ? '重命名' : '复制')
+            }
+        },
+        methods: {
+            async handleDialogConfirm () {
+                if (!this.dialog.formData.pageName) return
+                this.dialog.loading = true
+                try {
+                    const nameExist = await this.$store.dispatch('page/checkName', {
+                        data: {
+                            pageName: this.dialog.formData.pageName,
+                            projectId: this.projectId
+                        }
+
+                    })
+                    if (nameExist) return
+                    const res = await this.$store.dispatch(this.requestMethod, {
+                        data: {
+                            pageData: this.dialog.formData,
+                            projectId: this.projectId
+                        }
+                    })
+                    if (res) {
+                        this.$bkMessage({
+                            theme: 'success',
+                            message: `${this.actionName}成功`
+                        })
+                        this.dialog.visible = false
+                        // TODO: 路由连起来之后再跳转
+                        // if (this.action === 'create') {
+                        //     this.$router.push('/')
+                        // } else {
+                        //     this.reflashList()
+                        // }
+                        this.reflashList()
+                    }
+                } catch (err) {
+                    console.error(err)
+                } finally {
+                    this.dialog.loading = false
+                }
+            },
+            handleDialogCancel () {
+                this.dialog.visible = false
+            }
+        }
+    }
+</script>
+
+<style lang="postcss" scoped>
+   .dialog-form {
+       margin: 30px 0;
+   }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/components/ui/extra-links.vue b/paas-ce/lesscode/lib/client/src/components/ui/extra-links.vue
new file mode 100644
index 000000000..c64ecafc5
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/components/ui/extra-links.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="extra-links">
+        <div class="changelog" @click="goChangelog" v-bk-tooltips="{ content: '更新日志', placements: ['bottom'] }">
+            <i class="bk-drag-icon bk-drag-update-log-fill"></i>
+        </div>
+        <div class="github-link" @click="goGithub" v-bk-tooltips="{ content: 'Github', placements: ['bottom'] }">
+            <i class="bk-drag-icon bk-drag-github-logo"></i>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        methods: {
+            goGithub () {
+                window.open('https://github.com/Tencent/bk-PaaS/blob/lesscode-master/paas-ce/lesscode/README.md')
+            },
+
+            goChangelog () {
+                const routerUrl = this.$router.resolve({
+                    name: 'changelog'
+                })
+                window.open(routerUrl.href, '_blank')
+            }
+        }
+    }
+</script>
+
+<style lang="postcss" scoped>
+    .extra-links {
+        display: flex;
+
+        .github-link,
+        .changelog {
+            height: 52px;
+            width: 30px;
+            font-size: 16px;
+            line-height: 52px;
+            text-align: center;
+            cursor: pointer;
+            margin-right: 10px;
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/components/ui/layout.vue b/paas-ce/lesscode/lib/client/src/components/ui/layout.vue
new file mode 100644
index 000000000..c4ef5481b
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/components/ui/layout.vue
@@ -0,0 +1,178 @@
+<template>
+    <div ref="layout" class="all-component-page-layout" :class="{ toggle: isToggleLeft }" :style="styles">
+        <div class="layout-left" ref="layoutLeft" :style="leftStyles">
+            <div class="wraper">
+                <slot name="left" />
+            </div>
+            <div class="toggle-btn" @click="handleToggle" v-bk-tooltips.right="isToggleLeft ? '展开' : '收起'">
+                <i class="toggle-btn-arrow bk-drag-icon bk-drag-angle-left" />
+            </div>
+        </div>
+        <div class="divide" :style="lineStyles" @mousedown="handleMouseDown" />
+        <div class="layout-right">
+            <slot />
+        </div>
+    </div>
+</template>
+<script>
+    import _ from 'lodash'
+    import { getOffset } from '@/common/util'
+
+    export default {
+        name: '',
+        props: {
+            initWidth: {
+                type: Number,
+                default: 337
+            }
+        },
+        data () {
+            return {
+                offsetTop: 0,
+                isToggleLeft: false,
+                isResize: false,
+                width: this.initWidth
+            }
+        },
+        computed: {
+            styles () {
+                return {
+                    height: `calc(100vh - ${this.offsetTop}px)`
+                }
+            },
+            leftStyles () {
+                return {
+                    width: `${this.width}px`
+                }
+            },
+            lineStyles () {
+                return {
+                    left: `${this.width}px`
+                }
+            }
+        },
+        created () {
+            this.startResize = false
+            this.memoWidth = 0
+        },
+        mounted () {
+            setTimeout(() => {
+                this.init()
+            })
+            document.body.addEventListener('mousemove', this.handleMouseMove)
+            document.body.addEventListener('mouseup', this.handleMouseUp)
+            this.$once('hook:beforeDestroy', () => {
+                document.body.removeEventListener('mousemove', this.handleMouseMove)
+                document.body.removeEventListener('mouseup', this.handleMouseUp)
+            })
+        },
+        methods: {
+            init () {
+                const { top } = getOffset(this.$refs.layout)
+                this.offsetTop = top
+            },
+            handleToggle () {
+                this.isToggleLeft = !this.isToggleLeft
+                this.$emit('resize', 0)
+            },
+            handleMouseDown (event) {
+                this.left = this.$refs.layoutLeft.getBoundingClientRect().left
+                this.isStartResize = true
+                document.body.style.userSelect = 'none'
+            },
+            handleMouseUp () {
+                if (!this.isStartResize) {
+                    return
+                }
+                this.isStartResize = false
+                document.body.style.userSelect = 'initial'
+                this.$emit('resize', this.width)
+            },
+            handleMouseMove: _.throttle(function (event) {
+                if (!this.isStartResize) {
+                    return
+                }
+                const width = event.clientX - this.left
+                if (width < 240 || width > 450) {
+                    return
+                }
+                this.width = width
+                this.$emit('resize', this.width)
+            }, 20)
+        }
+    }
+</script>
+<style lang='postcss'>
+    @import '@/css/mixins/scroller';
+
+    .all-component-page-layout{
+        position: relative;
+        display: flex;
+        z-index: 1;
+        &.toggle{
+            .layout-left{
+                width: 0 !important;
+            }
+            .divide{
+                display: none;
+            }
+            .toggle-btn-arrow{
+                transform: rotateZ(180deg);
+            }
+        }
+        .layout-left{
+            position: relative;
+            flex: 0 0 auto;
+            height: 100%;
+            background: #FAFBFD;
+            .wraper{
+                height: 100%;
+                overflow-y: auto;
+            }
+            .toggle-btn{
+                position: absolute;
+                z-index: 10;
+                top: 50%;
+                right: -16px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 16px;
+                height: 50px;
+                color: #fff;
+                border-radius: 0 8px 8px 0;
+                background: #C4C6CC;
+                cursor: pointer;
+                &:hover {
+                    background: #3A84FF;
+                }
+            }
+        }
+        .divide{
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            z-index: 9;
+            width: 1px;
+            background: #DCDEE5;
+            cursor: col-resize;
+            &:hover{
+                background: #3A84FF;
+            }
+            &:after{
+                content: '';
+                position: absolute;
+                top: 0;
+                left: -5px;
+                bottom: 0;
+                width: 10px;
+            }
+        }
+        .layout-right{
+            flex: 1;
+            height: 100%;
+            background: #fff;
+            overflow-y: auto;
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/components/vue-code/code-mixin.js b/paas-ce/lesscode/lib/client/src/components/vue-code/code-mixin.js
index 60f54ed6f..751f8d663 100644
--- a/paas-ce/lesscode/lib/client/src/components/vue-code/code-mixin.js
+++ b/paas-ce/lesscode/lib/client/src/components/vue-code/code-mixin.js
@@ -8,7 +8,7 @@
  * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
  * specific language governing permissions and limitations under the License.
  */
-
+import { mapGetters } from 'vuex'
 import { paramCase, camelCase } from 'change-case'
 
 const codeMixin = {
@@ -46,21 +46,37 @@ const codeMixin = {
             this.chartTypeArr = []
         }
     },
+    computed: {
+        ...mapGetters('functions', ['funcGroups'])
+    },
     methods: {
         getMethodById (methodId) {
             let returnMethod = {
                 id: '',
-                funName: '',
-                code: 'function emptyFunc () {}'
+                funcName: 'emptyFunc',
+                previewStr: '',
+                vueCodeStr: ''
             }
-            const functionGroup = JSON.parse(localStorage.getItem('functionGroup'))
-            functionGroup.forEach((group) => {
-                const funChildren = group.children || []
+            this.funcGroups.forEach((group) => {
+                const funChildren = group.functionList || []
                 const method = funChildren.find(x => x.id === methodId)
                 if (method) {
                     returnMethod = method
                 }
             })
+            const paramsStr = (returnMethod.funcParams || []).join(', ')
+            function addFuncStr (funcBody) {
+                return `${returnMethod.funcName} (${paramsStr}) { ${funcBody} }`
+            }
+            if (returnMethod.funcType === 1) {
+                const remoteParams = (returnMethod.remoteParams || []).join(', ')
+                const data = { url: returnMethod.funcApiUrl, type: returnMethod.funcMethod, apiData: returnMethod.funcApiData }
+                returnMethod.previewStr = addFuncStr(`return this.$store.dispatch('getApiData', ${JSON.stringify(data)}).then((${remoteParams}) => { ${returnMethod.funcBody} }).catch((err) => { console.error(err) })`)
+                returnMethod.vueCodeStr = addFuncStr(`return this.$http.${returnMethod.funcMethod}('${returnMethod.funcApiUrl}'${returnMethod.funcApiData ? `, ${returnMethod.funcApiData}` : ''}).then((${remoteParams}) => { ${returnMethod.funcBody} }).catch((err) => { console.error(err) })`)
+            } else {
+                returnMethod.previewStr = addFuncStr(returnMethod.funcBody)
+                returnMethod.vueCodeStr = addFuncStr(returnMethod.funcBody)
+            }
             return returnMethod
         },
 
@@ -71,7 +87,7 @@ const codeMixin = {
                 const widthStr = item.renderProps.width && item.renderProps.width.val ? `width: ${item.renderProps.width.val}px;` : ''
                 const heightStr = `height:${item.renderProps.height.val || 0}px;`
                 return `<div style="${widthStr}${heightStr}">
-                            <chart :options="${item.componentId}" :auto-resize="true"></chart>
+                            <chart :options="${item.componentId}" autoresize></chart>
                         </div>\n`
             } else {
                 // item.componentId = item.componentId.replace('_', '')
@@ -183,12 +199,13 @@ const codeMixin = {
         },
         getPropsStr (type, props, compId) {
             let propsStr = ''
-            compId = camelCase(compId)
+            const preCompId = camelCase(compId)
 
             for (const i in props) {
                 if (i !== 'slots') {
                     let propsValue = ''
                     let putToData = false
+                    compId = `${preCompId}${camelCase(i)}`
                     if (typeof props[i].val === 'object' && props[i].type === 'array') {
                         this.dataTemplate(compId, JSON.stringify(props[i].val))
                         putToData = true
@@ -245,12 +262,12 @@ const codeMixin = {
             if (typeof events === 'object' && Object.keys(events).length) {
                 for (const key in events) {
                     const fun = this.getMethodById(events[key])
-                    if (fun.funName) {
-                        eventStr += `@${key}="${fun.funName}" `
+                    if (fun.id) {
+                        eventStr += `@${key}="${fun.funcName}" `
+                        const contentStr = this.pageType === 'vueCode' ? fun.vueCodeStr : fun.previewStr
                         if (this.existFunc.indexOf(events[key]) === -1) {
                             this.existFunc.push(events[key])
-                            const code = fun.code.replace('function ', '')
-                            this.methodsStr += `${code},`
+                            this.methodsStr += `${ contentStr },`
                         }
                     }
                 }
@@ -371,17 +388,16 @@ const codeMixin = {
         },
         remoteMethodsTemplate (key, payload) {
             const method = this.getMethodById(payload.methodId)
-            const data = {
-                url: payload.url,
-                type: payload.method
-            }
-            const previewStr = `this.${key} = await this.$store.dispatch('getApiData', ${JSON.stringify(data)}).then(${method.code})`
-            const vueCodeStr = `this.${key} = await this.$http.${payload.method}('${payload.url}').then(${method.code})`
-            const contentStr = this.pageType === 'vueCode' ? vueCodeStr : previewStr
+            const contentStr = this.pageType === 'vueCode' ? method.vueCodeStr : method.previewStr
             this.methodsStr += `
                 async get${key} () {
-                    ${contentStr}
-                },\n`
+                    this.${key} = await this.${method.funcName}()
+                },`
+
+            if (this.existFunc.indexOf(method.id) === -1) {
+                this.existFunc.push(method.id)
+                this.methodsStr += `${contentStr},`
+            }
         },
         createdTemplate (key) {
             this.createdStr += `this.get${key}()\n`
diff --git a/paas-ce/lesscode/lib/client/src/css/bk-patch.css b/paas-ce/lesscode/lib/client/src/css/bk-patch.css
index ad58df046..7fb66f51d 100644
--- a/paas-ce/lesscode/lib/client/src/css/bk-patch.css
+++ b/paas-ce/lesscode/lib/client/src/css/bk-patch.css
@@ -14,3 +14,23 @@
 button.bk-button {
     vertical-align: baseline;
 }
+
+.function-option {
+    .icon-info {
+        position: absolute;
+        right: 0;
+        top: 3px;
+        font-size: 16px;
+        width: 26px;
+        height: 26px;
+        line-height: 26px;
+        text-align: center;
+    }
+    .funtion-name {
+        display: block;
+        width: calc(100% - 10px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
diff --git a/paas-ce/lesscode/lib/client/src/css/common.css b/paas-ce/lesscode/lib/client/src/css/common.css
new file mode 100644
index 000000000..01cb7d8c0
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/css/common.css
@@ -0,0 +1,32 @@
+/* page */
+.page-content {
+    padding: 16px 24px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .page-head {
+        display: flex;
+        margin-bottom: 20px;
+
+        .extra {
+            flex: none;
+            margin-left: auto;
+        }
+    }
+    .page-body {
+        display: flex;
+        flex: 1;
+
+        .page-body-inner {
+            display: flex;
+            flex: 1;
+        }
+
+        .empty {
+            flex: 1;
+            display: flex;
+            align-items: center;
+        }
+    }
+}
diff --git a/paas-ce/lesscode/lib/client/src/custom/x-table/index.vue b/paas-ce/lesscode/lib/client/src/custom/x-table/index.vue
index 844460a6f..2f2e5802e 100644
--- a/paas-ce/lesscode/lib/client/src/custom/x-table/index.vue
+++ b/paas-ce/lesscode/lib/client/src/custom/x-table/index.vue
@@ -109,15 +109,15 @@
         props: {
             getTableListAjaxUrl: {
                 type: String,
-                default: ''
+                default: '/data/getXTableData'
             },
             postEditTableListAjaxUrl: {
                 type: String,
-                default: ''
+                default: '/data/getXTableData'
             },
             delTableListAjaxUrl: {
                 type: String,
-                default: ''
+                default: '/data/getXTableData'
             }
         },
         data () {
@@ -248,7 +248,8 @@
             async getTableData () {
                 if (this.getTableListAjaxUrl) {
                     await this.$http.get(this.getTableListAjaxUrl, { ...this.systemInfo }).then(res => {
-                        this.reloadTable.splice(0, this.reloadTable.length, ...res.data.info)
+                        this.tableData = res.data.msg
+                        this.reloadTable = false
                     })
                 } else {
                     try {
@@ -299,12 +300,16 @@
                 this.dialog.show = true
                 if (this.postEditTableListAjaxUrl) {
                     await this.$http.post(this.postEditTableListAjaxUrl, { ...this.editSourceId }).then(res => {
-                        this.properties.source_name = res.data.cluster_config.cluster_name
-                        this.properties.es_host = res.data.msg.cluster_config.domain_name
-                        this.number = this.properties.es_port = res.data.cluster_config.port
-                        this.properties.es_user = res.data.msg.cluster_config.username
-                        this.properties.es_password = '******'
-                        this.cluster_config.cluster_id = this.editSourceId
+                        this.tableData = res.data.msg
+                        this.reloadTable = false
+                        if (res.data.msg[this.editSourceId - 1]) {
+                            this.properties.source_name = res.data.msg[this.editSourceId - 1].cluster_config.cluster_name
+                            this.properties.es_host = res.data.msg[this.editSourceId - 1].cluster_config.domain_name
+                            this.number = this.properties.es_port = res.data.msg[this.editSourceId - 1].cluster_config.port
+                            this.properties.es_user = res.data.msg[this.editSourceId - 1].cluster_config.username
+                            this.properties.es_password = '******'
+                            this.cluster_config.cluster_id = this.editSourceId
+                        }
                     })
                 } else {
                     try {
@@ -338,7 +343,9 @@
                         })
                         if (this.delTableListAjaxUrl) {
                             this.$http.get(this.delTableListAjaxUrl, { ...obj }).then(res => {
-                                this.reloadTable.splice(0, this.reloadTable.length, ...res.data.info)
+                                this.$bkLoading.hide()
+                                this.reloadTable = true
+                                this.getTableData()
                             })
                         } else {
                             try {
diff --git a/paas-ce/lesscode/lib/client/src/element-materials/modifier/events/index.vue b/paas-ce/lesscode/lib/client/src/element-materials/modifier/events/index.vue
index 202cdaba2..66dcca905 100644
--- a/paas-ce/lesscode/lib/client/src/element-materials/modifier/events/index.vue
+++ b/paas-ce/lesscode/lib/client/src/element-materials/modifier/events/index.vue
@@ -19,14 +19,17 @@
                 </h3>
                 <bk-select class="event-choose" ref="eventChooseComp" :value="eventValues[event.name]" @clear="choose({ id: '' }, event.name)">
                     <bk-option-group
-                        v-for="(group, index) in functionGroup"
-                        :name="group.name"
+                        v-for="(group, index) in funcGroups"
+                        :name="group.groupName"
                         :key="index">
-                        <bk-option v-for="option in group.children"
+                        <bk-option class="function-option"
+                            v-for="option in group.functionList"
                             @click.native="choose(option, event.name)"
                             :key="option.id"
                             :id="option.id"
-                            :name="option.name">
+                            :name="option.funcName">
+                            <span class="funtion-name" :title="option.funcName">{{option.funcName}}</span>
+                            <i class="bk-icon icon-info" v-bk-tooltips="option.funcSummary || '该函数暂无描述'"></i>
                         </bk-option>
                     </bk-option-group>
                     <div slot="extension" style="cursor: pointer;" @click="showMethodDialog">
@@ -38,7 +41,7 @@
         <div class="no-event" v-else>
             <span v-if="Object.keys(curSelectedComponentData).length">该组件暂无事件</span>
         </div>
-        <methods :is-show.sync="showMethod"></methods>
+        <methods :show.sync="showMethod"></methods>
     </section>
 </template>
 
@@ -76,7 +79,8 @@
             }
         },
         computed: {
-            ...mapGetters('drag', ['functionGroup', 'pageData', 'curSelectedComponentData'])
+            ...mapGetters('drag', ['pageData', 'curSelectedComponentData']),
+            ...mapGetters('functions', ['funcGroups'])
         },
         watch: {
             materialConfig: {
diff --git a/paas-ce/lesscode/lib/client/src/element-materials/modifier/props/components/strategy/boolean.vue b/paas-ce/lesscode/lib/client/src/element-materials/modifier/props/components/strategy/boolean.vue
index f14c30754..7547d8b49 100644
--- a/paas-ce/lesscode/lib/client/src/element-materials/modifier/props/components/strategy/boolean.vue
+++ b/paas-ce/lesscode/lib/client/src/element-materials/modifier/props/components/strategy/boolean.vue
@@ -9,6 +9,44 @@
   specific language governing permissions and limitations under the License.
 -->
 
-<template functional>
-    <bk-switcher theme="primary" size="large" :value="props.defaultValue" @change="val => props.change(`${props.name}`, val, props.type)" />
+<template>
+    <div class="modifier-props-switch-container">
+        <!-- <bk-switcher theme="primary" size="large" :value="props.defaultValue" @change="val => props.change(`${props.name}`, val, props.type)" /> -->
+        <bk-switcher theme="primary" size="large" :value="renderValue" @change="handleChange" />
+    </div>
 </template>
+
+<script>
+    export default {
+        props: {
+            defaultValue: {
+                type: Boolean,
+                required: true
+            },
+            name: {
+                type: String,
+                required: true
+            },
+            type: {
+                type: String,
+                required: true
+            },
+            change: {
+                type: Function,
+                required: true
+            }
+        },
+        data () {
+            return {
+                isError: false,
+                renderValue: this.defaultValue
+            }
+        },
+        methods: {
+            handleChange (val) {
+                this.renderValue = !this.renderValue
+                this.change(`${this.name}`, val, this.type)
+            }
+        }
+    }
+</script>
diff --git a/paas-ce/lesscode/lib/client/src/element-materials/modifier/props/components/strategy/remote.vue b/paas-ce/lesscode/lib/client/src/element-materials/modifier/props/components/strategy/remote.vue
index 537c4864d..6b32117a8 100644
--- a/paas-ce/lesscode/lib/client/src/element-materials/modifier/props/components/strategy/remote.vue
+++ b/paas-ce/lesscode/lib/client/src/element-materials/modifier/props/components/strategy/remote.vue
@@ -11,30 +11,27 @@
 
 <template>
     <section>
-        <div class="remote-title">数据源 Api Url</div>
-        <bk-input v-model="remoteData.url" @change="saveChange" style="width: 100%" right-icon="bk-icon icon-search" placeholder="请输入Api Url" />
-        <div class="remote-title">Api 方法</div>
-        <bk-select v-model="remoteData.method" style="width: 100%" placeholder="Api方法，默认get方法" @change="saveChange">
-            <bk-option v-for="item in methodList" :key="item" :id="item" :name="item" />
-        </bk-select>
-        <div class="remote-title">数据清洗函数</div>
+        <div class="remote-title">远程函数</div>
         <bk-select class="event-choose" ref="eventChooseComp" v-model="remoteData.methodId" @change="saveChange">
             <bk-option-group
-                v-for="(group, index) in functionGroup"
-                :name="group.name"
+                v-for="(group, index) in funcGroups"
+                :name="group.groupName"
                 :key="index">
-                <bk-option v-for="option in group.children"
+                <bk-option class="function-option"
+                    v-for="option in group.functionList"
                     :key="option.id"
                     :id="option.id"
-                    :name="option.name">
+                    :name="option.funcName">
+                    <span class="funtion-name" :title="option.funcName">{{option.funcName}}</span>
+                    <i class="bk-icon icon-info" v-bk-tooltips="option.funcSummary || '该函数暂无描述'"></i>
                 </bk-option>
             </bk-option-group>
             <div slot="extension" style="cursor: pointer;" @click="showMethodDialog">
                 <i class="bk-icon icon-plus-circle"></i>新增函数
             </div>
         </bk-select>
-        <bk-button @click="getApiData" theme="primary" class="remote-button">获取接口数据</bk-button>
-        <methods :is-show.sync="showMethod"></methods>
+        <bk-button @click="getApiData" theme="primary" class="remote-button">获取数据</bk-button>
+        <methods :show.sync="showMethod"></methods>
     </section>
 </template>
 
@@ -68,80 +65,78 @@
         data () {
             return {
                 remoteData: {
-                    url: '/api/test/getMockData',
-                    method: 'get',
                     methodId: ''
                 },
                 showMethod: false
             }
         },
         computed: {
-            ...mapGetters('drag', ['functionGroup'])
+            ...mapGetters('functions', ['funcGroups'])
         },
         created () {
-            this.methodList = ['get', 'post', 'put', 'delete', 'update']
             this.remoteData = Object.assign({}, this.remoteData, this.payload)
         },
         methods: {
             saveChange () {
                 this.change(this.name, this.defaultValue, this.type, JSON.parse(JSON.stringify(this.remoteData)))
             },
-            genHackEval (methodId) {
-                let methodCode = ''
-                this.functionGroup.forEach((group) => {
-                    const funChildren = group.children || []
+
+            showMethodDialog () {
+                const eventChooseComp = this.$refs.eventChooseComp
+                if (eventChooseComp) {
+                    eventChooseComp.close()
+                }
+                this.showMethod = true
+            },
+
+            getMethod (methodId) {
+                let returnMethod
+                this.funcGroups.forEach((group) => {
+                    const funChildren = group.functionList || []
                     const method = funChildren.find(x => x.id === methodId)
-                    if (method) methodCode = method.code
+                    if (method) {
+                        returnMethod = method
+                    }
                 })
                 const Fn = Function
-                return new Fn('return ' + methodCode)()
+                let returnFun
+                if (returnMethod.funcType === 1) {
+                    const remoteParams = (returnMethod.remoteParams || []).join(', ')
+                    const data = { url: returnMethod.funcApiUrl, type: returnMethod.funcMethod, apiData: returnMethod.funcApiData }
+                    returnFun = new Fn(`return this.$store.dispatch('getApiData', ${JSON.stringify(data)}).then((${remoteParams}) => { ${returnMethod.funcBody} })`).bind(this)
+                } else {
+                    returnFun = new Fn(returnMethod.funcBody).bind(this)
+                }
+                return returnFun
             },
-            getApiData () {
-                if (!this.remoteData.url) {
-                    this.$bkMessage({ theme: 'error', message: 'Api Url不能为空' })
+
+            async getApiData () {
+                if (!this.remoteData.methodId) {
+                    this.$bkMessage({ theme: 'error', message: '请先选择函数' })
                     return
                 }
-                let transformFunc = _ => _
-                if (this.remoteData.methodId) {
-                    try {
-                        transformFunc = this.genHackEval(this.remoteData.methodId)
-                    } catch (error) {
-                        this.$bkMessage({ theme: 'error', message: error.message || '转换函数格式不正确', limit: 1 })
-                        return
-                    }
-                }
 
-                const data = {
-                    url: this.remoteData.url,
-                    type: this.remoteData.method
+                let method
+                try {
+                    method = this.getMethod(this.remoteData.methodId)
+                } catch (error) {
+                    this.$bkMessage({ theme: 'error', message: '函数格式有误，请修改后再试' })
+                    return
                 }
-                this.$store.dispatch('getApiData', data).then(res => {
-                    let resData = res
-                    try {
-                        resData = transformFunc(resData)
-                    } catch (error) {
-                        this.$bkMessage({ theme: 'error', message: `数据清洗函数执行失败： ${error.message || error}`, limit: 1 })
-                        return
-                    }
-                    const message = this.remoteValidate(resData)
+
+                try {
+                    const res = await method()
+                    const message = this.remoteValidate(res)
                     if (message) {
                         this.$bkMessage({ theme: 'error', message })
                     } else {
-                        this.change(this.name, resData, this.type, JSON.parse(JSON.stringify(this.remoteData)))
-                        this.$bkMessage({ theme: 'success', message: '接口数据获取成功', limit: 1 })
+                        this.change(this.name, res, this.type, JSON.parse(JSON.stringify(this.remoteData)))
+                        this.$bkMessage({ theme: 'success', message: '获取数据成功', limit: 1 })
                     }
-                }).catch(e => {
-                    this.$bkMessage({ theme: 'error', message: '获取接口数据失败，请检查 url 是否正确', limit: 1 })
-                })
-            },
-            showMethodDialog () {
-                const eventChooseComp = this.$refs.eventChooseComp[0]
-                if (eventChooseComp) {
-                    eventChooseComp.close()
+                } catch (error) {
+                    this.$bkMessage({ theme: 'error', message: '获取数据失败，请检查函数是否正确', limit: 1 })
                 }
-                this.showMethod = true
             }
-
         }
     }
 </script>
diff --git a/paas-ce/lesscode/lib/client/src/images/page-demo.png b/paas-ce/lesscode/lib/client/src/images/page-demo.png
new file mode 100644
index 000000000..80d56d663
Binary files /dev/null and b/paas-ce/lesscode/lib/client/src/images/page-demo.png differ
diff --git a/paas-ce/lesscode/lib/client/src/main.js b/paas-ce/lesscode/lib/client/src/main.js
index 3928adead..c2c86a0ee 100644
--- a/paas-ce/lesscode/lib/client/src/main.js
+++ b/paas-ce/lesscode/lib/client/src/main.js
@@ -23,9 +23,12 @@ import { bus } from '@/common/bus'
 import header from '@/components/header.vue'
 import '@/common/bkmagic'
 import '@icon-cool/bk-icon-vue-drag-vis'
+import '@icon-cool/bk-icon-vue-drag-vis/src/index'
 import VueContextMenu from '@xunlei/vue-context-menu'
 import targetData from '@/common/targetData.js'
-
+import pureAxios from '@/api/pureAxios.js'
+// 用户调用接口使用，无业务逻辑，直接返回数据
+Vue.prototype.$http = pureAxios
 Vue.prototype.$td = targetData
 
 Vue.use(VueContextMenu)
diff --git a/paas-ce/lesscode/lib/client/src/router/index.js b/paas-ce/lesscode/lib/client/src/router/index.js
index f0a1d2afa..67b798d8c 100644
--- a/paas-ce/lesscode/lib/client/src/router/index.js
+++ b/paas-ce/lesscode/lib/client/src/router/index.js
@@ -18,6 +18,16 @@ import preload from '@/common/preload'
 
 Vue.use(VueRouter)
 
+const SystemEntry = () => import(/* webpackChunkName: 'index' */'@/views/system')
+const Projects = () => import(/* webpackChunkName: 'projects' */'@/views/system/projects')
+const Account = () => import(/* webpackChunkName: 'account' */'@/views/system/account')
+const ComponentManage = () => import(/* webpackChunkName: 'index' */'@/views/system/component-manage')
+const FunctionManage = () => import(/* webpackChunkName: 'index' */'@/views/project/function-manage')
+
+const ProjectEntry = () => import(/* webpackChunkName: 'projectEntry' */'@/views/project')
+const Page = () => import(/* webpackChunkName: 'page' */'@/views/project/page')
+const Member = () => import(/* webpackChunkName: 'member' */'@/views/project/member')
+
 const MainEntry = () => import(/* webpackChunkName: 'index' */'@/views')
 const Index = () => import(/* webpackChunkName: 'index' */'@/views/index/index')
 const Preview = () => import(/* webpackChunkName: 'preview' */'@/views/preview')
@@ -32,7 +42,77 @@ const Changelog = () => import(/* webpackChunkName: 'start' */'@/views/changelog
 
 const routes = [
     {
-        path: `/${APP_CODE}`,
+        path: '/help',
+        component: MainHelpEntry,
+        children: [
+            { path: 'custom', name: 'custom', component: Custom },
+            { path: 'grid', name: 'grid', component: Grid },
+            { path: 'intro', name: 'intro', component: Intro, alias: '' },
+            { path: 'start', name: 'start', component: Start },
+            { path: 'changelog', name: 'changelog', component: Changelog }
+        ]
+    },
+    {
+        path: '/',
+        component: SystemEntry,
+        redirect: { name: 'projects' },
+        children: [
+            {
+                path: 'projects',
+                name: 'projects',
+                component: Projects,
+                meta: {
+                    title: '项目列表'
+                }
+            },
+            {
+                path: 'account',
+                name: 'account',
+                component: Account,
+                meta: {
+                    title: '账号管理'
+                }
+            },
+            {
+                path: 'component-manage',
+                name: 'componentManage',
+                component: ComponentManage,
+                meta: {
+                    title: '自定义组件库'
+                }
+            }
+        ]
+    },
+    {
+        path: '/project/:projectId',
+        component: ProjectEntry,
+        children: [
+            {
+                path: '',
+                redirect: { name: 'pageList' }
+            },
+            {
+                path: 'pages',
+                name: 'pageList',
+                component: Page
+            },
+            {
+                path: 'functionManage',
+                name: 'functionManage',
+                component: FunctionManage,
+                meta: {
+                    title: '函数库'
+                }
+            },
+            {
+                path: 'member',
+                name: 'memberManage',
+                component: Member
+            }
+        ]
+    },
+    {
+        path: `/project/:projectId/page/:pageId`,
         component: MainEntry,
         alias: '',
         children: [
@@ -48,17 +128,6 @@ const routes = [
             }
         ]
     },
-    {
-        path: '/help',
-        component: MainHelpEntry,
-        children: [
-            { path: 'custom', name: 'custom', component: Custom },
-            { path: 'grid', name: 'grid', component: Grid },
-            { path: 'intro', name: 'intro', component: Intro, alias: '' },
-            { path: 'start', name: 'start', component: Start },
-            { path: 'changelog', name: 'changelog', component: Changelog }
-        ]
-    },
     {
         path: '*',
         name: '404',
diff --git a/paas-ce/lesscode/lib/client/src/store/index.js b/paas-ce/lesscode/lib/client/src/store/index.js
index 07d826166..43f05572f 100644
--- a/paas-ce/lesscode/lib/client/src/store/index.js
+++ b/paas-ce/lesscode/lib/client/src/store/index.js
@@ -14,6 +14,10 @@ import Vuex from 'vuex'
 
 import drag from './modules/drag'
 import vueCode from './modules/vue-code'
+import project from './modules/project'
+import components from './modules/components'
+import page from './modules/page'
+import functions from './modules/functions'
 import http from '@/api'
 import { unifyObjectStyle, json2Query } from '@/common/util'
 
@@ -23,7 +27,11 @@ const store = new Vuex.Store({
     // 模块
     modules: {
         drag,
-        vueCode
+        vueCode,
+        project,
+        components,
+        page,
+        functions
     },
     // 公共 store
     state: {
@@ -84,7 +92,7 @@ const store = new Vuex.Store({
         },
 
         getApiData ({ state }, data) {
-            return http.post('/data/getApiData', data).then(response => {
+            return http.post('/data/getApiData', data, { globalError: false }).then(response => {
                 return response
             })
         },
diff --git a/paas-ce/lesscode/lib/client/src/store/modules/components.js b/paas-ce/lesscode/lib/client/src/store/modules/components.js
new file mode 100644
index 000000000..3507359c9
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/store/modules/components.js
@@ -0,0 +1,87 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2019 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import http from '@/api'
+
+export default {
+    namespaced: true,
+    state: {
+    },
+    mutations: {
+    },
+    getters: {
+    },
+    actions: {
+        list (state, params = {}) {
+            return http.get('/component/list', { params }).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        useing (state, params = {}) {
+            return http.get('/component/useing', { params }).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        detail (state, params) {
+            return http.get('/component/detail', { params }).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        create (state, params) {
+            return http.post('/component/create', params).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        update (state, params) {
+            return http.post('/component/update', params).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        upload () {
+            return http.get('/component/upload').then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+
+        categoryList (state) {
+            return http.get('/componentCategory/list').then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+
+        categoryCreate (state, params) {
+            return http.post('/componentCategory/create', params).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        categoryUpdate (state, params) {
+            return http.post('/componentCategory/update', params).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+
+        categoryDelete (stae, params) {
+            return http.delete('/componentCategory/delete', { params }).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        }
+    }
+}
diff --git a/paas-ce/lesscode/lib/client/src/store/modules/drag.js b/paas-ce/lesscode/lib/client/src/store/modules/drag.js
index 911d3de8b..3b40ace7c 100644
--- a/paas-ce/lesscode/lib/client/src/store/modules/drag.js
+++ b/paas-ce/lesscode/lib/client/src/store/modules/drag.js
@@ -35,7 +35,11 @@ export default {
             }
         },
 
-        functionGroup: [],
+        copyData: {},
+
+        targetHistory: [],
+
+        curHistoryIndex: 0,
 
         copyData: {},
 
@@ -50,10 +54,6 @@ export default {
         setCopyData (state, selectedComponent) {
             state.copyData = selectedComponent
         },
-        setFunctionGroup (state, functionGroup) {
-            localStorage.setItem('functionGroup', JSON.stringify(functionGroup))
-            state.functionGroup = functionGroup
-        },
         setDraggableSourceGroup (state, group) {
             state.draggableSourceGroup = Object.assign({}, group)
         },
@@ -154,72 +154,7 @@ export default {
         copyData: state => state.copyData,
         astData: state => state.astData,
         curSelectedComponentData: state => state.curSelectedComponentData,
-        pageData: state => state.pageData,
-        functionGroup (state) {
-            if (state.functionGroup && state.functionGroup.length) {
-                return state.functionGroup
-            } else {
-                const res = JSON.parse(localStorage.getItem('functionGroup'))
-                        || [{
-                            name: '系统方法',
-                            id: 'system',
-                            children: [
-                                {
-                                    name: 'getMockData',
-                                    id: 'getMockData',
-                                    funName: 'getMockData',
-                                    funParam: [],
-                                    funBody: [
-                                        'this.$http.get("/test/getMockData")',
-                                        '.then((res) => {',
-                                        '\tconst data = JSON.stringify(res)',
-                                        '\talert(data)',
-                                        '})'
-                                    ].join('\n'),
-                                    code: [
-                                        'function getMockData (res) {',
-                                        '\tthis.$http.get("/test/getMockData")',
-                                        '\t.then((res) => {',
-                                        '\t\treturn res.data',
-                                        '\t})',
-                                        '}'
-                                    ].join('\n')
-                                },
-                                {
-                                    name: 'clearData',
-                                    id: 'clearData',
-                                    funName: 'clearData',
-                                    funParam: ['res'],
-                                    funBody: [
-                                        'return res.data'
-                                    ].join('\n'),
-                                    code: [
-                                        'function clearData (res) {',
-                                        '\treturn res.data',
-                                        '}'
-                                    ].join('\n')
-                                }
-                            ]
-                        }]
-                state.functionGroup = res
-                return res
-            }
-        },
-        getMethodById: (state) => (methodId) => {
-            let returnMethod = {
-                id: '',
-                funName: '',
-                code: 'function emptyFunc () {}'
-            }
-            state.functionGroup.forEach((group) => {
-                const funChildren = group.children || []
-                const method = funChildren.find(x => x.id === methodId)
-                if (method) {
-                    returnMethod = method
-                }
-            })
-            return returnMethod
-        }
+        pageData: state => state.pageData
     },
     actions: {
 
diff --git a/paas-ce/lesscode/lib/client/src/store/modules/functions.js b/paas-ce/lesscode/lib/client/src/store/modules/functions.js
new file mode 100644
index 000000000..2d1499652
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/store/modules/functions.js
@@ -0,0 +1,93 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2019 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import http from '@/api'
+const perfix = '/function'
+
+export default {
+    namespaced: true,
+    state: {
+        funcGroups: []
+    },
+    mutations: {
+    },
+    getters: {
+        funcGroups: state => state.funcGroups
+    },
+    actions: {
+        getAllGroupFuncs ({ state }, projectId) {
+            return http.get(`${perfix}/getAllGroupFunc`, { params: { projectId } }).then((res = {}) => {
+                state.funcGroups = res.data || []
+            })
+        },
+
+        addFunc ({ state }, { groupId, func }) {
+            return http.post(`${perfix}/addFunction`, func).then((res = {}) => {
+                const newFunc = res.data || {}
+                const curGroup = state.funcGroups.find((group) => (group.id === groupId)) || {}
+                curGroup.functionList.unshift(newFunc)
+                return newFunc
+            })
+        },
+
+        deleteFunc ({ state }, { groupId, funcId }) {
+            return http.delete(`${perfix}/deleteFunction`, { params: { id: funcId } }).then(() => {
+                const groups = state.funcGroups
+                const curGroup = groups.find(x => x.id === groupId)
+                const funcIndex = curGroup.functionList.findIndex((func) => (func.id === funcId))
+                curGroup.functionList.splice(funcIndex, 1)
+            })
+        },
+
+        editFunc ({ state }, { groupId, func }) {
+            return http.put(`${perfix}/editFunction`, func).then((res) => {
+                const data = res.data || []
+                const newFunc = data[0] || {}
+                if (newFunc.updateTime !== func.updateTime) {
+                    const groups = state.funcGroups
+                    const oldGroup = groups.find(x => x.id === groupId)
+                    const curFunc = oldGroup.functionList.find(x => x.id === func.id)
+                    Object.assign(curFunc, newFunc)
+                    const curGroup = groups.find(x => x.id === func.funcGroupId)
+                    const oldIndex = oldGroup.functionList.findIndex(x => x.id === func.id)
+                    oldGroup.functionList.splice(oldIndex, 1)
+                    curGroup.functionList.unshift(curFunc)
+                }
+                return newFunc
+            })
+        },
+
+        addGroup ({ state }, data) {
+            return http.post(`${perfix}/addFuncGroup`, data).then((res = {}) => {
+                const newGroup = res.data || {}
+                state.funcGroups.push(...newGroup)
+            })
+        },
+
+        deleteGroup ({ state }, params) {
+            return http.delete(`${perfix}/deleteFuncGroup`, { params }).then(() => {
+                const index = state.funcGroups.findIndex((group) => (group.id === params.id))
+                state.funcGroups.splice(index, 1)
+            })
+        },
+
+        editGroups ({ state }, groups) {
+            groups = JSON.parse(JSON.stringify(groups))
+            const copyGroups = state.funcGroups
+            groups.forEach((group) => {
+                const curGroup = copyGroups.find(x => x.id === group.id)
+                Object.assign(curGroup, group)
+            })
+            state.funcGroups.sort((pre, next) => (pre.order - next.order))
+            return http.put(`${perfix}/editFuncGroups`, groups)
+        }
+    }
+}
diff --git a/paas-ce/lesscode/lib/client/src/store/modules/page.js b/paas-ce/lesscode/lib/client/src/store/modules/page.js
new file mode 100644
index 000000000..50e28056d
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/store/modules/page.js
@@ -0,0 +1,65 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2019 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import http from '@/api'
+
+export default {
+    namespaced: true,
+    state: {
+    },
+    mutations: {
+    },
+    getters: {
+    },
+    actions: {
+        create ({ commit }, { data = {} }) {
+            return http.post('/page/create', data).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        getList ({ commit }, { projectId }) {
+            return http.get(`/page/getList?projectId=${projectId}`).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        update ({ commit }, { data = {} }) {
+            return http.put('/page/update', data).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        copy ({ commit }, { data = {} }) {
+            return http.post('/page/copy', data).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        delete ({ commit }, { pageId }) {
+            return http.delete(`/page/delete?pageId=${pageId}`).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        checkName ({ commit }, { data = {} }) {
+            return http.post('/page/checkName', data).then(response => {
+                return response.data || ''
+            })
+        },
+        detail ({ commit }, { pageId }) {
+            return http.get(`/page/detail?pageId=${pageId}`).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        }
+    }
+}
diff --git a/paas-ce/lesscode/lib/client/src/store/modules/project.js b/paas-ce/lesscode/lib/client/src/store/modules/project.js
new file mode 100644
index 000000000..d127e7bb9
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/store/modules/project.js
@@ -0,0 +1,70 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2019 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import http from '@/api'
+
+export default {
+    namespaced: true,
+    state: {
+        currentProject: {}
+    },
+    mutations: {
+        setCurrentProject (state, project) {
+            state.currentProject = Object.assign({}, project)
+        }
+    },
+    getters: {
+        getCurrentProject: state => state.currentProject
+    },
+    actions: {
+        create ({ commit }, { data, config }) {
+            return http.post('/project/create', data, config).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        query ({ commit }, { config }) {
+            return http.get('/project/query', config).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        update ({ commit }, { data, config }) {
+            return http.put('/project/update', data, config).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        delete ({ commit }, { config }) {
+            return http.delete('/project/delete', config).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        favorite ({ commit }, { data, config }) {
+            return http.post('/project/favorite', data, config).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        },
+        checkname ({ commit }, { data, config }) {
+            return http.post('/project/checkname', data, config).then(response => {
+                return response
+            })
+        },
+        detail ({ commit }, { projectId }) {
+            return http.get(`/project/detail?projectId=${projectId}`).then(response => {
+                const data = response.data || ''
+                return data
+            })
+        }
+    }
+}
diff --git a/paas-ce/lesscode/lib/client/src/views/changelog/index.md b/paas-ce/lesscode/lib/client/src/views/changelog/index.md
index 739527023..b1b587a58 100644
--- a/paas-ce/lesscode/lib/client/src/views/changelog/index.md
+++ b/paas-ce/lesscode/lib/client/src/views/changelog/index.md
@@ -2,7 +2,19 @@
 
 <div class="changelog-wrapper">
 
-### 0.0.3
+### v0.0.4
+###### 2020.08.14
+
+* **[add]**:
+    - 新增项目管理模块
+    - 新增页面管理模块
+    - 新增函数管理模块
+* **[update]**:
+    - 拖拽画布中的函数管理优化
+
+---
+
+### v0.0.3
 ###### 2020.06.12
 
 * **[add]**:
@@ -20,7 +32,7 @@
 
 ---
 
-### 0.0.2
+### v0.0.2
 ###### 2020.05.26
 
 * **[add]**:
@@ -34,7 +46,7 @@
 
 ---
 
-### 0.0.1
+### v0.0.1
 ###### 2020.04.28
 
 * **[add]**:
diff --git a/paas-ce/lesscode/lib/client/src/views/help/index.css b/paas-ce/lesscode/lib/client/src/views/help/index.css
index 1670bdff6..27adac06a 100644
--- a/paas-ce/lesscode/lib/client/src/views/help/index.css
+++ b/paas-ce/lesscode/lib/client/src/views/help/index.css
@@ -494,12 +494,11 @@ $headerHeight: 64px;
             .page-name {
                 font-size: 16px;
                 color: #63656E;
-                .back {
-                    font-size: 18px;
-                    margin-left: 5px;
-                    cursor: pointer;
-                    color: #3a84ff;
-                }
+                padding-left: 12px;
+            }
+            .app-logo {
+                font-size: 0;
+                cursor: pointer;
             }
         }
     }
diff --git a/paas-ce/lesscode/lib/client/src/views/help/index.vue b/paas-ce/lesscode/lib/client/src/views/help/index.vue
index c6d2bc491..c9da2db78 100644
--- a/paas-ce/lesscode/lib/client/src/views/help/index.vue
+++ b/paas-ce/lesscode/lib/client/src/views/help/index.vue
@@ -15,12 +15,14 @@
             <aside class="main-left-sidebar">
                 <div class="main-top">
                     <div class="page-title">
+                        <span class="bk-drag-icon app-logo" @click="jump('projects')">
+                            <svg aria-hidden="true" width="22" height="22">
+                                <use xlink:href="#bk-drag-template-logo"></use>
+                            </svg>
+                        </span>
                         <div class="page-name">
                             可视化开发帮助文档
                         </div>
-                        <div class="page-name" @click="jump('new')">
-                            <i class="bk-drag-icon bk-drag-home back"></i>
-                        </div>
                     </div>
                 </div>
                 <div class="sidebar-panel">
diff --git a/paas-ce/lesscode/lib/client/src/views/index/index.css b/paas-ce/lesscode/lib/client/src/views/index/index.css
index d87150f98..27a24766a 100644
--- a/paas-ce/lesscode/lib/client/src/views/index/index.css
+++ b/paas-ce/lesscode/lib/client/src/views/index/index.css
@@ -242,10 +242,33 @@ $headerHeight: 64px;
         display: flex;
         width: 300px;
         align-items: center;
-        padding-left: 22px;
         .page-name {
-            font-size: 16px;
-            color: #63656E;
+            display: flex;
+            align-items: center;
+            .bk-drag-icon {
+                padding: 10px;
+                cursor: pointer;
+            }
+            .bk-drag-arrow-back {
+                font-size: 13px;
+                color: #3a84ff;
+            }
+            .template-logo svg {
+                vertical-align: middle;
+            }
+            .seperate-line {
+                width: 1px;
+                color: #d8d8d8;
+                margin-left: -2px;
+            }
+            .name-content {
+                cursor: default;
+                margin-left: 10px;
+                width: 220px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
         }
     }
 
diff --git a/paas-ce/lesscode/lib/client/src/views/index/index.vue b/paas-ce/lesscode/lib/client/src/views/index/index.vue
index abeabe0dc..5b0d5b826 100644
--- a/paas-ce/lesscode/lib/client/src/views/index/index.vue
+++ b/paas-ce/lesscode/lib/client/src/views/index/index.vue
@@ -14,7 +14,19 @@
         <div class="main-top">
             <div class="page-title">
                 <div class="page-name">
-                    可视化开发
+                    <i class="bk-drag-icon bk-drag-arrow-back" title="返回页面列表" @click="leavePage('pageList')"></i>
+                    <span class="seperate-line">|</span>
+                    <span class="bk-drag-icon template-logo" title="返回项目列表" @click="leavePage('projects')">
+                        <svg aria-hidden="true" width="16" height="16">
+                            <use xlink:href="#bk-drag-template-logo"></use>
+                        </svg>
+                    </span>
+                    <span class="seperate-line">|</span>
+                    <span class="name-content" :title="`${pageDetail.pageName}【${projectDetail.projectName}】`">
+                        {{ pageDetail.pageName }}【{{ projectDetail.projectName }}】
+                        <!-- <span :title="pageDetail.pageName" class="page-name-span">{{ pageDetail.pageName }}</span>
+                        【<span :title="projectDetail.projectName" class="project-name-span">{{ projectDetail.projectName }}</span>】 -->
+                    </span>
                 </div>
             </div>
             <div class="function-and-tool">
@@ -26,6 +38,11 @@
                     <!-- <div class="action-item" v-bk-tooltips="{ content: '撤销', placements: ['bottom'] }">
                         <i class="bk-drag-icon bk-drag-undo"></i>
                     </div> -->
+                    <div class="action-item" :class="actionSelected === 'save' ? 'active' : ''"
+                        v-bk-tooltips="{ content: '保存', placements: ['bottom'] }"
+                        @click="handleSave">
+                        <i class="bk-drag-icon bk-drag-save"></i>
+                    </div>
                     <div class="action-item" :class="actionSelected === 'preview' ? 'active' : ''"
                         v-bk-tooltips="{ content: '预览', placements: ['bottom'] }"
                         @click="handlePreview">
@@ -62,12 +79,7 @@
                     </div>
                 </div>
             </div>
-            <div class="changelog" @click="goChangelog" v-bk-tooltips="{ content: '更新日志', placements: ['bottom'] }">
-                <i class="bk-drag-icon bk-drag-update-log-fill"></i>
-            </div>
-            <div class="github-link" @click="goGithub" v-bk-tooltips="{ content: 'Github', placements: ['bottom'] }">
-                <i class="bk-drag-icon bk-drag-github-logo"></i>
-            </div>
+            <extra-links></extra-links>
         </div>
         <div class="main-container">
             <aside class="main-left-sidebar" :class="{ 'is-collapse': collapseSide.left }">
@@ -131,8 +143,12 @@
             </aside>
 
             <!-- 这里用 v-show，切换源码或者预览时，如果时 v-if，那么 grid.vue 里的 renderDataSlot 会重置，这个值并没有存在 store 中 -->
-            <div class="main-content" :class="mainContentClass" @click="dragWrapperClickHandler" v-show="actionSelected === 'edit'">
+            <div class="main-content" v-bkloading="{ isLoading: contentLoading, opacity: 1 }"
+                :class="mainContentClass"
+                @click="dragWrapperClickHandler"
+                v-show="actionSelected === 'edit'">
                 <vue-draggable
+                    v-show="!contentLoading"
                     :key="refreshDragAreaKey"
                     class="target-drag-area"
                     :list="targetData"
@@ -169,7 +185,7 @@
             </aside>
         </div>
 
-        <Methods :is-show.sync="isShowFun"></Methods>
+        <Methods :show.sync="isShowFun"></Methods>
 
         <bk-dialog v-model="delComponentConf.visiable"
             class="del-component-dialog"
@@ -189,7 +205,7 @@
 </template>
 
 <script>
-    import { mapGetters, mapMutations } from 'vuex'
+    import { mapGetters, mapMutations, mapActions } from 'vuex'
     import cloneDeep from 'lodash.clonedeep'
 
     import componentList from '@/element-materials/materials'
@@ -200,6 +216,8 @@
     import Methods from '@/components/methods'
     import codeMixin from '@/components/vue-code/code-mixin'
     import ComponentSearch from './component-search'
+    import ExtraLinks from '@/components/ui/extra-links'
+    import html2canvas from 'html2canvas'
 
     import customComponents from '@/custom'
 
@@ -210,6 +228,7 @@
             VueCode,
             Methods,
             ComponentSearch,
+            ExtraLinks,
 
             ...customComponents
         },
@@ -222,6 +241,8 @@
             })
 
             return {
+                pageDetail: {},
+                projectDetail: {},
                 componentList: componentList,
                 componentGroupList,
                 collapseSide: {
@@ -251,7 +272,8 @@
                     { keys: ['Delete / Backspace'], name: '快速删除' }
                 ],
                 isInDragArea: false,
-                refreshVueCodeKey: +new Date()
+                refreshVueCodeKey: +new Date(),
+                contentLoading: true
             }
         },
         computed: {
@@ -260,11 +282,18 @@
                 'draggableSourceGroup',
                 'draggableTargetGroup',
                 'curSelectedComponentData',
-                'functionGroup',
                 'pageData',
                 'copyData'
             ]),
 
+            projectId () {
+                return this.$route.params.projectId || ''
+            },
+
+            pageId () {
+                return this.$route.params.pageId || ''
+            },
+
             mainContentClass () {
                 return {
                     'collapse-none': !this.collapseSide.left && !this.collapseSide.right,
@@ -304,9 +333,9 @@
                 return componentGroups
             }
         },
-        created () {
-            this.setFunctionGroup(this.functionGroup)
-
+        async created () {
+            this.pageDetail = await this.$store.dispatch('page/detail', { pageId: this.pageId }) || {}
+            this.contentLoading = false
             const mockCurSelectComponentData = {
                 componentId: 'grid-' + uuid(),
                 renderKey: uuid(),
@@ -333,22 +362,44 @@
 
             this.curDragingComponent = Object.assign({}, mockCurSelectComponentData)
             // this.setCurSelectedComponentData(this.curDragingComponent)
-            this.setTargetData([this.curDragingComponent])
 
-            window.addEventListener('keydown', this.quickOperation)
-            window.addEventListener('keyup', this.judgeCtrl)
-            window.addEventListener('click', this.toggleQuickOperation, true)
+            // 设置初始targetData
+            let initData = []
+            try {
+                initData = this.pageDetail.content ? JSON.parse(this.pageDetail.content) : [this.curDragingComponent]
+                this.refreshDragAreaKey = +new Date()
+            } catch (err) {
+                initData = [this.curDragingComponent]
+                this.$bkMesseage({
+                    theme: 'error',
+                    message: 'targetData格式错误'
+                })
+            }
+            this.setTargetData(initData)
+
+            this.projectDetail = await this.$store.dispatch('project/detail', { projectId: this.projectId }) || {}
 
             // for test
             window.test = this.test
             window.test1 = this.test1
         },
         mounted () {
-            window.addEventListener('beforeunload', function (e) {
-                const confirmationMessage = '...';
-                (e || window.event).returnValue = confirmationMessage
-                return confirmationMessage
+            const projectId = this.$route.params.projectId || 1
+            this.getAllGroupFuncs(projectId).catch((err) => {
+                this.$bkMessage({ theme: 'error', message: err.message || err })
             })
+
+            window.addEventListener('keydown', this.quickOperation)
+            window.addEventListener('keyup', this.judgeCtrl)
+            window.addEventListener('click', this.toggleQuickOperation, true)
+
+            window.addEventListener('beforeunload', this.beforeunloadConfirm)
+        },
+        beforeDestroy () {
+            window.removeEventListener('keydown', this.quickOperation)
+            window.removeEventListener('keyup', this.judgeCtrl)
+            window.removeEventListener('click', this.toggleQuickOperation, true)
+            window.removeEventListener('beforeunload', this.beforeunloadConfirm)
         },
         beforeDestroy () {
             window.removeEventListener('keydown', this.quickOperation)
@@ -360,13 +411,16 @@
                 'setTargetData',
                 'setDraggableSourceGroup',
                 'setCurSelectedComponentData',
-                'setFunctionGroup',
                 'setCopyData',
                 'pushTargetHistory',
                 'backTargetHistory',
                 'forwardTargetHistory'
             ]),
 
+            ...mapActions('functions', [
+                'getAllGroupFuncs'
+            ]),
+
             /**
              * 检测是否能删除组件
              *
@@ -437,6 +491,12 @@
                 }
             },
 
+            beforeunloadConfirm (event) {
+                const confirmationMessage = '...';
+                (event || window.event).returnValue = confirmationMessage
+                return confirmationMessage
+            },
+
             cutComponent () {
                 if (!this.hasCtrl || Object.keys(this.curSelectedComponentData || {}).length <= 0) return
 
@@ -830,30 +890,9 @@
                     localStorage.removeItem('layout-target-data')
                     localStorage.setItem('layout-target-data', JSON.stringify(this.targetData))
                     const routerUrl = this.$router.resolve({
-                        name: 'preview',
-                        query: {
-                            tmpFile: 'vue-layout-demo' + Math.random().toString().substr(5) + '.vue'
-                        }
+                        name: 'preview'
                     })
                     window.open(routerUrl.href, '_blank')
-
-                    // const code = this.getCode()
-                    // const res = await this.$store.dispatch('vueCode/saveVueFile', { code })
-                    // console.error(res)
-                    // if (res) {
-                    //     setTimeout(() => {
-                    //         const routerUrl = this.$router.resolve({
-                    //             name: 'preview',
-                    //             query: {
-                    //                 tmpFile: res
-                    //             }
-                    //         })
-                    //         console.error(routerUrl)
-                    //         window.open(routerUrl.href, '_blank')
-                    //     }, 10)
-                    // } else {
-                    //     errTips = '预览异常'
-                    // }
                 } catch (err) {
                     errTips = err.message || err || '预览异常'
                 }
@@ -863,18 +902,44 @@
                 })
             },
 
-            /**
-             * 跳转到开源版 github
-             */
-            goGithub () {
-                window.open('https://github.com/Tencent/bk-PaaS/blob/lesscode-master/paas-ce/lesscode/README.md')
+            handleSave () {
+                try {
+                    html2canvas(document.querySelector('.main-content')).then((canvas) => {
+                        const imgData = canvas.toDataURL('image/png')
+                        const res = this.$store.dispatch('page/update', {
+                            data: {
+                                pageData: {
+                                    id: parseInt(this.$route.params.pageId),
+                                    content: JSON.stringify(this.targetData),
+                                    sourceCode: this.getCode(),
+                                    previewImg: this.actionSelected !== 'vueCode' ? imgData : undefined
+                                }
+                            }
+                        })
+                        res && this.$bkMessage({
+                            theme: 'success',
+                            message: '保存成功'
+                        })
+                    })
+                } catch (err) {
+                    console.log(err)
+                }
             },
 
-            goChangelog () {
-                const routerUrl = this.$router.resolve({
-                    name: 'changelog'
+            leavePage (routeName) {
+                this.$bkInfo({
+                    title: '确认离开?',
+                    subTitle: `您将离开画布编辑页面，请确认相应修改已保存`,
+                    confirmFn: async () => {
+                        this.$router.push({
+                            name: routeName,
+                            params: {
+                                projectId: this.projectId,
+                                pageId: this.pageId
+                            }
+                        })
+                    }
                 })
-                window.open(routerUrl.href, '_blank')
             },
 
             test () {
diff --git a/paas-ce/lesscode/lib/client/src/views/preview/index.vue b/paas-ce/lesscode/lib/client/src/views/preview/index.vue
index c5fe5698d..dd64f5960 100644
--- a/paas-ce/lesscode/lib/client/src/views/preview/index.vue
+++ b/paas-ce/lesscode/lib/client/src/views/preview/index.vue
@@ -14,6 +14,7 @@
     import httpVueLoader from '@/common/http-vue-loader'
     import codeMixin from '@/components/vue-code/code-mixin'
     import { customComponentList } from '@/custom'
+    import { mapActions } from 'vuex'
 
     customComponentList.forEach(name => {
         const ref = require('@/custom/' + name)
@@ -52,6 +53,7 @@
         mixins: [codeMixin],
         data () {
             return {
+                pageDetail: {},
                 pageType: 'preview',
                 comp: 'LoadingComponent',
                 isLoading: false,
@@ -60,36 +62,47 @@
             }
         },
         computed: {
-            url () {
-                return './static/' + this.fileName
-            },
-            fileName () {
-                return (this.$route.query && this.$route.query.tmpFile) || ''
+            fromPageList () {
+                return this.$route.query.type && this.$route.query.type === 'fromList'
             }
         },
         async created () {
-            if (this.fileName) {
-                await this.loadFile()
-            } else {
-                this.$bkMessage({
-                    theme: 'error',
-                    message: '预览异常'
-                })
+            const projectId = this.$route.params.projectId || 1
+            await this.getAllGroupFuncs(projectId)
+
+            if (this.fromPageList) {
+                this.pageDetail = await this.$store.dispatch('page/detail', { pageId: this.$route.params.pageId })
             }
+
+            await this.loadFile()
         },
         mounted () {
-            // window.addEventListener('beforeunload', this.deleTmpFile)
             this.minHeight = window.innerHeight
             window.addEventListener('resize', this.resizeHandler)
         },
         destroyed () {
             window.removeEventListener('resize', this.resizeHandler)
-            // this.deleTmpFile()
         },
         methods: {
+            ...mapActions('functions', [
+                'getAllGroupFuncs'
+            ]),
+
             async loadFile () {
                 this.isLoading = true
-                this.targetData = JSON.parse(localStorage.getItem('layout-target-data'))
+                try {
+                    if (this.fromPageList) {
+                        this.targetData = JSON.parse(this.pageDetail.content)
+                    } else {
+                        this.targetData = JSON.parse(localStorage.getItem('layout-target-data'))
+                    }
+                } catch (err) {
+                    this.$bkMesseage({
+                        theme: 'error',
+                        message: 'targetData格式错误'
+                    })
+                }
+
                 let code = this.getCode().replace('export default', 'module.exports =')
                 code = code.replace('components: { chart: ECharts },', '')
                 const res = httpVueLoader(code)
@@ -98,7 +111,6 @@
                     this.comp = 'preview-page'
                     this.isLoading = false
                 }, 300)
-
                 // this.isLoading = true
                 // try {
                 //     const res = await httpVueLoader(this.url)
@@ -117,18 +129,13 @@
                 //     this.isLoading = false
                 // }
             },
-            deleTmpFile () {
-                this.$store.dispatch('vueCode/deleteTmpFile', {
-                    fileName: this.fileName
-                })
-            },
             resizeHandler () {
                 this.minHeight = window.innerHeight
             }
         },
         template: ''
             + '<div :style="{ \'min-height\': minHeight + \'px\' }">'
-            + '<component :is="comp" :is-loading="isLoading" :url="url"/>'
+            + '<component :is="comp" :is-loading="isLoading"/>'
             + '</div>'
     }
 </script>
diff --git a/paas-ce/lesscode/lib/client/src/views/project/function-manage.vue b/paas-ce/lesscode/lib/client/src/views/project/function-manage.vue
new file mode 100644
index 000000000..12e1adc14
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/views/project/function-manage.vue
@@ -0,0 +1,657 @@
+<template>
+    <article>
+        <layout>
+            <section slot="left" class="function-left">
+                <h3 class="list-head">
+                    <bk-input class="head-input" placeholder="请输入" :clearable="true" right-icon="bk-icon icon-search" v-model="searchGroupStr"></bk-input>
+                    <bk-popconfirm trigger="click" confirm-text="" cancel-text="" :on-hide="() => (groupNameErrMessage = '')">
+                        <div slot="content">
+                            <bk-input :class="['add-function-group', { 'input-error': groupNameErrMessage }]"
+                                placeholder="请输入函数分类，多个分类 / 分隔，回车保存"
+                                @enter="addFunctionGroup"
+                                @focus="groupNameErrMessage = ''"
+                                @input="groupNameErrMessage = ''"
+                                v-model="groupNameStr"
+                                right-icon="loading"
+                                v-bkloading="{ isLoading: isAddLoading }"
+                                ref="addGroupInput"
+                            ></bk-input>
+                            <p class="input-err-message" v-if="groupNameErrMessage">{{ groupNameErrMessage }}</p>
+                        </div>
+                        <i class="bk-icon icon-plus" @click="handleAddGroup" v-bk-tooltips.top="'添加分类'"></i>
+                    </bk-popconfirm>
+                </h3>
+
+                <vue-draggable v-model="groupList"
+                    class="group-list"
+                    :group="{ name: 'group-list' }"
+                    :sort="searchGroupStr === ''"
+                    v-bkloading="{ isLoading: isLoadingGroup }"
+                >
+                    <li v-for="group in groupList" :key="group.id" :class="['function-item', { select: group.id === curGroupId }]" @mousedown.self="curGroupId = group.id">
+                        <i class="bk-drag-icon bk-drag-grag-fill hover-show" @mousedown.self="curGroupId = group.id"></i>
+                        <i class="bk-drag-icon bk-drag-folder-fill" @mousedown.self="curGroupId = group.id"></i>
+                        <span :class="['item-name', { 'show-tool-name': group.showChange }]" @mousedown.self="curGroupId = group.id" :title="group.groupName">{{ group.groupName }}</span>
+                        <bk-popconfirm trigger="click" confirm-text="" cancel-text="" class="item-tool-box edit-box" :on-hide="() => (groupNameErrMessage = '', group.showChange = false)">
+                            <div slot="content">
+                                <bk-input :class="['add-function-group', { 'input-error': groupNameErrMessage }]"
+                                    placeholder="请输入函数分类"
+                                    @enter="changeGroupName(group, $event)"
+                                    @focus="groupNameErrMessage = ''"
+                                    @input="groupNameErrMessage = ''"
+                                    v-model="group.tempName"
+                                    v-bkloading="{ isLoading: isAddLoading }"
+                                    :ref="group.id"
+                                ></bk-input>
+                                <p class="input-err-message" v-if="groupNameErrMessage">{{ groupNameErrMessage }}</p>
+                            </div>
+                            <span :class="['item-tool', 'hover-show', { 'click-show': group.showChange }]" @click="openChange(group)"><i class="bk-icon icon-edit2"></i></span>
+                        </bk-popconfirm>
+                        <bk-popover :disabled="group.functionList.length <= 0" content="该分类下有函数，不能删除" class="item-tool-box del-box">
+                            <i :class="['bk-icon', 'icon-close', 'hover-show', 'disable', { 'click-show': group.showChange }]" v-if="+group.functionList.length"></i>
+                            <span :class="['item-tool', 'hover-show', { 'click-show': group.showChange }]" @click="deleteItem(group.id, `删除分类（${group.groupName}）`, true)" v-else><i class="bk-icon icon-close"></i></span>
+                        </bk-popover>
+                        <span class="item-num" @mousedown.self="curGroupId = group.id">{{ (group.functionList || []).length }}</span>
+                    </li>
+                    <bk-exception class="exception-wrap-item exception-part" type="empty" scene="part" v-if="groupList.length <= 0">
+                        <div v-if="!searchGroupStr">暂无分类</div>
+                        <div v-else>暂无搜索结果</div>
+                    </bk-exception>
+                </vue-draggable>
+            </section>
+
+            <section class="function-main">
+                <h3 class="function-head">
+                    <bk-button theme="primary" @click="addFunction">新建</bk-button>
+                    <bk-input class="head-input" placeholder="请输入" :clearable="true" right-icon="bk-icon icon-search" v-model="searchFunStr"></bk-input>
+                </h3>
+
+                <bk-table :data="curFuncList"
+                    :outer-border="false"
+                    :header-border="false"
+                    :header-cell-style="{ background: '#f0f1f5' }"
+                    v-bkloading="{ isLoading: isLoadingFunc }"
+                    class="function-table"
+                >
+                    <bk-table-column label="函数名称" prop="funcName" show-overflow-tooltip>
+                        <template slot-scope="props">
+                            <span>{{ props.row.funcName || '--' }}</span>
+                        </template>
+                    </bk-table-column>
+                    <bk-table-column label="所属分类" prop="funcGroupId" :formatter="groupFormatter" show-overflow-tooltip></bk-table-column>
+                    <bk-table-column label="简介" prop="funcSummary" show-overflow-tooltip>
+                        <template slot-scope="props">
+                            <span>{{ props.row.funcSummary || '--' }}</span>
+                        </template>
+                    </bk-table-column>
+                    <bk-table-column label="更新人" prop="updateUser">
+                        <template slot-scope="props">
+                            <label-list :list="[props.row.updateUser].filter(x => x)"></label-list>
+                        </template>
+                    </bk-table-column>
+                    <bk-table-column label="更新时间" prop="updateTime" :formatter="timeFormatter" show-overflow-tooltip sortable></bk-table-column>
+                    <bk-table-column label="引用界面">
+                        <template slot-scope="props">
+                            <label-list :list="(props.row.pages || []).map(x => x.pageName)"></label-list>
+                        </template>
+                    </bk-table-column>
+                    <bk-table-column label="操作" width="180">
+                        <template slot-scope="props">
+                            <span class="table-bth" @click="editFunction(props.row)">编辑</span>
+                            <span class="table-bth" @click="copyRow(props.row)">复制</span>
+                            <span class="table-bth" @click="deleteItem(props.row.id, `删除函数【${props.row.funcName}】`, false)" v-if="(props.row.pages || []).length <= 0">删除</span>
+                            <span class="table-bth disable" v-bk-tooltips="{ content: '该函数被页面引用，请修改后再删除', placements: ['top'] }" v-else>删除</span>
+                        </template>
+                    </bk-table-column>
+                </bk-table>
+            </section>
+        </layout>
+
+        <bk-sideslider :is-show.sync="funcObj.show" :quick-close="true" :title="funcObj.title" :width="796" @hidden="closeAddFunction">
+            <func-form :func-data="funcObj.form" class="add-function" ref="func" slot="content"></func-form>
+            <section slot="footer" class="add-footer">
+                <bk-button theme="primary" @click="submitFunc" :loading="funcObj.loading">提交</bk-button>
+                <bk-button @click="closeAddFunction">取消</bk-button>
+            </section>
+        </bk-sideslider>
+
+        <bk-dialog v-model="delObj.show"
+            render-directive="if"
+            theme="primary"
+            ext-cls="delete-dialog-wrapper"
+            title="确定删除？"
+            width="400"
+            footer-position="center"
+            :mask-close="false"
+            :auto-close="false"
+        >
+            <p class="delete-content">{{ delObj.name }}</p>
+            <div class="dialog-footer" slot="footer">
+                <bk-button
+                    theme="danger"
+                    :loading="delObj.loading"
+                    @click="requestDelete">删除</bk-button>
+                <bk-button @click="delObj.show = false" :disabled="delObj.loading">取消</bk-button>
+            </div>
+        </bk-dialog>
+    </article>
+</template>
+
+<script>
+    import { mapActions, mapGetters } from 'vuex'
+    import dayjs from 'dayjs'
+    import layout from '@/components/ui/layout'
+    import funcForm from '@/components/methods/funcForm'
+    import labelList from '@/components/methods/label-list.vue'
+
+    export default {
+        components: {
+            layout,
+            labelList,
+            funcForm
+        },
+
+        data () {
+            return {
+                isAddLoading: false,
+                searchGroupStr: '',
+                searchFunStr: '',
+                groupNameStr: '',
+                groupNameErrMessage: '',
+                curGroupId: undefined,
+                isLoadingGroup: false,
+                isLoadingFunc: false,
+                delObj: {
+                    id: '',
+                    isDeleteGroup: false,
+                    loading: false,
+                    show: false,
+                    name: ''
+                },
+                funcObj: {
+                    show: false,
+                    isEdit: false,
+                    loading: false,
+                    title: '',
+                    form: {}
+                }
+            }
+        },
+
+        computed: {
+            ...mapGetters('functions', ['funcGroups']),
+
+            groupList: {
+                get () {
+                    const searchReg = new RegExp(this.searchGroupStr, 'i')
+                    const list = this.funcGroups.filter((group) => searchReg.test(group.groupName))
+                    const groupIds = list.map(x => x.id)
+                    if (!groupIds.includes(this.curGroupId)) {
+                        const firstGroup = list[0]
+                        if (firstGroup) this.curGroupId = firstGroup.id
+                    }
+                    return list
+                },
+                set (list) {
+                    let order = 0
+                    list.forEach((group) => {
+                        group.order = order
+                        order++
+                    })
+                    this.editGroups(list)
+                }
+            },
+
+            curGroup () {
+                return this.funcGroups.find((group) => (group.id === this.curGroupId)) || {}
+            },
+
+            curFuncList () {
+                const searchReg = new RegExp(this.searchFunStr, 'i')
+                return (this.curGroup.functionList || []).filter((func) => searchReg.test(func.funcName))
+            }
+        },
+
+        created () {
+            this.getGroupList()
+        },
+
+        methods: {
+            ...mapActions('functions', [
+                'getAllGroupFuncs',
+                'addFunc',
+                'editFunc',
+                'deleteGroup',
+                'deleteFunc',
+                'editGroups',
+                'addGroup'
+            ]),
+
+            handleAddGroup () {
+                this.groupNameStr = ''
+                setTimeout(() => {
+                    this.$refs.addGroupInput.focus()
+                }, 200)
+            },
+
+            addFunction () {
+                this.funcObj.show = true
+                this.funcObj.isEdit = false
+                this.funcObj.title = '新增函数'
+                this.funcObj.form.funcGroupId = this.curGroupId
+            },
+
+            editFunction (row) {
+                this.funcObj.show = true
+                this.funcObj.isEdit = true
+                this.funcObj.title = '编辑函数'
+                Object.assign(this.funcObj.form, row)
+            },
+
+            copyRow (row) {
+                this.funcObj.show = true
+                this.funcObj.isEdit = false
+                this.funcObj.title = '复制函数'
+                const date = new Date()
+                let funcName = row.funcName
+                const functionList = this.curGroup.functionList
+                let repeatFun = functionList.find(x => x.funcName === funcName)
+                while (repeatFun) {
+                    funcName = `${funcName}_copy`
+                    repeatFun = functionList.find(x => x.funcName === funcName)
+                }
+                Object.assign(this.funcObj.form, row, {
+                    id: undefined,
+                    funcName,
+                    updateUser: '',
+                    createUser: '',
+                    updateTime: '',
+                    createTime: date
+                })
+            },
+
+            submitFunc () {
+                this.$refs.func.validate().then((postData) => {
+                    if (!postData) return
+                    this.funcObj.loading = true
+                    const add = () => this.addFunc({ groupId: this.curGroupId, func: postData })
+                    const edit = () => this.editFunc({ groupId: this.curGroupId, func: postData })
+
+                    const curMethod = this.funcObj.isEdit ? edit : add
+                    curMethod().then(() => {
+                        this.curGroupId = postData.funcGroupId
+                        this.closeAddFunction()
+                        this.$bkMessage({ theme: 'success', message: `${this.funcObj.title}成功` })
+                    }).catch(err => this.$bkMessage({ theme: 'error', message: err.message || err })).finally(() => {
+                        this.funcObj.loading = false
+                    })
+                })
+            },
+
+            closeAddFunction () {
+                const defaultForm = {
+                    funcName: '',
+                    funcGroupId: undefined,
+                    funcType: 0,
+                    funcParams: [],
+                    funcApiUrl: '',
+                    funcMethod: 'get',
+                    funcApiData: '',
+                    funcSummary: '',
+                    funcBody: '',
+                    id: undefined
+                }
+                this.funcObj.show = false
+                Object.assign(this.funcObj.form, defaultForm)
+            },
+
+            getGroupList () {
+                this.isLoadingGroup = true
+                const projectId = this.$route.params.projectId
+                this.getAllGroupFuncs(projectId).then(() => {
+                    const firstGroup = this.funcGroups[0] || {}
+                    this.curGroupId = firstGroup.id
+                }).finally(() => {
+                    this.isLoadingGroup = false
+                })
+            },
+
+            deleteItem (id, name, isDeleteGroup) {
+                this.delObj.show = true
+                this.delObj.id = id
+                this.delObj.name = name
+                this.delObj.isDeleteGroup = isDeleteGroup
+            },
+
+            openChange (group) {
+                this.$set(group, 'tempName', group.groupName)
+                this.$set(group, 'showChange', true)
+                setTimeout(() => {
+                    const el = this.$refs[group.id][0]
+                    if (el) el.focus()
+                }, 200)
+            },
+
+            requestDelete () {
+                this.delObj.loading = true
+                const projectId = this.$route.params.projectId
+                const postData = { id: this.delObj.id, projectId }
+
+                const deleteFuncGroup = () => this.deleteGroup(postData).then(() => {
+                    if (this.delObj.id === this.curGroupId) {
+                        const firstGroup = this.groupList[0] || {}
+                        this.curGroupId = firstGroup.id
+                    }
+                })
+                const deleteFunc = () => this.deleteFunc({ groupId: this.curGroupId, funcId: this.delObj.id })
+
+                const curMethod = this.delObj.isDeleteGroup ? deleteFuncGroup : deleteFunc
+                curMethod().then(() => {
+                    this.$bkMessage({ theme: 'success', message: '删除成功' })
+                    this.delObj.show = false
+                }).finally(() => {
+                    this.delObj.loading = false
+                })
+            },
+
+            changeGroupName (group, groupName) {
+                this.checkGroupName(groupName).then(() => {
+                    this.isAddLoading = true
+                    const postData = [Object.assign({}, group, { groupName })]
+                    this.editGroups(postData).then(() => {
+                        this.clickEmptyArea()
+                        this.$bkMessage({ theme: 'success', message: '修改成功' })
+                    }).finally(() => {
+                        this.isAddLoading = false
+                    })
+                }).catch((err) => {
+                    this.groupNameErrMessage = err.message
+                })
+            },
+
+            addFunctionGroup () {
+                this.checkGroupName(this.groupNameStr).then(() => {
+                    this.isAddLoading = true
+                    const projectId = this.$route.params.projectId
+                    const postData = {
+                        inputStr: this.groupNameStr,
+                        projectId
+                    }
+                    this.addGroup(postData).then((res) => {
+                        this.groupNameStr = ''
+                        this.clickEmptyArea()
+                        this.$bkMessage({ theme: 'success', message: '添加成功' })
+                    }).finally(() => {
+                        this.isAddLoading = false
+                    })
+                }).catch((err) => {
+                    this.groupNameErrMessage = err.message
+                })
+            },
+
+            checkGroupName (name = '') {
+                return new Promise((resolve, reject) => {
+                    const nameList = name.split('/')
+                    const nameNum = {}
+                    let hasRepeatName = false
+                    nameList.forEach((name) => {
+                        if (nameNum[name]) hasRepeatName = true
+                        else nameNum[name] = 1
+                    })
+                    if (hasRepeatName) reject(new Error('不能创建相同名字的分类'))
+                    else if (nameList.some(x => x === '')) reject(new Error('分类名不能为空'))
+                    else if (this.groupList.find(x => nameList.includes(x.groupName))) reject(new Error('分类名重复，请修改后重试'))
+                    else resolve()
+                })
+            },
+
+            clickEmptyArea () {
+                const btn = document.createElement('button')
+                document.body.appendChild(btn)
+                btn.click()
+                document.body.removeChild(btn)
+            },
+
+            timeFormatter (obj, con, val) {
+                return val ? dayjs(val).format('YYYY-MM-DD HH:mm:ss') : '--'
+            },
+
+            groupFormatter (obj, con, val) {
+                const curGroup = this.funcGroups.find(x => x.id === val) || {}
+                return curGroup.groupName
+            }
+        }
+    }
+</script>
+
+<style lang="postcss" scoped>
+    .add-footer {
+        margin-left: 30px;
+        button {
+            margin-right: 10px;
+        }
+    }
+
+    .function-main {
+        width: 100%;
+        height: 100%;
+        padding: 16px 24px 16px 14px;
+        .function-head {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin: 0 0 14px;
+            padding: 0;
+            font-weight: normal;
+            .head-input {
+                width: 400px;
+            }
+        }
+        .function-table {
+            height: calc(100% - 46px);
+            /deep/ .bk-table-body-wrapper {
+                height: calc(100% - 43px);
+                overflow-y: auto;
+            }
+            .max-tabel-prop {
+                display: block;
+                max-width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: normal;
+            }
+        }
+        .table-bth {
+            color: #3a84ff;
+            margin-right: 17px;
+            display: inline-block;
+            cursor: pointer;
+            &.disable {
+                color: #b9bbc1;
+                cursor: not-allowed;
+            }
+        }
+    }
+
+    .function-item {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        max-width: 100%;
+        padding: 0 20px 0 14px;
+        cursor: grab;
+        color: #63656e;
+        position: relative;
+        /deep/ &.sortable-ghost {
+            border: 1px dashed #3a84ff;
+            padding: 0 19px 0 13px;
+            box-sizing: border-box;
+        }
+        .bk-drag-icon {
+            color: #979ba5;
+        }
+        &.select {
+            background: #e1ecff;
+            color: #3a84ff;
+            .item-num {
+                background: #a2c5fd;
+                color: #ffffff;
+            }
+            .bk-drag-folder-fill {
+                color: #3a84ff;
+            }
+        }
+        .disable {
+            &.bk-icon {
+                height: 32px;
+                width: 32px;
+                line-height: 32px;
+                text-align: center;
+                font-size: 20px;
+                color: #cacdd6;
+                cursor: not-allowed;
+            }
+        }
+        .item-name {
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &.show-tool-name {
+                padding-right: 75px;
+            }
+        }
+        .item-tool-box {
+            position: absolute;
+            &.edit-box {
+                right: 95px;
+            }
+            &.del-box {
+                right: 55px;
+            }
+        }
+        .item-tool {
+            cursor: pointer;
+            height: 32px;
+            width: 32px;
+            line-height: 32px;
+            text-align: center;
+            .bk-icon {
+                font-size: 20px;
+            }
+            &:hover {
+                border-radius: 100px;
+                background: #fafbfd;
+            }
+        }
+        .bk-drag-folder-fill {
+            margin: 0 13px 0 4px;
+        }
+        .item-num {
+            margin-left: 8px;
+            height: 20px;
+            border-radius: 2px;
+            background: #f0f1f5;
+            color: #979ba5;
+            font-size: 12px;
+            line-height: 20px;
+            padding: 0 6px;
+        }
+        .hover-show {
+            display: none;
+        }
+        .click-show {
+            display: block;
+        }
+        &:hover {
+            background: #e1ecff;
+            color: #3a84ff;
+            padding-left: 0;
+            .bk-drag-folder-fill {
+                color: #3a84ff;
+            }
+            .hover-show {
+                display: block;
+            }
+            .item-num {
+                background: #a2c5fd;
+                color: #ffffff;
+            }
+            .item-name {
+                padding-right: 75px;
+            }
+        }
+    }
+
+    .list-head {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        font-weight: normal;
+        margin: 0;
+        padding: 16px 13px 15px 18px;
+        .head-input {
+            margin-right: 7px;
+        }
+        .icon-plus {
+            cursor: pointer;
+            font-size: 26px;
+            &:hover {
+                color: #3a84ff;
+            }
+        }
+    }
+
+    .function-left {
+        height: 100%;
+        .group-list {
+            height: calc(100% - 63px);
+            overflow-y: auto;
+            .exception-wrap-item {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+    }
+
+    .add-function-group {
+        width: 340px;
+        margin-top: 6px;
+    }
+    .input-error {
+        /deep/ input {
+            border-color: #ff5656;
+            color: #ff5656;
+        }
+    }
+    .input-err-message {
+        margin: 5px 0 -7px 0;
+        padding: 0;
+        color: #ff5656;
+    }
+    /deep/ .delete-dialog-wrapper {
+        .delete-content {
+            text-align: center;
+            font-size: 14px;
+            color: #63656e;
+            margin: 0;
+            word-break: break-all;
+        }
+        .bk-dialog-footer {
+            text-align: center;
+            padding: 0 65px 30px;
+            background-color: #fff;
+            border: none;
+            border-radius: 0;
+        }
+        .dialog-footer {
+            button {
+                width: 86px;
+                &:first-child {
+                    margin-right: 10px;
+                }
+            }
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/views/project/index.vue b/paas-ce/lesscode/lib/client/src/views/project/index.vue
new file mode 100644
index 000000000..963bbe0d9
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/views/project/index.vue
@@ -0,0 +1,225 @@
+<template>
+    <main class="project-layout">
+        <aside class="aside">
+            <div class="side-hd">
+                <i class="back-icon bk-drag-icon bk-drag-arrow-back" title="返回项目列表" @click="toProjects"></i>
+                <span class="seperate-line">|</span>
+                <bk-select ext-cls="select-project" ext-popover-cls="select-project-dropdown" v-model="projectId" :clearable="false" :searchable="true" @selected="changeProject">
+                    <bk-option v-for="option in projectList"
+                        :key="option.id"
+                        :id="option.id"
+                        :name="option.projectName">
+                    </bk-option>
+                </bk-select>
+            </div>
+            <div class="side-bd">
+                <nav class="nav-list">
+                    <router-link tag="div" class="nav-item" v-for="item in navList" :key="item.toPath" :to="item.toPath">
+                        <i :class="`bk-drag-icon bk-drag-${item.icon}`"></i>{{ item.title }}
+                    </router-link>
+                </nav>
+            </div>
+        </aside>
+        <div class="breadcrumbs">
+            <h3 class="current">{{ currentPage.title }}</h3>
+        </div>
+        <div class="main-container" v-show="!pageLoading">
+            <router-view :key="$route.path" v-if="!projectNotExist"></router-view>
+            <div v-else class="exception-page">
+                <bk-exception class="exception-wrap-item exception-part" type="empty" scene="part">
+                    <div>项目id不存在，系统将在{{countdown}}后返回项目列表页</div>
+                </bk-exception>
+            </div>
+        </div>
+    </main>
+</template>
+
+<script>
+    export default {
+        data () {
+            return {
+                pageLoading: false,
+                projectId: '',
+                navList: [
+                    {
+                        title: '页面列表',
+                        icon: 'list-fill',
+                        toPath: 'pages'
+                    },
+                    {
+                        title: '函数库',
+                        icon: 'function-fill',
+                        toPath: 'functionManage'
+                    }
+                    // {
+                    //     title: '成员管理',
+                    //     icon: 'user-group',
+                    //     toPath: 'member'
+                    // }
+                ],
+                projectList: [],
+                countdown: 3,
+                timer: null
+            }
+        },
+        computed: {
+            currentPage () {
+                return this.navList.find(item => (this.$route.path.indexOf(`/${item.toPath}`) > 0))
+            },
+            projectNotExist () {
+                return !this.projectList.filter(item => item.id === this.projectId).length
+            }
+        },
+        async created () {
+            this.projectId = parseInt(this.$route.params.projectId)
+            await this.getProjectList()
+            if (this.projectNotExist) {
+                this.timer = setInterval(() => {
+                    this.countdown--
+                    if (this.countdown === 0) {
+                        clearInterval(this.timer)
+                        this.timer = null
+                        this.toProjects()
+                    }
+                }, 1000)
+            }
+        },
+        methods: {
+            toProjects () {
+                this.$router.push({
+                    name: 'projects'
+                })
+            },
+            async getProjectList () {
+                try {
+                    this.pageLoading = true
+                    const { projectList } = await this.$store.dispatch('project/query', { config: {} })
+                    this.projectList = projectList
+                } catch (e) {
+                    console.error(e)
+                } finally {
+                    this.pageLoading = false
+                }
+            },
+            changeProject (id) {
+                this.$router.replace({
+                    params: {
+                        projectId: id
+                    }
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="postcss">
+    @import "@/css/mixins/ellipsis";
+
+    .select-project-dropdown .bk-select-search-input {
+        padding: 0 10px 0 30px;
+    }
+
+    .project-layout {
+        --side-hd-height: 52px;
+        --aside-width: 258px;
+        --footer-height: 50px;
+        --breadcrumb-height: 52px;
+        min-width: 1280px;
+        height: calc(100vh - 64px);
+        margin-top: 64px;
+
+        .aside {
+            position: relative;
+            width: var(--aside-width);
+            height: 100%;
+            border-right: 1px solid #DCDEE5;
+            background: #FFF;
+            float: left;
+            z-index: 1;
+            transition: width .2s cubic-bezier(0.4, 0, 0.2, 1);
+
+            .side-hd {
+                height: var(--side-hd-height);
+                line-height: var(--side-hd-height);
+                display: flex;
+                align-items: center;
+                .back-icon {
+                    margin-left: 13px;
+                    color: #3a84ff;
+                    padding: 12px;
+                    cursor: pointer;
+                }
+                .seperate-line {
+                    width: 1px;
+                    color: #d8d8d8;
+                }
+                .select-project {
+                    width: 190px;
+                    border: none;
+                    margin-left: 5px;
+                    .bk-select-name {
+                        font-size: 16px;
+                        color: #313238;
+                    }
+                }
+            }
+            .side-bd {
+                height: calc(100% - var(--side-hd-height) - var(--side-ft-height));
+                overflow-y: auto;
+            }
+        }
+
+        .breadcrumbs {
+            position: relative;
+            z-index: 99;
+            display: flex;
+            align-items: center;
+            height: var(--breadcrumb-height);
+            background: #fff;
+            box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
+            padding-left: 24px;
+            .current {
+                color: #000;
+                font-size: 16px;
+                font-weight: normal;
+            }
+        }
+
+        .main-container {
+            height: calc(100% - var(--breadcrumb-height));
+            overflow: auto;
+
+            .exception-page {
+                height: 100%;
+                display: flex;
+                align-items: center;
+            }
+        }
+
+        .nav-list {
+            .nav-item {
+                display: flex;
+                align-items: center;
+                font-size: 14px;
+                height: 42px;
+                line-height: 42px;
+                padding: 0 12px 0 22px;
+                margin: 0;
+                white-space: nowrap;
+                cursor: pointer;
+
+                .bk-drag-icon {
+                    font-size: 16px;
+                    margin-right: 16px;
+                }
+                &:hover {
+                    background: #F6F6F9;
+                }
+                &.router-link-active {
+                    background: #E1ECFF;
+                    color: #3A84FF;
+                }
+            }
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/views/project/member.vue b/paas-ce/lesscode/lib/client/src/views/project/member.vue
new file mode 100644
index 000000000..38be32300
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/views/project/member.vue
@@ -0,0 +1,58 @@
+<template>
+    <section>
+        <div class="member-container">
+            <div class="member-head">
+                <bk-button theme="primary">添加</bk-button>
+            </div>
+            <div class="member-content">
+                <bk-table :data="list" type="small" ext-cls="member-table">
+                    <bk-table-column label="姓名" prop="userName"></bk-table-column>
+                    <bk-table-column label="角色" prop="roleId" :formatter="showViewType"></bk-table-column>
+                    <bk-table-column label="添加人" prop="createUser"></bk-table-column>
+                    <bk-table-column label="添加时间" prop="createTime"></bk-table-column>
+                    <bk-table-column label="操作" width="150">
+                        <template slot-scope="props">
+                            <bk-button theme="primary" text :disabled="false" @click="editView(props.row)">编辑</bk-button>
+                            <bk-button theme="primary" text :disabled="false" @click="deleteView(props.row)">删除</bk-button>
+                        </template>
+                    </bk-table-column>
+                </bk-table>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script>
+    export default {
+        data () {
+            return {
+                list: [
+                    {
+                        'id': '',
+                        'userName': 'admin',
+                        'roleId': '1',
+                        'createUser': 'admin',
+                        'createTime': '2020-07-14 13:14:00'
+                    }
+                ]
+            }
+        }
+    }
+</script>
+
+<style lang="postcss">
+    .member-container {
+        margin: 16px 24px;
+        
+        .member-content {
+            margin-top: 14px;
+            min-width: 1000px;
+
+            .member-table {
+                th {
+                    background-color: #F0F1F5;
+                }
+            }
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/views/project/page.vue b/paas-ce/lesscode/lib/client/src/views/project/page.vue
new file mode 100644
index 000000000..8b593769a
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/views/project/page.vue
@@ -0,0 +1,410 @@
+<template>
+    <section v-bkloading="{ isLoading: isLoading }" style="height: 100%">
+        <main class="pages pages-content" v-show="!isLoading">
+            <div class="pages-head">
+                <bk-button theme="primary" @click="handleCreate">新建</bk-button>
+                <div class="extra">
+                    <bk-input
+                        :style="{ width: '400px' }"
+                        placeholder="请输入页面名称"
+                        :clearable="true"
+                        :right-icon="'bk-icon icon-search'"
+                        v-model="keyword"
+                        @clear="handleSearch(true)"
+                        @enter="handleSearch(false)">
+                    </bk-input>
+                </div>
+            </div>
+            <div class="pages-body">
+                <div class="page-list">
+                    <div class="page-item" v-for="(page, index) in renderList" :key="index">
+                        <div class="item-bd">
+                            <div class="preview" @click="handleEditPage(page.id)">
+                                <img v-if="page.previewImg" :src="page.previewImg" alt="页面缩略预览">
+                                <div class="empty-preview-img" v-else>页面为空</div>
+                                <div class="mask">
+                                    <div class="operate-btns">
+                                        <bk-button class="edit-btn" theme="primary">编辑</bk-button>
+                                        <bk-button class="preview-btn" @click.stop="handlePreview(page)">预览</bk-button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="item-ft">
+                            <div class="col">
+                                <h3 class="name" :title="page.pageName">{{page.pageName}}</h3>
+                                <div class="stat">{{ page.updateUser || page.createUser }} {{ getRelativeTime(page.updateTime) }}更新</div>
+                            </div>
+                            <div class="col">
+                                <bk-dropdown-menu :ref="`moreActionDropdown${page.id}`">
+                                    <span slot="dropdown-trigger" class="more-menu-trigger">
+                                        <i class="bk-drag-icon bk-drag-more-dot"></i>
+                                    </span>
+                                    <ul class="bk-dropdown-list" slot="dropdown-content" @click="hideDropdownMenu(page.id)">
+                                        <li><a href="javascript:;" @click="handleDownloadSource(page.sourceCode)">下载源码</a></li>
+                                        <li><a href="javascript:;" @click="handleRename(page)">重命名</a></li>
+                                        <li><a href="javascript:;" @click="handleCopy(page)">复制</a></li>
+                                        <li><a href="javascript:;" @click="handleDelete(page)">删除</a></li>
+                                    </ul>
+                                </bk-dropdown-menu>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="empty" v-show="(!pageList.length || !renderList.length) && !isLoading">
+                    <bk-exception class="exception-wrap-item exception-part" type="empty" scene="part">
+                        <div v-if="!pageList.length" class="empty-page">暂无页面，<bk-link theme="primary" @click="handleCreate">立即创建</bk-link></div>
+                        <div v-else>无搜索结果</div>
+                    </bk-exception>
+                </div>
+            </div>
+            <page-dialog ref="pageDialog" :action="action" :current-name="currentName" :reflash-list="getPageList"></page-dialog>
+        </main>
+    </section>
+</template>
+
+<script>
+    import pagePreivewImg from '@/images/page-demo.png'
+    import pageDialog from '@/components/project/page-dialog'
+    import dayjs from 'dayjs'
+    import relativeTime from 'dayjs/plugin/relativeTime'
+    import 'dayjs/locale/zh-cn'
+    dayjs.extend(relativeTime)
+    dayjs.locale('zh-cn')
+
+    export default {
+        components: {
+            pageDialog
+        },
+        data () {
+            return {
+                action: '',
+                currentName: '',
+                keyword: '',
+                renderList: [],
+                pageList: [],
+                pagePreivewImg,
+                isLoading: true
+            }
+        },
+        computed: {
+            projectId () {
+                return this.$route.params.projectId
+            }
+        },
+        watch: {
+            keyword (val) {
+                if (!val) {
+                    this.handleSearch(false)
+                }
+            }
+        },
+        async created () {
+            await this.getPageList()
+        },
+        methods: {
+            async getPageList () {
+                this.isLoading = true
+                try {
+                    this.pageList = await this.$store.dispatch('page/getList', { projectId: this.projectId })
+                    if (this.keyword) {
+                        this.renderList = this.pageList.filter(item => item.pageName.indexOf(this.keyword) !== -1)
+                    } else {
+                        this.renderList = this.pageList
+                    }
+                } catch (e) {
+                    console.error(e)
+                } finally {
+                    this.isLoading = false
+                }
+            },
+            handleCreate () {
+                this.action = 'create'
+                this.$refs.pageDialog.dialog.formData.id = undefined
+                this.$refs.pageDialog.dialog.formData.pageName = ''
+                this.$refs.pageDialog.dialog.visible = true
+            },
+            async handleCopy (page) {
+                this.action = 'copy'
+                this.$refs.pageDialog.dialog.formData.id = page.id
+                this.$refs.pageDialog.dialog.formData.pageName = `${page.pageName}-copy`
+                this.$refs.pageDialog.dialog.visible = true
+            },
+            async handleDownloadSource (code) {
+                if (!code) {
+                    this.$bkMessage({
+                        theme: 'error',
+                        message: '该页面为空页面，无源码生成'
+                    })
+                    return
+                }
+                this.$store.dispatch('vueCode/formatCode', {
+                    code
+                }).then((res) => {
+                    const downlondEl = document.createElement('a')
+                    const blob = new Blob([res])
+                    downlondEl.download = 'magicbox-vue-layout.vue'
+                    downlondEl.href = URL.createObjectURL(blob)
+                    downlondEl.style.display = 'none'
+                    document.body.appendChild(downlondEl)
+                    downlondEl.click()
+                    document.body.removeChild(downlondEl)
+                })
+            },
+            async handleRename (page) {
+                this.action = 'rename'
+                this.currentName = page.pageName
+                this.$refs.pageDialog.dialog.formData.pageName = page.pageName
+                this.$refs.pageDialog.dialog.formData.id = page.id
+                this.$refs.pageDialog.dialog.visible = true
+            },
+            handleDelete (page) {
+                this.$bkInfo({
+                    title: '确认删除?',
+                    subTitle: `确认删除  “页面${page.pageName}”?`,
+                    theme: 'danger',
+                    confirmFn: async () => {
+                        await this.$store.dispatch('page/delete', {
+                            pageId: page.id
+                        })
+                        this.getPageList()
+                    }
+                })
+            },
+            handleEditPage (id) {
+                this.$router.push({
+                    name: 'new',
+                    params: {
+                        projectId: this.projectId,
+                        pageId: id
+                    }
+                })
+            },
+            handlePreview (page) {
+                if (!page.content) {
+                    this.$bkMessage({
+                        theme: 'error',
+                        message: '该页面为空页面，请先编辑页面',
+                        limit: 1
+                    })
+                    return
+                }
+                window.open(`/project/${this.projectId}/page/${page.id}/preview?type=fromList`, '_blank')
+            },
+            handleSearch (clear = false) {
+                if (clear) {
+                    this.keyword = ''
+                    this.renderList = this.pageList
+                } else {
+                    this.renderList = this.pageList.filter(item => item.pageName.toLowerCase().indexOf(this.keyword.toLowerCase()) !== -1)
+                }
+            },
+            hideDropdownMenu (pageId) {
+                this.$refs[`moreActionDropdown${pageId}`][0].hide()
+            },
+            getRelativeTime (time) {
+                return dayjs(time).fromNow() || ''
+            }
+        }
+    }
+</script>
+
+<style lang="postcss" scoped>
+/* page */
+    .pages-content {
+        padding: 16px 24px;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        .pages-head {
+            display: flex;
+            margin-bottom: 17px;
+
+            .extra {
+                flex: none;
+                margin-left: auto;
+            }
+        }
+        .pages-body {
+            display: flex;
+            flex: 1;
+             .empty {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                .empty-page {
+                    display: flex;
+                    align-items: center;
+                }
+            }
+            .page-list {
+                display: flex;
+                flex-wrap: wrap;
+                align-content: flex-start;
+
+                .page-item {
+                    position: relative;
+                    flex: none;
+                    width: 312px;
+                    height: 240px;
+                    margin: 0 14px 30px 0;
+                    padding: 6px;
+                    background: #fff;
+                    border-radius: 0px 6px 6px 6px;
+                    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.11);
+                    cursor: pointer;
+
+                    &:hover {
+                        box-shadow: 1px 2px 8px 2px rgba(0, 0 ,0 , 0.11);
+
+                        .desc {
+                            display: block;
+                        }
+                        .preview {
+                            .mask {
+                                background: rgba(0, 0, 0, 0.4);
+                                .operate-btns {
+                                    display: block;
+                                    opacity: 1;
+                                }
+                            }
+                        }
+                    }
+                    .more-menu-trigger {
+                        .bk-drag-more-dot {
+                            display: block;
+                            width: 32px;
+                            height: 32px;
+                            line-height: 34px;
+                            text-align: center;
+                            border-radius: 50%;
+                            cursor: pointer;
+                            font-size: 20px;
+                            color: #979BA5;
+                            &:hover {
+                                background: #F0F1F5;
+                            }
+                        }
+                    }
+
+                    .item-bd {
+                        flex: none;
+                        position: relative;
+                        width: 300px;
+                        height: 166px;
+                        background: #fff;
+                        border-radius: 4px 4px 0px 0px;
+                    }
+                    .item-ft {
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        margin: 16px 10px 0 10px;
+                    }
+
+                    .preview {
+                        position: relative;
+                        height: 100%;
+                        overflow: hidden;
+                        border-radius: 4px 4px 0px 0px;
+                        img {
+                            max-width: 100%;
+                        }
+
+                        .empty-preview-img {
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            font-size: 14px;
+                            font-weight: 700;
+                            color: #C4C6CC;
+                            height: 100%;
+                            background: #f0f1f5;
+                            border-radius: 4px 4px 0px 0px;
+                        }
+
+                        .mask {
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 100%;
+                            height: 100%;
+                            background: rgba(0, 0, 0, 0.1);
+                            display: flex;
+                            align-items: center;
+                            .operate-btns {
+                                display: none;
+                                .edit-btn {
+                                    width: 86px;
+                                    margin-left: 59px;
+                                }
+                                .preview-btn {
+                                    width: 86px;
+                                    margin-left: 10px;
+                                    margin-rihgt: 59px;
+                                }
+                            }
+                        }
+
+                        /* &::before {
+                            content: '';
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 100%;
+                            height: 100%;
+                            background: rgba(0, 0, 0, 0.2);
+                        } */
+                    }
+                    .desc {
+                        display: none;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                        padding: 28px 26px 28px 21px;
+
+                        .desc-text {
+                            font-size: 12px;
+                            color: #fff;
+                            margin: 0;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            display: -webkit-box;
+                            -webkit-line-clamp: 5;
+                            -webkit-box-orient: vertical;
+                        }
+                    }
+                    .empty {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-size: 14px;
+                        font-weight: 700;
+                        color: #C4C6CC;
+                        height: 100%;
+                        background: #f0f1f5;
+                        border-radius: 4px 4px 0px 0px;
+                    }
+                    .name {
+                        margin: 0;
+                        font-size: 12px;
+                        font-weight: 700;
+                        color: #63656E;
+                        width: 240px;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                    }
+                    .stat {
+                        font-size: 12px;
+                        color: #979BA5;
+                        padding: 4px 0;
+                    }
+                }
+            }
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/views/system/account.vue b/paas-ce/lesscode/lib/client/src/views/system/account.vue
new file mode 100644
index 000000000..6dba8861e
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/views/system/account.vue
@@ -0,0 +1,65 @@
+<template>
+    <main class="account page-content">
+        <div class="user-info-wrapper">
+            <bk-form :label-width="100" :model="userData">
+                <bk-form-item label="用户名：">
+                    {{userData.username}}
+                </bk-form-item>
+                <bk-form-item label="中文名：">
+                    {{userData.chname}}
+                </bk-form-item>
+                <bk-form-item label="联系电话：">
+                    {{userData.phone}}
+                </bk-form-item>
+                <bk-form-item label="常用邮箱：">
+                    {{userData.email}}
+                </bk-form-item>
+            </bk-form>
+        </div>
+    </main>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+
+    export default {
+        data () {
+            return {
+                userData: {
+                    username: '',
+                    chname: '',
+                    phone: '',
+                    email: ''
+                }
+            }
+        },
+        computed: {
+            ...mapGetters(['user'])
+        },
+        watch: {
+        },
+        created () {
+            this.userData = Object.assign({}, {
+                username: this.user.bk_username || '--',
+                chname: this.user.chname || '--',
+                phone: this.user.phone || '--',
+                email: this.user.email || '--'
+            })
+        },
+        methods: {
+        }
+    }
+</script>
+
+<style lang="postcss" scoped>
+    .user-info-wrapper {
+        padding: 20px;
+        background: #fff;
+        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
+        /deep/ .bk-label {
+            .bk-label-text {
+                font-weight: 700;
+            }
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/views/system/component-manage/all/components/operation.vue b/paas-ce/lesscode/lib/client/src/views/system/component-manage/all/components/operation.vue
new file mode 100644
index 000000000..d4d458b73
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/views/system/component-manage/all/components/operation.vue
@@ -0,0 +1,127 @@
+<template>
+    <bk-sideslider :is-show="isShow" @update:isShow="handleCancel" quick-close :width="796" title="新建自定义组件">
+        <div slot="content" class="component-operation">
+            <bk-form :label-width="90">
+                <bk-form-item label="组件包" required>
+                    <bk-upload
+                        tip="只允许上传ZIP的文件"
+                        with-credentials
+                        :url="uploadUrl"
+                        accept="application/zip"
+                        @on-success="handleUploadSuccess" />
+                </bk-form-item>
+                <bk-form-item label="组件名称" required>
+                    <bk-input :value="formData.compName" placeholder="上传组件包后解析生成" readonly />
+                </bk-form-item>
+                <bk-form-item label="组件ID" required>
+                    <bk-input :value="formData.compCode" placeholder="上传组件包后解析生成" readonly />
+                </bk-form-item>
+                <bk-form-item label="组件版本" required>
+                    <bk-input v-model="formData.version" type="number" style="width: 120px" />
+                </bk-form-item>
+                <bk-form-item label="所属分类" required>
+                    <bk-select v-model="formData.categoryId">
+                        <bk-option
+                            v-for="item in categoryList"
+                            :key="item.id"
+                            :id="item.id"
+                            :name="item.category" />
+                    </bk-select>
+                </bk-form-item>
+                <bk-form-item label="是否公开" required>
+                    <bk-switcher v-model="formData.isPublic" theme="primary" />
+                </bk-form-item>
+                <bk-form-item label="组件介绍" required>
+                    <bk-input v-model="formData.description" type="textarea" :maxlength="100" />
+                </bk-form-item>
+                <bk-form-item label="版本日志" required>
+                    <bk-input v-model="formData.log" />
+                </bk-form-item>
+            </bk-form>
+        </div>
+        <div slot="footer">
+            <div class="sideslider-footer">
+                <bk-button theme="primary" @click="handleSubmit">提交</bk-button>
+                <bk-button theme="default" @click="handleCancel">取消</bk-button>
+            </div>
+        </div>
+    </bk-sideslider>
+</template>
+<script>
+    const generatorData = () => ({
+        package: '',
+        compName: '',
+        compCode: '',
+        compPath: '',
+        version: '',
+        categoryId: '',
+        isPublic: 0,
+        description: '',
+        log: ''
+    })
+    export default {
+        name: '',
+        props: {
+            isShow: {
+                type: Boolean,
+                default: false
+            },
+            id: {
+                type: Number
+            }
+        },
+        data () {
+            return {
+                formData: generatorData(),
+                categoryList: []
+            }
+        },
+
+        watch: {
+            isShow (isShow) {
+                if (isShow && this.id) {
+                    this.fetchDetail()
+                }
+            }
+        },
+        created () {
+            this.fetchCategoryList()
+            this.uploadUrl = `${AJAX_URL_PREFIX}/component/upload`
+        },
+        methods: {
+            async fetchCategoryList () {
+                this.categoryList = await this.$store.dispatch('components/categoryList')
+            },
+            async fetchDetail () {
+                const data = await this.$store.dispatch('components/detail', {
+                    id: this.id
+                })
+                this.formData = data
+            },
+            handleUploadSuccess (payload) {
+                const { compName, compCode, compPath } = payload.responseData.data
+                this.formData.compName = compName
+                this.formData.compCode = compCode
+                this.formData.compPath = compPath
+            },
+            async handleSubmit () {
+                await this.$store.dispatch('components/create', this.formData)
+                this.$emit('on-update')
+                this.handleCancel()
+                this.messageSuccess('添加组件成功')
+            },
+            handleCancel () {
+                this.formData = generatorData()
+                this.$emit('update:isShow', false)
+            }
+        }
+    }
+</script>
+<style lang='postcss' scoped>
+    .component-operation{
+        padding: 25px 30px;
+    }
+    .sideslider-footer{
+        padding-left: 120px;
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/views/system/component-manage/all/components/render-category.vue b/paas-ce/lesscode/lib/client/src/views/system/component-manage/all/components/render-category.vue
new file mode 100644
index 000000000..2fd8b063f
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/views/system/component-manage/all/components/render-category.vue
@@ -0,0 +1,271 @@
+<template>
+    <div class="class-list" v-bkloading="{ isLoading }">
+        <div class="header">
+            <bk-input />
+            <div class="create-btn" v-bk-tooltips.top="'添加分类'" role="operation" @click.stop="handleShowCreate">
+                <i class="bk-icon icon-plus-line" />
+            </div>
+        </div>
+        <div class="container">
+            <div
+                v-for="item in list"
+                class="item"
+                :class="{ active: activeId === item.id }"
+                :key="item.id"
+                @click="handleSelect(item.id)">
+                <div class="name">{{ item.category }}</div>
+                <div class="action">
+                    <div class="btn" @click.stop="handleEdit(item, $event)" role="operation">
+                        <i class="bk-drag-icon bk-drag-template-fill" />
+                    </div>
+                    <div class="btn" @click="handleDelete(item)">
+                        <i class="bk-drag-icon bk-drag-close-small" />
+                    </div>
+                </div>
+                <div class="count">12</div>
+            </div>
+        </div>
+        <div v-if="isShowCreate" ref="operation" class="category-operation" :style="operationStyles" @click.stop="">
+            <div class="wraper">
+                <bk-input
+                    v-model="newCategory"
+                    :native-attributes="{ autofocus: 'autofocus' }"
+                    placeholder="请输入函数分类，多个分类“/”分隔，回车结束"
+                    @keyup="handleSubmitCategory" />
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    const getParentByRole = (path, role) => {
+        for (let i = 0; i < path.length; i++) {
+            const current = path[i]
+            if (current.getAttribute('role') === role) {
+                return current
+            }
+        }
+        return null
+    }
+
+    export default {
+        name: '',
+
+        data () {
+            return {
+                isLoading: true,
+                isShowCreate: false,
+                newCategory: '',
+                list: [],
+                activeId: '',
+                operationPosition: {
+                    top: 0,
+                    left: 0
+                }
+            }
+        },
+        computed: {
+            operationStyles () {
+                return {
+                    top: `${this.operationPosition.top + 36}px`,
+                    left: `${this.operationPosition.left - 26}px`
+                }
+            }
+        },
+        created () {
+            this.fetchData()
+            this.editCategory = {}
+        },
+        mounted () {
+            document.body.addEventListener('click', this.handleHideCreate)
+            this.$once('hook:beforeDestroy', () => {
+                document.body.removeEventListener('click', this.handleHideCreate)
+            })
+        },
+        methods: {
+            async fetchData () {
+                const data = await this.$store.dispatch('components/categoryList')
+                this.list = Object.freeze(data)
+                if (this.list.length > 0) {
+                    this.handleSelect(this.list[0].id)
+                }
+                this.isLoading = false
+            },
+            handleSelect (categoryId) {
+                this.activeId = categoryId
+                this.$emit('on-change', categoryId)
+            },
+            handleShowCreate (event) {
+                const $target = getParentByRole(event.path, 'operation')
+                const { top, left } = $target.getBoundingClientRect()
+                this.operationPosition = {
+                    top,
+                    left
+                }
+                this.isShowCreate = true
+                setTimeout(() => {
+                    document.body.appendChild(this.$refs.operation)
+                    const $autoFocusItem = this.$refs.operation.querySelector('[autofocus="autofocus"]')
+                    if ($autoFocusItem) {
+                        $autoFocusItem.focus()
+                    }
+                })
+            },
+            handleHideCreate () {
+                try {
+                    this.isShowCreate = false
+                    this.editCategory = {}
+                    this.newCategory = ''
+                    document.body.removeChild(this.$refs.operation)
+                } catch {
+
+                }
+            },
+            async handleSubmitCategory (value, event) {
+                if (event.keyCode !== 13) {
+                    return
+                }
+                const isDupName = this.list.some(_ => _.category === value)
+                if (isDupName) {
+                    this.messageError('分类重名')
+                }
+
+                if (this.editCategory.id) {
+                    await this.$store.dispatch('components/categoryUpdate', {
+                        id: this.editCategory.id,
+                        category: this.newCategory
+                    })
+                    this.messageSuccess('编辑组件分类成功')
+                } else {
+                    await this.$store.dispatch('components/categoryCreate', {
+                        category: this.newCategory
+                    })
+                    this.messageSuccess('添加组件分类成功')
+                }
+
+                this.handleHideCreate()
+                this.fetchData()
+            },
+            handleEdit (category, event) {
+                this.editCategory = category
+                this.newCategory = category.category
+                this.handleShowCreate(event)
+            },
+            async handleDelete (category) {
+                if (this.list.length === 1) {
+                    this.messageError('组件分类不能为空')
+                    return
+                }
+                await this.$store.dispatch('components/categoryDelete', {
+                    id: category.id
+                })
+                this.fetchData()
+                this.messageSuccess('删除组件分类成功')
+            }
+        }
+    }
+</script>
+<style lang='postcss' scoped>
+    .class-list{
+        position: relative;
+        z-index: 1;
+        .header{
+            display: flex;
+            padding: 16px 18px;
+            .create-btn{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 32px;
+                height: 32px;
+                margin-left: 7px;
+                font-size: 16px;
+                cursor: pointer;
+                &:hover{
+                    color: #3A84FF;
+                }
+            }
+        }
+        .container{
+            .item{
+                display: flex;
+                align-items: center;
+                height: 40px;
+                padding: 0 19px 0 21px;
+                cursor: pointer;
+                &.active,
+                &:hover{
+                    color: #3A84FF;
+                    background: #E1ECFF;
+                    .count{
+                        color: #fff;
+                        background: #A2C5FD;
+                    }
+                }
+                .name{
+                    margin-right: auto;
+                }
+                .action{
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-right: 20px;
+                    font-size: 14px;
+                    .btn{
+                        width: 32px;
+                        height: 32px;
+                        line-height: 32px;
+                        text-align: center;
+                        border-radius: 50%;
+                        cursor: pointer;
+                        &:hover{
+                            color: #3A84FF;
+                            background: #fff;
+                        }
+                    }
+                    .bk-drag-close-small{
+                        font-size: 20px;;
+                    }
+                }
+                .count{
+                    height: 20px;
+                    padding: 0 6px;
+                    font-size: 12px;
+                    color: #979BA5;
+                    line-height: 20px;
+                    border-radius: 2px;
+                    background: #F0F1F5;
+                }
+            }
+        }
+
+    }
+    .category-operation{
+        position: absolute;
+        z-index: 999;
+        top: 54px;
+        left: 260px;
+        border: 1px solid #dcdee5;
+        border-radius: 2px;
+        box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.1);
+        &:before{
+            content: '';
+            position: absolute;
+            top: -6px;
+            left: 35px;
+            height: 11px;
+            width: 11px;
+            border: 1px solid #dcdee5;
+            border-bottom: none;
+            border-left: none;
+            box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.1);
+            background: #ffffff;
+            transform: rotateZ(-45deg);
+        }
+        .wraper{
+            position: relative;
+            width: 340px;
+            padding: 15px 14px;
+            background: #ffffff;
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/views/system/component-manage/all/components/render-list.vue b/paas-ce/lesscode/lib/client/src/views/system/component-manage/all/components/render-list.vue
new file mode 100644
index 000000000..324eaee14
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/views/system/component-manage/all/components/render-list.vue
@@ -0,0 +1,83 @@
+<template>
+    <div class="render-list" v-bkloading="{ isLoading }">
+        <div class="header">
+            <bk-button theme="primary" @click="handleShowOperation">新建</bk-button>
+        </div>
+        <bk-table :data="data">
+            <bk-table-column label="组件名称" prop="compName" align="left" />
+            <bk-table-column label="组件ID" prop="compCode" align="left" />
+            <bk-table-column label="所属分类" prop="categoryId" align="left" />
+            <bk-table-column label="是否公开" prop="isPublic" align="left" />
+            <bk-table-column label="最新版本" prop="latestVersionId" align="left" />
+            <bk-table-column label="更新时间" prop="updateTime" align="left" />
+            <bk-table-column label="更新人" prop="updateUser" align="left" />
+            <bk-table-column label="操作" prop="statusText" align="left">
+                <template slot-scope="{ row }">
+                    <bk-button text @click="handleUpdate(row)">更新</bk-button>
+                    <bk-button text @click="handleOff(row)">下架</bk-button>
+                </template>
+            </bk-table-column>
+        </bk-table>
+        <operation :is-show.sync="isShowOperation" :id="componentId" @on-update="fetchData" />
+    </div>
+</template>
+<script>
+    import Operation from './operation'
+
+    export default {
+        name: '',
+        components: {
+            Operation
+        },
+        props: {
+            category: {
+                type: Number
+            }
+        },
+        data () {
+            return {
+                isLoading: true,
+                isShowOperation: false,
+                data: [],
+                componentId: 0
+            }
+        },
+        watch: {
+            category () {
+                this.fetchData()
+            }
+        },
+        created () {
+            this.fetchData()
+        },
+        methods: {
+            async fetchData () {
+                this.isLoading = true
+                this.data = await this.$store.dispatch('components/list', {
+                    category: this.category
+                })
+                this.isLoading = false
+            },
+
+            handleShowOperation () {
+                this.componentId = ''
+                this.isShowOperation = true
+            },
+            handleUpdate (component) {
+                this.componentId = component.id
+                this.isShowOperation = true
+            },
+            handleOff () {
+
+            }
+        }
+    }
+</script>
+<style lang='postcss' scoped>
+    .render-list{
+        padding: 14px 25px 14px 14px;
+        .header{
+            margin-bottom: 12px;
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/views/system/component-manage/all/index.vue b/paas-ce/lesscode/lib/client/src/views/system/component-manage/all/index.vue
new file mode 100644
index 000000000..b47a9bae3
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/views/system/component-manage/all/index.vue
@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <layout>
+            <render-category slot="left" @on-change="handleCategoryChange" />
+            <render-list v-if="categoryId" :category="categoryId" />
+        </layout>
+    </div>
+</template>
+<script>
+    import Layout from '@/components/ui/layout'
+    import RenderCategory from './components/render-category'
+    import RenderList from './components/render-list'
+
+    export default {
+        name: '',
+        components: {
+            Layout,
+            RenderCategory,
+            RenderList
+        },
+        data () {
+            return {
+                categoryId: 0
+            }
+        },
+        methods: {
+            handleCategoryChange (category) {
+                this.categoryId = category
+            }
+        }
+    }
+</script>
diff --git a/paas-ce/lesscode/lib/client/src/views/system/component-manage/index.vue b/paas-ce/lesscode/lib/client/src/views/system/component-manage/index.vue
new file mode 100644
index 000000000..9a083f132
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/views/system/component-manage/index.vue
@@ -0,0 +1,74 @@
+<template>
+    <div class="component-manage-page">
+        <div class="component-page-tab">
+            <div class="tab-item" :class="{ active: page === 'all' }" @click="handlePage('all')">所有组件</div>
+            <div class="tab-item" :class="{ active: page === 'useing' }" @click="handlePage('useing')">使用中的组件</div>
+        </div>
+        <component :is="pageCom" />
+    </div>
+</template>
+<script>
+    import AllComponent from './all'
+    import UseingComponent from './useing'
+
+    export default {
+        name: '',
+        components: {
+            AllComponent,
+            UseingComponent
+        },
+        data () {
+            return {
+                page: 'all'
+            }
+        },
+        computed: {
+            pageCom () {
+                const comMap = {
+                    all: AllComponent,
+                    useing: UseingComponent
+                }
+
+                return comMap[this.page]
+            }
+        },
+        methods: {
+            handlePage (page) {
+                this.page = page
+            }
+        }
+    }
+</script>
+<style lang='postcss'>
+    .component-manage-page{
+        .component-page-tab{
+            position: relative;
+            z-index: 1;
+            display: flex;
+            padding-left: 18px;
+            font-size: 14px;
+            color: #63656E;
+            background: #fff;
+            box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
+            .tab-item{
+                position: relative;
+                display: flex;
+                align-items: center;
+                height: 44px;
+                padding: 0 14px;
+                cursor: pointer;
+                &.active{
+                    &:after{
+                        content: '';
+                        position: absolute;
+                        bottom: -1px;
+                        left: 0;
+                        width: 100%;
+                        height: 2px;
+                        background: #3A84FF;
+                    }
+                }
+            }
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/views/system/component-manage/useing/index.vue b/paas-ce/lesscode/lib/client/src/views/system/component-manage/useing/index.vue
new file mode 100644
index 000000000..027543985
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/views/system/component-manage/useing/index.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="component-manage-useing-page" v-bkloading="{ isLoading }">
+        <div class="search">
+            <bk-input right-icon="bk-icon icon-search" />
+        </div>
+        <bk-table :data="data">
+            <bk-table-column label="组件名称" prop="compName" align="left" />
+            <bk-table-column label="来源" prop="compCode" align="left" />
+            <bk-table-column label="所属分类" prop="categoryId" align="left" />
+            <bk-table-column label="是否公开" prop="isPublic" align="left" />
+            <bk-table-column label="使用版本" prop="latestVersionId" align="left" />
+            <bk-table-column label="最新版本" prop="updateTime" align="left" />
+            <bk-table-column label="使用页面" prop="updateUser" align="left" />
+            <bk-table-column label="操作" prop="statusText" align="left">
+                <template slot-scope="{ row }">
+                    <bk-button text @click="handleUpdate(row)">升级</bk-button>
+                </template>
+            </bk-table-column>
+        </bk-table>
+    </div>
+</template>
+<script>
+    export default {
+        name: '',
+
+        data () {
+            return {
+                isLoading: true,
+                data: []
+            }
+        },
+        created () {
+            this.fetchData()
+        },
+        methods: {
+            async fetchData () {
+                this.data = await this.$store.dispatch('components/useing')
+                this.isLoading = false
+            },
+            handleUpdate (payload) {
+                console.log(payload)
+            }
+        }
+    }
+</script>
+<style lang='postcss'>
+    .component-manage-useing-page{
+        padding: 14px 27px 22px 32px;
+        .search{
+            width: 400px;
+            margin-bottom: 14px;
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/views/system/index.vue b/paas-ce/lesscode/lib/client/src/views/system/index.vue
new file mode 100644
index 000000000..7092d39f6
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/views/system/index.vue
@@ -0,0 +1,215 @@
+<template>
+    <main :class="['layout', { 'aside-folded': asideFolded }]">
+        <aside class="aside">
+            <div class="side-hd">
+                <div class="brand">
+                    <span class="bk-drag-icon app-logo">
+                        <svg aria-hidden="true" width="22" height="22">
+                            <use xlink:href="#bk-drag-template-logo"></use>
+                        </svg>
+                    </span>
+                    <h2 class="app-name">可视化开发平台</h2>
+                </div>
+            </div>
+            <div class="side-bd">
+                <nav class="nav-list">
+                    <router-link tag="div" :class="['nav-item', { 'router-link-active': $route.name === 'projects' }]" to="projects">
+                        <i class="bk-drag-icon bk-drag-project-list"></i>项目列表
+                    </router-link>
+                    <!-- <router-link tag="div" class="nav-item" :to="{ name: 'componentManage', query: { filter: '' } }">
+                        <i class="bk-drag-icon bk-drag-project-list"></i>自定义组件库
+                    </router-link> -->
+                    <router-link tag="div" class="nav-item" :to="'account'">
+                        <i class="bk-drag-icon bk-drag-member"></i>账号管理
+                    </router-link>
+                </nav>
+            </div>
+            <div class="side-ft">
+                <span class="nav-toggle" @click="asideFolded = !asideFolded">
+                    <i class="bk-drag-icon bk-drag-nav-toggle"></i>
+                </span>
+            </div>
+        </aside>
+        <div class="breadcrumbs">
+            <h3 class="current">{{$route.meta.title}}</h3>
+            <extra-links></extra-links>
+        </div>
+        <div class="main-container">
+            <router-view :key="$route.path"></router-view>
+        </div>
+        <footer class="footer">
+            Copyright &copy; 2012-{{currentYear}} Tencent BlueKing. All Rights Reserved. 腾讯蓝鲸 版权所有
+        </footer>
+    </main>
+</template>
+
+<script>
+    import ExtraLinks from '@/components/ui/extra-links'
+    export default {
+        components: {
+            ExtraLinks
+        },
+        data () {
+            return {
+                currentYear: new Date().getUTCFullYear(),
+                asideFolded: false
+            }
+        }
+    }
+</script>
+
+<style lang="postcss">
+    @import "@/css/mixins/ellipsis";
+
+    .layout {
+        --side-hd-height: 52px;
+        --side-ft-height: 50px;
+        --aside-width: 258px;
+        --footer-height: 50px;
+        --breadcrumb-height: 52px;
+        --aside-folded-width: 60px;
+        min-width: 1280px;
+        height: calc(100vh - 64px);
+        margin-top: 64px;
+
+        &.aside-folded {
+            .aside {
+                width: var(--aside-folded-width);
+
+                .side-ft {
+                    .nav-toggle {
+                        transform: rotate(0);
+                    }
+                }
+            }
+
+            .footer {
+                padding-left: var(--aside-folded-width);
+            }
+        }
+
+        .brand {
+            display: flex;
+            align-items: center;
+            margin-left: 22px;
+            .app-logo {
+                font-size: 0;
+            }
+            .app-name {
+                font-size: 16px;
+                font-weight: normal;
+                color: #313238;
+                margin: 0;
+                padding-left: 12px;
+                white-space: nowrap;
+            }
+        }
+
+        .aside {
+            position: relative;
+            width: var(--aside-width);
+            height: 100%;
+            border-right: 1px solid #DCDEE5;
+            background: #FFF;
+            float: left;
+            z-index: 1;
+            transition: width .2s cubic-bezier(0.4, 0, 0.2, 1);
+
+            .side-hd {
+                display: flex;
+                justify-content: space-between;
+                height: var(--side-hd-height);
+                line-height: var(--side-hd-height);
+            }
+            .side-bd {
+                height: calc(100% - var(--side-hd-height) - var(--side-ft-height));
+                overflow-y: auto;
+            }
+            .side-ft {
+                position: absolute;
+                bottom: 0;
+                height: var(--side-ft-height);
+                line-height: var(--side-ft-height);
+                width: 100%;
+                background: #fff;
+                padding-left: 12px;
+
+                .nav-toggle {
+                    width: 32px;
+                    height: 32px;
+                    line-height: 32px;
+                    cursor: pointer;
+                    display: inline-block;
+                    text-align: center;
+                    transform: rotate(180deg);
+                    transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1);
+
+                    &:hover {
+                        opacity: .8;
+                    }
+                }
+            }
+        }
+
+        .breadcrumbs {
+            position: relative;
+            z-index: 99;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: var(--breadcrumb-height);
+            background: #fff;
+            box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
+            padding-left: 24px;
+            .current {
+                color: #000;
+                font-size: 16px;
+                font-weight: normal;
+            }
+        }
+
+        .main-container {
+            height: calc(100% - var(--footer-height) - var(--breadcrumb-height));
+            overflow: auto;
+        }
+
+        .footer {
+            position: fixed;
+            bottom: 0;
+            width: 100%;
+            background: #fff;
+            height: var(--footer-height);
+            line-height: var(--footer-height);
+            border-top: 1px solid #DCDEE5;
+            text-align: center;
+            padding-left: var(--aside-width);
+            transition: padding .2s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .nav-list {
+            .nav-item {
+                display: flex;
+                align-items: center;
+                font-size: 14px;
+                height: 42px;
+                line-height: 42px;
+                padding: 0 12px 0 22px;
+                margin: 0;
+                white-space: nowrap;
+                cursor: pointer;
+
+                .bk-drag-icon {
+                    font-size: 16px;
+                    margin-right: 16px;
+                }
+                &:hover {
+                    background: #F6F6F9;
+                }
+                &.router-link-active {
+                    background: #E1ECFF;
+                    color: #3A84FF;
+                }
+            }
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/client/src/views/system/projects.vue b/paas-ce/lesscode/lib/client/src/views/system/projects.vue
new file mode 100644
index 000000000..8b99352be
--- /dev/null
+++ b/paas-ce/lesscode/lib/client/src/views/system/projects.vue
@@ -0,0 +1,764 @@
+<template>
+    <main class="projects page-content">
+        <div class="page-head">
+            <bk-button theme="primary" @click="handleCreate">新建</bk-button>
+            <ul class="filter-links">
+                <li
+                    v-for="(link, index) in filterLinks"
+                    :key="index"
+                    :class="['link-item', { 'active': filter === link.value }]"
+                    @click="handleClickFilter(link.value)">
+                    {{link.name}}
+                </li>
+            </ul>
+            <div class="extra">
+                <bk-input
+                    style="width: 400px"
+                    placeholder="请输入项目名称或描述"
+                    :clearable="true"
+                    :right-icon="'bk-icon icon-search'"
+                    v-model="keyword"
+                    @clear="handleSearchClear"
+                    @enter="handleSearchEnter">
+                </bk-input>
+            </div>
+        </div>
+        <div class="page-body" v-bkloading="{ isLoading: pageLoading, opacity: 1 }">
+            <div class="page-body-inner" v-show="!pageLoading">
+                <div class="project-list" v-show="projectList.length">
+                    <div :class="['project-item', { favorite: project.favorite }]" v-for="project in projectList" :key="project.id">
+                        <div class="item-bd" @click="toPage(project.id)">
+                            <template v-if="pageMap[project.id] && pageMap[project.id].length > 0">
+                                <div class="preview">
+                                    <img :src="pageMap[project.id][0].previewImg || projectPreivewImg" alt="项目缩略预览">
+                                </div>
+                            </template>
+                            <div class="empty" v-else>
+                                暂无页面
+                            </div>
+                            <div class="desc">
+                                <p class="desc-text">
+                                    {{project.projectDesc}}
+                                </p>
+                            </div>
+                        </div>
+                        <div class="item-ft">
+                            <div class="col">
+                                <h3 class="name" :title="project.projectName">{{project.projectName}}</h3>
+                                <div class="stat"><vnodes :vnode="getUpdateInfo(project)"></vnodes></div>
+                            </div>
+                            <div class="col">
+                                <bk-dropdown-menu :ref="`moreActionDropdown${project.id}`">
+                                    <span slot="dropdown-trigger" class="more-menu-trigger">
+                                        <i class="bk-drag-icon bk-drag-more-dot"></i>
+                                    </span>
+                                    <ul class="bk-dropdown-list" slot="dropdown-content">
+                                        <!-- <li><a href="javascript:;" @click="handleDownloadSource(project)">下载源码</a></li> -->
+                                        <li><a href="javascript:;" @click="toPage(project.id)">页面管理</a></li>
+                                        <li><a href="javascript:;" @click="handleRename(project)">重命名</a></li>
+                                        <li><a href="javascript:;" @click="handleCopy(project)">复制</a></li>
+                                        <!-- <li><a href="javascript:;" @click="handleDelete(project)">删除</a></li> -->
+                                    </ul>
+                                </bk-dropdown-menu>
+                            </div>
+                        </div>
+                        <span
+                            class="favorite-btn"
+                            v-bk-tooltips.top="{ content: project.favorite ? '取消收藏' : '添加收藏' }"
+                            @click.stop="handleClickFavorite(project)">
+                            <i :class="['bk-drag-icon', `bk-drag-favorite${project.favorite ? '' : '-o' }`]"></i>
+                        </span>
+                    </div>
+                </div>
+                <div class="empty" v-show="!projectList.length">
+                    <bk-exception class="exception-wrap-item exception-part" type="empty" scene="part">
+                        <div v-if="$route.query.q">无搜索结果</div>
+                        <div v-else>
+                            暂无项目
+                            <span v-show="!filter.length || filter === 'my'">
+                                ，<bk-link theme="primary" @click="handleCreate">立即创建</bk-link>
+                            </span>
+                        </div>
+                    </bk-exception>
+                </div>
+            </div>
+        </div>
+
+        <bk-dialog v-model="dialog.create.visible"
+            render-directive="if"
+            theme="primary"
+            :title="isCopy ? '复制项目' : '创建项目'"
+            width="600"
+            :mask-close="false"
+            :auto-close="false"
+            header-position="left"
+            @value-change="handleCreateDialogToggle">
+            <bk-form ref="createForm" :label-width="90" :rules="dialog.create.formRules" :model="dialog.create.formData">
+                <bk-form-item label="项目名称" required property="projectName">
+                    <bk-input maxlength="60" v-model="dialog.create.formData.projectName"
+                        placeholder="请输入项目名称，60个字符以内">
+                    </bk-input>
+                </bk-form-item>
+                <bk-form-item label="项目ID" required property="projectCode">
+                    <bk-input maxlength="255" v-model="dialog.create.formData.projectCode"
+                        placeholder="请输入，由字母、数字、中划线或下划线组成">
+                    </bk-input>
+                </bk-form-item>
+                <bk-form-item label="项目简介" required property="projectDesc">
+                    <bk-input
+                        v-model="dialog.create.formData.projectDesc"
+                        :type="'textarea'"
+                        :rows="3"
+                        :maxlength="100">
+                    </bk-input>
+                </bk-form-item>
+            </bk-form>
+            <div class="dialog-footer" slot="footer">
+                <bk-button
+                    theme="primary"
+                    :loading="dialog.create.loading"
+                    @click="handleCreateConfirm">确定</bk-button>
+                <bk-button @click="handleCreateCancel" :disabled="dialog.create.loading">取消</bk-button>
+            </div>
+        </bk-dialog>
+
+        <bk-dialog v-model="dialog.rename.visible"
+            theme="primary"
+            title="重命名"
+            width="600"
+            :mask-close="false"
+            :auto-close="false"
+            header-position="left"
+            @after-leave="handleRenameDialogAfterLeave">
+            <bk-form ref="renameForm" class="rename-form" :label-width="90" :rules="dialog.rename.formRules" :model="dialog.rename.formData">
+                <bk-form-item label="项目名称" required property="projectName">
+                    <bk-input ref="projectRenameInput"
+                        maxlength="60"
+                        v-model="dialog.rename.formData.projectName"
+                        placeholder="请输入项目名称，60个字符以内">
+                    </bk-input>
+                </bk-form-item>
+            </bk-form>
+            <div class="dialog-footer" slot="footer">
+                <bk-button
+                    theme="primary"
+                    :disabled="activatedProject.projectName === dialog.rename.formData.projectName"
+                    :loading="dialog.rename.loading"
+                    @click="handleRenameConfirm">确定</bk-button>
+                <bk-button @click="handleRenameCancel" :disabled="dialog.rename.loading">取消</bk-button>
+            </div>
+        </bk-dialog>
+
+        <bk-dialog v-model="dialog.delete.visible"
+            render-directive="if"
+            theme="primary"
+            ext-cls="delete-dialog-wrapper"
+            title="确认删除该项目？"
+            width="500"
+            footer-position="center"
+            :mask-close="false"
+            :auto-close="false"
+            @value-change="handleDeleteDialogToggle">
+            <bk-form ref="deleteForm" class="delete-form" :label-width="0" :rules="dialog.delete.formRules" :model="dialog.delete.formData">
+                <p class="confirm-name">请输入<em title="复制名称">“{{activatedProject.projectName}}”</em>确认</p>
+                <bk-form-item property="projectName">
+                    <bk-input
+                        maxlength="60"
+                        v-model="dialog.delete.formData.projectName"
+                        placeholder="请输入项目名称">
+                    </bk-input>
+                </bk-form-item>
+            </bk-form>
+            <div class="dialog-footer" slot="footer">
+                <bk-button
+                    theme="danger"
+                    :loading="dialog.delete.loading"
+                    @click="handleDeleteConfirm">删除</bk-button>
+                <bk-button @click="handleDeleteCancel" :disabled="dialog.delete.loading">取消</bk-button>
+            </div>
+        </bk-dialog>
+    </main>
+</template>
+
+<script>
+    import projectPreivewImg from '@/images/page-demo.png'
+    import dayjs from 'dayjs'
+    import relativeTime from 'dayjs/plugin/relativeTime'
+    import 'dayjs/locale/zh-cn'
+    dayjs.extend(relativeTime)
+    dayjs.locale('zh-cn')
+
+    const defaultCreateFormData = {
+        projectName: '',
+        projectCode: '',
+        projectDesc: '',
+        copyFrom: null
+    }
+
+    export default {
+        components: {
+            vnodes: {
+                functional: true,
+                render: (h, ctx) => ctx.props.vnode
+            }
+        },
+        data () {
+            return {
+                keyword: this.$route.query.q || '',
+                projectList: [],
+                pageMap: {},
+                projectPreivewImg,
+                filterLinks: [
+                    { name: '全部项目', value: '' },
+                    { name: '我创建的', value: 'my' },
+                    { name: '我收藏的', value: 'favorite' },
+                    { name: '我的共享', value: 'share' }
+                ],
+                dialog: {
+                    create: {
+                        visible: false,
+                        loading: false,
+                        formData: { ...defaultCreateFormData },
+                        formRules: {
+                            projectName: [
+                                {
+                                    required: true,
+                                    message: '必填项',
+                                    trigger: 'blur'
+                                }
+                            ],
+                            projectCode: [
+                                {
+                                    required: true,
+                                    message: '必填项',
+                                    trigger: 'blur'
+                                },
+                                {
+                                    regex: /^[\w-]+$/,
+                                    message: '需由字母、数字、中划线或下划线组成',
+                                    trigger: 'blur'
+                                }
+                            ],
+                            projectDesc: [
+                                {
+                                    required: true,
+                                    message: '必填项',
+                                    trigger: 'blur'
+                                }
+                            ]
+                        }
+                    },
+                    rename: {
+                        visible: false,
+                        loading: false,
+                        formData: {
+                            projectName: ''
+                        },
+                        formRules: {
+                            projectName: [
+                                {
+                                    required: true,
+                                    message: '必填项',
+                                    trigger: 'blur'
+                                }
+                            ]
+                        }
+                    },
+                    delete: {
+                        visible: false,
+                        loading: false,
+                        formData: {
+                            projectName: ''
+                        },
+                        formRules: {
+                            projectName: [
+                                {
+                                    required: true,
+                                    message: '必填项',
+                                    trigger: 'blur'
+                                },
+                                {
+                                    validator: (val) => {
+                                        return this.activatedProject.projectName === val
+                                    },
+                                    message: '名称不一致，请重试',
+                                    trigger: 'blur'
+                                }
+                            ]
+                        }
+                    }
+                },
+                activatedProject: {},
+                pageLoading: true
+            }
+        },
+        computed: {
+            filter () {
+                return this.$route.query.filter || ''
+            },
+            isCopy () {
+                return this.dialog.create.formData.copyFrom !== null
+            }
+        },
+        watch: {
+            $route: function () {
+                this.getProjectList()
+            },
+            keyword (val) {
+                if (!val) {
+                    this.handleSearchClear()
+                }
+            }
+        },
+        created () {
+            this.getProjectList()
+        },
+        methods: {
+            async getProjectList () {
+                this.pageLoading = true
+                try {
+                    const params = this.$route.query
+                    const { projectList, pageMap } = await this.$store.dispatch('project/query', { config: { params } })
+                    this.projectList = projectList
+                    this.pageMap = pageMap
+                } catch (e) {
+                    console.error(e)
+                } finally {
+                    this.pageLoading = false
+                }
+            },
+            getUpdateInfo (project) {
+                const latestPage = this.pageMap[project.id] ? this.pageMap[project.id][0] : null
+                return (
+                    latestPage
+                        ? <span class="user">{latestPage.updateUser || 'admin'} {dayjs(latestPage.updateTime).fromNow()}更新</span>
+                        : <span class="user">{project.createUser || 'admin'} {dayjs(project.createTime).fromNow()}创建</span>
+                )
+            },
+            async handleCreateConfirm () {
+                try {
+                    await this.$refs.createForm.validate()
+                    const data = this.dialog.create.formData
+
+                    this.dialog.create.loading = true
+                    const projectId = await this.$store.dispatch('project/create', { data })
+
+                    this.messageSuccess('项目创建成功')
+                    this.dialog.create.visible = false
+
+                    setTimeout(() => {
+                        this.toPage(projectId)
+                    }, 300)
+                } catch (e) {
+                    console.error(e)
+                } finally {
+                    this.dialog.create.loading = false
+                }
+            },
+            async handleClickFavorite (project) {
+                try {
+                    const favorite = project.favorite ? 0 : 1
+                    const data = {
+                        id: project.id,
+                        favorite
+                    }
+                    await this.$store.dispatch('project/favorite', { data })
+                    this.messageSuccess(`${favorite ? '添加' : '取消'}成功`)
+
+                    // 更新数据状态
+                    project.favorite = favorite
+                    if (this.filter === 'favorite') {
+                        this.getProjectList()
+                    }
+                } catch (e) {
+                    console.error(e)
+                }
+            },
+            async handleRenameConfirm () {
+                try {
+                    await this.$refs.renameForm.validate()
+
+                    const { id, projectName } = this.dialog.rename.formData
+                    const data = {
+                        id,
+                        fields: { projectName }
+                    }
+                    this.dialog.rename.loading = true
+
+                    const checkNameResult = await this.checkProjectName(projectName)
+                    if (!checkNameResult) {
+                        return
+                    }
+
+                    await this.$store.dispatch('project/update', { data })
+
+                    this.messageSuccess('重命名成功')
+                    this.dialog.rename.visible = false
+
+                    const activeProject = this.projectList.find(project => project.id === id)
+                    if (activeProject) {
+                        activeProject.projectName = projectName
+                    }
+                } catch (e) {
+                    console.error(e)
+                } finally {
+                    this.dialog.rename.loading = false
+                }
+            },
+            async handleDeleteConfirm () {
+                try {
+                    await this.$refs.deleteForm.validate()
+
+                    const { id } = this.dialog.delete.formData
+                    const data = { id }
+                    this.dialog.delete.loading = true
+
+                    await this.$store.dispatch('project/delete', { config: { data } })
+
+                    this.messageSuccess('删除成功')
+                    this.dialog.delete.visible = false
+
+                    this.getProjectList()
+                } catch (e) {
+                    console.error(e)
+                } finally {
+                    this.dialog.delete.loading = false
+                }
+            },
+            async checkProjectName (name) {
+                const res = await this.$store.dispatch('project/checkname', {
+                    data: { name },
+                    config: { globalError: false }
+                })
+                if (res.code !== 0) {
+                    this.messageError(res.message)
+                    return false
+                }
+                return true
+            },
+            handleCreateCancel () {
+                this.dialog.create.visible = false
+            },
+            handleRenameCancel () {
+                this.dialog.rename.visible = false
+            },
+            handleDeleteCancel () {
+                this.dialog.delete.visible = false
+            },
+            handleCreateDialogToggle () {
+                this.dialog.create.formData = { ...defaultCreateFormData }
+            },
+            handleRenameDialogAfterLeave () {
+                this.dialog.rename.formData.projectName = ''
+            },
+            handleDeleteDialogToggle () {
+                this.dialog.delete.formData.projectName = ''
+            },
+            handleCreate () {
+                defaultCreateFormData.copyFrom = null
+                defaultCreateFormData.projectName = ''
+                this.dialog.create.visible = true
+            },
+            async handleCopy (project) {
+                this.hideDropdownMenu(project)
+                defaultCreateFormData.copyFrom = project.id
+                defaultCreateFormData.projectName = `${project.projectName}-copy`
+                this.dialog.create.visible = true
+            },
+            async handleDownloadSource () {
+            },
+            async handleRename (project) {
+                this.activatedProject = project
+                this.hideDropdownMenu(project)
+
+                this.dialog.rename.visible = true
+                this.dialog.rename.formData.projectName = project.projectName
+                this.dialog.rename.formData.id = project.id
+                setTimeout(() => {
+                    this.$refs.projectRenameInput && this.$refs.projectRenameInput.$el.querySelector('input').focus()
+                }, 0)
+            },
+            async handleDelete (project) {
+                this.activatedProject = project
+                this.hideDropdownMenu(project)
+
+                this.dialog.delete.visible = true
+                this.dialog.delete.formData.id = project.id
+            },
+            handleClickFilter (filter = '') {
+                const query = { ...this.$route.query, ...{ filter } }
+                this.updateRoute({ query })
+            },
+            handleSearchClear (a, b) {
+                const query = { ...this.$route.query, ...{ q: '' } }
+                this.updateRoute({ query })
+            },
+            handleSearchEnter (value) {
+                const query = { ...this.$route.query, ...{ q: value } }
+                this.updateRoute({ query })
+            },
+            updateRoute (location) {
+                this.$router.push(location).catch(e => e)
+            },
+            hideDropdownMenu (project) {
+                this.$refs[`moreActionDropdown${project.id}`][0].hide()
+            },
+            toPage (projectId) {
+                this.$router.push({
+                    name: 'pageList',
+                    params: {
+                        projectId
+                    }
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="postcss" scoped>
+    @import "@/css/mixins/ellipsis";
+
+    .filter-links {
+        display: flex;
+        align-items: center;
+        margin-left: 16px;
+        .link-item {
+            padding: 6px 12px;
+            margin: 0 8px;
+            border-radius: 16px;
+            cursor: pointer;
+
+            &:hover {
+                background: #E1ECFF;
+            }
+
+            &.active {
+                background: #E1ECFF;
+                color: #3A84FF;
+            }
+        }
+    }
+
+    .project-list {
+        display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        margin-top: 10px;
+
+        .project-item {
+            position: relative;
+            flex: none;
+            width: 312px;
+            height: 242px;
+            margin: 0 14px 40px 0;
+            padding: 6px;
+            background: #fff;
+            border-radius: 0px 6px 6px 6px;
+            box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.11);
+            cursor: pointer;
+
+            &::before {
+                content: "";
+                position: absolute;
+                top: -10px;
+                left: 0;
+                width: 156px;
+                height: 10px;
+                border-radius: 6px 0px 0px 0px;
+                background: linear-gradient(-160deg, transparent 9px, #dcdee5 0)
+            }
+            &:hover {
+                box-shadow: 1px 2px 8px 2px rgba(0, 0 ,0 , 0.11);
+
+                .desc {
+                    display: block;
+                }
+                .favorite-btn {
+                    opacity: 1;
+                }
+                .preview {
+                    &::before {
+                        background: rgba(0, 0, 0, 0.4);
+                    }
+                }
+
+                .empty {
+                    &::before {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                        background: rgba(0, 0, 0, 0.4);
+                    }
+                }
+            }
+
+            &.favorite {
+                .favorite-btn {
+                    opacity: 1;
+                }
+            }
+
+            .favorite-btn {
+                position: absolute;
+                right: 16px;
+                top: 16px;
+                opacity: 0;
+                transition: all .3s ease;
+
+                .bk-drag-icon {
+                    font-size: 18px;
+                    color: #FAFBFD;
+                    cursor: pointer;
+                }
+                .bk-drag-favorite {
+                    color: #FE9C00;
+                }
+            }
+            .more-menu-trigger {
+                .bk-drag-more-dot {
+                    display: block;
+                    width: 32px;
+                    height: 32px;
+                    line-height: 34px;
+                    text-align: center;
+                    border-radius: 50%;
+                    cursor: pointer;
+                    font-size: 20px;
+                    color: #979BA5;
+                    &:hover {
+                        background: #F0F1F5;
+                    }
+                }
+            }
+
+            .item-bd {
+                flex: none;
+                position: relative;
+                width: 300px;
+                height: 166px;
+                background: #fff;
+                border-radius: 4px 4px 0px 0px;
+                overflow: hidden;
+            }
+            .item-ft {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin: 16px 10px 0 10px;
+            }
+
+            .preview {
+                position: relative;
+                font-size: 0;
+                height: 100%;
+                overflow: hidden;
+                border-radius: 4px 4px 0px 0px;
+                img {
+                    max-width: 100%;
+                }
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    background: rgba(0, 0, 0, 0.2);
+                }
+            }
+            .desc {
+                display: none;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                padding: 28px 26px 28px 21px;
+
+                .desc-text {
+                    font-size: 12px;
+                    color: #fff;
+                    margin: 0;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 5;
+                    -webkit-box-orient: vertical;
+                }
+            }
+            .empty {
+                display: flex;
+                position: relative;
+                align-items: center;
+                justify-content: center;
+                font-size: 14px;
+                font-weight: 700;
+                color: #C4C6CC;
+                height: 100%;
+                background: #f0f1f5;
+                border-radius: 4px 4px 0px 0px;
+            }
+            .name {
+                margin: 0;
+                font-size: 14px;
+                font-weight: 700;
+                color: #63656E;
+                @mixin ellipsis 240px, block;
+            }
+            .stat {
+                font-size: 12px;
+                color: #979BA5;
+                padding: 4px 0;
+            }
+        }
+    }
+
+    .rename-form {
+        margin: 12px 0;
+    }
+
+    /deep/ .dialog-footer {
+        button + button {
+            margin-left: 4px;
+        }
+    }
+
+    /deep/ .delete-dialog-wrapper {
+        .delete-form {
+            .confirm-name {
+                margin: 16px 0 8px 0;
+                font-size: 14px;
+                em {
+                    font-style: normal;
+                    font-weight: 700;
+                    cursor: pointer;
+                }
+            }
+        }
+        .bk-dialog-footer {
+            text-align: center;
+            padding: 0 65px 40px;
+            background-color: #fff;
+            border: none;
+            border-radius: 0;
+        }
+        .dialog-footer {
+            button {
+                width: 86px;
+            }
+        }
+    }
+
+    @media screen and (max-width: 1280px) {
+        .project-list {
+            .project-item {
+                width: 310px;
+                height: 240px;
+            }
+        }
+    }
+</style>
diff --git a/paas-ce/lesscode/lib/server/app.browser.js b/paas-ce/lesscode/lib/server/app.browser.js
index e235bc566..2c826ef38 100644
--- a/paas-ce/lesscode/lib/server/app.browser.js
+++ b/paas-ce/lesscode/lib/server/app.browser.js
@@ -8,12 +8,15 @@
  * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
  * specific language governing permissions and limitations under the License.
  */
+require('reflect-metadata')
+require('@babel/register')
 
 const http = require('http')
 const { resolve } = require('path')
 const Koa = require('koa')
 const bodyparser = require('koa-bodyparser')
 const json = require('koa-json')
+const session = require('koa-session')
 const koaStatic = require('koa-static')
 const views = require('co-views')
 const koaMount = require('koa-mount')
@@ -32,16 +35,44 @@ const authMiddleware = require('./middleware/auth')
 const httpMiddleware = require('./middleware/http')
 const errorMiddleware = require('./middleware/error')
 const jsonSendMiddleware = require('./middleware/json-send')
+const { requestContextMiddleware } = require('./middleware/request-context')
+
 const { CODE } = require('./util')
 const httpConf = require('./conf/http')
 
+const { createConnection } = require('typeorm')
+const dataBaseConf = require('./conf/data-base')
+
+const SESSION_CONFIG = {
+    // cookie key
+    key: 'lesscode-session',
+    // cookie 的过期时间，毫秒
+    maxAge: 86400000,
+    // 自动提交到响应头
+    autoCommit: true,
+    // 是否允许重写
+    overwrite: true,
+    httpOnly: true,
+    // 是否签名
+    signed: true,
+    // 每次响应时是否刷新 session 的有效期
+    rolling: false,
+    // 在 session 快过期时是否刷新 session 的有效期
+    renew: false
+}
+
 async function startServer () {
     const PORT = httpConf.port
     const IS_DEV = process.env.NODE_ENV === 'development'
 
     const app = new Koa()
 
-    // 统一错误处理，
+    // session 加密密钥
+    app.keys = ['lesscode login secret']
+
+    app.use(session(SESSION_CONFIG, app))
+
+    // 统一处理，
     // @see https://github.com/koajs/koa/wiki/Error-Handling
     app.use(async (ctx, next) => {
         try {
@@ -86,13 +117,14 @@ async function startServer () {
         logger.error(err)
     })
 
-    app.use(errorMiddleware())
     app.use(bodyparser())
     app.use(json())
 
+    app.use(errorMiddleware())
     app.use(httpMiddleware())
-    app.use(authMiddleware())
     app.use(jsonSendMiddleware())
+    app.use(authMiddleware())
+    app.use(requestContextMiddleware())
 
     app.use(koaMount(
         '/static', koaStatic(resolve(__dirname, '..', IS_DEV ? 'client/static' : 'client/dist/static')))
@@ -179,4 +211,4 @@ async function startServer () {
     })
 }
 
-startServer()
+createConnection(dataBaseConf).then(startServer).catch((err) => console.error(err))
diff --git a/paas-ce/lesscode/lib/server/conf/data-base.js.example b/paas-ce/lesscode/lib/server/conf/data-base.js.example
new file mode 100644
index 000000000..ebbf58ee6
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/conf/data-base.js.example
@@ -0,0 +1,65 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+const path = require('path')
+
+// 用于配置线上和本地开发数据库
+const config = process.env.NODE_ENV === 'production'
+    ? {
+        // 线上数据库名
+        database: process.env.GCS_MYSQL_NAME,
+        // 线上数据库用户名
+        username: process.env.GCS_MYSQL_USER,
+        // 线上数据库密码
+        password: process.env.GCS_MYSQL_PASSWORD,
+        // 线上host
+        host: process.env.GCS_MYSQL_HOST,
+        // 线上端口
+        port: process.env.GCS_MYSQL_PORT,
+        dialect: 'mysql',
+        // 线上记录日志类型，默认为记录 error 日志
+        logging: ['error']
+    }
+    : {
+        // 本地开发数据库名
+        database: 'lesscode',
+        // 本地开发数据库用户名
+        username: 'xxx',
+        // 本地开发数据库密码
+        password: 'xxx',
+        // 本地开发host
+        host: 'localhost',
+        // 本地开发端口
+        port: 3306,
+        dialect: 'mysql',
+        // 本地记录日志类型，默认为记录所有日志
+        logging: true
+    }
+
+module.exports = {
+    type: 'mysql',
+    host: config.host,
+    port: config.port,
+    username: config.username,
+    password: config.password,
+    database: config.database,
+    entities: [path.resolve(__dirname, '..', 'model/entities/!(base){.js,.ts}')],
+    // 启用数据库记录
+    logging: config.logging,
+    // 高亮字体的打印信息
+    logger: 'advanced-console',
+    // 自动同步数据库表结构，有删除数据风险，推荐关闭
+    synchronize: false,
+    // 会自动执行更新SQL，推荐手动执行脚本，关闭该选项
+    migrationsRun: false,
+    extra: {
+        connectionLimit: 5
+    }
+}
diff --git a/paas-ce/lesscode/lib/server/conf/database.js b/paas-ce/lesscode/lib/server/conf/database.js
deleted file mode 100644
index 63bb935f6..000000000
--- a/paas-ce/lesscode/lib/server/conf/database.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
- * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://opensource.org/licenses/MIT
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
- * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations under the License.
- */
-
-module.exports = process.env.NODE_ENV === 'production'
-    ? {
-        database: process.env.GCS_MYSQL_NAME,
-        username: process.env.GCS_MYSQL_USER,
-        password: process.env.GCS_MYSQL_PASSWORD,
-        host: process.env.GCS_MYSQL_HOST,
-        port: process.env.GCS_MYSQL_PORT,
-        dialect: 'mysql'
-    }
-    : {
-        database: 'vue_visualization',
-        username: 'root',
-        password: 'wanglei223',
-        host: 'localhost',
-        port: 5000,
-        dialect: 'mysql'
-    }
diff --git a/paas-ce/lesscode/lib/server/conf/http.js b/paas-ce/lesscode/lib/server/conf/http.js.example
similarity index 71%
rename from paas-ce/lesscode/lib/server/conf/http.js
rename to paas-ce/lesscode/lib/server/conf/http.js.example
index be45a444c..6e621d07f 100644
--- a/paas-ce/lesscode/lib/server/conf/http.js
+++ b/paas-ce/lesscode/lib/server/conf/http.js.example
@@ -12,9 +12,21 @@
 module.exports = process.env.NODE_ENV === 'production'
     ? {
         port: 5000,
-        protocol: 'http'
+        protocol: 'http',
+        // 企业版/社区版 base url
+        hostUrl: '',
+        // 应用 ID
+        appCode: '',
+        // 应用 TOKEN
+        appSecret: ''
     }
     : {
         port: 5000,
-        protocol: 'http'
+        protocol: 'http',
+        // 企业版/社区版 base url
+        hostUrl: '',
+        // 应用 ID
+        appCode: '',
+        // 应用 TOKEN
+        appSecret: ''
     }
diff --git a/paas-ce/lesscode/lib/server/controller/component-category.js b/paas-ce/lesscode/lib/server/controller/component-category.js
new file mode 100644
index 000000000..12dc102dc
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/controller/component-category.js
@@ -0,0 +1,100 @@
+import CompCategory from '../model/entities/comp-category'
+const { getRepository } = require('typeorm')
+
+// 所有组件分类
+export const list = async (ctx) => {
+    try {
+        const res = await getRepository(CompCategory).find()
+        console.log(CompCategory)
+        ctx.send({
+            code: 0,
+            message: 'success',
+            data: res
+        })
+    } catch (error) {
+        ctx.send({
+            code: -1,
+            message: error.message,
+            data: null
+        })
+    }
+}
+
+// 新建分类
+export const create = async (ctx) => {
+    try {
+        const category = new CompCategory()
+        category.category = ctx.request.body.category
+
+        const rowId = await getRepository(CompCategory).save(category)
+
+        ctx.send({
+            code: 0,
+            message: 'success',
+            data: rowId
+        })
+    } catch (error) {
+        ctx.send({
+            code: -1,
+            message: error.message,
+            data: null
+        })
+    }
+}
+
+// 编辑分类
+export const update = async (ctx) => {
+    try {
+        const { id, category } = ctx.request.body
+        if (!id) {
+            throw new Error('id不能为空')
+        }
+        if (!category) {
+            throw new Error('分类名不能为空')
+        }
+        const compCategoryRepository = getRepository(CompCategory)
+        const compCategory = await compCategoryRepository.findOne(id)
+        if (!compCategory) {
+            throw new Error('分类不存在')
+        }
+        compCategory.category = category
+        compCategory.updateUser = 'admin'
+
+        await compCategoryRepository.save(compCategory)
+
+        ctx.send({
+            code: 0,
+            message: 'success',
+            data: ''
+        })
+    } catch (error) {
+        ctx.send({
+            code: -1,
+            message: error.message,
+            data: null
+        })
+    }
+}
+
+// 删除分类
+export const categoryDelete = async (ctx) => {
+    try {
+        const compCategoryRepository = getRepository(CompCategory)
+
+        await compCategoryRepository.delete({
+            id: ctx.query.id
+        })
+
+        ctx.send({
+            code: 0,
+            message: 'success',
+            data: ''
+        })
+    } catch (error) {
+        ctx.send({
+            code: -1,
+            message: error.message,
+            data: null
+        })
+    }
+}
diff --git a/paas-ce/lesscode/lib/server/controller/component.js b/paas-ce/lesscode/lib/server/controller/component.js
new file mode 100644
index 000000000..e3c9f5676
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/controller/component.js
@@ -0,0 +1,173 @@
+import Comp from '../model/entities/comp'
+const { getRepository } = require('typeorm')
+
+// 所有组件
+export const list = async (ctx) => {
+    try {
+        const { category } = ctx.query
+        const params = {}
+        if (category) {
+            params.categoryId = category
+        }
+        const res = await getRepository(Comp).find(params)
+
+        ctx.send({
+            code: 0,
+            message: 'success',
+            data: res
+        })
+    } catch (error) {
+        ctx.send({
+            code: -1,
+            message: error.message,
+            data: null
+        })
+    }
+}
+
+// 使用中的组件
+export const useing = async (ctx) => {
+    try {
+        const compRepository = getRepository(Comp)
+
+        const res = await compRepository.find({
+            status: 1
+        })
+
+        ctx.send({
+            code: 0,
+            message: 'success',
+            data: res
+        })
+    } catch (error) {
+        ctx.send({
+            code: -1,
+            message: error.message,
+            data: null
+        })
+    }
+}
+
+// 新建组件
+export const create = async (ctx) => {
+    try {
+        const {
+            compCode,
+            compName,
+            compPath,
+            version,
+            categoryId,
+            isPublic,
+            description,
+            log
+        } = ctx.request.body
+
+        const comp = new Comp()
+        comp.compCode = compCode
+        comp.compName = compName
+        comp.compPath = compPath
+        comp.categoryId = categoryId
+        comp.latestVersionId = version
+        comp.belongProjectId = 1
+        comp.isPublic = isPublic
+        comp.status = 1
+        comp.description = description
+        comp.log = log
+        comp.createUser = 'admin'
+        comp.updateUser = 'admin'
+
+        const rowId = await getRepository(Comp).save(comp)
+
+        ctx.send({
+            code: 0,
+            message: 'success',
+            data: rowId
+        })
+    } catch (error) {
+        ctx.send({
+            code: -1,
+            message: error.message,
+            data: null
+        })
+    }
+}
+
+// 编辑组件
+export const update = async (ctx) => {
+    try {
+        const compRepository = getRepository(Comp)
+        const comp = await compRepository.findOne(ctx.query.id)
+        comp.updateUser = `admin_${Math.random()}`
+
+        await compRepository.save(comp)
+
+        ctx.send({
+            code: 0,
+            message: 'success',
+            data: ''
+        })
+    } catch (error) {
+        ctx.send({
+            code: -1,
+            message: error.message,
+            data: null
+        })
+    }
+}
+
+export const detail = async (ctx) => {
+    try {
+        const compRepository = getRepository(Comp)
+        const row = await compRepository.findOne(ctx.query.id)
+
+        const {
+            compCode,
+            compName,
+            compPath,
+            categoryId,
+            latestVersionId,
+            isPublic,
+            description,
+            log
+        } = row
+
+        ctx.send({
+            code: 0,
+            message: 'success',
+            data: {
+                compCode,
+                compName,
+                compPath,
+                categoryId,
+                version: latestVersionId,
+                isPublic,
+                description,
+                log
+            }
+        })
+    } catch (error) {
+        ctx.send({
+            code: -1,
+            message: error.message,
+            data: null
+        })
+    }
+}
+
+// 删除组件
+export const compDelete = (ctx) => {
+
+}
+
+// 删除组件
+export const upload = (ctx) => {
+    ctx.send({
+        code: 0,
+        message: 'success',
+        data: {
+            compName: `compName_${Math.random()}`,
+            compCode: `compCode_${Math.random()}`,
+            compPath: '/a/b/c'
+        }
+    })
+}
diff --git a/paas-ce/lesscode/lib/server/controller/function.js b/paas-ce/lesscode/lib/server/controller/function.js
new file mode 100644
index 000000000..e75237841
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/controller/function.js
@@ -0,0 +1,194 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+import { getGroupList, addFuncGroup, editFuncGroups, deleteFuncGroup, addFunction, getFuncList, editFunction, deleteFunction, getFuncRelatePageList } from '../model/function'
+
+module.exports = {
+    async getAllGroupFunc (ctx) {
+        try {
+            const query = ctx.request.query || {}
+            const projectId = query.projectId
+            const groupList = await getGroupList(projectId, '')
+            const groupIds = groupList.map(x => x.id)
+            let allFuncList = []
+            if (groupIds.length) allFuncList = await getFuncList(groupIds, '')
+            const funcIds = allFuncList.map(x => x.id)
+            let pageList = []
+            if (funcIds.length) pageList = await getFuncRelatePageList(funcIds)
+            groupList.forEach((group) => {
+                const functionList = allFuncList.filter((func) => (func.funcGroupId === group.id))
+                group.functionList = functionList.map((func) => {
+                    const pages = pageList.filter(x => x.funcId === func.id)
+                    func.pages = pages
+                    func.funcParams = (func.funcParams || '').split(',').filter(x => x !== '')
+                    func.remoteParams = (func.remoteParams || '').split(',').filter(x => x !== '')
+                    return func
+                })
+            })
+            ctx.send({
+                code: 0,
+                message: 'success',
+                data: groupList
+            })
+        } catch (err) {
+            ctx.throwError({
+                message: err.message
+            })
+        }
+    },
+
+    async getGroupList (ctx) {
+        try {
+            const query = ctx.request.query || {}
+            const projectId = query.projectId
+            const groupName = query.searchGroupStr
+            const data = await getGroupList(projectId, groupName)
+            ctx.send({
+                code: 0,
+                message: 'success',
+                data
+            })
+        } catch (err) {
+            ctx.throwError({
+                message: err.message
+            })
+        }
+    },
+
+    async addFuncGroup (ctx) {
+        try {
+            const postData = ctx.request.body
+            const data = await addFuncGroup(postData)
+            ctx.send({
+                code: 0,
+                message: 'success',
+                data
+            })
+        } catch (err) {
+            ctx.throwError({
+                message: err.message
+            })
+        }
+    },
+
+    async editFuncGroups (ctx) {
+        try {
+            const postData = ctx.request.body
+            const data = await editFuncGroups(postData)
+            ctx.send({
+                code: 0,
+                message: 'success',
+                data
+            })
+        } catch (err) {
+            ctx.throwError({
+                message: err.message
+            })
+        }
+    },
+
+    async deleteFuncGroup (ctx) {
+        try {
+            const query = ctx.request.query || {}
+            const data = await deleteFuncGroup(query)
+            ctx.send({
+                code: 0,
+                message: 'success',
+                data
+            })
+        } catch (err) {
+            ctx.throwError({
+                message: err.message
+            })
+        }
+    },
+
+    async addFunction (ctx) {
+        try {
+            const postData = ctx.request.body
+            const data = await addFunction(postData)
+            data.funcParams = data.funcParams.split(',').filter(x => x !== '')
+            data.remoteParams = data.remoteParams.split(',').filter(x => x !== '')
+            ctx.send({
+                code: 0,
+                message: 'success',
+                data
+            })
+        } catch (err) {
+            ctx.throwError({
+                message: err.message
+            })
+        }
+    },
+
+    async getFuncList (ctx) {
+        try {
+            const query = ctx.request.query || {}
+            const id = query.id
+            const funcName = query.funcName
+            const funcList = await getFuncList([id], funcName)
+            const funcIds = funcList.map(x => x.id)
+            let pageList = []
+            if (funcIds.length) pageList = await getFuncRelatePageList(funcIds)
+            funcList.forEach((func) => {
+                const pages = pageList.filter(x => x.funcId === func.id)
+                func.pages = pages
+                func.funcParams = func.funcParams.split(',').filter(x => x !== '')
+                func.remoteParams = func.remoteParams.split(',').filter(x => x !== '')
+            })
+            ctx.send({
+                code: 0,
+                message: 'success',
+                data: funcList
+            })
+        } catch (err) {
+            ctx.throwError({
+                message: err.message
+            })
+        }
+    },
+
+    async editFunction (ctx) {
+        try {
+            const postData = ctx.request.body
+            const data = await editFunction([postData])
+            data.forEach((func) => {
+                func.funcParams = func.funcParams.split(',').filter(x => x !== '')
+                func.remoteParams = func.remoteParams.split(',').filter(x => x !== '')
+            })
+            ctx.send({
+                code: 0,
+                message: 'success',
+                data
+            })
+        } catch (err) {
+            ctx.throwError({
+                message: err.message
+            })
+        }
+    },
+
+    async deleteFunction (ctx) {
+        try {
+            const query = ctx.request.query || {}
+            const id = query.id
+            const data = await deleteFunction(id)
+            ctx.send({
+                code: 0,
+                message: 'success',
+                data
+            })
+        } catch (err) {
+            ctx.throwError({
+                message: err.message
+            })
+        }
+    }
+}
diff --git a/paas-ce/lesscode/lib/server/controller/mock-data.js b/paas-ce/lesscode/lib/server/controller/mock-data.js
new file mode 100644
index 000000000..9bba4cc58
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/controller/mock-data.js
@@ -0,0 +1,146 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+function strToJson (str) {
+    // eslint-disable-next-line no-new-func
+    const json = (new Function('return ' + str))()
+    return json
+}
+
+const Data = {
+    async getApiData (ctx) {
+        try {
+            const body = ctx.request.body || {}
+            const url = body.url
+            const type = body.type || 'get'
+            let apiData = body.apiData
+            if (apiData) apiData = strToJson(apiData)
+            ctx.http.defaults.withCredentials = true
+            if (ctx.cookies.request.headers.cookie) ctx.http.defaults.headers.Cookie = ctx.cookies.request.headers.cookie
+            const re = await ctx.http[type](url, apiData)
+            ctx.send(re.data)
+        } catch (err) {
+            console.error(err)
+            ctx.throwError({
+                message: err.message
+            })
+        }
+    },
+
+    async getMockData (ctx) {
+        const count = 20
+        const data = []
+        for (let i = 0; i < count; i++) {
+            data.push({
+                id: i,
+                projectId: `id-${i}`,
+                projectCode: `code-${i}`,
+                projectName: `项目-${i}`,
+                name: `名称-${i}`
+            })
+        }
+        try {
+            ctx.send({
+                code: 0,
+                message: 'success',
+                data
+            })
+        } catch (err) {
+            ctx.throwError({
+                message: err.message
+            })
+        }
+    },
+
+    async getXTableData (ctx) {
+        const data = {
+            msg: [
+                {
+                    cluster_config: {
+                        creator: 'system',
+                        cluster_name: '测试1',
+                        create_time: '2019-11-19 17:52:08',
+                        cluster_id: 1,
+                        port: 10004,
+                        domain_name: '',
+                        is_editable: false,
+                        state: true
+                    },
+                    is_editable: true
+                },
+                {
+                    cluster_config: {
+                        creator: 'system',
+                        cluster_name: '测试2',
+                        create_time: '2019-11-19 17:52:08',
+                        cluster_id: 2,
+                        port: 10004,
+                        domain_name: '127.0.0.1',
+                        is_editable: true,
+                        state: true
+                    },
+                    is_editable: true
+                },
+                {
+                    cluster_config: {
+                        creator: 'system',
+                        cluster_name: '测试3',
+                        create_time: '2019-11-19 17:52:08',
+                        cluster_id: 3,
+                        port: 10004,
+                        domain_name: '127.0.0.1',
+                        is_editable: true,
+                        state: false
+                    },
+                    is_editable: true
+                },
+                {
+                    cluster_config: {
+                        creator: 'system',
+                        cluster_name: '测试4',
+                        create_time: '2019-11-19 17:52:08',
+                        cluster_id: 4,
+                        port: 10004,
+                        domain_name: '',
+                        is_editable: true,
+                        state: true
+                    },
+                    is_editable: true
+                },
+                {
+                    cluster_config: {
+                        creator: 'system',
+                        cluster_name: '搜索测试5',
+                        create_time: '2019-11-19 17:52:08',
+                        cluster_id: 5,
+                        port: 10004,
+                        domain_name: '',
+                        is_editable: false,
+                        state: false
+                    },
+                    is_editable: false
+                }
+            ]
+        }
+        try {
+            ctx.send({
+                code: 0,
+                message: 'success',
+                data
+            })
+        } catch (err) {
+            ctx.throwError({
+                message: err.message
+            })
+        }
+    }
+}
+
+module.exports = Data
diff --git a/paas-ce/lesscode/lib/server/controller/page.js b/paas-ce/lesscode/lib/server/controller/page.js
new file mode 100644
index 000000000..6d18c8ea8
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/controller/page.js
@@ -0,0 +1,152 @@
+import PageModel from '../model/page'
+import Page from '../model/entities/page'
+import { getRepository } from 'typeorm'
+
+export const getPageList = async (ctx) => {
+    try {
+        const { projectId } = ctx.query
+        const res = await PageModel.getProjectPages(projectId)
+
+        ctx.send({
+            code: 0,
+            message: 'success',
+            data: res
+        })
+    } catch (err) {
+        ctx.throwError({
+            message: err.message
+        })
+    }
+}
+
+// 新建页面
+export const createPage = async (ctx) => {
+    try {
+        const { projectId, pageData } = ctx.request.body
+        const projectPageData = {
+            projectId
+        }
+        const { id } = await PageModel.createPage(pageData, projectPageData)
+        ctx.send({
+            code: 0,
+            message: 'success',
+            data: id
+        })
+    } catch (err) {
+        ctx.throwError({
+            message: err.message
+        })
+    }
+}
+
+// 编辑页面
+export const updatePage = async (ctx) => {
+    try {
+        const { pageData } = ctx.request.body
+        const PageRepository = getRepository(Page)
+
+        const { id } = await PageRepository.save(pageData)
+
+        ctx.send({
+            code: 0,
+            message: 'success',
+            data: id
+        })
+    } catch (err) {
+        ctx.throwError({
+            message: err.message
+        })
+    }
+}
+
+// 复制页面
+export const copyPage = async (ctx) => {
+    try {
+        const { projectId, pageData } = ctx.request.body
+        const projectPageData = {
+            projectId
+        }
+
+        const { id: postId, pageName: postName } = pageData
+        const prePage = await getRepository(Page).findOne(postId)
+        const newPageData = Object.assign(prePage, { pageName: postName, id: undefined })
+        const { id } = await PageModel.createPage(newPageData, projectPageData)
+        ctx.send({
+            code: 0,
+            message: 'success',
+            data: id
+        })
+    } catch (err) {
+        ctx.throwError({
+            message: err.message
+        })
+    }
+}
+
+export const detail = async (ctx) => {
+}
+
+// 删除页面
+export const deletePage = async (ctx) => {
+    try {
+        const { pageId } = ctx.query
+        const pageData = {
+            id: parseInt(pageId),
+            deleteFlag: 1
+        }
+        const { id } = await getRepository(Page).save(pageData)
+
+        ctx.send({
+            code: 0,
+            message: 'success',
+            data: id
+        })
+    } catch (err) {
+        ctx.throwError({
+            message: err.message
+        })
+    }
+}
+
+// checkName
+export const checkName = async (ctx) => {
+    const { pageName, projectId } = ctx.request.body
+    try {
+        // const existPage = await getRepository(Page).findOne({ pageName })
+        const existPage = await PageModel.checkProjectPageExist(projectId, pageName)
+        console.log(ctx.request.body, pageName, existPage, 7788)
+        if (existPage && existPage.length) {
+            ctx.throwError({
+                message: '该页面名称已存在'
+            })
+        } else {
+            ctx.send({
+                code: 0,
+                message: 'OK',
+                data: null
+            })
+        }
+    } catch (err) {
+        ctx.throwError({
+            message: err.message
+        })
+    }
+}
+
+// 页面详情
+export const pageDetail = async (ctx) => {
+    try {
+        const { pageId } = ctx.request.query
+        const queryParams = Object.assign({}, { id: pageId }, { deleteFlag: 0 })
+        const detail = await getRepository(Page).findOne(queryParams)
+        ctx.send({
+            code: 0,
+            message: 'OK',
+            data: detail
+        })
+    } catch (err) {
+        ctx.throwError({
+            message: err.message || err
+        })
+    }
+}
diff --git a/paas-ce/lesscode/lib/server/controller/data.js b/paas-ce/lesscode/lib/server/controller/perm.js
similarity index 65%
rename from paas-ce/lesscode/lib/server/controller/data.js
rename to paas-ce/lesscode/lib/server/controller/perm.js
index 9759a51f7..5e038ef28 100644
--- a/paas-ce/lesscode/lib/server/controller/data.js
+++ b/paas-ce/lesscode/lib/server/controller/perm.js
@@ -8,19 +8,21 @@
  * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
  * specific language governing permissions and limitations under the License.
  */
+import { getUserPerms } from '../model/perm'
 
-const Data = {
-    async getApiData (ctx) {
+const Perm = {
+    async getUserPerm (ctx) {
         try {
-            const body = ctx.request.body || {}
-            const url = body.url
-            const type = body.type || 'get'
-            ctx.http.defaults.withCredentials = true
-            if (ctx.cookies.request.headers.cookie) ctx.http.defaults.headers.Cookie = ctx.cookies.request.headers.cookie
-            const re = await ctx.http[type](url)
-            ctx.send(re.data)
+            const query = ctx.request.query || {}
+            const projectId = query.projectId
+            const username = query.username || ctx.username
+            const data = await getUserPerms(projectId, username)
+            ctx.send({
+                code: 0,
+                message: 'success',
+                data
+            })
         } catch (err) {
-            console.error(err)
             ctx.throwError({
                 message: err.message
             })
@@ -28,4 +30,4 @@ const Data = {
     }
 }
 
-module.exports = Data
+module.exports = Perm
diff --git a/paas-ce/lesscode/lib/server/controller/project.js b/paas-ce/lesscode/lib/server/controller/project.js
new file mode 100644
index 000000000..8cc3d511e
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/controller/project.js
@@ -0,0 +1,240 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import projectModel from '../model/project'
+const { CODE } = require('../util')
+
+module.exports = {
+    async createProject (ctx) {
+        const projectData = ctx.request.body
+        const userInfo = ctx.session.userInfo
+        projectData.createUser = userInfo.username
+        const userProjectRoleData = {
+            userId: userInfo.id,
+            roleId: 1
+        }
+
+        try {
+            const res = {
+                code: 0,
+                message: 'OK',
+                data: null
+            }
+
+            const { projectName, projectCode } = projectData
+
+            // 检查名称和英文ID的唯一性
+            const [foundNameProject, foundCodeProject] = await Promise.all([
+                projectModel.findOneProjectByNameAndUserId(projectName, userInfo.id),
+                projectModel.findOneProjectByCodeAndUserId(projectCode, userInfo.id)
+            ])
+
+            if (foundNameProject && foundNameProject.length) {
+                ctx.throw(200, '项目名称已经存在', { code: CODE.BIZ.PROJECT_NAME_EXISTED })
+            }
+
+            if (foundCodeProject && foundCodeProject.length) {
+                ctx.throw(200, '项目ID已经存在', { code: CODE.BIZ.PROJECT_ID_EXISTED })
+            }
+
+            const { projectId } = await projectModel.createProject(projectData, userProjectRoleData)
+
+            res.data = projectId
+
+            ctx.send(res)
+        } catch (e) {
+            ctx.throw(e)
+        }
+    },
+
+    async queryProject (ctx) {
+        const userInfo = ctx.session.userInfo
+        const { filter = '', q } = ctx.request.query
+        const query = {
+            condition: [],
+            params: {}
+        }
+
+        if (q) {
+            query.condition.push('(project.projectName LIKE :q OR project.projectDesc LIKE :q)')
+            query.params = { q: `%${q}%` }
+        }
+
+        let projectList = []
+        switch (filter) {
+            case 'my':
+                query.condition.push('project.createUser = :user')
+                query.params.user = userInfo.username
+                query.condition = query.condition.join(' AND ')
+                projectList = await projectModel.queryMyCreateProject(query)
+                break
+            case 'favorite':
+                query.condition.push('favourite.userId = :userId')
+                query.params.userId = userInfo.id
+                query.condition = query.condition.join(' AND ')
+                projectList = await projectModel.queryMyFavoriteProject(query)
+                break
+            case 'share':
+                query.condition.push('user_project_role.userId = :userId')
+                query.params.userId = userInfo.id
+                query.condition = query.condition.join(' AND ')
+                projectList = await projectModel.queryShareWithProject(query)
+                break
+            default:
+                query.condition.push('user_project_role.userId = :userId')
+                query.params.userId = userInfo.id
+                query.condition = query.condition.join(' AND ')
+                projectList = await projectModel.queryAllProject(query)
+                break
+        }
+
+        // 获取项目下的页面
+        let pageList = []
+        if (projectList.length) {
+            const projectIds = projectList.map(project => project.id)
+            pageList = await projectModel.queryProjectPage({
+                condition: 'project_page.projectId IN (:...projectIds)',
+                params: { projectIds }
+            })
+        }
+
+        // 获取已收藏的项目
+        const favoritetList = await projectModel.queryMyFavoriteProject({
+            condition: 'favourite.userId = :userId',
+            params: { userId: userInfo.id }
+        })
+
+        // 按projectId分组
+        const pageMap = {}
+        pageList.forEach((page) => {
+            if (pageMap[page.projectId]) {
+                pageMap[page.projectId].push(page)
+            } else {
+                pageMap[page.projectId] = [page]
+            }
+        })
+
+        // 按页面更新时间和创建时间倒序
+        projectList.forEach(project => {
+            const projectId = project.id
+            if (pageMap[projectId]) {
+                project['pageUpdateTime'] = pageMap[projectId][0].updateTime
+            }
+            project['favorite'] = favoritetList.find(item => item.id === projectId) ? 1 : 0
+        })
+        // projectList.sort((a, b) => {
+        //     if (!a.pageUpdateTime && !b.pageUpdateTime) {
+        //         return 0
+        //     } else if (!a.pageUpdateTime && b.pageUpdateTime) {
+        //         return 1
+        //     } else if (a.pageUpdateTime && !b.pageUpdateTime) {
+        //         return -1
+        //     }
+        //     return new Date(b.pageUpdateTime) - new Date(a.pageUpdateTime)
+        // })
+
+        ctx.send({
+            code: 0,
+            message: '',
+            data: {
+                projectList,
+                pageMap
+            }
+        })
+    },
+
+    async updateProject (ctx) {
+        try {
+            const { id, fields } = ctx.request.body
+            const { affected } = await projectModel.updateProject(id, fields)
+            ctx.send({
+                code: 0,
+                message: 'OK',
+                data: affected
+            })
+        } catch (e) {
+            ctx.throw(e)
+        }
+    },
+
+    async deleteProject (ctx) {
+        try {
+            const { id } = ctx.request.body
+            const fields = { deleteFlag: 1 }
+            const { affected } = await projectModel.updateProject(id, fields)
+            ctx.send({
+                code: 0,
+                message: 'OK',
+                data: affected
+            })
+        } catch (e) {
+            ctx.throw(e)
+        }
+    },
+
+    async favorite (ctx) {
+        const { id, favorite } = ctx.request.body
+        const userInfo = ctx.session.userInfo
+        const data = {
+            userId: userInfo.id,
+            projectId: id
+        }
+
+        try {
+            if (favorite) {
+                await projectModel.addFavorite(data)
+            } else {
+                await projectModel.removeFavorite(data)
+            }
+            ctx.send({
+                code: 0,
+                message: 'OK',
+                data: null
+            })
+        } catch (e) {
+            ctx.throw(e)
+        }
+    },
+
+    async checkname (ctx) {
+        const { name } = ctx.request.body
+        const res = {
+            code: 0,
+            message: 'OK',
+            data: null
+        }
+        try {
+            const foundNameProject = await projectModel.findOneProjectByNameAndUserId(name, ctx.session.userInfo.id)
+            if (foundNameProject && foundNameProject.length) {
+                ctx.throw(200, '项目名称已经存在', { code: CODE.BIZ.PROJECT_NAME_EXISTED })
+            }
+            ctx.send(res)
+        } catch (e) {
+            ctx.throw(e)
+        }
+    },
+
+    async projectDetail (ctx) {
+        try {
+            const { projectId } = ctx.request.query
+            const detail = await projectModel.findProjectDetail({ id: projectId })
+            ctx.send({
+                code: 0,
+                message: 'OK',
+                data: detail
+            })
+        } catch (err) {
+            ctx.throwError({
+                message: err.message
+            })
+        }
+    }
+}
diff --git a/paas-ce/lesscode/lib/server/controller/test.js b/paas-ce/lesscode/lib/server/controller/test.js
deleted file mode 100644
index 33884d5ad..000000000
--- a/paas-ce/lesscode/lib/server/controller/test.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
- * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://opensource.org/licenses/MIT
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
- * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations under the License.
- */
-
-const Test = {
-    async getMockData (ctx) {
-        const count = 20
-        const data = []
-        for (let i = 0; i < count; i++) {
-            data.push({
-                id: i,
-                projectId: `id-${i}`,
-                projectCode: `code-${i}`,
-                projectName: `项目-${i}`,
-                name: `名称-${i}`
-            })
-        }
-        try {
-            ctx.send({
-                code: 0,
-                message: 'success',
-                data
-            })
-        } catch (err) {
-            ctx.throwError({
-                message: err.message
-            })
-        }
-    },
-
-    getTable (ctx) {
-        try {
-            ctx.send({
-                code: 0,
-                data: {
-                    msg: [
-                        {
-                            cluster_config: {
-                                creator: 'system',
-                                cluster_name: '测试1',
-                                create_time: '2019-11-19 17:52:08',
-                                cluster_id: 1,
-                                port: 10004,
-                                domain_name: '',
-                                is_editable: false,
-                                state: true
-                            },
-                            is_editable: true
-                        },
-                        {
-                            cluster_config: {
-                                creator: 'system',
-                                cluster_name: '测试2',
-                                create_time: '2019-11-19 17:52:08',
-                                cluster_id: 2,
-                                port: 10004,
-                                domain_name: '127.0.0.1',
-                                is_editable: true,
-                                state: true
-                            },
-                            is_editable: true
-                        },
-                        {
-                            cluster_config: {
-                                creator: 'system',
-                                cluster_name: '测试3',
-                                create_time: '2019-11-19 17:52:08',
-                                cluster_id: 3,
-                                port: 10004,
-                                domain_name: '127.0.0.1',
-                                is_editable: true,
-                                state: false
-                            },
-                            is_editable: true
-                        },
-                        {
-                            cluster_config: {
-                                creator: 'system',
-                                cluster_name: '测试4',
-                                create_time: '2019-11-19 17:52:08',
-                                cluster_id: 4,
-                                port: 10004,
-                                domain_name: '',
-                                is_editable: true,
-                                state: true
-                            },
-                            is_editable: true
-                        },
-                        {
-                            cluster_config: {
-                                creator: 'system',
-                                cluster_name: '搜索测试5',
-                                create_time: '2019-11-19 17:52:08',
-                                cluster_id: 5,
-                                port: 10004,
-                                domain_name: '',
-                                is_editable: false,
-                                state: false
-                            },
-                            is_editable: false
-                        }
-                    ]
-                },
-                message: 'ok'
-            })
-        } catch (err) {
-            ctx.throwError({
-                message: err.message
-            })
-        }
-    },
-
-    remove (ctx) {
-        try {
-            ctx.send({
-                code: 0,
-                data: {
-                    msg: '删除成功'
-                },
-                message: 'ok'
-            })
-        } catch (err) {
-            ctx.throwError({
-                message: err.message
-            })
-        }
-    }
-}
-
-module.exports = Test
diff --git a/paas-ce/lesscode/lib/server/controller/user.js b/paas-ce/lesscode/lib/server/controller/user.js
index aaaa11f1c..7cd10ebfb 100644
--- a/paas-ce/lesscode/lib/server/controller/user.js
+++ b/paas-ce/lesscode/lib/server/controller/user.js
@@ -9,23 +9,67 @@
  * specific language governing permissions and limitations under the License.
  */
 
-const User = {
-    getUserInfo (ctx) {
-        try {
-            ctx.send({
-                code: 0,
-                message: 'success',
-                data: {
-                    avatar_url: '',
-                    username: 'admin'
-                }
-            })
-        } catch (err) {
-            ctx.throwError({
-                message: err.message
-            })
-        }
-    }
+import UserModel from '../model/user'
+// import User from '../model/entities/user'
+// import { getRepository } from 'typeorm'
+
+export const findUserByBk = async bkUsername => {
+    const ret = await UserModel.findOneByBk(bkUsername)
+    return ret
+}
+
+export const addUser = async userData => {
+    const res = await UserModel.addUser(userData)
+    return res.id
 }
 
-module.exports = User
+// export const getUserByBk = async ctx => {
+//     try {
+//         const query = ctx.request.query || {}
+//         const bkUsername = query.bk_username
+//         const res = await findUserByBk(bkUsername)
+//         ctx.send({
+//             code: 0,
+//             message: 'success',
+//             data: res
+//         })
+//     } catch (err) {
+//         console.error(err)
+//         ctx.throwError({
+//             message: err.message
+//         })
+//     }
+// }
+
+// export const getUserByBk = async (ctx) => {
+//     try {
+//         const { projectId, pageData } = ctx.request.body
+//         const projectPageData = {
+//             projectId
+//         }
+//         const { id } = await PageModel.createPage(pageData, projectPageData)
+//         ctx.send({
+//             code: 0,
+//             message: 'success',
+//             data: id
+//         })
+//     } catch (err) {
+//         ctx.throwError({
+//             message: err.message
+//         })
+//     }
+// }
+
+export const getUserInfo = ctx => {
+    try {
+        ctx.send({
+            code: 0,
+            message: 'success',
+            data: ctx.session.userInfo
+        })
+    } catch (err) {
+        ctx.throwError({
+            message: err.message
+        })
+    }
+}
diff --git a/paas-ce/lesscode/lib/server/middleware/auth.js b/paas-ce/lesscode/lib/server/middleware/auth.js
index de0197ffd..533b82e70 100644
--- a/paas-ce/lesscode/lib/server/middleware/auth.js
+++ b/paas-ce/lesscode/lib/server/middleware/auth.js
@@ -9,8 +9,97 @@
  * specific language governing permissions and limitations under the License.
  */
 
+const https = require('https')
+const axios = require('axios')
+const querystring = require('querystring')
+const httpConf = require('../conf/http')
+const { CODE, isAjaxReq } = require('../util')
+const { findUserByBk, addUser } = require('../controller/user')
+const { setRequestContext } = require('./request-context')
+
 module.exports = () => {
     return async function (ctx, next) {
-        await next()
+        try {
+            const bkToken = ctx.cookies.get('bk_token')
+            const hostUrl = httpConf.hostUrl.replace(/\/$/, '')
+            const loginRedirectUrl = `${hostUrl}/login/?app_id=${httpConf.appCode}`
+            if (!bkToken) {
+                // 非 ajax 异步请求，页面跳转到登录
+                if (!isAjaxReq(ctx.request)) {
+                    ctx.status = 302
+                    ctx.redirect(`${loginRedirectUrl}&c_url=${encodeURIComponent(ctx.href)}`)
+                } else {
+                    ctx.status = 401
+                    ctx.send({
+                        code: 401,
+                        message: 'success',
+                        data: {
+                            loginUrl: `${loginRedirectUrl}&c_url=${encodeURIComponent(ctx.request.header.referer)}`
+                        }
+                    })
+                }
+                return
+            } else {
+                const params = querystring.stringify({
+                    bk_app_code: httpConf.appCode,
+                    bk_app_secret: httpConf.appSecret,
+                    bk_token: bkToken
+                })
+                const response = await axios({
+                    withCredentials: true,
+                    url: `${hostUrl}/api/c/compapi/v2/bk_login/get_user/?${params}`,
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    responseType: 'json',
+                    httpsAgent: new https.Agent({ rejectUnauthorized: false })
+                })
+
+                const { code, data } = response.data
+                if (code !== 0) {
+                    ctx.status = 302
+                    ctx.redirect(`${loginRedirectUrl}&c_url=${encodeURIComponent(ctx.href)}`)
+                    return
+                }
+
+                ctx.session.userInfo = { ...data, ...{ loginRedirectUrl } }
+                const userData = await findUserByBk(ctx.session.userInfo.bk_username)
+
+                if (!userData) {
+                    setRequestContext(ctx)
+                    const userId = await addUser({
+                        username: ctx.session.userInfo.bk_username,
+                        bk: ctx.session.userInfo.bk_username
+                    })
+                    ctx.session.userInfo.id = userId
+                    ctx.session.userInfo.username = ctx.session.userInfo.bk_username
+                } else {
+                    ctx.session.userInfo.id = userData.id
+                    ctx.session.userInfo.username = userData.username
+                }
+
+                await next()
+            }
+        } catch (err) {
+            const status = err.status
+            const message = err.message || '服务器内部出错'
+
+            // 程序出错异常
+            if (CODE.HTTP.indexOf(status)) {
+                ctx.status = err.status || 500
+                ctx.body = {
+                    code: err.status,
+                    message: message
+                }
+            } else {
+                const code = err.code || CODE.BIZ.NOT_DEFINED
+                ctx.body = {
+                    code: code,
+                    message: message
+                }
+            }
+            ctx.app.emit('error', err, ctx)
+        }
     }
 }
diff --git a/paas-ce/lesscode/lib/server/middleware/http.js b/paas-ce/lesscode/lib/server/middleware/http.js
index 9c3b7ce34..f380435d0 100644
--- a/paas-ce/lesscode/lib/server/middleware/http.js
+++ b/paas-ce/lesscode/lib/server/middleware/http.js
@@ -11,15 +11,14 @@
 
 const httpConf = require('../conf/http')
 const axios = require('axios')
-// const { getIP } = require('../util')
+const { getIP } = require('../util')
 
-// const host = process.env.NODE_ENV === 'production' ? getIP() : 'localhost'
+const host = process.env.NODE_ENV === 'production' ? getIP() : 'localhost'
 
 const instance = axios.create({
     withCredentials: true,
-    // baseURL: httpConf.protocol + '://' + getIP() + ':' + httpConf.port
-    // baseURL: httpConf.protocol + '://' + host + ':' + httpConf.port
-    baseURL: httpConf.protocol + '://localhost:' + httpConf.port
+    baseURL: httpConf.protocol + '://' + host + ':' + httpConf.port
+    // baseURL: httpConf.protocol + '://localhost:' + httpConf.port
 })
 
 instance.interceptors.response.use(response => response, error => Promise.reject(error))
diff --git a/paas-ce/lesscode/lib/server/middleware/json-send.js b/paas-ce/lesscode/lib/server/middleware/json-send.js
index 7fd17e63e..da28ada58 100644
--- a/paas-ce/lesscode/lib/server/middleware/json-send.js
+++ b/paas-ce/lesscode/lib/server/middleware/json-send.js
@@ -11,7 +11,7 @@
 
 module.exports = () => {
     return async (ctx, next) => {
-        ctx.send = (json) => {
+        ctx.send = json => {
             ctx.set('Content-Type', 'application/json')
             // ctx.bkLogger.info(json)
             ctx.body = JSON.stringify(json)
diff --git a/paas-ce/lesscode/lib/server/middleware/request-context.js b/paas-ce/lesscode/lib/server/middleware/request-context.js
new file mode 100644
index 000000000..1757d3ff5
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/middleware/request-context.js
@@ -0,0 +1,62 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import { getNamespace, createNamespace } from 'node-request-context'
+
+class RequestContext {
+    static spaceName = 'lesscode'
+
+    constructor (ctx) {
+        this.ctx = ctx
+    }
+
+    static currentRequestContext () {
+        const session = getNamespace(RequestContext.spaceName)
+        return session.get(RequestContext.name)
+    }
+
+    static getCurrentUser () {
+        const curRequestContext = RequestContext.currentRequestContext()
+        if (curRequestContext) {
+            const user = curRequestContext.ctx.session.userInfo
+            return user
+        }
+        return {}
+    }
+
+    static getCurrentCtx () {
+        const curRequestContext = RequestContext.currentRequestContext()
+        if (curRequestContext) return curRequestContext.ctx
+        return {}
+    }
+}
+
+const setRequestContext = (ctx) => {
+    const requestContext = new RequestContext(ctx)
+    const session = getNamespace(RequestContext.spaceName) || createNamespace(RequestContext.spaceName)
+
+    session.run(async () => {
+        session.set(RequestContext.name, requestContext)
+    })
+}
+
+const requestContextMiddleware = () => {
+    return async function (ctx, next) {
+        setRequestContext(ctx)
+        await next()
+    }
+}
+
+module.exports = {
+    setRequestContext,
+    requestContextMiddleware,
+    RequestContext
+}
diff --git a/paas-ce/lesscode/lib/server/model/Project.js b/paas-ce/lesscode/lib/server/model/Project.js
deleted file mode 100644
index c67b8d684..000000000
--- a/paas-ce/lesscode/lib/server/model/Project.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
- * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://opensource.org/licenses/MIT
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
- * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations under the License.
- */
-
-module.exports = (sequelize, Types) => {
-    const Project = sequelize.define('Project', {
-        name: {
-            type: Types.STRING,
-            allowNull: false,
-            unique: true
-        },
-        description: {
-            type: Types.STRING
-        },
-        status: {
-            type: Types.ENUM,
-            values: ['0', '1'],
-            defaultValue: '0',
-            description: '0启用， 1删除'
-        },
-        createBy: Types.STRING,
-        updateBy: Types.STRING
-    })
-
-    Project.association = models => {
-        models.Project.hasMany(models.ProjectConfig)
-    }
-
-    return Project
-}
diff --git a/paas-ce/lesscode/lib/server/model/ProjectConfig.js b/paas-ce/lesscode/lib/server/model/ProjectConfig.js
deleted file mode 100644
index bc161ab0c..000000000
--- a/paas-ce/lesscode/lib/server/model/ProjectConfig.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
- * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://opensource.org/licenses/MIT
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
- * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations under the License.
- */
-
-module.exports = (sequelize, Types) => {
-    const ProjectConfig = sequelize.define('ProjectConfig', {
-        json: {
-            // https://github.com/sequelize/sequelize/issues/4727
-            // mysql 5.7 才支持 JSON data type
-            // type: Types.JSON,
-            type: Types.STRING(1234),
-            allowNull: false
-        },
-        createBy: Types.STRING,
-        updateBy: Types.STRING
-    })
-
-    ProjectConfig.association = models => {
-        models.ProjectConfig.belongsTo(models.Project)
-    }
-
-    return ProjectConfig
-}
diff --git a/paas-ce/lesscode/lib/server/model/Role.js b/paas-ce/lesscode/lib/server/model/Role.js
deleted file mode 100644
index c5372fdf8..000000000
--- a/paas-ce/lesscode/lib/server/model/Role.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
- * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://opensource.org/licenses/MIT
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
- * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations under the License.
- */
-
-module.exports = (sequelize, Types) => {
-    const Role = sequelize.define('Role', {
-        name: {
-            type: Types.STRING,
-            allowNull: false,
-            unique: true
-        },
-        permissionId: {
-            type: Types.INTEGER
-        },
-        createBy: Types.STRING,
-        updateBy: Types.STRING
-    })
-
-    Role.association = models => {
-        models.Role.hasMany(models.Permission)
-    }
-
-    return Role
-}
diff --git a/paas-ce/lesscode/lib/server/model/UserProjectRole.js b/paas-ce/lesscode/lib/server/model/UserProjectRole.js
deleted file mode 100644
index a8f4a42c6..000000000
--- a/paas-ce/lesscode/lib/server/model/UserProjectRole.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
- * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://opensource.org/licenses/MIT
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
- * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations under the License.
- */
-
-module.exports = (sequelize, Types) => {
-    const UserProjectRole = sequelize.define('UserProjectRole', {
-        createBy: Types.STRING,
-        updateBy: Types.STRING
-    })
-
-    UserProjectRole.association = models => {
-        models.UserProjectRole.hasMany(models.User)
-        models.UserProjectRole.hasMany(models.Project)
-        models.UserProjectRole.hasMany(models.Role)
-    }
-
-    return UserProjectRole
-}
diff --git a/paas-ce/lesscode/lib/server/model/entities/base.js b/paas-ce/lesscode/lib/server/model/entities/base.js
new file mode 100644
index 000000000..ebe91a828
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/entities/base.js
@@ -0,0 +1,55 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import { PrimaryGeneratedColumn, UpdateDateColumn, CreateDateColumn, Column, BeforeInsert, BeforeUpdate } from 'typeorm'
+import { RequestContext } from '../../middleware/request-context'
+
+export default class Base {
+    // 自动增量值自动生成ID
+    @PrimaryGeneratedColumn()
+    id
+
+    // 更新时间，自动生成
+    @UpdateDateColumn()
+    updateTime
+
+    // 创造时间，自动生成
+    @CreateDateColumn()
+    createTime
+
+    // 创造该记录用户，自动生成
+    @Column({ type: 'varchar', length: 255 })
+    createUser
+
+    // 更新该记录用户，自动生成
+    @Column({ type: 'varchar', length: 255 })
+    updateUser
+
+    // 是否删除，默认值为0，表示未删除，1为已删除
+    @Column({ type: 'int' })
+    deleteFlag
+
+    // 插入数据写入用户名
+    @BeforeInsert()
+    beforeInsert () {
+        const currentUser = RequestContext.getCurrentUser()
+        this.createUser = currentUser.username
+        this.updateUser = currentUser.username
+        this.updateTime = new Date()
+    }
+
+    // 更新数据写入用户名
+    @BeforeUpdate()
+    updateUpdateUser () {
+        const currentUser = RequestContext.getCurrentUser()
+        this.updateUser = currentUser.username
+    }
+}
diff --git a/paas-ce/lesscode/lib/server/model/entities/comp-category.js b/paas-ce/lesscode/lib/server/model/entities/comp-category.js
new file mode 100644
index 000000000..773c2e483
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/entities/comp-category.js
@@ -0,0 +1,8 @@
+import { Entity, Column } from 'typeorm'
+import Base from './base'
+
+@Entity({ name: 'comp_category', comment: '组件分类表' })
+export default class extends Base {
+    @Column({ type: 'varchar' })
+    category
+}
diff --git a/paas-ce/lesscode/lib/server/model/entities/comp.js b/paas-ce/lesscode/lib/server/model/entities/comp.js
new file mode 100644
index 000000000..adbe6324f
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/entities/comp.js
@@ -0,0 +1,44 @@
+import { Entity, Column } from 'typeorm'
+import Base from './base'
+
+@Entity({ name: 'comp', comment: '自定义组件表' })
+export default class extends Base {
+    @Column({ type: 'int' })
+    id
+
+    @Column({ type: 'varchar' })
+    compCode
+
+    @Column({ type: 'varchar' })
+    compName
+
+    @Column({ type: 'varchar' })
+    compPath
+
+    @Column({ type: 'int' })
+    belongProjectId
+
+    @Column({ type: 'int' })
+    categoryId
+
+    @Column({ type: 'int' })
+    latestVersionId
+
+    @Column({ type: 'int' })
+    isPublic
+
+    @Column({ type: 'int' })
+    status
+
+    @Column({ type: 'datetime' })
+    createTime
+
+    @Column({ type: 'datetime' })
+    updateTime
+
+    @Column({ type: 'varchar' })
+    createUser
+
+    @Column({ type: 'varchar' })
+    updateUser
+}
diff --git a/paas-ce/lesscode/lib/server/model/entities/func-group.js b/paas-ce/lesscode/lib/server/model/entities/func-group.js
new file mode 100644
index 000000000..274c91c09
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/entities/func-group.js
@@ -0,0 +1,28 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import { Entity, Column } from 'typeorm'
+import Base from './base'
+
+@Entity({ name: 'func_group', comment: '函数分类表' })
+export default class extends Base {
+    // 函数文件夹名字
+    @Column({ type: 'varchar', length: 255 })
+    groupName
+
+    // 父group节点的id
+    @Column({ type: 'int' })
+    parentId
+
+    // 排序
+    @Column({ type: 'int' })
+    order
+}
diff --git a/paas-ce/lesscode/lib/server/model/entities/func.js b/paas-ce/lesscode/lib/server/model/entities/func.js
new file mode 100644
index 000000000..94659a69f
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/entities/func.js
@@ -0,0 +1,64 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import { Entity, Column } from 'typeorm'
+import Base from './base'
+
+@Entity({ name: 'func', comment: '函数表' })
+export default class extends Base {
+    // 函数名字
+    @Column({ type: 'varchar', length: 255 })
+    funcName
+
+    // 函数参数
+    @Column({ type: 'tinytext' })
+    funcParams
+
+    // 回调函数参数
+    @Column({ type: 'tinytext' })
+    remoteParams
+
+    // 函数内容
+    @Column({ type: 'mediumtext' })
+    funcBody
+
+    // 函数分类ID
+    @Column({ type: 'int' })
+    funcGroupId
+
+    // 函数简介
+    @Column({ type: 'tinytext' })
+    funcSummary
+
+    // 函数模板类型
+    @Column({ type: 'varchar', length: 255 })
+    funcType
+
+    // 远程函数方法
+    @Column({ type: 'varchar', length: 255 })
+    funcMethod
+
+    // 远程函数数据体
+    @Column({ type: 'text' })
+    funcApiData
+
+    // 是否公开
+    @Column({ type: 'int' })
+    publicFlag
+
+    // 远程函数url
+    @Column({ type: 'varchar', length: 255 })
+    funcApiUrl
+
+    // 排序
+    @Column({ type: 'int' })
+    order
+}
diff --git a/paas-ce/lesscode/lib/server/service/index.js b/paas-ce/lesscode/lib/server/model/entities/page-func.js
similarity index 68%
rename from paas-ce/lesscode/lib/server/service/index.js
rename to paas-ce/lesscode/lib/server/model/entities/page-func.js
index 0316072db..39f38a117 100644
--- a/paas-ce/lesscode/lib/server/service/index.js
+++ b/paas-ce/lesscode/lib/server/model/entities/page-func.js
@@ -9,14 +9,20 @@
  * specific language governing permissions and limitations under the License.
  */
 
-const fs = require('fs')
-const path = require('path')
-const files = fs.readdirSync(path.resolve(__dirname, './')).filter(name => name !== 'index.js')
+import { Entity, Column } from 'typeorm'
+import Base from './base'
 
-const serviceMap = {}
-files.forEach(name => {
-    const service = name.substring(0, name.length - 3)
-    serviceMap[service] = require(`./${name}`)
-})
+@Entity({ name: 'r_page_func', comment: '页面函数关联表' })
+export default class extends Base {
+    // page id
+    @Column({ type: 'int' })
+    pageId
 
-module.exports = serviceMap
+    // 函数id
+    @Column({ type: 'int' })
+    funcId
+
+    // 项目id
+    @Column({ type: 'int' })
+    projectId
+}
diff --git a/paas-ce/lesscode/lib/server/model/entities/page.js b/paas-ce/lesscode/lib/server/model/entities/page.js
new file mode 100644
index 000000000..e2a6136cd
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/entities/page.js
@@ -0,0 +1,51 @@
+import { Entity, Column } from 'typeorm'
+import Base from './base'
+
+@Entity({ name: 'page', comment: '页面表' })
+export default class extends Base {
+    @Column({
+        type: 'varchar',
+        comment: '项目 ID 即英文名称'
+    })
+    pageName
+
+    @Column({
+        type: 'mediumtext',
+        comment: '页面的 targetData（JSON 串）'
+    })
+    content
+
+    @Column({
+        type: 'mediumtext',
+        comment: '页面源代码'
+    })
+    sourceCode
+
+    @Column({
+        type: 'mediumtext',
+        comment: '预览图base64'
+    })
+    previewImg
+
+    @Column({
+        type: 'int',
+        nullable: false,
+        default: '0',
+        comment: '项目状态：0 为正常，1 为私有，2 为删除'
+    })
+    status
+
+    @Column({
+        type: 'varchar',
+        nullable: true,
+        comment: '创建人，默认当前用户'
+    })
+    createUser
+
+    @Column({
+        type: 'varchar',
+        nullable: true,
+        comment: '更新人，默认当前用户'
+    })
+    updateUser
+}
diff --git a/paas-ce/lesscode/lib/server/model/Permission.js b/paas-ce/lesscode/lib/server/model/entities/perm.js
similarity index 71%
rename from paas-ce/lesscode/lib/server/model/Permission.js
rename to paas-ce/lesscode/lib/server/model/entities/perm.js
index b656b87d3..bb7a83d0e 100644
--- a/paas-ce/lesscode/lib/server/model/Permission.js
+++ b/paas-ce/lesscode/lib/server/model/entities/perm.js
@@ -9,16 +9,16 @@
  * specific language governing permissions and limitations under the License.
  */
 
-module.exports = (sequelize, Types) => {
-    const Permission = sequelize.define('Permission', {
-        operation: {
-            type: Types.STRING
-        },
-        createBy: Types.STRING,
-        updateBy: Types.STRING
-    })
+import { Entity, Column } from 'typeorm'
+import Base from './base'
 
-    Permission.association = models => {}
+@Entity({ name: 'perm', comment: '权限表' })
+export default class extends Base {
+    // 权限Code
+    @Column({ type: 'varchar', length: 255 })
+    permCode
 
-    return Permission
+    // 权限描述
+    @Column({ type: 'varchar', length: 255 })
+    permDesc
 }
diff --git a/paas-ce/lesscode/lib/server/model/entities/project-comp.js b/paas-ce/lesscode/lib/server/model/entities/project-comp.js
new file mode 100644
index 000000000..f8662cea5
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/entities/project-comp.js
@@ -0,0 +1,30 @@
+import { Entity, Column } from 'typeorm'
+import Base from './base'
+
+@Entity({ name: 'r_project_comp', comment: '项目使用的自定义组件关联表' })
+export default class extends Base {
+    @Column({
+        type: 'int',
+        comment: 'project 表主键'
+    })
+    projectId
+
+    @Column({
+        type: 'int',
+        comment: 'component 表主键'
+    })
+    compId
+
+    @Column({
+        type: 'int',
+        comment: '当前使用的自定义组件的版本 id'
+    })
+    useVersionId
+
+    @Column({
+        type: 'varchar',
+        default: '[]',
+        comment: 'page 表主键的集合'
+    })
+    pageIds
+}
diff --git a/paas-ce/lesscode/lib/server/model/entities/project-favourite.js b/paas-ce/lesscode/lib/server/model/entities/project-favourite.js
new file mode 100644
index 000000000..4edd9db84
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/entities/project-favourite.js
@@ -0,0 +1,17 @@
+import { Entity, Column } from 'typeorm'
+import Base from './base'
+
+@Entity({ name: 'r_favourite', comment: '项目收藏表' })
+export default class extends Base {
+    @Column({
+        type: 'int',
+        comment: 'user 表主键'
+    })
+    userId
+
+    @Column({
+        type: 'int',
+        comment: 'project 表主键'
+    })
+    projectId
+}
diff --git a/paas-ce/lesscode/lib/server/model/entities/project-func-group.js b/paas-ce/lesscode/lib/server/model/entities/project-func-group.js
new file mode 100644
index 000000000..d2b938c6c
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/entities/project-func-group.js
@@ -0,0 +1,17 @@
+import { Entity, Column } from 'typeorm'
+import Base from './base'
+
+@Entity({ name: 'r_project_func_group', comment: '项目/函数关联表' })
+export default class extends Base {
+    @Column({
+        type: 'int',
+        comment: 'project 表主键'
+    })
+    projectId
+
+    @Column({
+        type: 'int',
+        comment: 'function 表主键'
+    })
+    funcGroupId
+}
diff --git a/paas-ce/lesscode/lib/server/model/entities/project-page.js b/paas-ce/lesscode/lib/server/model/entities/project-page.js
new file mode 100644
index 000000000..965877663
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/entities/project-page.js
@@ -0,0 +1,17 @@
+import { Entity, Column } from 'typeorm'
+import Base from './base'
+
+@Entity({ name: 'r_project_page', comment: '项目/页面关联表' })
+export default class extends Base {
+    @Column({
+        type: 'int',
+        comment: 'project 表主键'
+    })
+    projectId
+
+    @Column({
+        type: 'int',
+        comment: 'page 表主键'
+    })
+    pageId
+}
diff --git a/paas-ce/lesscode/lib/server/model/entities/project.js b/paas-ce/lesscode/lib/server/model/entities/project.js
new file mode 100644
index 000000000..547026300
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/entities/project.js
@@ -0,0 +1,48 @@
+import { Entity, Column } from 'typeorm'
+import Base from './base'
+
+@Entity({ name: 'project', comment: '项目表' })
+export default class extends Base {
+    @Column({
+        type: 'varchar',
+        length: 255, // default
+        nullable: false, // default
+        comment: '项目 ID 即英文名称'
+    })
+    projectCode
+
+    @Column({
+        type: 'varchar',
+        comment: '项目名称'
+    })
+    projectName
+
+    @Column({
+        type: 'varchar',
+        nullable: true,
+        comment: '项目简介'
+    })
+    projectDesc
+
+    @Column({
+        type: 'int',
+        nullable: false,
+        default: '0',
+        comment: '项目状态：0 为正常，1 为私有，2 为删除'
+    })
+    status
+
+    @Column({
+        type: 'varchar',
+        nullable: true,
+        comment: '创建人，默认当前用户'
+    })
+    createUser
+
+    @Column({
+        type: 'varchar',
+        nullable: true,
+        comment: '更新人，默认当前用户'
+    })
+    updateUser
+}
diff --git a/paas-ce/lesscode/lib/server/model/entities/role-perm.js b/paas-ce/lesscode/lib/server/model/entities/role-perm.js
new file mode 100644
index 000000000..08c7ec4a9
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/entities/role-perm.js
@@ -0,0 +1,24 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the 'License'); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an 'AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import { Entity, Column } from 'typeorm'
+import Base from './base'
+
+@Entity({ name: 'r_role_perm', comment: '角色/权限关联表' })
+export default class extends Base {
+    // role 表主键
+    @Column({ type: 'int' })
+    roleId
+
+    // perm 表主键
+    @Column({ type: 'int' })
+    permId
+}
diff --git a/paas-ce/lesscode/lib/server/service/project.js b/paas-ce/lesscode/lib/server/model/entities/role.js
similarity index 70%
rename from paas-ce/lesscode/lib/server/service/project.js
rename to paas-ce/lesscode/lib/server/model/entities/role.js
index 6b0ad04ea..e338660c1 100644
--- a/paas-ce/lesscode/lib/server/service/project.js
+++ b/paas-ce/lesscode/lib/server/model/entities/role.js
@@ -9,17 +9,16 @@
  * specific language governing permissions and limitations under the License.
  */
 
-const Project = require('../model').Project
+import { Entity, Column } from 'typeorm';
+import Base from './base'
 
-module.exports = {
-    get: {
-        findAll () {
-            return Project.findAll()
-        }
-    },
-    post: {
-        create (ctx) {
-            return Project.create(ctx.request.body)
-        }
-    }
+@Entity({ name: 'role', comment: '角色表' })
+export default class extends Base {
+    // 角色 ID
+    @Column({ type: 'varchar', length: 255 })
+    roleCode
+
+    // 角色名称
+    @Column({ type: 'varchar', length: 255 })
+    roleName
 }
diff --git a/paas-ce/lesscode/lib/server/model/entities/user-project-role.js b/paas-ce/lesscode/lib/server/model/entities/user-project-role.js
new file mode 100644
index 000000000..ea09545c5
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/entities/user-project-role.js
@@ -0,0 +1,28 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import { Entity, Column } from 'typeorm'
+import Base from './base'
+
+@Entity({ name: 'r_user_project_role', comment: '用户/项目/角色关联表' })
+export default class extends Base {
+    // user 表主键
+    @Column({ type: 'int' })
+    userId
+
+    // project 表主键
+    @Column({ type: 'int' })
+    projectId
+
+    // role 表主键
+    @Column({ type: 'int' })
+    roleId
+}
diff --git a/paas-ce/lesscode/lib/server/model/test.js b/paas-ce/lesscode/lib/server/model/entities/user.js
similarity index 63%
rename from paas-ce/lesscode/lib/server/model/test.js
rename to paas-ce/lesscode/lib/server/model/entities/user.js
index bcdd59f63..a1a665d09 100644
--- a/paas-ce/lesscode/lib/server/model/test.js
+++ b/paas-ce/lesscode/lib/server/model/entities/user.js
@@ -9,24 +9,24 @@
  * specific language governing permissions and limitations under the License.
  */
 
-const Sequelize = require('sequelize')
-const db = require('./index')
+import { Entity, Column } from 'typeorm'
+import Base from './base'
 
-// 定义test表结构
-const Test = db.defineModel('test', {
-    // test ID
-    id: {
-        type: Sequelize.INTEGER,
-        primaryKey: true,
-        autoIncrement: true
-    }
-})
+@Entity({ name: 'user', comment: '用户表' })
+export default class extends Base {
+    // 用户名
+    @Column({ type: 'varchar', length: 255 })
+    username
 
-const model = {
-    async create (data) {
-        const test = await Test.create(data)
-        return test
-    }
-}
+    // QQ
+    @Column({ type: 'int' })
+    qq
+
+    // 微信
+    @Column({ type: 'varchar', length: 255 })
+    wx
 
-module.exports = model
+    // 企业版/社区版账号（外部版）
+    @Column({ type: 'varchar', length: 255 })
+    bk
+}
diff --git a/paas-ce/lesscode/lib/server/model/function.js b/paas-ce/lesscode/lib/server/model/function.js
new file mode 100644
index 000000000..2b1c69e1a
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/function.js
@@ -0,0 +1,132 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import { getRepository, getConnection, In, Like } from 'typeorm'
+import Func from './entities/func'
+import FuncGroup from './entities/func-group'
+import ProjectFuncGroup from './entities/project-func-group'
+import PageFunc from './entities/page-func'
+import Page from './entities/page'
+
+const func = {
+    addFuncGroup (data) {
+        return getConnection().transaction(async transactionalEntityManager => {
+            const projectId = data.projectId
+            const inputStr = data.inputStr
+            const groupNames = inputStr.split('/')
+            const funcGroupRepository = getRepository(FuncGroup)
+            const allgroup = await func.getGroupList(projectId, '') || []
+            const lastGroup = allgroup[allgroup.length - 1] || {}
+            let order = lastGroup.order || 0
+            const funcGroupEntities = groupNames.map((groupName) => {
+                order++
+                return funcGroupRepository.create({ groupName, order })
+            })
+            const groupList = await transactionalEntityManager.save(funcGroupEntities)
+            const projectFuncGroupRepository = getRepository(ProjectFuncGroup)
+            const projectFuncGroupEntities = groupList.map(({ id }) => projectFuncGroupRepository.create({ funcGroupId: id, projectId }))
+            await transactionalEntityManager.save(projectFuncGroupEntities)
+            return groupList.map((group) => {
+                group.functionList = []
+                return group
+            })
+        })
+    },
+
+    getGroupList (projectId, groupName) {
+        return getRepository(FuncGroup).createQueryBuilder('func_group')
+            .leftJoin(ProjectFuncGroup, 't', 't.funcGroupId = func_group.id AND t.deleteFlag = 0')
+            .leftJoin(Func, 'func', 'func.funcGroupId = func_group.id AND func.deleteFlag = 0 ')
+            .where('t.projectId = :projectId AND func_group.deleteFlag = :deleteFlag AND func_group.groupName like :groupName', { projectId, deleteFlag: 0, groupName: `%${groupName}%` })
+            .select('func_group.groupName AS groupName, func_group.id AS id, COUNT(func.id) AS funNum')
+            .addSelect('func_group.order', 'order')
+            .groupBy('func_group.id')
+            .orderBy('func_group.order')
+            .getRawMany()
+    },
+
+    deleteFuncGroup (query) {
+        return getConnection().transaction(async transactionalEntityManager => {
+            const groupId = query.id
+            const projectId = query.projectId
+            const deleteFuncGroup = await transactionalEntityManager.findOne(FuncGroup, { id: groupId })
+            deleteFuncGroup.deleteFlag = 1
+            deleteFuncGroup.order = 0
+            const deleteProjFuncGroup = await transactionalEntityManager.findOne(ProjectFuncGroup, { funcGroupId: groupId, projectId })
+            deleteProjFuncGroup.deleteFlag = 1
+            await transactionalEntityManager.save([deleteFuncGroup, deleteProjFuncGroup])
+        })
+    },
+
+    async editFuncGroups (groupList) {
+        const groupRepository = getRepository(FuncGroup)
+        const oldGroupList = await groupRepository.find({ id: In(groupList.map(x => x.id)) })
+        oldGroupList.forEach(group => {
+            const newGroup = groupList.find(x => x.id === group.id)
+            Object.assign(group, newGroup)
+        })
+        const res = await groupRepository.save(oldGroupList)
+        return res
+    },
+
+    getFuncList (groupIds, funcName) {
+        const funcRepository = getRepository(Func)
+        return funcRepository.find({
+            where: {
+                funcGroupId: In(groupIds),
+                deleteFlag: 0,
+                funcName: Like(`%${funcName}%`)
+            },
+            order: {
+                updateTime: 'DESC'
+            }
+        })
+    },
+
+    getFuncRelatePageList (funcIds) {
+        return getRepository(Page).createQueryBuilder('page')
+            .leftJoin(PageFunc, 'PageFunc', 'page.id = PageFunc.pageId AND PageFunc.deleteFlag = 0')
+            .where('PageFunc.funcId IN (:...funcIds)', { funcIds })
+            .andWhere('page.deleteFlag = :deleteFlag', { deleteFlag: 0 })
+            .select('page.*, PageFunc.funcId AS funcId')
+            .getRawMany()
+    },
+
+    addFunction (funcData) {
+        const funcRepository = getRepository(Func)
+        funcData.funcParams = (funcData.funcParams || []).join(',')
+        funcData.remoteParams = (funcData.remoteParams || []).join(',')
+        const newFunc = funcRepository.create(funcData)
+        return funcRepository.save(newFunc)
+    },
+
+    async deleteFunction (id) {
+        const funcRepository = getRepository(Func)
+        const deleteFunc = await funcRepository.findOne({ where: { id } })
+        deleteFunc.deleteFlag = 1
+        return funcRepository.save(deleteFunc)
+    },
+
+    async editFunction (funcList) {
+        const funcRepository = getRepository(Func)
+        const oldFuncList = await funcRepository.find({ id: In(funcList.map(x => x.id)) })
+        oldFuncList.forEach(func => {
+            const newFunc = funcList.find(x => x.id === func.id)
+            newFunc.funcParams = (newFunc.funcParams || []).join(',')
+            newFunc.remoteParams = (newFunc.remoteParams || []).join(',')
+            Object.assign(func, newFunc)
+        })
+        const res = await funcRepository.save(oldFuncList)
+        return res
+    }
+}
+
+module.exports = func
diff --git a/paas-ce/lesscode/lib/server/model/index.js b/paas-ce/lesscode/lib/server/model/index.js
deleted file mode 100644
index 4d32d47d7..000000000
--- a/paas-ce/lesscode/lib/server/model/index.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
- * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://opensource.org/licenses/MIT
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
- * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations under the License.
- */
-
-const Sequelize = require('sequelize')
-const config = require('../conf/database')
-
-// 根据配置实例化数据库
-const DB = new Sequelize(config.database, config.username, config.password, {
-    host: config.host,
-    dialect: config.dialect,
-    port: config.port,
-    pool: {
-        max: 5,
-        min: 0,
-        idle: 30000
-    }
-})
-
-/**
- * 定义数据模型
- *
- * @param {string} name 模型名称（数据库表名）
- * @param {object} attributes 表属性集合
- *
- * @return 数据模型对象
- */
-function defineModel (name, attributes) {
-    const attrs = {}
-
-    // 统一初始化属性不能为空
-    for (const key in attributes) {
-        const field = attributes[key]
-        if (typeof field === 'object' && field['type']) {
-            field.allowNull = field.allowNull || false
-            attrs[key] = field
-        } else {
-            attrs[key] = {
-                type: field,
-                allowNull: false
-            }
-        }
-    }
-
-    // 定义表
-    const dataTable = DB.define(name, attributes, {
-        tableName: name,
-        timestamps: true, // 统一初始化公共字段create_time、update_time
-        hooks: {
-            beforeValidate: function (obj) {
-                const now = Date.now()
-                if (obj.isNewRecord) {
-                    obj.create_time = now
-                    obj.update_time = now
-                } else {
-                    obj.update_time = now
-                }
-            }
-        }
-    })
-
-    // 同步表结构，不删除数据
-    dataTable.sync({ alter: true })
-    // 同步表结构到数据库, force: true, 先强制同步
-    DB.sync({ force: false })
-    // DB.sync()
-
-    return dataTable
-}
-
-module.exports = {
-    defineModel: defineModel
-}
diff --git a/paas-ce/lesscode/lib/server/model/page.js b/paas-ce/lesscode/lib/server/model/page.js
new file mode 100644
index 000000000..6fa4dfed8
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/page.js
@@ -0,0 +1,53 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import { getRepository, getConnection } from 'typeorm'
+import Page from './entities/page'
+import ProjectPage from './entities/project-page'
+
+module.exports = {
+    // 获取项目下可见的页面列表
+    getProjectPages (projectId) {
+        return getRepository(Page).createQueryBuilder('page')
+            .leftJoinAndSelect(ProjectPage, 't', 't.pageId = page.id')
+            .where('t.projectId = :projectId', { projectId })
+            .andWhere('page.deleteFlag = 0')
+            .orderBy('page.id', 'DESC')
+            .getMany()
+    },
+
+    // check页面名称是否存在
+    checkProjectPageExist (projectId, pageName) {
+        return getRepository(Page).createQueryBuilder('page')
+            .leftJoinAndSelect(ProjectPage, 't', 't.pageId = page.id')
+            .where('t.projectId = :projectId', { projectId })
+            .andWhere('page.pageName = :pageName', { pageName })
+            .getMany()
+    },
+
+    // 创建页面
+    createPage (pageData, projectPageData) {
+        const page = getRepository(Page).create(pageData)
+
+        return getConnection().transaction(async transactionalEntityManager => {
+            // 创建页面表相关信息
+            const { id: pageId } = await transactionalEntityManager.save(page)
+
+            // 创建项目页面关联记录
+            projectPageData.pageId = pageId
+
+            const projectPage = getRepository(ProjectPage).create(projectPageData)
+            await transactionalEntityManager.save(projectPage)
+
+            return { id: pageId }
+        })
+    }
+}
diff --git a/paas-ce/lesscode/lib/server/model/perm.js b/paas-ce/lesscode/lib/server/model/perm.js
new file mode 100644
index 000000000..d4aa20274
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/perm.js
@@ -0,0 +1,45 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+import { getRepository } from 'typeorm'
+
+import Perm from './entities/perm'
+import Role from './entities/role'
+import RolePerm from './entities/role-perm'
+import User from './entities/user'
+import UserProjectRole from './entities/user-project-role'
+
+module.exports = {
+    getUserPerms (projectId, username) {
+        return getRepository(User).createQueryBuilder('user')
+            .leftJoinAndSelect(UserProjectRole, 'userProjectRole', 'user.id = userProjectRole.userId')
+            .leftJoinAndSelect(Role, 'role', 'role.id = userProjectRole.roleId')
+            .leftJoinAndSelect(RolePerm, 'rolePerm', 'rolePerm.roleId = role.id')
+            .leftJoinAndSelect(Perm, 'perm', 'perm.id = rolePerm.permId')
+            .where('user.username = :username', { username })
+            .andWhere('userProjectRole.projectId = :projectId', { projectId })
+            .select('perm.permCode', 'permCode')
+            .getRawMany()
+    },
+
+    async existingPermission (projectId, username, permCode) {
+        const res = await getRepository(User).createQueryBuilder('user')
+            .leftJoinAndSelect(UserProjectRole, 'userProjectRole', 'user.id = userProjectRole.userId')
+            .leftJoinAndSelect(Role, 'role', 'role.id = userProjectRole.roleId')
+            .leftJoinAndSelect(RolePerm, 'rolePerm', 'rolePerm.roleId = role.id')
+            .leftJoinAndSelect(Perm, 'perm', 'perm.id = rolePerm.permId')
+            .where('user.username = :username', { username })
+            .andWhere('userProjectRole.projectId = :projectId', { projectId })
+            .andWhere('perm.permCode = :permCode', { permCode })
+            .getRawMany()
+        return res.length > 0
+    }
+}
diff --git a/paas-ce/lesscode/lib/server/model/project.js b/paas-ce/lesscode/lib/server/model/project.js
new file mode 100644
index 000000000..9985b2b1d
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/project.js
@@ -0,0 +1,311 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+import { getConnection, getRepository } from 'typeorm'
+import Project from './entities/project'
+import Page from './entities/page'
+import PageFunc from './entities/page-func'
+import Comp from './entities/comp'
+import UserProjectRole from './entities/user-project-role'
+import ProjectComp from './entities/project-comp'
+import ProjectFuncGroup from './entities/project-func-group'
+import ProjectPage from './entities/project-page'
+import ProjectFavourite from './entities/project-favourite'
+import FuncGroup from './entities/func-group'
+import Func from './entities/func'
+import { RequestContext } from '../middleware/request-context'
+
+const projectSelectFields = [
+    'project.id',
+    'project.projectCode',
+    'project.projectName',
+    'project.projectDesc',
+    'project.status',
+    'project.createTime',
+    'project.createUser',
+    'project.deleteFlag'
+]
+
+const defaultGroup = {
+    groupName: '默认分类'
+}
+
+const getDefaultFunc = function (host) {
+    return [
+        {
+            funcName: 'getMockData',
+            funcBody: `return this.$http.get(\"${host}/api/data/getMockData\").then((res) => {\r\n    const data = JSON.stringify(res)\r\n    alert(data)\r\n    return res.data\r\n})`,
+            funcSummary: '获取mock数据',
+            funcType: 0
+        },
+        {
+            funcName: 'getApiData',
+            remoteParams: 'res',
+            funcBody: 'const data = res.data || []\r\nreturn data',
+            funcSummary: '远程函数，获取数据',
+            funcType: 1,
+            funcMethod: 'get',
+            funcApiUrl: `${host}/api/data/getMockData`
+        }
+    ]
+}
+
+export default {
+    createProject (projectData, userProjectRoleData) {
+        const project = getRepository(Project).create(projectData)
+
+        return getConnection().transaction(async transactionalEntityManager => {
+            // 创建项目基本信息记录
+            const { id: projectId } = await transactionalEntityManager.save(project)
+
+            // 创建用户项目角色关联记录
+            userProjectRoleData.projectId = projectId
+            const userProjectRole = getRepository(UserProjectRole).create(userProjectRoleData)
+            await transactionalEntityManager.save(userProjectRole)
+
+            // 复制项目
+            if (projectData.copyFrom) {
+                // copy项目中的组件/函数/页面
+                const [projectCompCopyValues, projectFuncGroupCopyValues, projectPageCopyValues] = await Promise.all([
+                    getRepository(ProjectComp)
+                        .createQueryBuilder('projectComp')
+                        .where('projectComp.projectId = :projectId', { projectId: projectData.copyFrom })
+                        .getMany(),
+                    getRepository(ProjectFuncGroup)
+                        .createQueryBuilder('projectFuncGroup')
+                        .where('projectFuncGroup.projectId = :projectId', { projectId: projectData.copyFrom })
+                        .getMany(),
+                    getRepository(ProjectPage)
+                        .createQueryBuilder('projectPage')
+                        .where('projectPage.projectId = :projectId', { projectId: projectData.copyFrom })
+                        .getMany()
+                ])
+
+                if (projectCompCopyValues.length) {
+                    const compIdList = projectCompCopyValues.map(item => item.compId)
+                    const copyComps = await getRepository(Comp)
+                        .createQueryBuilder('comp')
+                        .where('comp.id IN (:...ids)', { ids: compIdList })
+                        .getMany()
+
+                    const saveCopyComps = getRepository(Comp).create(copyComps.map(item => {
+                        const { id, createTime, updateTime, ...others } = item
+                        others.belongProjectId = projectId
+                        return others
+                    }))
+                    const newCompList = await transactionalEntityManager.save(saveCopyComps)
+                    const projectCompValues = getRepository(ProjectComp).create(projectCompCopyValues.map((item, index) => {
+                        const { id, createTime, updateTime, ...others } = item
+                        others.projectId = projectId
+                        others.compId = newCompList[index].id
+                        return others
+                    }))
+                    await transactionalEntityManager.save(projectCompValues)
+                }
+
+                const funcIdMap = {}
+                if (projectFuncGroupCopyValues.length) {
+                    const funcGroupIdList = projectFuncGroupCopyValues.map(item => item.funcGroupId)
+                    // 得到要复制的主体数据
+                    const copyFuncGroups = await getRepository(FuncGroup)
+                        .createQueryBuilder('funcGroup')
+                        .where('funcGroup.id IN (:...ids)', { ids: funcGroupIdList })
+                        .getMany()
+                    const copyFuncs = await getRepository(Func)
+                        .createQueryBuilder('func')
+                        .where('func.funcGroupId IN (:...funcGroupIds)', { funcGroupIds: funcGroupIdList })
+                        .getMany()
+
+                    // 新建函数组主体数据
+                    const saveCopyFuncGroups = getRepository(FuncGroup).create(copyFuncGroups.map(item => {
+                        const { id, createTime, updateTime, ...others } = item
+                        return others
+                    }))
+                    const newFuncGroupList = await transactionalEntityManager.save(saveCopyFuncGroups)
+
+                    // 复制出的新函数中的分组id需要与新添加的函数组id对应
+                    const funcGroupIdMap = {}
+                    funcGroupIdList.forEach((id, index) => {
+                        funcGroupIdMap[id] = newFuncGroupList[index].id
+                    })
+                    // 新建函数主体数据
+                    const saveCopyFuncs = getRepository(Func).create(copyFuncs.map(item => {
+                        const { id, createTime, updateTime, ...others } = item
+                        others.funcGroupId = funcGroupIdMap[others.funcGroupId]
+                        return others
+                    }))
+
+                    const newFuncList = await transactionalEntityManager.save(saveCopyFuncs)
+                    copyFuncs.forEach((item, index) => {
+                        funcIdMap[item.id] = newFuncList[index].id
+                    })
+
+                    // 新建函数组与项目关联关系数据
+                    const projectFuncGroupValues = getRepository(ProjectFuncGroup).create(projectFuncGroupCopyValues.map((item, index) => {
+                        const { id, createTime, updateTime, ...others } = item
+                        others.projectId = projectId
+                        // 分组id为新建得到的分组id
+                        others.funcGroupId = newFuncGroupList[index].id
+                        return others
+                    }))
+                    await transactionalEntityManager.save(projectFuncGroupValues)
+                }
+
+                if (projectPageCopyValues.length) {
+                    const pageIdList = projectPageCopyValues.map(item => item.pageId)
+                    const copyPages = await getRepository(Page)
+                        .createQueryBuilder('page')
+                        .where('page.id IN (:...ids)', { ids: pageIdList })
+                        .getMany()
+                    const copyPageFuncs = await getRepository(PageFunc)
+                        .createQueryBuilder('pageFuncs')
+                        .where('pageFuncs.pageId IN (:...pageIds)', { pageIds: pageIdList })
+                        .getMany()
+
+                    // 先新建页面主体数据，再新建关联关系数据
+                    const saveCopyPages = getRepository(Page).create(copyPages.map(item => {
+                        const { id, createTime, updateTime, ...others } = item
+                        return others
+                    }))
+                    const newPageList = await transactionalEntityManager.save(saveCopyPages)
+                    const projectPageValues = getRepository(ProjectPage).create(projectPageCopyValues.map((item, index) => {
+                        const { id, createTime, updateTime, ...others } = item
+                        others.projectId = projectId
+                        others.pageId = newPageList[index].id
+                        return others
+                    }))
+                    await transactionalEntityManager.save(projectPageValues)
+
+                    // 新建页面函数关联记录
+                    if (Object.keys(funcIdMap).length) {
+                        const pageIdMap = {}
+                        pageIdList.forEach((id, index) => {
+                            pageIdMap[id] = newPageList[index].id
+                        })
+                        const saveCopyPageFuncs = getRepository(PageFunc).create(copyPageFuncs.map(item => {
+                            const { id, createTime, updateTime, ...others } = item
+                            others.pageId = pageIdMap[others.pageId]
+                            others.funcId = funcIdMap[others.funcId]
+                            others.projectId = projectId
+                            return others
+                        }))
+                        await transactionalEntityManager.save(saveCopyPageFuncs)
+                    }
+                }
+            } else {
+                const funcGroup = getRepository(FuncGroup).create(defaultGroup)
+                const { id: funcGroupId } = await transactionalEntityManager.save(funcGroup)
+                const curCtx = RequestContext.getCurrentCtx()
+                const defaultFunc = getDefaultFunc(curCtx.origin)
+                defaultFunc.forEach((func) => (func.funcGroupId = funcGroupId))
+                const funcs = getRepository(Func).create(defaultFunc)
+                await transactionalEntityManager.save(funcs)
+                const projectFuncGroup = getRepository(ProjectFuncGroup).create({ projectId, funcGroupId })
+                await transactionalEntityManager.save(projectFuncGroup)
+            }
+
+            return { projectId }
+        })
+    },
+
+    findOneProjectByNameAndUserId (projectName, userId) {
+        return getRepository(Project).createQueryBuilder('project')
+            .leftJoinAndSelect(UserProjectRole, 't', 't.projectId = project.id')
+            .where('project.projectName = :projectName', { projectName })
+            .andWhere('t.userId = :userId', { userId })
+            .getMany()
+    },
+
+    findOneProjectByCodeAndUserId (projectCode, userId) {
+        return getRepository(Project).createQueryBuilder('project')
+            .leftJoinAndSelect(UserProjectRole, 't', 't.projectId = project.id')
+            .where('project.projectCode = :projectCode', { projectCode })
+            .andWhere('t.userId = :userId', { userId })
+            .getMany()
+    },
+
+    findProjectDetail (params) {
+        const queryParams = Object.assign({}, params, { deleteFlag: 0 })
+        return getRepository(Project).findOne(queryParams)
+    },
+
+    queryAllProject ({ condition = '', params = {} }) {
+        return getRepository(Project)
+            .createQueryBuilder('project')
+            .innerJoinAndSelect('r_user_project_role', 'user_project_role', 'user_project_role.projectId = project.id')
+            .select(projectSelectFields)
+            .where('project.deleteFlag != 1')
+            .andWhere(condition, params)
+            .orderBy('project.id', 'DESC')
+            .getMany()
+    },
+
+    queryMyCreateProject ({ condition = '', params = {} }) {
+        return getRepository(Project)
+            .createQueryBuilder('project')
+            .select(projectSelectFields)
+            .where('project.deleteFlag != 1')
+            .andWhere(condition, params)
+            .orderBy('project.id', 'DESC')
+            .getMany()
+    },
+
+    queryMyFavoriteProject ({ condition = '', params = {} }) {
+        return getRepository(Project)
+            .createQueryBuilder('project')
+            .innerJoinAndSelect('r_favourite', 'favourite', 'favourite.projectId = project.id')
+            .select(projectSelectFields)
+            .where('project.deleteFlag != 1')
+            .andWhere(condition, params)
+            .orderBy('project.id', 'DESC')
+            .getMany()
+    },
+
+    queryShareWithProject ({ condition = '', params = {} }) {
+        return getRepository(Project)
+            .createQueryBuilder('project')
+            .innerJoinAndSelect('r_user_project_role', 'user_project_role', 'user_project_role.projectId = project.id AND user_project_role.roleId != 1')
+            .select(projectSelectFields)
+            .where('project.deleteFlag != 1')
+            .andWhere(condition, params)
+            .orderBy('project.id', 'DESC')
+            .getMany()
+    },
+
+    queryProjectPage ({ condition = '', params = {} }) {
+        return getRepository(Page)
+            .createQueryBuilder('page')
+            .innerJoinAndSelect('r_project_page', 'project_page', 'project_page.pageId = page.id')
+            .select(['page.pageName as pageName',
+                'page.updateTime as updateTime',
+                'page.updateUser as updateUser',
+                'page.previewImg as previewImg',
+                'project_page.projectId as projectId'
+            ])
+            .where(condition, params)
+            .orderBy('page.updateTime', 'DESC')
+            .getRawMany()
+    },
+
+    updateProject (id, fields = {}) {
+        return getRepository(Project).update(id, fields)
+    },
+
+    addFavorite (data) {
+        const repository = getRepository(ProjectFavourite)
+        const projectFavourite = repository.create(data)
+        return repository.save(projectFavourite)
+    },
+
+    removeFavorite (data) {
+        const repository = getRepository(ProjectFavourite)
+        return repository.delete(data)
+    }
+}
diff --git a/paas-ce/lesscode/lib/server/model/sql/20200707/initial.sql b/paas-ce/lesscode/lib/server/model/sql/20200707/initial.sql
new file mode 100644
index 000000000..07158a97a
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/model/sql/20200707/initial.sql
@@ -0,0 +1,477 @@
+SET NAMES utf8mb4;
+SET FOREIGN_KEY_CHECKS = 0;
+
+-- ----------------------------
+-- Table structure for comp
+-- ----------------------------
+DROP TABLE IF EXISTS `comp`;
+CREATE TABLE `comp`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `compCode` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '自定义组件 id，全局唯一，（要和上传的 config.js 中的 type 一致，自定义组件的标签名）',
+  `compName` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '自定义组件名称',
+  `compPath` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '自定义组件存放路径（单机部署即服务器目录地址，多机部署即 S3 地址）',
+  `belongProjectId` int(11) NOT NULL COMMENT '标识自定义组件属于哪个项目',
+  `categoryId` int(11) NOT NULL COMMENT 'category 表主键',
+  `latestVersionId` int(11) NOT NULL COMMENT '自定义组件的最新版本 id',
+  `isPublic` int(11) NOT NULL DEFAULT 0 COMMENT '是否公开：0 为公开，1 为不公开',
+  `status` int(11) NOT NULL DEFAULT 0 COMMENT '自定义组件状态：0 为已发布，1 为已下架',
+  `createTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
+  `updateTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '最新更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人，默认当前用户',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人，默认当前用户',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  INDEX `category_id`(`categoryId`) USING BTREE,
+  INDEX `latest_version_id`(`latestVersionId`) USING BTREE,
+  INDEX `belongProjectId`(`belongProjectId`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '自定义组件表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Records of comp
+-- ----------------------------
+-- INSERT INTO `comp` VALUES (1, 'x-script', 'x-script', '/a/b/c', 4, 1, 2, 0, 0, '2020-06-02 16:43:06', '2020-06-03 02:18:13', NULL, NULL, 0);
+-- INSERT INTO `comp` VALUES (2, 'x-table', 'x-table', '/q/w/e', 5, 1, 1, 0, 0, '2020-06-02 16:43:06', '2020-06-03 02:18:14', NULL, NULL, 0);
+
+-- ----------------------------
+-- Table structure for comp_category
+-- ----------------------------
+DROP TABLE IF EXISTS `comp_category`;
+CREATE TABLE `comp_category`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `category` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
+  `createTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
+  `updateTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '最新更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人，默认当前用户',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人，默认当前用户',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  PRIMARY KEY (`id`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '组件分类表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Records of comp_category
+-- ----------------------------
+-- INSERT INTO `comp_category` VALUES (1, '默认分类', '2020-06-03 12:00:04', '2020-06-03 12:00:04', NULL, NULL, 0);
+-- INSERT INTO `comp_category` VALUES (2, 'a/b/c/d', '2020-07-20 21:42:41', '2020-07-20 21:42:41', 'admin', NULL, 0);
+
+-- ----------------------------
+-- Table structure for func
+-- ----------------------------
+DROP TABLE IF EXISTS `func`;
+CREATE TABLE `func`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `funcName` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '函数名字，项目下唯一',
+  `funcParams` tinytext CHARACTER SET utf8 COLLATE utf8_general_ci NULL COMMENT '函数参数，逗号分隔字符串',
+  `funcBody` mediumtext CHARACTER SET utf8 COLLATE utf8_general_ci NULL COMMENT '函数内容',
+  `funcGroupId` int(11) NOT NULL COMMENT 'function_group 表主键',
+  `createTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
+  `updateTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '最新更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人，默认当前用户',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人，默认当前用户',
+  `funcSummary` tinytext CHARACTER SET utf8 COLLATE utf8_general_ci NULL COMMENT '函数简介',
+  `funcType` int(11) NULL DEFAULT NULL COMMENT '函数模板类型',
+  `funcMethod` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '远程函数方法',
+  `funcApiData` text CHARACTER SET utf8 COLLATE utf8_general_ci NULL COMMENT '远程函数数据体',
+  `publicFlag` int(1) UNSIGNED ZEROFILL NULL DEFAULT 0 COMMENT '是否公开',
+  `funcApiUrl` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '远程函数URL',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  `order` int(11) NULL DEFAULT NULL COMMENT '排序',
+  `remoteParams` tinytext CHARACTER SET utf8 COLLATE utf8_general_ci NULL COMMENT '回调函数参数，逗号分隔字符串',
+  PRIMARY KEY (`id`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 207 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '函数表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Records of func
+-- ----------------------------
+INSERT INTO `func` VALUES (192, 'getMockData', '', 'return this.$http.get(\"/data/getMockData\").then((res) => {\r\n    const data = JSON.stringify(res)\r\n    alert(data)\r\n    return res.data\r\n})', 1, '2020-07-23 23:08:55', '2020-07-23 23:18:17', '', '', '获取mock数据', 0, 'GET', '', 0, '', 0, NULL, NULL);
+INSERT INTO `func` VALUES (193, 'getApiData', 'res', 'const data = res.data || []\r\nreturn data', 1, '2020-07-23 23:08:56', '2020-07-23 23:12:35', '', '', '远程函数，获取数据', 1, 'get', '', 0, 'api/data/getMockData', 0, NULL, 'res');
+
+-- ----------------------------
+-- Table structure for func_group
+-- ----------------------------
+DROP TABLE IF EXISTS `func_group`;
+CREATE TABLE `func_group`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `groupName` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '函数文件夹名称',
+  `parentId` int(11) NOT NULL DEFAULT -1 COMMENT '父 group 节点的 id，无父节点即为 -1',
+  `createTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
+  `updateTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '最新更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人，默认当前用户',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人，默认当前用户',
+  `order` int(11) NULL DEFAULT NULL COMMENT '排序',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  PRIMARY KEY (`id`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 224 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '函数分类表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Records of func_group
+-- ----------------------------
+INSERT INTO `func_group` VALUES (1, '默认分类', -1, '2020-07-23 23:08:08', '2020-07-23 23:08:28', '', NULL, 1, 0);
+
+-- ----------------------------
+-- Table structure for operate_log
+-- ----------------------------
+DROP TABLE IF EXISTS `operate_log`;
+CREATE TABLE `operate_log`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `operateCode` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '对应 perm.perm_code',
+  `operateDesc` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '对应 perm.perm_desc',
+  `operateUserId` int(11) NOT NULL COMMENT 'user 表主键',
+  `operateTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0),
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  `createTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
+  `updateTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '最新更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人，默认当前用户',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人，默认当前用户',
+  PRIMARY KEY (`id`) USING BTREE,
+  INDEX `operate_user_id`(`operateUserId`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '操作日志表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Table structure for page
+-- ----------------------------
+DROP TABLE IF EXISTS `page`;
+CREATE TABLE `page`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `pageName` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
+  `content` mediumtext CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '页面的 targetData（JSON 串）',
+  `sourceCode` mediumtext CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '页面源代码',
+  `previewImg` mediumtext CHARACTER SET utf8 COLLATE utf8_general_ci COMMENT '缩略图base64',
+  `status` int(11) NOT NULL DEFAULT 0 COMMENT '项目状态：0 为正常，1 为私有，2 为删除',
+  `createTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
+  `updateTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '最新更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人，默认当前用户',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人，默认当前用户',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  PRIMARY KEY (`id`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '页面表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Table structure for perm
+-- ----------------------------
+DROP TABLE IF EXISTS `perm`;
+CREATE TABLE `perm`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `permCode` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
+  `permDesc` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL,
+  `createTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
+  `updateTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '最新更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人，默认当前用户',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人，默认当前用户',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  PRIMARY KEY (`id`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 25 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '权限表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Records of perm
+-- ----------------------------
+INSERT INTO `perm` VALUES (1, 'create_project', '创建项目', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (2, 'update_project', '更新项目', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (3, 'delete_project', '删除项目', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (4, 'copy_project', '复制项目', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (5, 'download_project', '下载项目源码', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (6, 'create_page', '创建页面', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (7, 'update_page', '更新页面', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (8, 'delete_page', '删除页面', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (9, 'copy_page', '复制页面', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (10, 'download_page', '下载页面源码', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (11, 'preview_page', '预览页面', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (12, 'offline_component', '下架自定义组件', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (13, 'online_component', '上线自定义组件', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (14, 'public_component', '公开自定义组件', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (15, 'private_component', '私有自定义组件', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (16, 'update_component', '更新自定义组件', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (17, 'view_component', '查看项目中的自定义组件', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (18, 'view_component_category', '查看自定义组件的分类', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (19, 'add_component_category', '添加自定义组件的分类', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (20, 'update_component_category', '更新自定义组件的分类', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (21, 'delete_component_category', '删除自定义组件的分类', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (22, 'add_user', '添加项目成员', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (23, 'update_user', '更新项目成员', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+INSERT INTO `perm` VALUES (24, 'delete_user', '删除项目成员', '2020-06-03 12:00:38', '2020-06-03 12:00:38', NULL, NULL, 0);
+
+-- ----------------------------
+-- Table structure for project
+-- ----------------------------
+DROP TABLE IF EXISTS `project`;
+CREATE TABLE `project`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '自增主键',
+  `projectCode` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '项目 ID 即英文名称',
+  `projectName` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '项目名称',
+  `projectDesc` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '项目简介',
+  `status` int(11) NOT NULL DEFAULT 0 COMMENT '项目状态：0 为正常，1 为私有',
+  `createTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
+  `updateTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '最新更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人，默认当前用户',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人，默认当前用户',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  PRIMARY KEY (`id`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 10 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '项目表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Records of project
+-- ----------------------------
+-- INSERT INTO `project` VALUES (1, '1', 'test', 'test', 0, '2020-07-23 23:06:41', '2020-07-23 23:06:41', NULL, NULL, 0);
+
+-- ----------------------------
+-- Table structure for r_favourite
+-- ----------------------------
+DROP TABLE IF EXISTS `r_favourite`;
+CREATE TABLE `r_favourite`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `userId` int(11) NOT NULL COMMENT 'user 表主键',
+  `projectId` int(11) NOT NULL COMMENT 'project 表主键',
+  `updateTime` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
+  `createTime` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  INDEX `user_id`(`userId`) USING BTREE,
+  INDEX `project_id`(`projectId`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '项目收藏表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Records of r_favourite
+-- ----------------------------
+-- INSERT INTO `r_favourite` VALUES (2, 1, 5, NULL, NULL, NULL, NULL, 0);
+
+-- ----------------------------
+-- Table structure for r_page_func
+-- ----------------------------
+DROP TABLE IF EXISTS `r_page_func`;
+CREATE TABLE `r_page_func`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `pageId` int(11) NOT NULL COMMENT 'page 表主键',
+  `updateTime` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
+  `createTime` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人',
+  `funcId` int(11) NOT NULL COMMENT 'function 表主键',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  `projectId` int(11) NOT NULL COMMENT 'project 表主键',
+  PRIMARY KEY (`id`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Table structure for r_project_comp
+-- ----------------------------
+DROP TABLE IF EXISTS `r_project_comp`;
+CREATE TABLE `r_project_comp`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `projectId` int(11) NOT NULL COMMENT 'project 表主键',
+  `updateTime` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
+  `createTime` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人',
+  `compId` int(11) NOT NULL COMMENT 'component 表主键',
+  `useVersionId` int(11) NOT NULL COMMENT '当前使用的自定义组件的版本 id',
+  `pageIds` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '[]' COMMENT 'page 表主键的集合',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  INDEX `page_id`(`pageIds`) USING BTREE,
+  INDEX `category_id`(`compId`) USING BTREE,
+  INDEX `project_id`(`projectId`) USING BTREE,
+  INDEX `useVersionId`(`useVersionId`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 3 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '项目使用的自定义组件关联表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Records of r_project_comp
+-- ----------------------------
+-- INSERT INTO `r_project_comp` VALUES (1, 4, NULL, NULL, NULL, NULL, 1, 1, '[1, 2]', 0);
+-- INSERT INTO `r_project_comp` VALUES (2, 4, NULL, NULL, NULL, NULL, 2, 3, '[1]', 0);
+
+-- ----------------------------
+-- Table structure for r_project_func_group
+-- ----------------------------
+DROP TABLE IF EXISTS `r_project_func_group`;
+CREATE TABLE `r_project_func_group`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `projectId` int(11) NOT NULL COMMENT 'project 表主键',
+  `updateTime` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
+  `createTime` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人',
+  `funcGroupId` int(11) NOT NULL COMMENT 'function 表主键',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  INDEX `project_id`(`projectId`) USING BTREE,
+  INDEX `r_project_func_group_ibfk_2`(`funcGroupId`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 207 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '项目/函数关联表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Records of r_project_func_group
+-- ----------------------------
+-- INSERT INTO `r_project_func_group` VALUES (207, 1, NULL, NULL, 'admin', NULL, 1, 0);
+
+-- ----------------------------
+-- Table structure for r_project_page
+-- ----------------------------
+DROP TABLE IF EXISTS `r_project_page`;
+CREATE TABLE `r_project_page`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `projectId` int(11) NOT NULL COMMENT 'project 表主键',
+  `updateTime` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
+  `createTime` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人',
+  `pageId` int(11) NOT NULL COMMENT 'page 表主键',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  INDEX `project_id`(`projectId`) USING BTREE,
+  INDEX `page_id`(`pageId`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '项目/页面关联表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Table structure for r_role_perm
+-- ----------------------------
+DROP TABLE IF EXISTS `r_role_perm`;
+CREATE TABLE `r_role_perm`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `roleId` int(11) NOT NULL COMMENT 'role 表主键',
+  `permId` int(11) NOT NULL COMMENT 'perm 表主键',
+  `updateTime` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
+  `createTime` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  INDEX `perm_id`(`roleId`) USING BTREE,
+  INDEX `operate_id`(`permId`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 42 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '角色/权限关联表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Records of r_role_perm
+-- ----------------------------
+INSERT INTO `r_role_perm` VALUES (1, 1, 1, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (2, 1, 2, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (3, 1, 3, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (4, 1, 4, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (5, 1, 5, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (6, 1, 6, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (7, 1, 7, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (8, 1, 8, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (9, 1, 9, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (10, 1, 10, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (11, 1, 11, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (12, 1, 12, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (13, 1, 13, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (14, 1, 14, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (15, 1, 15, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (16, 1, 16, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (17, 1, 17, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (21, 1, 18, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (22, 1, 19, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (23, 1, 20, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (24, 2, 5, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (25, 2, 6, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (26, 2, 7, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (27, 2, 8, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (28, 2, 9, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (29, 2, 10, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (30, 2, 11, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (31, 2, 12, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (32, 2, 13, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (33, 2, 14, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (34, 2, 15, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (35, 2, 16, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (36, 2, 17, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (37, 3, 11, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (38, 1, 21, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (39, 1, 22, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (40, 1, 23, NULL, NULL, NULL, NULL, 0);
+INSERT INTO `r_role_perm` VALUES (41, 1, 24, NULL, NULL, NULL, NULL, 0);
+
+-- ----------------------------
+-- Table structure for r_user_project_role
+-- ----------------------------
+DROP TABLE IF EXISTS `r_user_project_role`;
+CREATE TABLE `r_user_project_role`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `userId` int(11) NOT NULL COMMENT 'user 表主键',
+  `projectId` int(11) NOT NULL COMMENT 'project 表主键',
+  `updateTime` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
+  `createTime` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人',
+  `roleId` int(11) NOT NULL COMMENT 'role 表主键',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  INDEX `user_id`(`userId`) USING BTREE,
+  INDEX `project_id`(`projectId`) USING BTREE,
+  INDEX `role_id`(`roleId`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 8 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '用户/项目/角色关联表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Records of r_user_project_role
+-- ----------------------------
+-- INSERT INTO `r_user_project_role` VALUES (6, 1, 8, NULL, NULL, 'admin', NULL, 1, 0);
+-- INSERT INTO `r_user_project_role` VALUES (7, 1, 9, NULL, NULL, 'admin', NULL, 1, 0);
+
+-- ----------------------------
+-- Table structure for role
+-- ----------------------------
+DROP TABLE IF EXISTS `role`;
+CREATE TABLE `role`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `roleCode` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '角色 ID',
+  `roleName` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '角色名称',
+  `createTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
+  `updateTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '最新更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人，默认当前用户',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人，默认当前用户',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  INDEX `role_id`(`roleCode`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '角色表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Records of role
+-- ----------------------------
+INSERT INTO `role` VALUES (1, 'root', '超级管理员', '2020-06-03 12:00:59', '2020-06-03 12:00:59', NULL, NULL, 0);
+INSERT INTO `role` VALUES (2, 'developer', '开发者', '2020-06-03 12:00:59', '2020-06-03 12:00:59', NULL, NULL, 0);
+INSERT INTO `role` VALUES (3, 'viewer', '预览者', '2020-06-03 12:00:59', '2020-06-03 12:00:59', NULL, NULL, 0);
+
+-- ----------------------------
+-- Table structure for user
+-- ----------------------------
+DROP TABLE IF EXISTS `user`;
+CREATE TABLE `user`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '系统的用户名（内部版为企业微信，外部版为注册的用户名）',
+  `qq` int(11) NULL DEFAULT NULL COMMENT 'QQ 账号（外部版）',
+  `wx` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '微信账号（外部版）',
+  `bk` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '企业版/社区版账号（外部版）',
+  `createTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
+  `updateTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '最新更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人，默认当前用户',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人，默认当前用户',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  PRIMARY KEY (`id`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '用户表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Table structure for version
+-- ----------------------------
+DROP TABLE IF EXISTS `version`;
+CREATE TABLE `version`  (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `componentId` int(11) NOT NULL COMMENT 'component 表的主键',
+  `version` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '版本号',
+  `versionLog` mediumtext CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '版本日志',
+  `createTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
+  `updateTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '最新更新时间',
+  `createUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '创建人，默认当前用户',
+  `updateUser` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '更新人，默认当前用户',
+  `deleteFlag` int(11) NULL DEFAULT 0 COMMENT '是否删除，1代表已删除',
+  PRIMARY KEY (`id`) USING BTREE,
+  INDEX `component_id`(`componentId`) USING BTREE
+) ENGINE = InnoDB AUTO_INCREMENT = 4 CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '自定义组件版本表' ROW_FORMAT = Dynamic;
+
+-- ----------------------------
+-- Records of version
+-- ----------------------------
+-- INSERT INTO `version` VALUES (1, 1, '0.0.1', '初始化', '2020-06-03 12:01:16', '2020-06-03 12:01:16', NULL, NULL, 0);
+-- INSERT INTO `version` VALUES (2, 1, '0.0.2', '修复 bug', '2020-06-03 12:01:16', '2020-06-03 12:01:16', NULL, NULL, 0);
+-- INSERT INTO `version` VALUES (3, 2, '0.0.1', '初始化 x-table', '2020-06-03 12:01:16', '2020-06-03 12:01:16', NULL, NULL, 0);
+
+SET FOREIGN_KEY_CHECKS = 1;
diff --git a/paas-ce/lesscode/lib/server/model/User.js b/paas-ce/lesscode/lib/server/model/user.js
similarity index 67%
rename from paas-ce/lesscode/lib/server/model/User.js
rename to paas-ce/lesscode/lib/server/model/user.js
index 7741b23fe..adb23a0db 100644
--- a/paas-ce/lesscode/lib/server/model/User.js
+++ b/paas-ce/lesscode/lib/server/model/user.js
@@ -9,20 +9,18 @@
  * specific language governing permissions and limitations under the License.
  */
 
-module.exports = (sequelize, Types) => {
-    const User = sequelize.define('User', {
-        englishName: {
-            type: Types.STRING,
-            primaryKey: true
-        },
-        chineseName: {
-            type: Types.STRING
-        },
-        createBy: Types.STRING,
-        updateBy: Types.STRING
-    })
+import { getRepository } from 'typeorm'
+import User from './entities/user'
 
-    User.association = models => {}
+module.exports = {
+    findOneByBk (bkUserName) {
+        return getRepository(User).findOne({ bk: bkUserName })
+    },
 
-    return User
+    // 创建用户
+    addUser (data) {
+        const repository = getRepository(User)
+        const user = repository.create(data)
+        return repository.save(user)
+    }
 }
diff --git a/paas-ce/lesscode/lib/server/router/component-category.js b/paas-ce/lesscode/lib/server/router/component-category.js
new file mode 100644
index 000000000..aedbee39a
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/router/component-category.js
@@ -0,0 +1,30 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+// const { saveAsFile, formatCode, deleteTmpFile } = require('../controller/vue-code')
+const Router = require('koa-router')
+const {
+    list,
+    create,
+    update,
+    categoryDelete
+} = require('../controller/component-category')
+
+const router = new Router({
+    prefix: '/api/componentCategory'
+})
+
+router.get('/list', list)
+router.post('/create', create)
+router.post('/update', update)
+router.delete('/delete', categoryDelete)
+
+module.exports = router
diff --git a/paas-ce/lesscode/lib/server/router/component.js b/paas-ce/lesscode/lib/server/router/component.js
new file mode 100644
index 000000000..731f8350e
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/router/component.js
@@ -0,0 +1,36 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+// const { saveAsFile, formatCode, deleteTmpFile } = require('../controller/vue-code')
+const Router = require('koa-router')
+const {
+    list,
+    useing,
+    detail,
+    create,
+    update,
+    compDelete,
+    upload
+} = require('../controller/component')
+
+const router = new Router({
+    prefix: '/api/component'
+})
+
+router.get('/list', list)
+router.get('/useing', useing)
+router.get('/detail', detail)
+router.post('/create', create)
+router.post('/update', update)
+router.delete('/delete', compDelete)
+router.post('/upload', upload)
+
+module.exports = router
diff --git a/paas-ce/lesscode/lib/server/router/function.js b/paas-ce/lesscode/lib/server/router/function.js
new file mode 100644
index 000000000..a1ee318ab
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/router/function.js
@@ -0,0 +1,29 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+const Router = require('koa-router')
+const { getAllGroupFunc, getGroupList, addFuncGroup, editFuncGroups, deleteFuncGroup, addFunction, getFuncList, editFunction, deleteFunction } = require('../controller/function')
+
+const router = new Router({
+    prefix: '/api/function'
+})
+
+router.get('/getGroupList', getGroupList)
+router.post('/addFuncGroup', addFuncGroup)
+router.put('/editFuncGroups', editFuncGroups)
+router.delete('/deleteFuncGroup', deleteFuncGroup)
+router.post('/addFunction', addFunction)
+router.get('/getFuncList', getFuncList)
+router.put('/editFunction', editFunction)
+router.delete('/deleteFunction', deleteFunction)
+router.get('/getAllGroupFunc', getAllGroupFunc)
+
+module.exports = router
diff --git a/paas-ce/lesscode/lib/server/router/index.js b/paas-ce/lesscode/lib/server/router/index.js
index f378e675f..b3217b254 100644
--- a/paas-ce/lesscode/lib/server/router/index.js
+++ b/paas-ce/lesscode/lib/server/router/index.js
@@ -11,41 +11,23 @@
 
 const KoaRouter = require('koa-router')
 const pageRouter = new KoaRouter()
+
 const IS_DEV = process.env.NODE_ENV === 'development'
-// const IS_LOCAL = process.env.NODE_ENV === 'local'
 const pageTemplateName = IS_DEV ? 'index-dev' : 'index'
-const test = require('./test')
-const user = require('./user')
-const data = require('./data')
-const vueCode = require('./vue-code')
-
-// const renderParams = IS_DEV
-//     ? {
-//         STATIC_URL: ''
-//     }
-//     : {
-//         STATIC_URL: IS_LOCAL ? '' : `/${process.env.APP_CODE}`
-//     }
-
 const renderParams = { STATIC_URL: '' }
-const routes = []
-const allowedMethods = []
-// 所有路由
-const allRouter = [
-    pageRouter,
-    test,
-    user,
-    data,
-    vueCode
-]
-
 // 把所有前端的页面路由都指向 index，为了方便前端 vue router 使用 browserHistory
 pageRouter.get('*', async (ctx, next) => {
     ctx.body = await ctx.render(pageTemplateName, renderParams)
     await next()
 })
+const routes = [pageRouter.routes()]
+const allowedMethods = [pageRouter.allowedMethods()]
 
-allRouter.forEach(router => {
+const fs = require('fs')
+const path = require('path')
+const files = fs.readdirSync(path.resolve(__dirname, './')).filter(name => name !== 'index.js')
+files.forEach((name) => {
+    const router = require(`./${name}`)
     routes.push(router.routes())
     allowedMethods.push(router.allowedMethods())
 })
diff --git a/paas-ce/lesscode/lib/server/router/test.js b/paas-ce/lesscode/lib/server/router/mock-data.js
similarity index 78%
rename from paas-ce/lesscode/lib/server/router/test.js
rename to paas-ce/lesscode/lib/server/router/mock-data.js
index 7b0ffc08a..e3ef03e3f 100644
--- a/paas-ce/lesscode/lib/server/router/test.js
+++ b/paas-ce/lesscode/lib/server/router/mock-data.js
@@ -9,15 +9,16 @@
  * specific language governing permissions and limitations under the License.
  */
 
-const { getMockData, getTable, remove } = require('../controller/test')
+const { getApiData, getMockData, getXTableData } = require('../controller/mock-data')
 const Router = require('koa-router')
 
 const router = new Router({
-    prefix: '/api/test'
+    prefix: '/api/data'
 })
 
+router.post('/getApiData', getApiData)
 router.get('/getMockData', getMockData)
-router.get('/getTable', getTable)
-router.delete('/remove', remove)
+router.get('/getXTableData', getXTableData)
+router.post('/getXTableData', getXTableData)
 
 module.exports = router
diff --git a/paas-ce/lesscode/lib/server/router/page.js b/paas-ce/lesscode/lib/server/router/page.js
new file mode 100644
index 000000000..974e4ac8b
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/router/page.js
@@ -0,0 +1,35 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+const Router = require('koa-router')
+const {
+    createPage,
+    getPageList,
+    updatePage,
+    copyPage,
+    deletePage,
+    checkName,
+    pageDetail
+} = require('../controller/page')
+
+const router = new Router({
+    prefix: '/api/Page'
+})
+
+router.post('/create', createPage)
+router.get('/getList', getPageList)
+router.put('/update', updatePage)
+router.post('/copy', copyPage)
+router.delete('/delete', deletePage)
+router.post('/checkName', checkName)
+router.get('/detail', pageDetail)
+
+module.exports = router
diff --git a/paas-ce/lesscode/lib/server/router/data.js b/paas-ce/lesscode/lib/server/router/perm.js
similarity index 87%
rename from paas-ce/lesscode/lib/server/router/data.js
rename to paas-ce/lesscode/lib/server/router/perm.js
index 6030aaafe..ccc7eabc5 100644
--- a/paas-ce/lesscode/lib/server/router/data.js
+++ b/paas-ce/lesscode/lib/server/router/perm.js
@@ -9,13 +9,13 @@
  * specific language governing permissions and limitations under the License.
  */
 
-const { getApiData } = require('../controller/data')
 const Router = require('koa-router')
+const { getUserPerm } = require('../controller/perm')
 
 const router = new Router({
-    prefix: '/api/data'
+    prefix: '/api/perm'
 })
 
-router.post('/getApiData', getApiData)
+router.get('/userPerm', getUserPerm)
 
 module.exports = router
diff --git a/paas-ce/lesscode/lib/server/router/project.js b/paas-ce/lesscode/lib/server/router/project.js
new file mode 100644
index 000000000..a9e0e4993
--- /dev/null
+++ b/paas-ce/lesscode/lib/server/router/project.js
@@ -0,0 +1,35 @@
+/**
+ * Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved.
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://opensource.org/licenses/MIT
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+ * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations under the License.
+ */
+
+const Router = require('koa-router')
+const {
+    createProject,
+    queryProject,
+    updateProject,
+    deleteProject,
+    favorite,
+    checkname,
+    projectDetail
+} = require('../controller/project')
+
+const router = new Router({
+    prefix: '/api/project'
+})
+
+router.post('/create', createProject)
+router.get('/query', queryProject)
+router.put('/update', updateProject)
+router.delete('/delete', deleteProject)
+router.post('/favorite', favorite)
+router.post('/checkname', checkname)
+router.get('/detail', projectDetail)
+
+module.exports = router
diff --git a/paas-ce/lesscode/lib/server/util.js b/paas-ce/lesscode/lib/server/util.js
index 75f07a7d0..c3caee50b 100644
--- a/paas-ce/lesscode/lib/server/util.js
+++ b/paas-ce/lesscode/lib/server/util.js
@@ -74,7 +74,22 @@ exports.CODE = {
         PROJECT_NOT_FOUND: 4040,
         // 项目页面描述文件未找到
         JSON_NOT_FOUND: 4041,
+        // 项目名称已经存在
+        PROJECT_NAME_EXISTED: 4042,
+        // 项目ID已经存在
+        PROJECT_ID_EXISTED: 4043,
         // 未定义的业务逻辑错误
         NOT_DEFINED: 9999
     }
 }
+
+/**
+ * 判断请求是否是 ajax 异步请求
+ *
+ * @param {Object} req request 对象
+ *
+ * @return {boolean} 返回结果
+ */
+exports.isAjaxReq = req => {
+    return req.get('X-Requested-With') || (req.header.accept || '').indexOf('json') > -1
+}
diff --git a/paas-ce/lesscode/package.json b/paas-ce/lesscode/package.json
index 8c942623a..c6c2c60c3 100644
--- a/paas-ce/lesscode/package.json
+++ b/paas-ce/lesscode/package.json
@@ -71,7 +71,6 @@
     "@babel/core": "~7.6.3",
     "@babel/helper-module-imports": "~7.7.0",
     "@babel/node": "~7.6.3",
-    "@babel/plugin-proposal-decorators": "~7.6.0",
     "@babel/plugin-proposal-export-namespace-from": "~7.5.2",
     "@babel/plugin-proposal-function-sent": "~7.5.0",
     "@babel/plugin-proposal-numeric-separator": "~7.2.0",
@@ -81,9 +80,9 @@
     "@babel/plugin-transform-object-assign": "~7.2.0",
     "@babel/plugin-transform-runtime": "~7.6.2",
     "@babel/preset-env": "~7.6.3",
-    "@babel/register": "~7.6.2",
+    "@babel/register": "^7.6.2",
     "@babel/runtime": "~7.6.3",
-    "@icon-cool/bk-icon-vue-drag-vis": "0.0.5",
+    "@icon-cool/bk-icon-vue-drag-vis": "0.0.16",
     "@xunlei/vue-context-menu": "~1.0.2",
     "acorn": "~7.2.0",
     "app-root-path": "~3.0.0",
@@ -98,7 +97,7 @@
     "babel-plugin-syntax-jsx": "~6.18.0",
     "babel-plugin-transform-vue-jsx": "~3.7.0",
     "better-npm-run": "~0.1.1",
-    "bk-magic-vue": "~2.1.18-beta.2",
+    "bk-magic-vue": "~2.2.1-beta.2",
     "caniuse-lite": "~1.0.30000974",
     "chalk": "~2.4.2",
     "change-case": "~4.1.1",
@@ -109,6 +108,8 @@
     "cookie": "~0.4.0",
     "copy-webpack-plugin": "~5.0.4",
     "css-loader": "~3.2.0",
+    "dayjs": "^1.8.28",
+    "echarts": "^4.8.0",
     "eslint": "~5.16.0",
     "eslint-config-standard": "~12.0.0",
     "eslint-friendly-formatter": "~4.0.1",
@@ -126,6 +127,7 @@
     "highlight.js": "~9.16.2",
     "html-loader": "~1.1.0",
     "html-webpack-plugin": "~3.2.0",
+    "html2canvas": "^1.0.0-rc.5",
     "jsonp": "~0.2.1",
     "koa": "~2.8.2",
     "koa-bodyparser": "~4.2.1",
@@ -134,6 +136,7 @@
     "koa-log4": "~2.3.2",
     "koa-mount": "~4.0.0",
     "koa-router": "~7.4.0",
+    "koa-session": "~6.0.0",
     "koa-static": "~5.0.0",
     "koa-webpack": "~5.2.4",
     "koa2-connect-history-api-fallback": "~0.1.2",
@@ -150,6 +153,7 @@
     "monaco-editor": "~0.20.0",
     "monaco-editor-webpack-plugin": "~1.9.0",
     "mysql2": "~1.7.0",
+    "node-request-context": "^1.0.5",
     "nodemon": "~1.19.3",
     "optimize-css-assets-webpack-plugin": "~5.0.3",
     "ora": "~4.0.2",
@@ -170,16 +174,17 @@
     "postcss-simple-vars": "~5.0.2",
     "postcss-url": "~8.0.0",
     "prettier": "1.19.1",
+    "reflect-metadata": "^0.1.13",
     "screenfull": "~5.0.2",
-    "sequelize": "~5.19.5",
     "shelljs": "~0.8.3",
     "shx": "~0.3.2",
     "swig": "~1.4.2",
     "terser-webpack-plugin": "~1.2.3",
     "transliteration": "~2.1.8",
+    "typeorm": "^0.2.25",
     "url-loader": "~2.2.0",
     "vue": "~2.6.10",
-    "vue-echarts": "^3.0.9",
+    "vue-echarts": "^5.0.0-beta.0",
     "vue-json-viewer": "^2.2.11",
     "vue-loader": "~15.7.1",
     "vue-markdown-loader": "~2.4.1",
@@ -195,5 +200,9 @@
   "engines": {
     "node": ">= 8.9.0",
     "npm": ">= 6.9.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.10.1",
+    "@babel/plugin-proposal-decorators": "^7.6.0"
   }
 }