"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6734],{876:(e,t,n)=>{n.d(t,{Zo:()=>l,kt:()=>f});var o=n(2784);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t){if(null==e)return{};var n,o,r=function(e,t){if(null==e)return{};var n,o,r={},a=Object.keys(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)n=a[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=o.createContext({}),s=function(e){var t=o.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},l=function(e){var t=s(e.components);return o.createElement(p.Provider,{value:t},e.children)},u="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},d=o.forwardRef((function(e,t){var n=e.components,r=e.mdxType,a=e.originalType,p=e.parentName,l=i(e,["components","mdxType","originalType","parentName"]),u=s(n),d=r,f=u["".concat(p,".").concat(d)]||u[d]||m[d]||a;return n?o.createElement(f,c(c({ref:t},l),{},{components:n})):o.createElement(f,c({ref:t},l))}));function f(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=n.length,c=new Array(a);c[0]=d;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i[u]="string"==typeof e?e:r,c[1]=i;for(var s=2;s<a;s++)c[s]=n[s];return o.createElement.apply(null,c)}return o.createElement.apply(null,n)}d.displayName="MDXCreateElement"},8476:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>p,contentTitle:()=>c,default:()=>m,frontMatter:()=>a,metadata:()=>i,toc:()=>s});var o=n(7896),r=(n(2784),n(876));const a={},c="Directory Structure",i={unversionedId:"boot/app-spec",id:"boot/app-spec",title:"Directory Structure",description:"Specification",source:"@site/i18n/en/docusaurus-plugin-content-docs/current/boot/app-spec.mdx",sourceDirName:"boot",slug:"/boot/app-spec",permalink:"/tango/en/docs/boot/app-spec",draft:!1,editUrl:"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/boot/app-spec.mdx",tags:[],version:"current",frontMatter:{},sidebar:"boot",previous:{title:"TangoBoot",permalink:"/tango/en/docs/boot/intro"},next:{title:"tango.config.json",permalink:"/tango/en/docs/boot/tango-config"}},p={},s=[{value:"Specification",id:"specification",level:2},{value:"Custom Components",id:"custom-components",level:2}],l={toc:s},u="wrapper";function m(e){let{components:t,...n}=e;return(0,r.kt)(u,(0,o.Z)({},l,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"directory-structure"},"Directory Structure"),(0,r.kt)("h2",{id:"specification"},"Specification"),(0,r.kt)("p",null,"\u5728\u76ee\u5f55\u7ed3\u6784\u4e0a\uff0c\u6211\u4eec\u7ea6\u5b9a\u4e86\u4e00\u5957\u901a\u7528\u7684\u76ee\u5f55\u7ed3\u6784"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-md"},"\u2500\u2500 src\n\u2502 +\u2500\u2500 assets\n\u2502 +\u2500\u2500 pages\n\u2502 +\u2500\u2500 components\n\u2502 +\u2500\u2500 services/index.js\n\u2502 +\u2500\u2500 stores\n\u2502 \u251c\u2500\u2500 routes.js // route config\n\u2502 \u251c\u2500\u2500 global.less // global styles\n| |-- index.js // app entry\n\u2514\u2500\u2500 package.json\n|---tango.config.json // config for low-code engine\n")),(0,r.kt)("h2",{id:"custom-components"},"Custom Components"),(0,r.kt)("p",null,"This directory is used to store locally developed components, such as:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-jsx"},"// src/components/sample.jsx\nimport React from 'react';\nimport { Box } from '@music163/antd';\n\nexport function Sample(props) {\n  return <Box {...props}>sample component</Box>;\n}\n")),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},"Note that if you want the Sample component to be parsed and built by the designer, you must use MusicOne's ",(0,r.kt)("inlineCode",{parentName:"p"},"Box")," component instead of the common ",(0,r.kt)("inlineCode",{parentName:"p"},"div")," element. You can also use ",(0,r.kt)("inlineCode",{parentName:"p"},'<Box as="span" />')," to change the rendered HTML element.")))}m.isMDXComponent=!0}}]);