Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(plugins): 功能优化与问题修复 #833

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/controller/src/usePage.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,9 @@ const pageSettingState = reactive({
isNew: false,
ROOT_ID: '0', // 根节点ID
updateTreeData: null,
treeDataMapping: {}
treeDataMapping: {},
template_content: null,
templates: []
})

const isTemporaryPage = reactive({
Expand Down
35 changes: 34 additions & 1 deletion packages/controller/src/useTemplate.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@

import { reactive } from 'vue'
import { extend, isEqual } from '@opentiny/vue-renderless/common/object'
import { useHttp } from '@opentiny/tiny-engine-http'

const DEFAULT_TEMPLATE = {
app: '',
Expand Down Expand Up @@ -128,6 +129,37 @@ const resetTemplateData = () => {
const isChangeTemplateData = () =>
!isEqual(templateSettingState.currentTemplateData, templateSettingState.currentTemplateDataCopy)

const http = useHttp()

spongebody marked this conversation as resolved.
Show resolved Hide resolved
const formatTreeData = (data) => {
const map = {}
const tree = []

data.forEach((item) => {
map[item.id] = { ...item, children: [] }
})

data.forEach((item) => {
if (item.parentId) {
const parent = map[item.parentId]
if (parent) {
parent.children.push(map[item.id])
}
} else {
tree.push(map[item.id])
}
})
templateSettingState.treeDataMapping = map

return tree
}
spongebody marked this conversation as resolved.
Show resolved Hide resolved

const refreshTemplateList = async (appId, data) => {
const templateData = data ? data : await http.get(`/app-center/api/templates/list/${appId}`)
templateSettingState.templates = formatTreeData(templateData)
return templateSettingState.templates
}
spongebody marked this conversation as resolved.
Show resolved Hide resolved

export default () => {
return {
DEFAULT_TEMPLATE,
Expand All @@ -138,6 +170,7 @@ export default () => {
getTemplateContent,
resetTemplateData,
initCurrentTemplateData,
isChangeTemplateData
isChangeTemplateData,
refreshTemplateList
}
}
7 changes: 5 additions & 2 deletions packages/plugins/page/src/Main.vue
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@

<script lang="jsx">
import { reactive, ref, watchEffect, provide } from 'vue'
import { useCanvas, useApp, useResource, usePage, useHelp } from '@opentiny/tiny-engine-controller'
import { useCanvas, useApp, useResource, usePage, useHelp, useTemplate } from '@opentiny/tiny-engine-controller'
import { PluginPanel, SvgButton, LinkButton } from '@opentiny/tiny-engine-common'
import { extend } from '@opentiny/vue-renderless/common/object'
import PageSetting, { openPageSettingPanel, closePageSettingPanel } from './PageSetting.vue'
Expand Down Expand Up @@ -77,12 +77,13 @@ export default {
const pageTreeRef = ref(null)
const ROOT_ID = pageSettingState.ROOT_ID
const docsUrl = useHelp().getDocsUrl('page')
const { refreshTemplateList } = useTemplate()

spongebody marked this conversation as resolved.
Show resolved Hide resolved
const state = reactive({
isFolder: false
})

const createNewPage = (group) => {
const createNewPage = async (group) => {
closeFolderSettingPanel()
pageSettingState.isNew = true
pageSettingState.currentPageData = {
Expand All @@ -97,6 +98,8 @@ export default {
}
pageSettingState.currentPageDataCopy = extend(true, {}, pageSettingState.currentPageData)
state.isFolder = false
pageSettingState.templates = await refreshTemplateList(appInfoState.selectedId)
pageSettingState.template_content = null
openPageSettingPanel()
}

Expand Down
43 changes: 42 additions & 1 deletion packages/plugins/page/src/PageGeneral.vue
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,20 @@
</span>
</div>
</tiny-form-item>

<tiny-form-item v-if="!isFolder && pageSettingState.isNew" label="选择模板" prop="template">
<tiny-select
v-model="pageSettingState.template_content"
filterable
:filter-method="filterTemplate"
clearable
value-field="template_content"
text-field="name"
render-type="tree"
popper-class="parent-fold-select-dropdown"
:tree-op="treeTemplateOp"
></tiny-select>
</tiny-form-item>
</tiny-form>
<page-home
v-if="!isFolder && !pageSettingState.isNew && pageSettingState.currentPageData.group !== 'public'"
Expand Down Expand Up @@ -222,6 +236,31 @@ export default {
oldParentId.value = value.id
}

const treeTemplateOp = computed(() => {
const processTemplates = (templates) => {
return templates.map((template) => {
const processedTemplate = { ...template }
if (!template.isTemplate) {
processedTemplate.disabled = true
}
if (template.children && template.children.length > 0) {
processedTemplate.children = processTemplates(template.children)
}
return processedTemplate
})
}

return {
data: processTemplates(pageSettingState.templates)
}
})
spongebody marked this conversation as resolved.
Show resolved Hide resolved

const filterTemplate = (value, data) => {
if (!value) return true

return data.name?.toLowerCase().indexOf(value?.toLowerCase()) !== -1
}
spongebody marked this conversation as resolved.
Show resolved Hide resolved

return {
pageRules,
folderRules,
Expand All @@ -230,7 +269,9 @@ export default {
validGeneralForm,
treeFolderOp,
currentRoute,
changeParentForderId
changeParentForderId,
filterTemplate,
treeTemplateOp
}
}
}
Expand Down
9 changes: 9 additions & 0 deletions packages/plugins/page/src/PageSetting.vue
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,16 @@ export default {

const createPage = () => {
const { page_content, ...other } = DEFAULT_PAGE

if (pageSettingState.template_content) {
pageSettingState.currentPageData.page_content = {
...pageSettingState.template_content,
componentName: page_content.componentName,
lifeCycles: pageSettingState.currentPageData.page_content?.lifeCycles || {}
}
}
spongebody marked this conversation as resolved.
Show resolved Hide resolved
const { page_content: page_content_state, ...pageSettingStateOther } = pageSettingState.currentPageData

const createParams = {
...other,
...pageSettingStateOther,
Expand Down
28 changes: 3 additions & 25 deletions packages/plugins/template/readme.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,3 @@
## UI思路

1. 修改顶部新增页面的UI,一个入口
- 修改标题
- 修改内容

2. 修改内容区域(树结构区域)
- 去掉两个顶层类别
- 每一项hover时右侧出现操作图标
1. 为模板类别时
- 新增(设置页提供单选框选择)
- 类别
- 模板
- 编辑
- 删除
- 生成页面
- 提供有复选框的tree结构
2. 为模板实例时
- 编辑
- 删除
- 生成页面


## mockserver 思路
- 参考页面管理的接口,让gpt实现
## TODO
- 优化
- 完善文档
75 changes: 34 additions & 41 deletions packages/plugins/template/src/TemplateTree.vue
Original file line number Diff line number Diff line change
@@ -1,14 +1,28 @@
<template>
<div class="app-manage-search">
<tiny-search v-model="state.templateSearchValue" clearable placeholder="搜索模板"
@update:modelValue="searchTemplateData"></tiny-search>
<tiny-search
v-model="state.templateSearchValue"
clearable
placeholder="搜索模板"
@update:modelValue="searchTemplateData"
></tiny-search>
</div>

<div class="tree-container app-manage-tree">
<tiny-tree ref="templateTreeRefs" :data="templateSettingState.templates" node-key="id" highlight-current
current-node-key="1-1" :props="{ children: 'children', label: 'name' }"
:filter-node-method="filterTemplateTreeData" :expand-on-click-node="false" :shrink-icon="shrinkIcon"
:expand-icon="expandIcon" @current-change="handleCurrentChange" default-expand-all>
<tiny-tree
ref="templateTreeRefs"
:data="templateSettingState.templates"
node-key="id"
highlight-current
current-node-key="1-1"
:props="{ children: 'children', label: 'name' }"
:filter-node-method="filterTemplateTreeData"
:expand-on-click-node="false"
:shrink-icon="shrinkIcon"
:expand-icon="expandIcon"
@current-change="handleCurrentChange"
default-expand-all
>
<template #operation="{ node }">
<div style="width: 80px; text-align: right" @click.stop>
<tiny-dropdown size="mini" trigger="click" :show-icon="false" :visible-arrow="true">
Expand Down Expand Up @@ -43,7 +57,16 @@ import {
DropdownItem as TinyDropdownItem
} from '@opentiny/vue'
import { IconFolderOpened, IconFolderClosed } from '@opentiny/vue-icon'
import { useCanvas, useApp, useModal, useTemplate, useBreadcrumb, useLayout, useNotify, usePage } from '@opentiny/tiny-engine-controller'
import {
useCanvas,
useApp,
useModal,
useTemplate,
useBreadcrumb,
useLayout,
useNotify,
usePage
} from '@opentiny/tiny-engine-controller'
import { getCanvasStatus } from '@opentiny/tiny-engine-controller/js/canvas'
import { constants } from '@opentiny/tiny-engine-utils'
import { closeTemplateSettingPanel } from './TemplateSetting.vue'
Expand All @@ -68,8 +91,8 @@ export default {
const { appInfoState } = useApp()
const { confirm } = useModal()
const { initData, templateState, isBlock, isTemplateSaved, isSaved, setSaved } = useCanvas()
const { templateSettingState, isCurrentDataSame, changeTreeData } = useTemplate()
const { fetchTemplateList, fetchTemplateDetail } = http
const { templateSettingState, isCurrentDataSame, changeTreeData, refreshTemplateList } = useTemplate()
const { fetchTemplateDetail } = http
spongebody marked this conversation as resolved.
Show resolved Hide resolved
const { setBreadcrumbTemplate } = useBreadcrumb()
const templateTreeRefs = ref([])
const { resetPageData, DEFAULT_PAGE, STATIC_PAGE_GROUP_ID, pageSettingState } = usePage()
Expand All @@ -79,39 +102,10 @@ export default {
currentNodeData: {}
})

const formatTreeData = (data) => {
const map = {}
const tree = []

data.forEach((item) => {
map[item.id] = { ...item, children: [] }
})

data.forEach((item) => {
if (item.parentId) {
const parent = map[item.parentId]
if (parent) {
parent.children.push(map[item.id])
}
} else {
tree.push(map[item.id])
}
})
templateSettingState.treeDataMapping = map

return tree
}

const searchTemplateData = (value) => {
templateTreeRefs.value.filter(value)
}

const refreshTemplateList = async (appId, data) => {
const templateData = data ? data : await fetchTemplateList(appId)
templateSettingState.templates = formatTreeData(templateData)
return templateSettingState.templates
}

templateSettingState.updateTreeData = async () => {
const templateList = await refreshTemplateList(appInfoState.selectedId)
return templateList
Expand Down Expand Up @@ -204,7 +198,7 @@ export default {
if (isSaved() && isTemplateSaved() && isCurrentDataSame()) {
switchTemplate(data)
} else {
const text = isBlock() ? '区块' : (!isSaved() ? '页面' : '模板')
const text = isBlock() ? '区块' : !isSaved() ? '页面' : '模板'

confirm({
title: '提示',
Expand Down Expand Up @@ -372,7 +366,6 @@ export default {
position: relative;
top: -2px;
left: -8px;

}
}

Expand Down Expand Up @@ -443,4 +436,4 @@ export default {
}
}
}
</style>
</style>