@yorha2b-lab/autodev 4.1.1 → 5.0.0

package/.github/scripts/analyze/bot_detect.py

@@ -4,7 +4,7 @@ import matplotlib.pyplot as plt
 
 
 def plot_bot_composition():
-    print("🤖 Pod 042: 正在绘制‘肉机成分分析图’...")
+    print('🤖 Pod 042: 正在绘制‘肉机成分分析图’...')
     df_c = pd.read_csv('ghrs-data/clones_ledger.csv')
     df_v = pd.read_csv('ghrs-data/views_ledger.csv')
     df = pd.merge(df_c, df_v, on='date', how='inner')
@@ -25,19 +25,19 @@ def plot_bot_composition():
 
     wedges, texts, autotexts = ax.pie(data, labels=labels, autopct='%1.1f%%',
                                       startangle=90, colors=colors, pctdistance=0.85,
-                                      explode=(0.05, 0), textprops={'color': "w"})
+                                      explode=(0.05, 0), textprops={'color': 'w'})
 
     # 画个中间的黑洞，变成甜甜圈
     centre_circle = plt.Circle((0, 0), 0.70, fc='#0d1117')
     fig.gca().add_artist(centre_circle)
 
-    ax.set_title("Operational Composition: Meat vs Machine",
+    ax.set_title('Operational Composition: Meat vs Machine',
                  color='#33cc33', fontsize=14)
     plt.tight_layout()
     os.makedirs('plots', exist_ok=True)
     plt.savefig('plots/bot_composition.png', dpi=100)
-    print("✅ 甜甜圈图封存成功。")
+    print('✅ 甜甜圈图封存成功。')
 
 
-if __name__ == "__main__":
+if __name__ == '__main__':
     plot_bot_composition()

package/.github/scripts/analyze/cluster.py

@@ -4,7 +4,7 @@ import matplotlib.pyplot as plt
 
 
 def plot_commander_profiles():
-    print("🤖 Pod 042: 正在绘制‘指挥官军衔分布图’...")
+    print('🤖 Pod 042: 正在绘制‘指挥官军衔分布图’...')
     df_c = pd.read_csv('ghrs-data/clones_ledger.csv')
     df_c['intensity'] = df_c['clones'] / df_c['uniques'].replace(0, 1)
 
@@ -27,14 +27,14 @@ def plot_commander_profiles():
     ax = sns.barplot(x=rank_counts.index,
                      y=rank_counts.values, palette='viridis')
 
-    plt.title("Commander Hierarchy Distribution", color='#0066ff', fontsize=14)
-    plt.ylabel("Node Count", color='#888')
+    plt.title('Commander Hierarchy Distribution', color='#0066ff', fontsize=14)
+    plt.ylabel('Node Count', color='#888')
     plt.grid(axis='y', color='#333', linestyle='--', alpha=0.5)
 
     plt.tight_layout()
     plt.savefig('plots/commander_profiles.png', dpi=100)
-    print("✅ 军衔分布图封存成功。")
+    print('✅ 军衔分布图封存成功。')
 
 
-if __name__ == "__main__":
+if __name__ == '__main__':
     plot_commander_profiles()

package/.github/scripts/collect/traffic.py

@@ -7,7 +7,7 @@ REPO = os.getenv('REPO')
 TOKEN = os.getenv('STATS_TOKEN')
 HEADERS = {'Authorization': f'token {TOKEN}',
            'Accept': 'application/vnd.github.v3+json'}
-API_BASE = f"https://api.github.com/repos/{REPO}"
+API_BASE = f'https://api.github.com/repos/{REPO}'
 
 
 def fetch_api(url, fallback):
@@ -36,14 +36,14 @@ def merge_ledger(data, ledger_path, col_name):
         ledger_path, index=False)
 
 
-if __name__ == "__main__":
-    print("🤖 Pod 042: Executing Data Mining Protocol...")
+if __name__ == '__main__':
+    print('🤖 Pod 042: Executing Data Mining Protocol...')
 
     # 抓取原始数据
-    clones = fetch_api(f"{API_BASE}/traffic/clones", {"clones": []})
-    views = fetch_api(f"{API_BASE}/traffic/views", {"views": []})
-    repo_info = fetch_api(API_BASE, {"stargazers_count": 0, "forks_count": 0})
-    referrers = fetch_api(f"{API_BASE}/traffic/popular/referrers", [])
+    clones = fetch_api(f'{API_BASE}/traffic/clones', {'clones': []})
+    views = fetch_api(f'{API_BASE}/traffic/views', {'views': []})
+    repo_info = fetch_api(API_BASE, {'stargazers_count': 0, 'forks_count': 0})
+    referrers = fetch_api(f'{API_BASE}/traffic/popular/referrers', [])
 
     # 物理焊接账本
     merge_ledger(clones['clones'], 'ghrs-data/clones_ledger.csv', 'clones')
@@ -57,10 +57,10 @@ if __name__ == "__main__":
     c_df = pd.read_csv('ghrs-data/clones_ledger.csv')
     total_clones = int(c_df['clones'].sum())
     stats = {
-        "total_clones": total_clones,
-        "stars": repo_info['stargazers_count'],
-        "forks": repo_info['forks_count']
+        'total_clones': total_clones,
+        'stars': repo_info['stargazers_count'],
+        'forks': repo_info['forks_count']
     }
     with open('bunker-stats.json', 'w') as f:
         json.dump(stats, f)
-    print(f"✅ Ledger synced. Total Clones: {total_clones}")
+    print(f'✅ Ledger synced. Total Clones: {total_clones}')

package/.github/scripts/deploy/publish.py

@@ -10,14 +10,14 @@ def assemble_readme():
     with open('raw_referrers.json', 'r') as f:
         referrers = json.load(f)
 
-    ref_table = "| Referrer | Views | Uniques |\n| :--- | :--- | :--- |\n"
+    ref_table = '| Referrer | Views | Uniques |\n| :--- | :--- | :--- |\n'
     if referrers:
         for r in referrers:
-            ref_table += f"| {r['referrer']} | {r['count']} | {r['uniques']} |\n"
+            ref_table += f'| {r["referrer"]} | {r["count"]} | {r["uniques"]} |\n'
     else:
-        ref_table += "| No Signal | - | - |\n"
+        ref_table += '| No Signal | - | - |\n'
 
-    report = f"""# 🛰️ 地堡终极运行报告 (Sovereign Dashboard v8.5)
+    report = f'''# 🛰️ 地堡终极运行报告 (Sovereign Dashboard v8.5)
 ## 📊 核心战力指标
 - **累计物理克隆**: `{stats['total_clones']}` 次
 - **社群声望**: ⭐ `{stats['stars']}` / 🍴 `{stats['forks']}`
@@ -41,7 +41,7 @@ def assemble_readme():
 {ref_table}
 
 > 📡 物理封存点: {datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')} CST | Glory to Mankind.
-"""
+'''
     with open('README.md', 'w') as f:
         f.write(report)
 
@@ -51,20 +51,20 @@ def git_push():
         stats = json.load(f)
     # 执行物理封存 Git 指令
     try:
-        subprocess.run(["git", "config", "user.name",
-                       "github-actions"], check=True)
-        subprocess.run(["git", "config", "user.email",
-                       "github-actions@github.com"], check=True)
-        subprocess.run(["git", "add", "-A"], check=True)
+        subprocess.run(['git', 'config', 'user.name',
+                       'github-actions'], check=True)
+        subprocess.run(['git', 'config', 'user.email',
+                       'github-actions@github.com'], check=True)
+        subprocess.run(['git', 'add', '-A'], check=True)
         subprocess.run(
-            ["git", "commit", "-m", f"chore: sovereign modular update [total {stats['total_clones']}]"], check=True)
+            ['git', 'commit', '-m', f'chore: sovereign modular update [total {stats["total_clones"]}]'], check=True)
         subprocess.run(
-            ["git", "push", "origin", "github-repo-stats", "--force"], check=True)
-        print("✅ Data sealed and pushed to cloud.")
+            ['git', 'push', 'origin', 'github-repo-stats', '--force'], check=True)
+        print('✅ Data sealed and pushed to cloud.')
     except Exception as e:
-        print(f"⚠️ Git push skipped: {e}")
+        print(f'⚠️ Git push skipped: {e}')
 
 
-if __name__ == "__main__":
+if __name__ == '__main__':
     assemble_readme()
     git_push()

package/.github/scripts/render/dashboard.py

@@ -5,6 +5,7 @@ import seaborn as sns
 import matplotlib.pyplot as plt
 import matplotlib.dates as mdates
 
+
 def peak_recon():
     df = pd.read_csv('ghrs-data/clones_ledger.csv')
     df['date'] = pd.to_datetime(df['date'])
@@ -56,6 +57,7 @@ def peak_recon():
     plt.tight_layout()
     plt.savefig('plots/bunker_peak_recon.png', dpi=100)
 
+
 def intelligence_grid():
     df = pd.read_csv('ghrs-data/clones_ledger.csv')
     df['date'] = pd.to_datetime(df['date'])
@@ -178,6 +180,7 @@ def intelligence_grid():
     plt.tight_layout(rect=[0, 0.03, 1, 0.95])
     plt.savefig('plots/bunker_intelligence_grid.png', dpi=100)
 
+
 def load_clean(path, col):
     df = pd.read_csv(path)
     df['date'] = pd.to_datetime(df['date'], errors='coerce')
@@ -218,6 +221,7 @@ def main_dashboard(df_c, df_v):
     plt.tight_layout()
     plt.savefig('plots/bunker_main_v7.png', dpi=120)
 
+
 if __name__ == "__main__":
     print("🤖 Pod 042: Rendering Strategic Dashboards...")
     plt.style.use('dark_background')

package/.github/workflows/bunker-intelligence.yml

@@ -39,25 +39,25 @@ jobs:
 
       # 💡 步骤 3：运行脚本，注意现在的相对路径！
       # 我们在当前根目录运行，调用 scripts_repo 里的脚本，去处理 data_repo 里的数据
-      - name: "🛰️ Step 1: Data Collection"
+      - name: '🛰️ Step 1: Data Collection'
         run: |
           cd data_repo
           python ../scripts_repo/.github/scripts/collect/traffic.py
 
-      - name: "🧠 Step 2: Intelligence Analysis"
+      - name: '🧠 Step 2: Intelligence Analysis'
         run: |
           cd data_repo
           # 执行“肉机比”扫描与“军衔”聚类分析
           python ../scripts_repo/.github/scripts/analyze/bot_detect.py
           python ../scripts_repo/.github/scripts/analyze/cluster.py
 
-      - name: "📈 Step 3: Visualization Rendering"
+      - name: '📈 Step 3: Visualization Rendering'
         run: |
           cd data_repo
           # 渲染核心看板
           python ../scripts_repo/.github/scripts/render/dashboard.py
 
-      - name: "💾 Step 4: Deployment & Sealing"
+      - name: '💾 Step 4: Deployment & Sealing'
         run: |
           cd data_repo
           # 物理封存至 README

package/CONTRIBUTING.md

@@ -75,24 +75,6 @@ cp .env.example .env
 # 编辑 .env 文件，填入您的API密钥
 ```
 
-### 项目结构
-
-```
-auto-crud-copilot/
-├── bin/                 # 可执行文件
-├── src/
-│   ├── commands/        # 命令实现
-│   ├── core/           # 核心逻辑
-│   ├── prompts/        # AI提示词
-│   ├── services/       # 服务层
-│   └── utils/          # 工具函数
-├── templates/          # 代码模板
-│   ├── react/
-│   ├── vue/
-│   └── angular/
-└── config.js           # 配置文件
-```
-
 - 提交信息遵循[Conventional Commits](https://www.conventionalcommits.org/zh-hans/v1.0.0/)规范
 
 ### 测试

package/bin/autodev.js

@@ -4,8 +4,7 @@ const path = require('path')
 const chalk = require('chalk')
 const pkg = require('../package.json')
 const { program } = require('commander')
-const bunker = require('../src/core/context')
-const { language, matrixEffect, bootSequence } = require('../src/utils/utils.js')
+const { language, matrixEffect, bootSequence } = require('../src/utils/ux')
 
 program
     .version(pkg.version)
@@ -40,7 +39,7 @@ program
             console.log(chalk.green(language('🤖 Pod 042: [报告] config.js 存储完毕。', '🤖 Pod 042: [Report] config.js storage complete.')))
         }
 
-        const bunkerCmd = chalk.yellow('"bunker": "autodev watch"')
+        const bunkerCmd = chalk.yellow(`'bunker': 'autodev watch'`)
         console.log(chalk.cyan(language(
             `📡 Operator 6O: 呼叫 2B, 地堡部署完毕, 为了更快捷地进入战场，建议手动执行 [物理装配]: 将 ${bunkerCmd} 加入您的 package.json scripts 中`,
             `📡 Operator 6O: Calling 2B! Bunker deployment is complete. To expedite your entry into the battlefield, I recommend a manual [Physical Assembly]: Add ${bunkerCmd} to your package.json scripts.`
@@ -52,18 +51,20 @@ program
     .alias('start')
     .description(language('开启全频道联动监控：支持 Page/Part/API 协同构筑', 'Start full-channel linked monitoring: Coordinated Page/Part/API construction'))
     .action(() => {
+        const bunker = require('../src/bootstrap')
         const result = bunker.init(program.opts())
         if (!result) {
             return
         }
         bootSequence(pkg.version)
         require('../src/commands/watch')()
-        const { config } = bunker.get()
-        if (config.apiDoc && config.enableAutoAlignment) {
-            require('../src/services/api-linker')()
+        const { config } = result.infrastructure
+        const { apiDoc, needMock, proxyTarget, enableAutoAlignment } = config
+        if (apiDoc && enableAutoAlignment) {
+            require('../src/labs/linker')()
         }
-        if (config.proxyTarget && !config.needMock && config.enableAutoAlignment) {
-            require('../src/services/proxy-tower')()
+        if (proxyTarget && !needMock && enableAutoAlignment) {
+            require('../src/labs/tower')()
         }
         process.on('SIGINT', () => {
             console.log('\n')

package/config.js

@@ -18,10 +18,10 @@ module.exports = {
     utilsDir: 'src/utils',
     componentsDir: 'src/components',
 
+    // 指向公司的 Swagger JSON 地址
+    apiDoc: '',
     // 代理目标
-    proxyTarget: 'http://id:port',
+    proxyTarget: '',
     responseSuccess: `response?.code === 200`,
-    // 指向公司的 Swagger JSON 地址
-    apiDoc: 'http://api.company.com/v2/api-docs',
 
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorha2b-lab/autodev",
-  "version": "4.1.1",
+  "version": "5.0.0",
   "description": "基于视觉大模型的前端(react+Antd)全自动 CRUD 代码生成器",
   "bin": {
     "autodev": "bin/autodev.js"
@@ -14,8 +14,6 @@
     "ai",
     "vision",
     "react",
-    "vue",
-    "angular",
     "antd",
     "umi",
     "code-generation",

package/src/bootstrap/handlebars.js

@@ -0,0 +1,26 @@
+module.exports = ({ config, template, contextStringify }) => {
+
+    const fs = require('fs')
+    const path = require('path')
+    const Handlebars = require('handlebars')
+
+    Handlebars.registerHelper('raw', opt => opt.fn())
+    Handlebars.registerHelper('stringify', (context, maxLength = 200) => context ? new Handlebars.SafeString(contextStringify({ context, maxLength })) : '[]')
+
+    const { hbsDir } = config
+    const tplDir = hbsDir !== '' ? path.join(process.cwd(), hbsDir) : path.join(__dirname, `../framework/${template}/handlebars`)
+    const partialsDir = hbsDir !== '' ? path.join(process.cwd(), hbsDir) : path.join(__dirname, `../framework/${template}/handlebars/partials`)
+
+    fs.readdirSync(partialsDir).forEach(file => {
+        if (file.endsWith('.hbs')) {
+            const name = path.basename(file, '.hbs') // 去掉后缀拿名字
+            const content = fs.readFileSync(path.join(partialsDir, file), 'utf-8')
+            Handlebars.registerPartial(name, `${content}\n`)
+        }
+    })
+
+    return {
+        indexTpl: Handlebars.compile(fs.readFileSync(path.join(tplDir, 'index.hbs'), 'utf-8')),
+        resourceTpl: Handlebars.compile(fs.readFileSync(path.join(tplDir, 'resource.hbs'), 'utf-8')),
+    }
+}

package/src/bootstrap/handlers.js

@@ -0,0 +1,10 @@
+module.exports = () => {
+
+    const fs = require('fs')
+    const path = require('path')
+
+    const handlersPath = path.join(__dirname, `../handlers`)
+    const handlers = fs.readdirSync(handlersPath).map(handler => [path.basename(handler, '.js'), require(path.join(handlersPath, handler))])
+
+    return Object.fromEntries(handlers)
+}

package/src/bootstrap/index.js

@@ -0,0 +1,49 @@
+const fs = require('fs')
+const path = require('path')
+const chalk = require('chalk')
+
+let instance = null
+
+module.exports = {
+
+    init: options => {
+
+        const template = options.template
+        const ux = require('../utils/ux')
+
+        const generatorPath = path.join(__dirname, `../framework/${template}/generator`)
+        if (!fs.existsSync(generatorPath)) {
+            console.error(chalk.red(ux.language(`❌ 暂不支持 [${template}] 框架。欢迎提交 Pull Request 贡献。`, `❌ [${template}] framework not supported. Welcome to contribute a Pull Request to help.`)))
+            return
+        }
+
+        const infrastructure = require('../utils/infrastructure')
+
+        const openAI = require('./openai')()
+        const core = require('../utils/core')
+        const handlers = require('./handlers')()
+        const config = infrastructure.getConfig()
+        const menus = infrastructure.getExistingMenus()
+        const prompts = require('./prompt')({ template })
+        require('./infrastructure')({ ux, config, options, ...infrastructure })
+        const llm = require('../services/llm')({ config, openAI, template, ...prompts })
+        const handlebars = require('./handlebars')({ config, template, ...infrastructure })
+        const generator = require(generatorPath)({ config, ...core, ...handlebars, ...infrastructure })
+
+        instance = {
+            ux,
+            llm,
+            core,
+            openAI,
+            prompts,
+            handlers,
+            generator,
+            handlebars,
+            cli: options,
+            infrastructure: { menus, config, ...infrastructure },
+        }
+        return instance
+    },
+
+    get: () => instance
+}

package/src/bootstrap/infrastructure.js

@@ -0,0 +1,15 @@
+module.exports = ({ ux, config, options, copyTemplateDir }) => {
+
+    const { language } = ux
+    const { hbsDir, hooksDir, utilsDir, componentsDir } = config
+
+    try {
+        if (hbsDir === '') {
+            copyTemplateDir(options, 'hooks', hooksDir)
+            copyTemplateDir(options, 'utils', utilsDir)
+            copyTemplateDir(options, 'components', componentsDir)
+        }
+    } catch (error) {
+        console.error(language('❌ 模板构筑失败:', '❌ Template construction failed:'), error)
+    }
+}

package/src/bootstrap/openai.js

@@ -0,0 +1,13 @@
+module.exports = () => {
+
+    const fs = require('fs')
+    const path = require('path')
+    const OpenAI = require('openai')
+
+    const pkgEnv = path.resolve(__dirname, '../.env')
+    const localEnv = path.resolve(process.cwd(), '.env')
+    require('dotenv').config({ path: fs.existsSync(localEnv) ? localEnv : pkgEnv })
+    const openAI = new OpenAI({ apiKey: process.env.API_KEY, baseURL: process.env.BASE_URL })
+
+    return openAI
+}

package/src/bootstrap/prompt.js

@@ -0,0 +1,10 @@
+module.exports = ({ template }) => {
+
+    const fs = require('fs')
+    const path = require('path')
+
+    const promptsPath = path.join(__dirname, `../framework/${template}/prompts`)
+    const prompts = fs.readdirSync(promptsPath).map(prompt => [`${path.basename(prompt, '.js')}Prompt`, require(path.join(promptsPath, prompt))])
+
+    return Object.fromEntries(prompts)
+}

package/src/commands/watch.js

@@ -1,26 +1,16 @@
-const fs = require('fs')
-const path = require('path')
-const chalk = require('chalk')
-const chokidar = require('chokidar')
-const stringify = require('json-stringify-pretty-compact')
+module.exports = () => {
 
-const watch = () => {
+    const fs = require('fs')
+    const path = require('path')
+    const chalk = require('chalk')
+    const chokidar = require('chokidar')
 
-    const { get } = require('../core/context')
-    const { copyTemplateDir } = require('../utils/utils.js')
-    const { createTaskQueue } = require('../core/task-queue.js')
+    const { ux, core, handlers, infrastructure } = require('../bootstrap').get()
 
-    const { menus, config, options, language, apiHandler, pageHandler, partHandler } = get()
-
-    try {
-        if (config.hbsDir === '') {
-            copyTemplateDir(options, 'hooks', config.hooksDir)
-            copyTemplateDir(options, 'utils', config.utilsDir)
-            copyTemplateDir(options, 'components', config.componentsDir)
-        }
-    } catch (error) {
-        console.error(language('❌ 模板构筑失败:', '❌ Template construction failed:'), error)
-    }
+    const { language } = ux
+    const { createTaskQueue } = core
+    const { apiHandler, pageHandler, partHandler } = handlers
+    const { menus, config, contextStringify } = infrastructure
 
     const queue = createTaskQueue(2)
 
@@ -31,7 +21,7 @@ const watch = () => {
         )))
         const utilsDir = path.join(process.cwd(), config.utilsDir)
         if (!fs.existsSync(utilsDir)) fs.mkdirSync(utilsDir, { recursive: true })
-        fs.writeFileSync(path.join(utilsDir, 'menus.js'), `export const menus = ${stringify.default(menus, { indent: 4, maxLength: 50 })}`)
+        fs.writeFileSync(path.join(utilsDir, 'menus.js'), `export const menus = ${contextStringify({ context: menus, maxLength: 50 })}`)
         console.log(chalk.gray(language(
             '\n🤖 [System] 未检测到运行中的任务，系统待机中...\n',
             '\n🤖 [System] System is STANDBY.\n'
@@ -50,20 +40,17 @@ const watch = () => {
         '📡 Operator 6O: Calling 2B, all-channel linked monitoring is ready!'
     )))
 
-    watcher.on('add', filePath => {
+    const routes = [
+        { match: 'response', handler: apiHandler },
+        { match: 'screenShot', handler: pageHandler },
+        { match: 'screenPart', handler: partHandler },
+    ]
 
+    watcher.on('add', filePath => {
         const absolutePath = path.resolve(filePath)
-
-        if (absolutePath.includes('screenShot')) {
-            queue.add(() => pageHandler(filePath))
-        }
-        else if (absolutePath.includes('screenPart')) {
-            queue.add(() => partHandler(filePath))
-        }
-        else if (absolutePath.includes('response')) {
-            queue.add(() => apiHandler(filePath))
+        const route = routes.find(r => absolutePath.includes(r.match))
+        if (route) {
+            queue.add(() => route.handler(filePath))
         }
     })
-}
-
-module.exports = watch
+}

package/{templates → src/framework}/react/components/MyModalForm.js

@@ -112,7 +112,7 @@ const FormRenderer = ({ form, formItems, tableConfig, setModalTable, setSelected
  *
  * @example
  * <MyModalForm
- *   title="构筑新模块"
+ *   title='构筑新模块'
  *   visible={visible}
  *   submit={async (vals) => await save(vals)}
  *   formItems={[{ label: '截止日期', name: 'deadline', type: 'date' }]}

package/{templates → src/framework}/react/components/MyModalTable.js

@@ -30,7 +30,7 @@ import { useTableQuery } from '../hooks/useTableQuery'
  *
  * @example
  * <MyModalTable
- *   title="关联用户片段"
+ *   title='关联用户片段'
  *   api={async params=>await fetchUsers(params)}
  *   setModalForm={setModal} // 💡 借用主页面的表单构筑舱
  *   operate={({ refresh, setModalForm }) => ({ label: '详情', onClick: (rec) => setModalForm(...) })}

package/{templates → src/framework}/react/components/index.js

@@ -19,10 +19,10 @@ import { Button, Tree, Radio, Input, Upload, Select, Cascader, Checkbox, DatePic
  *
  * @example
  * // 基本构筑
- * <AliyunOSSUpload path="project/data" url="/api/oss/token" />
+ * <AliyunOSSUpload path='project/data' url='/api/oss/token' />
  *
  * // 高级装配（限制文件类型并开启多选）
- * <AliyunOSSUpload accept=".pdf" multiple={true} path="docs" url="/api/oss/token" />
+ * <AliyunOSSUpload accept='.pdf' multiple={true} path='docs' url='/api/oss/token' />
  */
 const AliyunOSSUpload = ({ value, onChange, ...restProps }) => {