{"id":13533032,"url":"https://github.com/eamesh/free-core","last_synced_at":"2025-04-01T21:31:41.002Z","repository":{"id":41431851,"uuid":"476381968","full_name":"eamesh/free-core","owner":"eamesh","description":"一种跨端微页面diy实现方案","archived":false,"fork":false,"pushed_at":"2022-04-23T13:26:18.000Z","size":412,"stargazers_count":290,"open_issues_count":0,"forks_count":18,"subscribers_count":7,"default_branch":"dev","last_synced_at":"2024-04-26T15:22:40.388Z","etag":null,"topics":["component-library","diy","naiveui","vue","vue3","vue3-components"],"latest_commit_sha":null,"homepage":"https://nutui.emesh.cloud","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eamesh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-31T16:08:51.000Z","updated_at":"2024-01-24T11:19:17.000Z","dependencies_parsed_at":"2022-08-19T13:41:07.030Z","dependency_job_id":null,"html_url":"https://github.com/eamesh/free-core","commit_stats":null,"previous_names":["eamesh/free"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eamesh%2Ffree-core","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eamesh%2Ffree-core/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eamesh%2Ffree-core/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eamesh%2Ffree-core/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eamesh","download_url":"https://codeload.github.com/eamesh/free-core/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246713198,"owners_count":20821855,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","diy","naiveui","vue","vue3","vue3-components"],"created_at":"2024-08-01T07:01:15.964Z","updated_at":"2025-04-01T21:31:40.398Z","avatar_url":"https://github.com/eamesh.png","language":"TypeScript","funding_links":[],"categories":["List"],"sub_categories":["Other Projects Using NaiveUI"],"readme":"### 微页面跨端编辑\n\n前端布局仿有赞微页面  \n页面布局使用[naive-ui](https://github.com/TuSimple/naive-ui)  \n主要功能: 核心和业务分离，根据核心api开发widget 挂载到核心直接diy    \n核心功能完成，抽空完成Widget开发，适配跨端微页面及小程序  \n\n## Installation\n\n```\npnpm add -D free-core naive-ui\n```\n\u003cfont size=\"2\" color=\"red\"\u003e注意：1.1.0-dev以下版本不可用\u003c/font\u003e\n\n## Preview\n\n基础功能预览[Preview](https://free.emesh.cloud)  \n基于[free-core](https://github.com/eamesh/free-core)的[Nutui](https://github.com/jdf2e/nutui)微页面编辑[Preview](https://nutui.emesh.cloud)  \n基于[free-core](https://github.com/eamesh/free-core)的跨端微页面Taro小程序实现[free-taro](https://github.com/eamesh/emesh-taro)\n\n## Example\n\n\u003e 示例代码[Example](https://github.com/eamesh/free/blob/dev/example/App.vue)  \n\u003e 功能性Widget事例代码\n- [标题文本](https://github.com/eamesh/free/blob/dev/src/title-text/index.ts)\n- [图文导航](https://github.com/eamesh/free-nutui/blob/dev/src/components/image-nav/index.ts)\n\n### Widget挂载到Core\n\n```\nimport { Free, FreeLayout, FreeTitleTextWidget, FreeWhiteHeightWidget, FreePageWidget, FreeFooterWidget, FreeHeaderWidget, FreeWidgetsManageWidget } from 'free-core'\n\n// Page header\nFree.header = FreeHeaderWidget;\n\n// Page footer\nFree.footer = FreeFooterWidget;\n\n// 右侧功能列表\nFree.widgets = [\n  // 功能性组件\n  FreeTitleTextWidget,\n  FreeWhiteHeightWidget\n];\n\n// 右上固定位widget\n// free-header/free-footer 会直接挂载到右上固定位\nFree.core = [\n  FreePageWidget,\n  FreeWidgetsManageWidget\n];\n\n// asideGroup 右侧组件列表分组结构\nimport { AsideGroup } from 'free-core/lib/types/core/src/interface'\nconst asides: AsideGroup[] = [\n  {\n    title: '基础组件',\n    key: 'base',\n    children: [\n      FreeTitleTextWidget,\n      FreeWhiteHeightWidget\n    ]\n  },\n  {\n    title: '营销组件',\n    key: 'func',\n    children: [\n      TitleText,\n      WhiteHeight\n    ]\n  }\n];\n\n\nconst freeLayoutRef = ref();\n\n// 获取Page数据\n// freeLayoutRef.value.getPageData();\nfunction handleGetPageData () {\n  console.info('%c=====\u003e getPageData:', 'color: #43bb88;font-size: 12px;font-weight: bold;text-decoration: underline;', freeLayoutRef.value.getPageData());\n  const datas = freeLayoutRef.value.getPageData() as any;\n  const page = datas.page.map((item: any) =\u003e {\n    return {\n      key: item.widgetKey,\n      data: item.model\n    };\n  });\n  const pageData: any = {\n    page\n  };\n  Object.values(datas.core).forEach((item: any) =\u003e {\n    pageData[item.widgetKey] = item.model || {};\n  });\n\n  console.log(JSON.stringify(pageData));\n}\n\n// 设置Page数据\nfunction handleSetDefaultPageData () {\n  const data: PageDataSchemas = {\n    page: [\n      {\n        id: 1,\n        ...NutuiSearchWidget,\n        data: {}\n      },\n      {\n        id: 2,\n        ...NutuiNavigationWidget,\n        data: {}\n      },\n      {\n        id: 3,\n        ...NutuiNoticeBarhWidget,\n        data: {}\n      },\n      {\n        id: 8,\n        ...FreeWhiteHeightWidget,\n        data: {\n          type: 'empty',\n          empty: {\n            height: 8\n          },\n          line: {\n            style: 'solid',\n            padding: '0',\n            color: '#e5e5e5'\n          }\n        }\n      },\n      ...\n    ],\n    core: [\n      {\n        ...FreePageWidget,\n        data: {\n          title: '默认页面',\n          description: '',\n          backgroundColor: '#f7f8fa'\n        }\n      }\n    ]\n  };\n\n  console.log(freeLayoutRef.value);\n  freeLayoutRef.value.setPageData(data);\n}\n// 布局\n\u003cFreeLayout asideGroup ref=\"freeLayoutRef\" /\u003e\n```\n\n\u003e 有空补文档\n\n## Documentation\n\nWidget类型\n- Widget(功能组件)\n- CoreWidget(系统组件)\n- FixedWidget(固定位组件)\n\n\u003e 一个完整的Widget功能组件包含\n```\n{\n  thumb: string;\n  name: string;\n  key: string;\n  component: WidgetNode;\n  params?: Object; // 参数\n  data?: T; // 页面数据\n  \n}\n```\n\n\u003e CoreWidget、FixedWidget功能组件包含\n```\n{\n  name: string;\n  key: string;\n  component: WidgetNode;\n  icon: VNode;\n  show: true; // 是否显示固定位\n  render: boolean; // Page是否渲染组件\n  params?: Object; // 参数\n  data?: T; // 页面数据\n}\n```\n\n### Core Layout\n\n\u003e 核心暴露接口\n```\nexport interface FreeLayoutInjection {\n  asideDragStartRef: Ref\u003cboolean\u003e;\n  asideWidgetsRef: Ref\u003cWidget[] | AsideGroup[]\u003e; // 右侧挂载菜单\n  pageWidgetsRef: Ref\u003cPageWidget[]\u003e; // Page渲染的组件树\n  currentPageIdRef: Ref\u003cnumber | undefined\u003e; // Page当前焦点Widget id\n  widgetsRefs: Ref\u003cWidgetRefs\u003e; // Page 缓存的widget句柄\n  asideGroupRef: Ref\u003cboolean\u003e; // 右侧菜单是否分组\n\n  headerWidgetRef: Ref\u003cCoreWidget\u003e;\n  footerWidgetRef: Ref\u003cCoreWidget\u003e;\n  coreWidgetsRef: Ref\u003cCoreWidget[]\u003e;\n\n  renderAction: Ref\u003cWidgetNode\u003e; // 当前渲染的右侧Action运行时\n  currentFixedWidgetKey: Ref\u003cstring | undefined\u003e; // 固定位当前焦点key\n  fixedWidgetKeyDomRef: Ref\u003cany\u003e; // 固定位渲染的Widget 句柄集合\n\n  pageStyleRef: Ref\u003cCSSProperties\u003e; // Page 外层样式句柄\n  fixedCoreWidgetsCompute: ComputedRef\u003cCoreWidget\u003cany\u003e[]\u003e; // 当前fixedWidget显示的渲染树\n}\n```\n\u003e hooks相关暴露功能阅读hooks文件夹代码,有时间补相关文档\n\n## Feature\n\n- [x] 主业务逻辑\n- [x] Widgets树挂载、功能挂件、核心挂件\n- [x] Widget 模板、Action分离\n- [x] 核心组件、右侧固定组件\n- [ ] 其它功能组件\n- [ ] 适配taro nutui [free-nutui](https://github.com/eamesh/free-nutui)\n\n## Widget Feature\n\n- [x] 标题文本\n- [x] 辅助空白\n- [ ] 电梯导航\n- [ ] 图片广告\n- [ ] 图文导航\n- [ ] 搜索\n- [ ] 公告\n- [ ] 视频\n\n## License\n\nFree is licensed under the [MIT license](https://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feamesh%2Ffree-core","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feamesh%2Ffree-core","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feamesh%2Ffree-core/lists"}