-
-
Notifications
You must be signed in to change notification settings - Fork 213
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
263 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { defineStore } from 'pinia'; | ||
| import { cloneDeep } from 'lodash'; | ||
| import { HJNewSchema } from '@/views/createTemplate/designer/schema/template'; | ||
| import { IHJNewSchema, IModule } from '@/views/createTemplate/types/IHJNewSchema'; | ||
|
|
||
| // 创建在线制作模版store | ||
| export const useCreateTemplateStore = defineStore('createTemplate', () => { | ||
| const resume_json = cloneDeep(HJNewSchema); // 简历数据 | ||
| const HJNewJsonStore = ref<IHJNewSchema>(resume_json); | ||
| function changeResumeJsonData(obj: IHJNewSchema) { | ||
| HJNewJsonStore.value = cloneDeep(obj); | ||
| } | ||
| function pushComponent(data: IModule) { | ||
| HJNewJsonStore.value.componentsTree.push(data); | ||
| } | ||
| function resetResumeJson() { | ||
| HJNewJsonStore.value = cloneDeep(HJNewSchema); | ||
| } | ||
|
|
||
| return { | ||
| HJNewJsonStore, | ||
| changeResumeJsonData, | ||
| pushComponent, | ||
| resetResumeJson | ||
| }; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
97 changes: 97 additions & 0 deletions
97
src/views/createTemplate/designer/components/ModuleSelect.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| <!-- 模块选择 --> | ||
| <template> | ||
| <div class="module-select"> | ||
| <div class="left-title" @click="selectNone"> | ||
| <span>模块</span> | ||
| <span>选择</span> | ||
| </div> | ||
| <c-scrollbar trigger="hover" style="height: calc(100vh - 110px)"> | ||
| <ul> | ||
| <li | ||
| v-for="(val, key, index) in MATERIAL_JSON" | ||
| :key="index" | ||
| :class="[{ active: currentKey === key }]" | ||
| @click="selectModel(val, key as string)" | ||
| > | ||
| <svg-icon :icon-name="modelOfIcon[key]" color="#2cbd99" size="25px"></svg-icon> | ||
| <p>{{ modelOfTitle[key] }}</p> | ||
| </li> | ||
| </ul> | ||
| </c-scrollbar> | ||
| </div> | ||
| </template> | ||
| <script setup lang="ts"> | ||
| import { MATERIAL_JSON } from '@/schema/materialList'; | ||
| import modelOfTitle from '@/dictionary/modelOfTitle'; | ||
| import modelOfIcon from '@/dictionary/modelOfIcon'; | ||
| import modelCategory from '@/dictionary/modelOfTitle'; | ||
|
|
||
| // 点击模块选择 | ||
| const currentKey = ref<string>(''); | ||
| const currentTitle = ref<string>('物料组件'); | ||
| let cptList = ref<Array<any>>([]); | ||
| const selectModel = (val: Array<any>, key: string) => { | ||
| currentTitle.value = modelCategory[key]; | ||
| currentKey.value = key; | ||
| cptList.value = val; | ||
| console.log('cptList', cptList); | ||
| }; | ||
|
|
||
| // 重置模块 | ||
| const selectNone = () => { | ||
| currentKey.value = ''; | ||
| }; | ||
| </script> | ||
| <style lang="scss" scoped> | ||
| .module-select { | ||
| width: 75px; | ||
| border-right: 1px solid #eee; | ||
| .left-title { | ||
| width: 100%; | ||
| height: 60px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-evenly; | ||
| align-items: center; | ||
| border-top: 1px solid #eee; | ||
| border-bottom: 1px solid #eee; | ||
| color: #2cbd99; | ||
| box-sizing: border-box; | ||
| user-select: none; | ||
| cursor: pointer; | ||
| span { | ||
| font-size: 17px; | ||
| font-weight: 600; | ||
| font-family: cursive; | ||
| } | ||
| } | ||
| ul { | ||
| width: 100%; | ||
| height: calc(100vh - 110px); | ||
| li { | ||
| list-style: none; | ||
| width: 100%; | ||
| height: 60px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-evenly; | ||
| align-items: center; | ||
| border-bottom: 1px solid #eee; | ||
| cursor: pointer; | ||
| transition: all 0.3s; | ||
| user-select: none; | ||
| &:hover { | ||
| background-color: rgba(#2cbd99, 0.2); | ||
| } | ||
| p { | ||
| font-size: 12px; | ||
| color: #2cbd99; | ||
| transform: scale(0.9); | ||
| } | ||
| } | ||
| .active { | ||
| background-color: rgba(#2cbd99, 0.2); | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <!-- 创建模版页导航栏 --> | ||
| <template> | ||
| <div class="nav-bar-box"> </div> | ||
| </template> | ||
| <style lang="scss" scoped> | ||
| .nav-bar-box { | ||
| width: 100%; | ||
| height: 50px; | ||
| background-color: #fff; | ||
| box-shadow: 0 5px 21px 0 rgb(78 78 78 / 5%); | ||
| flex-shrink: 0; | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 10; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,76 @@ | ||
| <template> | ||
| <div class="create-template-box"></div> | ||
| <div class="create-template-box"> | ||
| <!-- 导航栏 --> | ||
| <nav-bar></nav-bar> | ||
| <!-- 内容区容器 --> | ||
| <div class="content-wrapper"> | ||
| <!-- 左侧物料区 --> | ||
| <div class="module-left"> | ||
| <!-- 模块选择 --> | ||
| <module-select></module-select> | ||
| </div> | ||
| <!-- 中间设计区 --> | ||
| <div class="design-center"> | ||
| <!-- 页面渲染 --> | ||
| <component :is="pageComponents[pageComponent]" :style="HJNewJsonStore.css"></component> | ||
| </div> | ||
| <!-- 右侧属性面板区 --> | ||
| <div class="prop-right"></div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script lang="ts" setup></script> | ||
| <script lang="ts" setup> | ||
| import NavBar from './components/NavBar.vue'; | ||
| import ModuleSelect from './components/ModuleSelect.vue'; | ||
| import { storeToRefs } from 'pinia'; | ||
| import appStore from '@/store'; | ||
| import pageComponents from './utils/registerPages'; | ||
| // 初始化JSON数据 | ||
| const { HJNewJsonStore } = storeToRefs(appStore.useCreateTemplateStore); | ||
| // 返回page组件 | ||
| const pageComponent = computed(() => { | ||
| if (HJNewJsonStore.value.props.page) { | ||
| return HJNewJsonStore.value.props.page; | ||
| } else { | ||
| return 'CommonPage'; | ||
| } | ||
| }); | ||
| console.log('pageComponents', pageComponents); | ||
| </script> | ||
| <style lang="scss" scoped> | ||
| .create-template-box { | ||
| width: 100%; | ||
| height: 100vh; | ||
| display: flex; | ||
| flex-direction: column; | ||
| position: relative; | ||
| .content-wrapper { | ||
| width: 100%; | ||
| flex: 1; | ||
| display: flex; | ||
| .module-left { | ||
| height: 100%; | ||
| width: 400px; | ||
| background-color: #fff; | ||
| // box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16); | ||
| } | ||
| .design-center { | ||
| height: calc(100vh - 50px); | ||
| flex: 1; | ||
| padding: 20px 0; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| overflow: auto; | ||
| } | ||
| .prop-right { | ||
| height: 100%; | ||
| min-width: 400px; | ||
| background-color: #fff; | ||
| // box-shadow: -1px 0 4px rgba(0, 0, 0, 0.16); | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,25 @@ | ||
| <template> | ||
| <div class="page-box"> </div> | ||
| <div class="page-box" :style="style"> </div> | ||
| </template> | ||
| <script setup lang="ts"> | ||
| const props = defineProps<{ | ||
| style: any; | ||
| }>(); | ||
| const style = computed(() => { | ||
| return { | ||
| width: `${props.style.width}px`, | ||
| minHeight: `${props.style.height}px`, | ||
| background: props.style.background || '#ffffff', | ||
| opacity: props.style.opacity, | ||
| backgroundImage: props.style.backgroundImage || '', | ||
| fontFamily: props.style.fontFamily || '' | ||
| }; | ||
| }); | ||
| </script> | ||
| <style lang="scss" scoped> | ||
| .page-box { | ||
| width: 820px; | ||
| min-height: 1160px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| // 注册页面组件 | ||
|
|
||
| import CommonPage from '../pages/CommonPage.vue'; | ||
|
|
||
| // 定义属性组件列表 | ||
| const pageComponents: any = { | ||
| CommonPage | ||
| }; | ||
| export default pageComponents; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters