[{"data":1,"prerenderedAt":395},["ShallowReactive",2],{"docs-doc-\u002Fdocs\u002Fconcepts\u002Fview":3,"docs-live-paths":343},{"id":4,"title":5,"body":6,"description":330,"extension":331,"meta":332,"navigation":338,"path":339,"seo":340,"stem":341,"__hash__":342},"content\u002Fdocs\u002Fconcepts\u002Fview.md","JSON 驱动界面 · 衍景",{"type":7,"value":8,"toc":322},"minimark",[9,16,20,27,30,41,51,54,57,60,222,226,282,285,291,297,300,318],[10,11,12],"blockquote",{},[13,14,15],"p",{},"本文解决什么问题：一个常见的功能需求（加一列、改个搜索、调整表单顺序）往往要「找开发改代码、等排期」。衍景让界面可以用配置描述——改动属于配置级而非代码级。业务使用者与实施方都能更快得到需要的页面。",[17,18,19],"h2",{"id":19},"一句话定义",[13,21,22,26],{},[23,24,25],"strong",{},"衍景（Derive-View）"," 是衍数的界面框架：用一份 JSON 配置描述页面的搜索区、表格列、表单控件与布局，平台据此渲染出完整可用的界面——绝大多数后台页面不需要手写前端代码。",[17,28,29],{"id":29},"它想解决什么问题",[13,31,32,33,36,37,40],{},"传统开发里，「同样的增删改查」要在每个项目里重写一遍界面，工作量大、样式还不一致。衍景把界面的",[23,34,35],{},"结构描述","与",[23,38,39],{},"运行实现","分开：",[42,43,44,48],"ul",{},[45,46,47],"li",{},"只需要描述「这个页面有哪些字段、怎么搜索、列怎么展示」；",[45,49,50],{},"界面的渲染、分页、筛选、权限控制交给通用组件完成。",[13,52,53],{},"结果是一类页面（例如各类业务单据的管理列表）可以用几乎相同的方式快速产出，且视觉统一。",[17,55,56],{"id":56},"一份配置长什么样",[13,58,59],{},"下面是一段示意（实际配置由平台定义模型后自动生成，不必手写）：",[61,62,67],"pre",{"className":63,"code":64,"language":65,"meta":66,"style":66},"language-json shiki shiki-themes github-light github-dark","{\n  \"list\": {\n    \"title\": \"订单列表\",\n    \"search\": [\"order_no\", \"status\"],\n    \"columns\": [\n      { \"field\": \"order_no\", \"label\": \"订单号\", \"width\": 180 },\n      { \"field\": \"status\", \"label\": \"状态\", \"type\": \"dict\" }\n    ]\n  }\n}\n","json","",[68,69,70,79,89,105,126,135,171,204,210,216],"code",{"__ignoreMap":66},[71,72,75],"span",{"class":73,"line":74},"line",1,[71,76,78],{"class":77},"sVt8B","{\n",[71,80,82,86],{"class":73,"line":81},2,[71,83,85],{"class":84},"sj4cs","  \"list\"",[71,87,88],{"class":77},": {\n",[71,90,92,95,98,102],{"class":73,"line":91},3,[71,93,94],{"class":84},"    \"title\"",[71,96,97],{"class":77},": ",[71,99,101],{"class":100},"sZZnC","\"订单列表\"",[71,103,104],{"class":77},",\n",[71,106,108,111,114,117,120,123],{"class":73,"line":107},4,[71,109,110],{"class":84},"    \"search\"",[71,112,113],{"class":77},": [",[71,115,116],{"class":100},"\"order_no\"",[71,118,119],{"class":77},", ",[71,121,122],{"class":100},"\"status\"",[71,124,125],{"class":77},"],\n",[71,127,129,132],{"class":73,"line":128},5,[71,130,131],{"class":84},"    \"columns\"",[71,133,134],{"class":77},": [\n",[71,136,138,141,144,146,148,150,153,155,158,160,163,165,168],{"class":73,"line":137},6,[71,139,140],{"class":77},"      { ",[71,142,143],{"class":84},"\"field\"",[71,145,97],{"class":77},[71,147,116],{"class":100},[71,149,119],{"class":77},[71,151,152],{"class":84},"\"label\"",[71,154,97],{"class":77},[71,156,157],{"class":100},"\"订单号\"",[71,159,119],{"class":77},[71,161,162],{"class":84},"\"width\"",[71,164,97],{"class":77},[71,166,167],{"class":84},"180",[71,169,170],{"class":77}," },\n",[71,172,174,176,178,180,182,184,186,188,191,193,196,198,201],{"class":73,"line":173},7,[71,175,140],{"class":77},[71,177,143],{"class":84},[71,179,97],{"class":77},[71,181,122],{"class":100},[71,183,119],{"class":77},[71,185,152],{"class":84},[71,187,97],{"class":77},[71,189,190],{"class":100},"\"状态\"",[71,192,119],{"class":77},[71,194,195],{"class":84},"\"type\"",[71,197,97],{"class":77},[71,199,200],{"class":100},"\"dict\"",[71,202,203],{"class":77}," }\n",[71,205,207],{"class":73,"line":206},8,[71,208,209],{"class":77},"    ]\n",[71,211,213],{"class":73,"line":212},9,[71,214,215],{"class":77},"  }\n",[71,217,219],{"class":73,"line":218},10,[71,220,221],{"class":77},"}\n",[17,223,225],{"id":224},"传统开发-vs-配置化","传统开发 vs 配置化",[227,228,229,245],"table",{},[230,231,232],"thead",{},[233,234,235,239,242],"tr",{},[236,237,238],"th",{},"维度",[236,240,241],{},"传统前端开发",[236,243,244],{},"衍景配置化",[246,247,248,260,271],"tbody",{},[233,249,250,254,257],{},[251,252,253],"td",{},"新增一个列表页",[251,255,256],{},"写模板、写接口、调样式",[251,258,259],{},"定义模型，页面自动生成",[233,261,262,265,268],{},[251,263,264],{},"多项目复用",[251,266,267],{},"复制代码再改造",[251,269,270],{},"沉淀配置与模板直接复用",[233,272,273,276,279],{},[251,274,275],{},"界面一致性",[251,277,278],{},"依赖个人规范",[251,280,281],{},"框架内置统一风格",[17,283,284],{"id":284},"常见疑问",[13,286,287,290],{},[23,288,289],{},"是不是完全不能写自定义代码？","\n需要个性化交互时，可以在通用组件上做扩展——平台允许在保持配置主路径的同时接入自定义实现。大多数日常管理功能用配置就足够。",[13,292,293,296],{},[23,294,295],{},"页面配置存在哪？","\n配置与数据模型一起作为平台资产管理，可以随项目一起迁移与复用。",[17,298,299],{"id":299},"相关阅读",[42,301,302,311],{},[45,303,304,305,310],{},"想上手搭建 → 「",[306,307,309],"a",{"href":308},"\u002Fdocs\u002Fquickstart\u002Ffive-minutes","五分钟快速上手","」",[45,312,313,314,310],{},"想了解数据模型如何驱动这些界面 → 「",[306,315,317],{"href":316},"\u002Fdocs\u002Fconcepts\u002Fcore","动态数据模型 · 衍枢",[319,320,321],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":66,"searchDepth":81,"depth":81,"links":323},[324,325,326,327,328,329],{"id":19,"depth":81,"text":19},{"id":29,"depth":81,"text":29},{"id":56,"depth":81,"text":56},{"id":224,"depth":81,"text":225},{"id":284,"depth":81,"text":284},{"id":299,"depth":81,"text":299},"为什么一套界面可以用一份 JSON 描述出来——衍景的运作方式与它解决的问题。","md",{"audience":333,"type":334,"section":335,"pr_order":74,"role":336,"duration":337},"public","concept","核心概念","实施搭建者","约 3 分钟",true,"\u002Fdocs\u002Fconcepts\u002Fview",{"title":5,"description":330},"docs\u002Fconcepts\u002Fview","1bQSFFjJrsHqli3qLF5BEFtKJ5suE9ulesC68ItN-hs",[344,346,348,349,351,353,354,356,358,360,362,364,366,368,370,372,374,376,378,380,382,384,386,388,390,392,393],{"path":345},"\u002Fdocs\u002Fconcepts\u002Fai",{"path":347},"\u002Fdocs\u002Fconcepts\u002Fai-team",{"path":316},{"path":350},"\u002Fdocs\u002Fconcepts\u002Fflux",{"path":352},"\u002Fdocs\u002Fconcepts\u002Fmetrics",{"path":339},{"path":355},"\u002Fdocs\u002Fdemo-center",{"path":357},"\u002Fdocs\u002Fdeploy\u002Foverview",{"path":359},"\u002Fdocs\u002Ffaq",{"path":361},"\u002Fdocs\u002Fglossary",{"path":363},"\u002Fdocs\u002Fguide\u002Fai-kb",{"path":365},"\u002Fdocs\u002Fguide\u002Fcrud",{"path":367},"\u002Fdocs\u002Fguide\u002Fdb-connect",{"path":369},"\u002Fdocs\u002Fguide\u002Fmodel-gen",{"path":371},"\u002Fdocs\u002Fintro\u002Fframeworks",{"path":373},"\u002Fdocs\u002Fintro\u002Foverview",{"path":375},"\u002Fdocs\u002Fintro\u002Fvalue",{"path":377},"\u002Fdocs\u002Fintro\u002Fwhy",{"path":379},"\u002Fdocs\u002Fmechanism\u002Fai-employee-task",{"path":381},"\u002Fdocs\u002Fmechanism\u002Fdata-flux",{"path":383},"\u002Fdocs\u002Fmechanism\u002Fmetrics-contract",{"path":385},"\u002Fdocs\u002Fmechanism\u002Fpermission",{"path":387},"\u002Fdocs\u002Fmechanism\u002Fpublish",{"path":389},"\u002Fdocs\u002Fquickstart\u002Fclone-template",{"path":391},"\u002Fdocs\u002Fquickstart\u002Fdemo-30s",{"path":308},{"path":394},"\u002Fdocs\u002Fsystem\u002Foverview",1788586879698]