{"id":21036549,"url":"https://github.com/ahyiru/scene-design","last_synced_at":"2026-04-27T19:32:45.884Z","repository":{"id":60495563,"uuid":"543513905","full_name":"ahyiru/scene-design","owner":"ahyiru","description":"scene design development platform.","archived":false,"fork":false,"pushed_at":"2023-01-05T07:13:19.000Z","size":4475,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-28T08:18:48.385Z","etag":null,"topics":["dashboard","low-code","nodejs","react18","scene-design","web-design","webgl","webpack5"],"latest_commit_sha":null,"homepage":"http://ihuxy.com:7000/","language":"JavaScript","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/ahyiru.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-09-30T09:00:35.000Z","updated_at":"2023-03-21T18:42:30.000Z","dependencies_parsed_at":"2023-02-03T17:31:27.631Z","dependency_job_id":null,"html_url":"https://github.com/ahyiru/scene-design","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/ahyiru/scene-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahyiru%2Fscene-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahyiru%2Fscene-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahyiru%2Fscene-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahyiru%2Fscene-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahyiru","download_url":"https://codeload.github.com/ahyiru/scene-design/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahyiru%2Fscene-design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32352396,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T17:12:42.749Z","status":"ssl_error","status_checked_at":"2026-04-27T17:12:41.658Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["dashboard","low-code","nodejs","react18","scene-design","web-design","webgl","webpack5"],"created_at":"2024-11-19T13:20:48.663Z","updated_at":"2026-04-27T19:32:45.867Z","avatar_url":"https://github.com/ahyiru.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 场景设计\n\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/ahyiru/ihuxy/blob/develop/LICENSE)\n[![npm version](https://img.shields.io/npm/v/@huxy/router.svg)](https://www.npmjs.com/package/@huxy/router)\n[![](https://img.shields.io/badge/blog-ihuxy-blue.svg)](http://ihuxy.com/)\n\n\n\u003e 有人的地方，就有江湖。\n\n人的需求是永远不满足的，因为总有更好的方法可以去满足得更好。场景与需求相伴相生，需求从来无法脱离于场景存在，而新的需求又会创造出新的场景。当我们在写代码时，其实我们都在写一个故事，而场景就是故事中的每一个片段。\n\n大多数情况下，我们写的代码毫无意义。经过技术更新、需求迭代、人员更替，我们花了太多的时间和精力去做技术实现，然而这些代码随时都会被我们（或其他人）抛弃，然后继续重复着需求开发。需求还是那个需求，实现上却更替了一轮又一轮。有时候当你写出了一段感动到自己的代码时，你应该提醒自己：没人在意你写了啥玩意儿，满足当下需求就行了。\n\n那么，我们怎样才能积累更多的场景素材并提高我们的工作转化率呢？\n\n### 简介\n\n场景就是 **_一个片段_**，描述了谁在什么什么时间什么地点做了什么。\n\n场景可能是一个功能模块、工具、内容展示、信息交互等。一个需求可以有多个展示场景，可以根据喜好、心情、环境等作出不同设计。\n\n场景可能是一个简单的模型，描述了复杂的现象。\n\n低代码、定制化开发这些基础设施与业务驱动的进化，推动了开发效率的提升与自动化流程的规范，大大降低了开发门槛、提高了开发效率。业务降维求发展，思维升维找机会，我们就有更多的精力去思考新的可能，专注于场景设计。从信息积累到信息聚合，设计更多的业务场景，提供各种新的体验。\n\n### 功能\n\n#### 积累\n\n场景设计可以帮我们积累素材，减少重复的、不必要的开发工作。\n\n需求千千万，终究也是昙花一现。我们可以将各种场景需求积累起来，需要的时候选择一种场景实现即可。\n\n#### 共享\n\n场景设计为我们提供更多可能性。我们可以分享和发现一些有意思的想法，共同交流心得、完善需求。\n\n不要妄想有能力一劳永逸地解决问题，但我们可以有更多的选择。\n\n### 实现\n\n基于 [web-design](https://github.com/ahyiru/web-design) 模版开发。\n\n`web-design` 是一个快速设计并开发项目的平台。\n\n- 提供了项目管理、项目接口管理、项目路由管理\n- 提供框架 layout 设计、主题设计、i18n 设计\n- 提供了 low-code 页面开发，通过可视化操作创建界面\n- 提供了业务组件、基础组件、hooks、utils 设计开发思路及模板\n- 提供了工程化模板，如 代码规范、单元测试、版本管理、提交规范等\n- 提供了 node.js 创建服务、连接数据库、文件管理等功能模板\n\n该系统提供了场景（需求）的增删改查功能，提供了场景的展示方式。\n\n![scenes](./doc/scenes.png)\n\n#### 添加场景（需求）\n\n我们可以添加自己的场景或需求，是场景给出展示方式即可，需求的话提供需求描述或描述地址链接。\n\n我们可以查看自己感兴趣的场景或去实现别人提出的需求。\n\n![add-scene](./doc/add-scene.png)\n\n#### 场景展示\n\n提供了四种场景展示方式：\n\n- 链接。提供展示地址链接即可。\n- modules。代码模块，提供完整的功能，配置好路由即可运行。\n- packages。一个完整的项目，包含了构建打包等。\n- static。静态页面。\n\n![dir](./doc/dir.png)\n\n主要讲解一下 `modules` 和 `packages` 。\n\n**_`modules`_**\n\n`modules` 里面包含路由配置及一些通用配置。\n\n`routes.js` ：\n\n```javascript\nconst routes = [\n  {\n    path: '/apis',\n    name: '接口管理',\n    icon: 'ico-flag',\n    children: [\n      {\n        path: '/list',\n        name: '接口列表',\n        component: () =\u003e import('./src'),\n      },\n      {\n        path: '/list/add',\n        name: '添加接口',\n        hideMenu: true,\n        component: () =\u003e import('./src/add'),\n      },\n      {\n        path: '/list/edit/:id',\n        name: '编辑接口',\n        component: () =\u003e import('./src/add'),\n      },\n      {\n        path: '/list/test/:id',\n        name: '接口测试',\n        component: () =\u003e import('./src/test'),\n      },\n    ],\n  },\n];\n\nexport default routes;\n\n```\n\n`configs` 里面提供了一些通用配置：如接口、全局配置、静态资源等。\n\n`configs.js` ：\n\n```javascript\nimport apis from '@app/utils/getApis';\nimport * as configs from '@app/utils/configs';\nimport * as rules from '@app/utils/rules';\n\nexport const apiList = apis;\nexport const formConfigs = configs;\nexport const formRules = rules;\n\n```\n\n`src` 目录里面就是模块的主体，可以是一个组件或一个完整的功能模块。\n\n该模块下可自定义 Layout、theme、i18ns等。\n\n**_`packages`_**\n\n一个完整的项目工程。\n\n本地运行：`npm run start --dirname='scenes/${name}'`\n\n可自行配置运行端口等。\n\n打包：`npm run build --dirname='scenes/${name}'`\n\n该项目打包至主项目打包的根目录下，`/scenes/packages/${name}` ，直接访问该路由即可。\n\n#### 路由配置\n\n```javascript\nimport {browserRouter} from '@app/configs';\nimport lowCodeRoutes from '@scenes/modules/lowCode/routes';\nimport apisRoutes from '@scenes/modules/apis/routes';\nimport userRoutes from '@scenes/modules/user/routes';\nimport configListRoutes from '@scenes/modules/configList/routes';\nimport ConfigLayout from '@scenes/modules/configLayout/src';\nimport CanvasTest from '@scenes/modules/canvas/src';\nimport ChartTest from '@scenes/modules/charts/src';\n\nconst scenesRoutes = [\n  {\n    path: '/scenes',\n    name: '场景展示',\n    denied: browserRouter,\n    children: [\n      {\n        path: '/modules',\n        name: '模块',\n        icon: 'ico-layout',\n        component: props =\u003e {\n          const {hasLayout} = props.current[2] ?? {};\n          return hasLayout ? props.children : \u003cdiv style={{overflow: 'auto', '--screenvh': 'calc(100vh - var(--breadHeight) - 10px)'}}\u003e\n            \u003cdiv className=\"main-top\" style={breadStyle}\u003e\u003cBread {...props} /\u003e\u003c/div\u003e\n            \u003cdiv style={{marginTop: 'calc(var(--breadHeight) + 10px)'}}\u003e{props.children}\u003c/div\u003e\n          \u003c/div\u003e;\n        },\n        children: [\n          ...lowCodeRoutes,\n          ...apisRoutes,\n          ...userRoutes,\n          ...configListRoutes,\n          {\n            path: '/configLayout',\n            name: '框架配置',\n            icon: 'ico-flag',\n            component: props =\u003e \u003cPanel\u003e\n              \u003cspan style={{marginRight: 10}}\u003e{props.name}按钮\u003c/span\u003e\n              \u003cConfigLayout {...props} /\u003e\n            \u003c/Panel\u003e,\n          },\n          {\n            path: '/canvas',\n            name: '画板',\n            icon: 'ico-flag',\n            component: \u003cCanvasTest /\u003e,\n          },\n          {\n            path: '/charts',\n            name: '仪表盘',\n            icon: 'ico-flag',\n            component: \u003cChartTest /\u003e,\n          },\n        ],\n      },\n      {\n        path: '/packages',\n        name: 'packages',\n        icon: 'ico-layout',\n        children: [],\n      },\n      {\n        path: '/statics',\n        name: 'statics',\n        icon: 'ico-layout',\n        children: [],\n      },\n    ],\n  },\n];\n\nexport default scenesRoutes;\n\n```\n\n[项目地址](https://github.com/ahyiru/scene-design).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahyiru%2Fscene-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahyiru%2Fscene-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahyiru%2Fscene-design/lists"}