diff --git a/.gitignore b/.gitignore index 2f9415f0b..1112d6649 100644 --- a/.gitignore +++ b/.gitignore @@ -130,6 +130,7 @@ open_paas_unittest .DS_Store .vscode/ +.idea # End of https://www.gitignore.io/api/python # lesscode pre-commie 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 e3b2ed31a..8ece8b4d6 100644 --- a/paas-ce/lesscode/lib/client/build/webpack.base.conf.js +++ b/paas-ce/lesscode/lib/client/build/webpack.base.conf.js @@ -69,7 +69,10 @@ module.exports = { source: 'src', img: 'src', image: 'xlink:href' - } + }, + include: [ + resolve(__dirname, '../../../node_modules', 'vue-echarts') + ] } } }, @@ -93,7 +96,9 @@ module.exports = { include: [ resolve(__dirname, '..', 'src'), resolve(__dirname, '../../../node_modules', 'bk-magic-vue'), - resolve(__dirname, '../../../node_modules', 'monaco-editor') + resolve(__dirname, '../../../node_modules', 'monaco-editor'), + resolve(__dirname, '../../../node_modules', 'vue-echarts'), + resolve(__dirname, '../../../node_modules', 'resize-detector') ], cacheDirectory: resolve(__dirname, '..', '.webpack_cache'), presets: [ @@ -141,7 +146,7 @@ module.exports = { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: resolve(__dirname, '../../../node_modules', 'url-loader'), options: { - limit: 10000, + limit: true, name: posix.join('static', 'images/[name].[hash:7].[ext]') } }, diff --git a/paas-ce/lesscode/lib/client/index-dev.html b/paas-ce/lesscode/lib/client/index-dev.html index b86f0cc44..133d67d40 100644 --- a/paas-ce/lesscode/lib/client/index-dev.html +++ b/paas-ce/lesscode/lib/client/index-dev.html @@ -15,7 +15,7 @@ - 蓝鲸智云MagicBox|可视化布局 + 蓝鲸智云MagicBox|可视化开发
diff --git a/paas-ce/lesscode/lib/client/index.html b/paas-ce/lesscode/lib/client/index.html index b86f0cc44..133d67d40 100644 --- a/paas-ce/lesscode/lib/client/index.html +++ b/paas-ce/lesscode/lib/client/index.html @@ -15,7 +15,7 @@ - 蓝鲸智云MagicBox|可视化布局 + 蓝鲸智云MagicBox|可视化开发
diff --git a/paas-ce/lesscode/lib/client/src/App.vue b/paas-ce/lesscode/lib/client/src/App.vue index c9b33d056..0592c4863 100644 --- a/paas-ce/lesscode/lib/client/src/App.vue +++ b/paas-ce/lesscode/lib/client/src/App.vue @@ -10,7 +10,7 @@ --> @@ -83,13 +97,19 @@ renderData: {}, renderDataSlot: null, bindProps: {}, + startDragPosition: {}, contextMenuVisible: false, - contextMenuTarget: null + contextMenuTarget: null, + clearGridConf: { + visiable: false, + headerPosition: 'left' + } } }, computed: { ...mapGetters('drag', [ - 'targetData' + 'targetData', + 'curSelectedComponentData' ]) }, watch: { @@ -124,7 +144,8 @@ methods: { ...mapMutations('drag', [ 'setCurSelectedComponentData', - 'setTargetData' + 'setTargetData', + 'pushTargetHistory' ]), /** @@ -138,6 +159,39 @@ this.contextMenuVisible = false }, + /** + * 右键清空 grid + */ + handleContextmenuClearGrid () { + this.clearGridConf.visiable = true + }, + + /** + * 显示清空 grid 的弹框 + */ + confirmClearGrid () { + const renderData = Object.assign({}, this.renderData) + renderData.renderProps.slots.val.forEach(v => { + v.children = [] + }) + this.renderData = Object.assign({}, renderData) + this.setCurSelectedComponentData(_.cloneDeep(this.renderData)) + this.contextMenuVisible = false + }, + + /** + * 取消清空 grid 的弹框 + */ + cancelClearGrid () { + this.clearGridConf.visiable = false + }, + + /** + * 取消清空 grid 的弹框 afterLeave 回调 + */ + afterLeaveClearGrid () { + }, + /** * 设置每列的宽度 */ @@ -171,21 +225,60 @@ */ updatePropsHandler (data) { if (data.componentId === this.renderData.componentId) { - const { renderStyles = {}, renderProps = {} } = data.modifier + const pushData = { + type: 'update', + component: _.cloneDeep(this.renderData), + modifier: data.modifier + } + this.pushTargetHistory(pushData) + // const { renderStyles = {}, renderProps = {} } = data.modifier + const { renderStyles = {}, renderProps = {}, tabPanelActive = 'props' } = data.modifier this.renderData.renderStyles = renderStyles this.renderData.renderProps = renderProps + this.renderData.tabPanelActive = tabPanelActive this.updateBindProps() } }, log (e, column) { - // console.warn(column) - // console.error('eeeee', e, column) + const evt = e[0] || {} + const addEle = evt.added + const removedEle = evt.removed + const moveEle = evt.moved + const element = (addEle || removedEle || moveEle).element + const pos = this.$td().getNodePosition(element.componentId) + + const pushData = { + parentId: pos.parent && pos.parent.componentId, + component: element, + columnIndex: pos.columnIndex, + childrenIndex: pos.childrenIndex + } + if (addEle) { + pushData.type = 'add' + } + if (removedEle) { + pushData.type = 'remove' + pushData.parentId = this.startDragPosition.parent && this.startDragPosition.parent.componentId + pushData.columnIndex = this.startDragPosition.columnIndex + pushData.childrenIndex = this.startDragPosition.childrenIndex + } + if (moveEle) { + pushData.type = 'move' + pushData.sourceParentNodeId = pushData.parentId + pushData.sourceColumnIndex = pos.columnIndex + pushData.sourceChildrenIndex = moveEle.oldIndex + pushData.targetParentNodeId = pushData.parentId + pushData.targetColumnIndex = pos.columnIndex + pushData.targetChildrenIndex = moveEle.newIndex + } + this.pushTargetHistory(pushData) }, onChoose (e, column) { const evt = e[0] const curChooseComponent = column.children[evt.oldIndex] + this.startDragPosition = this.$td().getNodePosition(curChooseComponent.componentId) this.groupType = curChooseComponent.type === 'render-grid' ? 'render-grid' : 'component' }, @@ -252,6 +345,8 @@ parentRow.splice(selfIndex + 1, 0, { componentId: this.componentData.name + '-' + uuid(), + tabPanelActive: this.componentData.tabPanelActive, + renderKey: uuid(), name: this.componentData.name, type: this.componentData.type, renderProps, 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 1c0cb7233..60f54ed6f 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 @@ -30,14 +30,9 @@ const codeMixin = { 'bk-radio-group': 'bk-radio', 'bk-tab': 'bk-tab-panel' }, - checkboxGroupVModelList: [] + chartTypeArr: [] } }, - computed: { - // ...mapGetters('drag', [ - // 'getMethodById' - // ]) - }, watch: { refreshGenerateCodeKey () { this.code = '' @@ -48,7 +43,7 @@ const codeMixin = { this.methodsStr = '' this.createdStr = '' this.existFunc = [] - this.checkboxGroupVModelList = [] + this.chartTypeArr = [] } }, methods: { @@ -70,15 +65,25 @@ const codeMixin = { }, generateComponment (item) { - // item.componentId = item.componentId.replace('_', '') - const itemProps = this.getItemProps(item.type, item.renderProps, item.componentId) - const { itemStyles = '', itemClass = '' } = this.getItemStyles(item.componentId, item.renderStyles) - const itemEvents = this.getItemEvents(item.renderEvents) + item = Object.assign({}, item, { componentId: camelCase(item.componentId.replace(/-/g, '')) }) + if (item.name.startsWith('chart-')) { + this.generateCharts(item) + 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 `
+ +
\n` + } else { + // item.componentId = item.componentId.replace('_', '') + const itemProps = this.getItemProps(item.type, item.renderProps, item.componentId) + const { itemStyles = '', itemClass = '' } = this.getItemStyles(item.componentId, item.renderStyles) + const itemEvents = this.getItemEvents(item.renderEvents) - return ` - <${item.type} ${itemProps} ${itemStyles} ${itemClass} ${itemEvents}> - ${this.renderSlot(item.type, item.renderProps.slots, item.componentId)} - ` + return ` + <${item.type} ${itemProps} ${itemStyles} ${itemClass} ${itemEvents}> + ${this.renderSlot(item.type, item.renderProps.slots, item.componentId)} + ` + } }, generateCss () { const head = ` diff --git a/paas-ce/lesscode/lib/client/src/element-materials/modifier/props/components/render-prop.vue b/paas-ce/lesscode/lib/client/src/element-materials/modifier/props/components/render-prop.vue index 3fc3331be..cffcb78c6 100644 --- a/paas-ce/lesscode/lib/client/src/element-materials/modifier/props/components/render-prop.vue +++ b/paas-ce/lesscode/lib/client/src/element-materials/modifier/props/components/render-prop.vue @@ -13,10 +13,8 @@
-
+
该组件暂无样式 - 请选择组件
diff --git a/paas-ce/lesscode/lib/client/src/images/help/grid1.png b/paas-ce/lesscode/lib/client/src/images/help/grid1.png new file mode 100644 index 000000000..69002e8a3 Binary files /dev/null and b/paas-ce/lesscode/lib/client/src/images/help/grid1.png differ diff --git a/paas-ce/lesscode/lib/client/src/images/help/grid2.png b/paas-ce/lesscode/lib/client/src/images/help/grid2.png new file mode 100644 index 000000000..fdb5260be Binary files /dev/null and b/paas-ce/lesscode/lib/client/src/images/help/grid2.png differ diff --git a/paas-ce/lesscode/lib/client/src/images/help/grid3.png b/paas-ce/lesscode/lib/client/src/images/help/grid3.png new file mode 100644 index 000000000..ebdaf2617 Binary files /dev/null and b/paas-ce/lesscode/lib/client/src/images/help/grid3.png differ diff --git a/paas-ce/lesscode/lib/client/src/main.js b/paas-ce/lesscode/lib/client/src/main.js index 67c1121a5..3928adead 100644 --- a/paas-ce/lesscode/lib/client/src/main.js +++ b/paas-ce/lesscode/lib/client/src/main.js @@ -24,6 +24,9 @@ import header from '@/components/header.vue' import '@/common/bkmagic' import '@icon-cool/bk-icon-vue-drag-vis' import VueContextMenu from '@xunlei/vue-context-menu' +import targetData from '@/common/targetData.js' + +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 ac4cd770b..f0a1d2afa 100644 --- a/paas-ce/lesscode/lib/client/src/router/index.js +++ b/paas-ce/lesscode/lib/client/src/router/index.js @@ -24,40 +24,11 @@ const Preview = () => import(/* webpackChunkName: 'preview' */'@/views/preview') const NotFound = () => import(/* webpackChunkName: 'none' */'@/views/404') const MainHelpEntry = () => import(/* webpackChunkName: 'index' */'@/views/help') -const AnimateNumber = () => import(/* webpackChunkName: 'animate-number' */'@/views/help/docs/animate-number.md') -const Badge = () => import(/* webpackChunkName: 'badge' */'@/views/help/docs/badge.md') -const Button = () => import(/* webpackChunkName: 'button' */'@/views/help/docs/button.md') -const CheckboxGroup = () => import(/* webpackChunkName: 'checkbox-group' */'@/views/help/docs/checkbox-group.md') const Custom = () => import(/* webpackChunkName: 'custom' */'@/views/help/docs/custom.md') -const DatePicker = () => import(/* webpackChunkName: 'date-picker' */'@/views/help/docs/date-picker.md') -const Diff = () => import(/* webpackChunkName: 'diff' */'@/views/help/docs/diff.md') -const Exception = () => import(/* webpackChunkName: 'exception' */'@/views/help/docs/exception.md') const Grid = () => import(/* webpackChunkName: 'grid' */'@/views/help/docs/grid.md') -const Image = () => import(/* webpackChunkName: 'image' */'@/views/help/docs/image.md') -const Input = () => import(/* webpackChunkName: 'input' */'@/views/help/docs/input.md') const Intro = () => import(/* webpackChunkName: 'intro' */'@/views/help/docs/intro.md') -const Pagination = () => import(/* webpackChunkName: 'pagination' */'@/views/help/docs/pagination.md') -const Progress = () => import(/* webpackChunkName: 'progress' */'@/views/help/docs/progress.md') -const RadioGroup = () => import(/* webpackChunkName: 'radio-group' */'@/views/help/docs/radio-group.md') -const Rate = () => import(/* webpackChunkName: 'rate' */'@/views/help/docs/rate.md') -const RoundProgress = () => import(/* webpackChunkName: 'round-progress' */'@/views/help/docs/round-progress.md') -const SearchSelect = () => import(/* webpackChunkName: 'search-select' */'@/views/help/docs/search-select.md') -const Select = () => import(/* webpackChunkName: 'select' */'@/views/help/docs/select.md') -const Slider = () => import(/* webpackChunkName: 'slider' */'@/views/help/docs/slider.md') const Start = () => import(/* webpackChunkName: 'start' */'@/views/help/docs/start.md') -const Steps = () => import(/* webpackChunkName: 'steps' */'@/views/help/docs/steps.md') -const Swiper = () => import(/* webpackChunkName: 'swiper' */'@/views/help/docs/swiper.md') -const Switcher = () => import(/* webpackChunkName: 'switcher' */'@/views/help/docs/switcher.md') -const Tab = () => import(/* webpackChunkName: 'tab' */'@/views/help/docs/tab.md') -const Table = () => import(/* webpackChunkName: 'table' */'@/views/help/docs/table.md') -const TagInput = () => import(/* webpackChunkName: 'tag-input' */'@/views/help/docs/tag-input.md') -const Text = () => import(/* webpackChunkName: 'text' */'@/views/help/docs/text.md') -const TimePicker = () => import(/* webpackChunkName: 'time-picker' */'@/views/help/docs/time-picker.md') -const Timeline = () => import(/* webpackChunkName: 'timeline' */'@/views/help/docs/timeline.md') -const Transfer = () => import(/* webpackChunkName: 'transfer' */'@/views/help/docs/transfer.md') -const Tree = () => import(/* webpackChunkName: 'tree' */'@/views/help/docs/tree.md') -const Upload = () => import(/* webpackChunkName: 'upload' */'@/views/help/docs/upload.md') -const ZoomImage = () => import(/* webpackChunkName: 'zoom-image' */'@/views/help/docs/zoom-image.md') +const Changelog = () => import(/* webpackChunkName: 'start' */'@/views/changelog/index.md') const routes = [ { @@ -81,40 +52,11 @@ const routes = [ path: '/help', component: MainHelpEntry, children: [ - { path: 'animate-number', name: 'animateNumber', component: AnimateNumber }, - { path: 'badge', name: 'badge', component: Badge }, - { path: 'button', name: 'button', component: Button }, - { path: 'checkbox-group', name: 'checkboxGroup', component: CheckboxGroup }, { path: 'custom', name: 'custom', component: Custom }, - { path: 'date-picker', name: 'datePicker', component: DatePicker }, - { path: 'diff', name: 'diff', component: Diff }, - { path: 'exception', name: 'exception', component: Exception }, { path: 'grid', name: 'grid', component: Grid }, - { path: 'image', name: 'image', component: Image }, - { path: 'input', name: 'input', component: Input }, { path: 'intro', name: 'intro', component: Intro, alias: '' }, - { path: 'pagination', name: 'pagination', component: Pagination }, - { path: 'progress', name: 'progress', component: Progress }, - { path: 'radio-group', name: 'radioGroup', component: RadioGroup }, - { path: 'rate', name: 'rate', component: Rate }, - { path: 'round-progress', name: 'roundProgress', component: RoundProgress }, - { path: 'search-select', name: 'searchSelect', component: SearchSelect }, - { path: 'select', name: 'select', component: Select }, - { path: 'slider', name: 'slider', component: Slider }, { path: 'start', name: 'start', component: Start }, - { path: 'steps', name: 'steps', component: Steps }, - { path: 'swiper', name: 'swiper', component: Swiper }, - { path: 'switcher', name: 'switcher', component: Switcher }, - { path: 'tab', name: 'tab', component: Tab }, - { path: 'table', name: 'table', component: Table }, - { path: 'tag-input', name: 'tagInput', component: TagInput }, - { path: 'text', name: 'text', component: Text }, - { path: 'time-picker', name: 'timePicker', component: TimePicker }, - { path: 'timeline', name: 'timeline', component: Timeline }, - { path: 'transfer', name: 'transfer', component: Transfer }, - { path: 'tree', name: 'tree', component: Tree }, - { path: 'upload', name: 'upload', component: Upload }, - { path: 'zoom-image', name: 'zoomImage', component: ZoomImage } + { path: 'changelog', name: 'changelog', component: Changelog } ] }, { 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 82ee4d078..911d3de8b 100644 --- a/paas-ce/lesscode/lib/client/src/store/modules/drag.js +++ b/paas-ce/lesscode/lib/client/src/store/modules/drag.js @@ -8,6 +8,8 @@ * 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 targetDataTool from '@/common/targetData.js' +import cloneDeep from 'lodash.clonedeep' export default { namespaced: true, @@ -35,10 +37,19 @@ export default { functionGroup: [], + copyData: {}, + + targetHistory: [], + + curHistoryIndex: 0, + // 用于生成 json 配置的数据 astData: [] }, mutations: { + setCopyData (state, selectedComponent) { + state.copyData = selectedComponent + }, setFunctionGroup (state, functionGroup) { localStorage.setItem('functionGroup', JSON.stringify(functionGroup)) state.functionGroup = functionGroup @@ -61,12 +72,86 @@ export default { }, setPageData (state, pageData) { state.pageData = Object.assign({}, pageData) + }, + + pushTargetHistory (state, pushData) { + state.targetHistory = state.targetHistory.slice(state.curHistoryIndex) + state.curHistoryIndex = 0 + const topPushData = state.targetHistory[0] || {} + const isExis = pushData.component && !Array.isArray(targetDataTool(pushData.component.componentId).value()) + if (pushData.type === 'remove' && topPushData.type === 'add' && topPushData.component.componentId === pushData.component.componentId && isExis) { + topPushData.type = 'move' + topPushData.sourceParentNodeId = pushData.parentId + topPushData.sourceColumnIndex = pushData.columnIndex + topPushData.sourceChildrenIndex = pushData.childrenIndex + + topPushData.targetParentNodeId = topPushData.parentId + topPushData.targetColumnIndex = topPushData.columnIndex + topPushData.targetChildrenIndex = topPushData.childrenIndex + } else { + state.targetHistory.unshift(cloneDeep(pushData)) + } + if (state.targetHistory.length > 50) state.targetHistory.pop() + }, + + backTargetHistory (state) { + if (state.curHistoryIndex >= state.targetHistory.length) return + const pushData = state.targetHistory[state.curHistoryIndex] + state.curHistoryIndex++ + const targetData = targetDataTool() + const component = pushData.component + const parentId = pushData.parentId + switch (pushData.type) { + case 'update': + targetData.update(component) + break + case 'add': + targetData.remove(component.componentId) + break + case 'remove': + targetData.appendChildByIndex(component, parentId, pushData.columnIndex, pushData.childrenIndex) + break + case 'move': + targetData.move(pushData.targetParentNodeId, pushData.targetColumnIndex, pushData.targetChildrenIndex, pushData.sourceParentNodeId, pushData.sourceColumnIndex, pushData.sourceChildrenIndex) + break + case 'clear': + targetData.setTargetData(pushData.oldTargetData) + break + } + }, + + forwardTargetHistory (state) { + if (state.curHistoryIndex <= 0) return + state.curHistoryIndex-- + const pushData = state.targetHistory[state.curHistoryIndex] + const targetData = targetDataTool() + const component = pushData.component + const parentId = pushData.parentId + switch (pushData.type) { + case 'update': + const modifier = pushData.modifier + targetData.update(Object.assign({}, component, modifier)) + break + case 'add': + targetData.appendChildByIndex(component, parentId, pushData.columnIndex, pushData.childrenIndex) + break + case 'remove': + targetData.remove(component.componentId) + break + case 'move': + targetData.move(pushData.sourceParentNodeId, pushData.sourceColumnIndex, pushData.sourceChildrenIndex, pushData.targetParentNodeId, pushData.targetColumnIndex, pushData.targetChildrenIndex) + break + case 'clear': + targetData.setTargetData(pushData.newTargetData) + break + } } }, getters: { draggableSourceGroup: state => state.draggableSourceGroup, draggableTargetGroup: state => state.draggableTargetGroup, targetData: state => state.targetData, + copyData: state => state.copyData, astData: state => state.astData, curSelectedComponentData: state => state.curSelectedComponentData, pageData: state => state.pageData, @@ -95,8 +180,7 @@ export default { 'function getMockData (res) {', '\tthis.$http.get("/test/getMockData")', '\t.then((res) => {', - '\t\tconst data = JSON.stringify(res)', - '\t\talert(data)', + '\t\treturn res.data', '\t})', '}' ].join('\n') diff --git a/paas-ce/lesscode/lib/client/src/views/changelog/index.md b/paas-ce/lesscode/lib/client/src/views/changelog/index.md new file mode 100644 index 000000000..739527023 --- /dev/null +++ b/paas-ce/lesscode/lib/client/src/views/changelog/index.md @@ -0,0 +1,55 @@ +## 更新日志 + +
+ +### 0.0.3 +###### 2020.06.12 + +* **[add]**: + - 新增【图表】类型组件，增加【折线图】、【柱状图】、【饼状图】示例 + - 增加复制、粘贴、撤销、恢复、删除等快捷操作 + - 每个组件必要的属性增加 tip 说明 + - 画布仅剩一个 grid 时，不允许删除； + - 增加清空 grid 操作 +* **[fix]**: + - 修复刷新页面时，没有选中组件但右侧面板会显示 grid 属性的问题 + - 修复其他 bug +* **[update]**: + - 右侧组件属性、样式、事件说明 + - 细节优化 + +--- + +### 0.0.2 +###### 2020.05.26 + +* **[add]**: + - 添加[帮助文档](/help) + - 每个组件必要的属性增加 tip 说明 + - 页面添加开源版入口 +* **[fix]**: + - 修复预览页面高度截断 bug +* **[update]**: + - 细节样式优化 + +--- + +### 0.0.1 +###### 2020.04.28 + +* **[add]**: + - 可视化开发平台（lesscode）初始版本 + +
+ + diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/animate-number.md b/paas-ce/lesscode/lib/client/src/views/help/docs/animate-number.md deleted file mode 100644 index 1c61f799d..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/animate-number.md +++ /dev/null @@ -1,61 +0,0 @@ -## animate-number - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/badge.md b/paas-ce/lesscode/lib/client/src/views/help/docs/badge.md deleted file mode 100644 index c3a09459c..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/badge.md +++ /dev/null @@ -1,61 +0,0 @@ -## badge - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/button.md b/paas-ce/lesscode/lib/client/src/views/help/docs/button.md deleted file mode 100644 index aeae3c131..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/button.md +++ /dev/null @@ -1,61 +0,0 @@ -## button - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/checkbox-group.md b/paas-ce/lesscode/lib/client/src/views/help/docs/checkbox-group.md deleted file mode 100644 index d4b4e3aa4..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/checkbox-group.md +++ /dev/null @@ -1,61 +0,0 @@ -## checkbox-group - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/date-picker.md b/paas-ce/lesscode/lib/client/src/views/help/docs/date-picker.md deleted file mode 100644 index ce034581f..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/date-picker.md +++ /dev/null @@ -1,61 +0,0 @@ -## date-picker - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/diff.md b/paas-ce/lesscode/lib/client/src/views/help/docs/diff.md deleted file mode 100644 index 6842904b9..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/diff.md +++ /dev/null @@ -1,61 +0,0 @@ -## diff - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/exception.md b/paas-ce/lesscode/lib/client/src/views/help/docs/exception.md deleted file mode 100644 index d108192c4..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/exception.md +++ /dev/null @@ -1,61 +0,0 @@ -## exception - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/grid.md b/paas-ce/lesscode/lib/client/src/views/help/docs/grid.md index bdb9a3cda..2311d052c 100644 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/grid.md +++ b/paas-ce/lesscode/lib/client/src/views/help/docs/grid.md @@ -1,61 +1,13 @@ -## 栅格布局 - -基础文字基础文字基础文字基础文字基础文字 - -### 单格 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 多格 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - +## 栅格布局 + +#### 可视化开发采用栅格布局，组件栏有单格、两格、三格、四格组件可快速拖动生成页面布局。 + +grid + +#### 每个栅格组件都可以增加列数，最多 12 列。我们建议在拖拽布局时采用 12 等分或 24 等分的原则进行规划。 + +grid + +#### 你也可以通过修改尺寸、外边距等样式来实现更加灵活的布局。 + +grid diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/image.md b/paas-ce/lesscode/lib/client/src/views/help/docs/image.md deleted file mode 100644 index a436040e9..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/image.md +++ /dev/null @@ -1,61 +0,0 @@ -## image - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/input.md b/paas-ce/lesscode/lib/client/src/views/help/docs/input.md deleted file mode 100644 index 95590bffa..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/input.md +++ /dev/null @@ -1,61 +0,0 @@ -## input - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/pagination.md b/paas-ce/lesscode/lib/client/src/views/help/docs/pagination.md deleted file mode 100644 index 2d22c7097..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/pagination.md +++ /dev/null @@ -1,61 +0,0 @@ -## pagination - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/progress.md b/paas-ce/lesscode/lib/client/src/views/help/docs/progress.md deleted file mode 100644 index 9300cc6f3..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/progress.md +++ /dev/null @@ -1,61 +0,0 @@ -## progress - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/radio-group.md b/paas-ce/lesscode/lib/client/src/views/help/docs/radio-group.md deleted file mode 100644 index 91d5b93bd..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/radio-group.md +++ /dev/null @@ -1,61 +0,0 @@ -## radio-group - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/rate.md b/paas-ce/lesscode/lib/client/src/views/help/docs/rate.md deleted file mode 100644 index 1cad52f6b..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/rate.md +++ /dev/null @@ -1,61 +0,0 @@ -## rate - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/round-progress.md b/paas-ce/lesscode/lib/client/src/views/help/docs/round-progress.md deleted file mode 100644 index 6b24849af..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/round-progress.md +++ /dev/null @@ -1,61 +0,0 @@ -## round-progress - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/search-select.md b/paas-ce/lesscode/lib/client/src/views/help/docs/search-select.md deleted file mode 100644 index d79877b05..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/search-select.md +++ /dev/null @@ -1,61 +0,0 @@ -## search-select - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/select.md b/paas-ce/lesscode/lib/client/src/views/help/docs/select.md deleted file mode 100644 index b2efcc57b..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/select.md +++ /dev/null @@ -1,61 +0,0 @@ -## select - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/slider.md b/paas-ce/lesscode/lib/client/src/views/help/docs/slider.md deleted file mode 100644 index 821154fdf..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/slider.md +++ /dev/null @@ -1,61 +0,0 @@ -## slider - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/steps.md b/paas-ce/lesscode/lib/client/src/views/help/docs/steps.md deleted file mode 100644 index c5bd2a719..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/steps.md +++ /dev/null @@ -1,61 +0,0 @@ -## steps - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/swiper.md b/paas-ce/lesscode/lib/client/src/views/help/docs/swiper.md deleted file mode 100644 index 7c6ac9536..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/swiper.md +++ /dev/null @@ -1,61 +0,0 @@ -## swiper - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/switcher.md b/paas-ce/lesscode/lib/client/src/views/help/docs/switcher.md deleted file mode 100644 index 4c22eb026..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/switcher.md +++ /dev/null @@ -1,61 +0,0 @@ -## switcher - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/tab.md b/paas-ce/lesscode/lib/client/src/views/help/docs/tab.md deleted file mode 100644 index b5518eb75..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/tab.md +++ /dev/null @@ -1,61 +0,0 @@ -## tab - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/table.md b/paas-ce/lesscode/lib/client/src/views/help/docs/table.md deleted file mode 100644 index 33a9e5d54..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/table.md +++ /dev/null @@ -1,61 +0,0 @@ -## table - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/tag-input.md b/paas-ce/lesscode/lib/client/src/views/help/docs/tag-input.md deleted file mode 100644 index ee06d7ab4..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/tag-input.md +++ /dev/null @@ -1,61 +0,0 @@ -## tag-input - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/text.md b/paas-ce/lesscode/lib/client/src/views/help/docs/text.md deleted file mode 100644 index c03ec1aa2..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/text.md +++ /dev/null @@ -1,61 +0,0 @@ -## text - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/time-picker.md b/paas-ce/lesscode/lib/client/src/views/help/docs/time-picker.md deleted file mode 100644 index af6cebb42..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/time-picker.md +++ /dev/null @@ -1,61 +0,0 @@ -## time-picker - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/timeline.md b/paas-ce/lesscode/lib/client/src/views/help/docs/timeline.md deleted file mode 100644 index fd05a69b2..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/timeline.md +++ /dev/null @@ -1,61 +0,0 @@ -## timeline - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/transfer.md b/paas-ce/lesscode/lib/client/src/views/help/docs/transfer.md deleted file mode 100644 index e74b86769..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/transfer.md +++ /dev/null @@ -1,61 +0,0 @@ -## transfer - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/tree.md b/paas-ce/lesscode/lib/client/src/views/help/docs/tree.md deleted file mode 100644 index 4cc34028b..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/tree.md +++ /dev/null @@ -1,61 +0,0 @@ -## tree - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/upload.md b/paas-ce/lesscode/lib/client/src/views/help/docs/upload.md deleted file mode 100644 index b04a86c26..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/upload.md +++ /dev/null @@ -1,61 +0,0 @@ -## upload - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - diff --git a/paas-ce/lesscode/lib/client/src/views/help/docs/zoom-image.md b/paas-ce/lesscode/lib/client/src/views/help/docs/zoom-image.md deleted file mode 100644 index 4d25453dc..000000000 --- a/paas-ce/lesscode/lib/client/src/views/help/docs/zoom-image.md +++ /dev/null @@ -1,61 +0,0 @@ -## zoom-image - -基础文字基础文字基础文字基础文字基础文字 - -### 三级标题1 - -基础文字基础文字基础文字基础文字基础文字。`行内代码` - -[链接](/help/intro) - -### 三级标题2 - -块级代码 - -```js -import Vue from 'vue' -import App from './App' -import router from './router' - -// 全量引入 bk-magic-vue -import bkMagic from '{{BASE_LIB_NAME}}' -// 全量引入 bk-magic-vue 样式 -import '{{BASE_LIB_NAME}}/dist/bk-magic-vue.min.css' - -Vue.use(bkMagic) - -new Vue({ - el: '#root', - router, - template: '', - components: {App} -}) -``` - -### 三级标题3 - -:::info -info提示info提示info提示info提示info提示 - -info提示 -::: - -:::tip -tip提示tip提示tip提示tip提示tip提示 - -tip提示 -::: - -:::warning -warning提示warning提示warning提示warning提示warning提示 - -warning提示 -::: - -:::danger -danger提示danger提示danger提示danger提示danger提示 - -danger提示 -::: - - 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 85ed67a1f..1670bdff6 100644 --- a/paas-ce/lesscode/lib/client/src/views/help/index.css +++ b/paas-ce/lesscode/lib/client/src/views/help/index.css @@ -80,6 +80,8 @@ $headerHeight: 64px; font-size: 14px; color: #5e6d82; line-height: 1.5em; + display: inline-block; + margin: 0; } a { @@ -398,11 +400,20 @@ $headerHeight: 64px; } h6 { margin: 0; - margin-bottom: -10px; font-style: italic; } + .changelog-img { + max-width: 300px; + max-height: 500px; + display: block; + } + } + + .help-img { + display: block; } + .tips-block { position: relative; &.with-title { @@ -483,6 +494,12 @@ $headerHeight: 64px; .page-name { font-size: 16px; color: #63656E; + .back { + font-size: 18px; + margin-left: 5px; + cursor: pointer; + color: #3a84ff; + } } } } 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 caa20acc2..c6d2bc491 100644 --- a/paas-ce/lesscode/lib/client/src/views/help/index.vue +++ b/paas-ce/lesscode/lib/client/src/views/help/index.vue @@ -16,7 +16,10 @@
- 可视化布局帮助文档 + 可视化开发帮助文档 +
+
+
@@ -25,22 +28,11 @@
介绍
-
快速上手
+
栅格布局
-
自定义组件
+ +
更新日志
-
@@ -52,8 +44,6 @@ diff --git a/paas-ce/lesscode/lib/server/app.browser.js b/paas-ce/lesscode/lib/server/app.browser.js index 8befde5f2..e235bc566 100644 --- a/paas-ce/lesscode/lib/server/app.browser.js +++ b/paas-ce/lesscode/lib/server/app.browser.js @@ -128,7 +128,11 @@ async function startServer () { app.use(await koaWebpack({ compiler: compiler, hotClient: { - allEntries: true + allEntries: true, + host: { + client: '*', + server: '0.0.0.0' + } }, devMiddleware: { publicPath: webpackDevConf.output.publicPath, diff --git a/paas-ce/lesscode/lib/server/controller/vue-code.js b/paas-ce/lesscode/lib/server/controller/vue-code.js index 9fe16b472..b8988ec13 100644 --- a/paas-ce/lesscode/lib/server/controller/vue-code.js +++ b/paas-ce/lesscode/lib/server/controller/vue-code.js @@ -88,67 +88,6 @@ async function createFile (filePath) { } } -// const formatCode = prettier.format(` -// - -// -// -// `, { -// vueIndentScriptAndStyle: true, -// semi: false, -// parser: 'vue', -// tabWidth: 4, -// // singleQuote: true, -// printWidth: 120, -// endOfLine: 'crlf' -// }) - // async function test () { // await createFile(path.join(__dirname, ESLINT_TMP_FILE_PATH)) // const report = cli.executeOnText(formatCode, ESLINT_TMP_FILE_PATH) @@ -213,7 +152,7 @@ const VueCode = { async formatCode (ctx) { try { const post = ctx.request.body || {} - const formatCode = prettier.format(post.code, { + let formatCode = prettier.format(post.code, { vueIndentScriptAndStyle: true, semi: false, parser: 'vue', @@ -222,9 +161,9 @@ const VueCode = { printWidth: 120, endOfLine: 'crlf' }) - // formatCode = formatCode.replace('data() {\n', 'data () {\n') - // formatCode = formatCode.replace(/\(\) {\n/g, ' () {\n') - // formatCode = formatCode.replace(/\((.*)\) {\n/g, ' ($1) {\n') + // 正则替换两种格式的require为import + formatCode = formatCode.replace(/const (.*) = require\((.*)\)/g, 'import $1 from $2') + formatCode = formatCode.replace(/require\((.*)\)/g, 'import $1') await createFile(path.join(__dirname, ESLINT_TMP_FILE_PATH)) const report = cli.executeOnText(formatCode, ESLINT_TMP_FILE_PATH) diff --git a/paas-ce/lesscode/package.json b/paas-ce/lesscode/package.json index a9dff4796..8c942623a 100644 --- a/paas-ce/lesscode/package.json +++ b/paas-ce/lesscode/package.json @@ -83,8 +83,9 @@ "@babel/preset-env": "~7.6.3", "@babel/register": "~7.6.2", "@babel/runtime": "~7.6.3", - "@icon-cool/bk-icon-vue-drag-vis": "0.0.1", + "@icon-cool/bk-icon-vue-drag-vis": "0.0.5", "@xunlei/vue-context-menu": "~1.0.2", + "acorn": "~7.2.0", "app-root-path": "~3.0.0", "axios": "~0.19.0", "babel-eslint": "~10.0.3", @@ -97,7 +98,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.13", + "bk-magic-vue": "~2.1.18-beta.2", "caniuse-lite": "~1.0.30000974", "chalk": "~2.4.2", "change-case": "~4.1.1", @@ -178,6 +179,8 @@ "transliteration": "~2.1.8", "url-loader": "~2.2.0", "vue": "~2.6.10", + "vue-echarts": "^3.0.9", + "vue-json-viewer": "^2.2.11", "vue-loader": "~15.7.1", "vue-markdown-loader": "~2.4.1", "vue-router": "~3.1.3",