1

_doc/完整使用文档.md

@@ -41,10 +41,12 @@ npm run dev
 
 ## ✨ 特性
 
+✅ **极简 API** - 只需调用 `createApp()` 即可完成所有初始化  
+✅ **模块化设计** - 组件、路由、状态管理等功能按模块组织  
 ✅ **主页组件**（欢迎页面，自动显示系统标题）  
 ✅ **系统管理页面**（sys 开头的所有页面和功能）  
 ✅ **系统 API**（system 和 system 所有 API）  
-✅ **全局组件**（Tables、Editor、Upload 等）  
+✅ **全局组件**（Tables、Editor、Upload、FieldRenderer 等）  
 ✅ **布局组件**（Main、ParentView）  
 ✅ **登录和错误页面**（Login、401、404、500）  
 ✅ **用户登录和权限管理**  
@@ -141,7 +143,7 @@ import AdminFramework from 'admin-framework'
 - **主页组件**（HomePage - 欢迎页面，显示系统标题）
 - 所有系统页面（system、system）
 - 所有系统 API（system、system）
-- 所有全局组件（Tables、Editor、Upload 等）
+- 所有全局组件（Tables、Editor、Upload、FieldRenderer 等）
 - 布局组件（Main、ParentView）
 - 登录和错误页面
 - 工具库和 Store 模块
@@ -150,11 +152,37 @@ import AdminFramework from 'admin-framework'
 
 **只需准备**：
 ```
-├── config/index.js           # 配置文件（根据你的项目修改）
-└── App.vue                   # 应用根组件
+├── App.vue                   # 应用根组件（可选）
 ```
 
-#### 2. 创建 main.js（只需 10 行代码！）
+#### 2. 创建 main.js（新版本 - 只需 8 行代码！）
+
+```javascript
+import AdminFramework from './libs/admin-framework.js'
+
+// 导入业务组件（根据权限菜单接口的 component 字段）
+import GamesComponent from './views/ball/games.vue'
+import PayOrdersComponent from './views/order/pay_orders.vue'
+
+// 🎉 只需一行代码！框架自动完成所有初始化
+const app = AdminFramework.createApp({
+  title: '我的管理系统',
+  apiUrl: 'http://localhost:9098/admin_api/',
+  componentMap: {
+    'ball/games': GamesComponent,
+    'order/pay_orders': PayOrdersComponent
+    // 添加更多业务组件...
+  },
+  onReady() {
+    console.log('应用已启动!')
+  }
+})
+
+// 挂载应用
+app.$mount('#app')
+```
+
+#### 2.1 传统方式（兼容旧版本）
 
 ```javascript
 import Vue from 'vue'

src/components/index.js

@@ -60,6 +60,11 @@ export function registerComponents(Vue, components = {}) {
     })
 }
 
+export {
+    registerGlobalComponents,
+    registerComponents
+}
+
 export default {
     Main,
     ParentView,
@@ -77,8 +82,8 @@ export default {
     editModal,
     fieldItem,
     FieldRenderer,
-    registerGlobalComponents,
-    registerComponents
+
+
 }
 
 

src/index.js

@@ -25,34 +25,17 @@ import storeModules, { createStore } from './store'
 import { createBaseRoutes, setupRouterGuards, createRouter, getRoutes } from './router'
 
 
-
 import components from './components/index'
+import { registerGlobalComponents } from './components/index'
 import pages from './views/index'
 
+const { LoginPage, Page401, Page404, Page500, setupComponentMap } = pages
+
+
 // 导入页面组件
 import Main from './components/main'
 import ParentView from './components/parent-view'
 
-// 通过模块化方式导入页面组件
-const {
-  HomePage,
-  LoginPage,
-  Page401,
-  Page404,
-  Page500,
-  SysLog,
-  SysParamSetup,
-  SysRole,
-  SysUser,
-  SysControl,
-  SysMenu,
-  SysTitle,
-  setupComponentMap
-} = pages
-
-// 导入组件相关功能
-import components, { registerGlobalComponents, registerComponents } from './components/index'
-
 import * as systemApi from './api/system'
 
 class AdminFramework {
@@ -230,14 +213,3 @@ if (typeof window !== 'undefined') {
 
 export default framework
 
-export {
-  tools,
-  uiTool,
-  http,
-
-  storeModules,
-  createBaseRoutes,
-  setupRouterGuards,
-
-  AdminFramework
-}

使用说明.md

@@ -249,8 +249,26 @@ export default {
 
 ### 框架实例方法
 
-#### install(Vue, options)
-安装 Vue 插件
+#### createApp(config) - 推荐使用
+创建应用实例（新版本 API）
+
+```javascript
+const app = AdminFramework.createApp({
+  title: '我的管理系统',           // 应用标题（必需）
+  apiUrl: 'http://localhost:9098/admin_api/', // API 基础地址（必需）
+  uploadUrl: 'http://localhost:9098/admin_api/upload', // 上传地址（可选，默认为 apiUrl + 'upload'）
+  componentMap: {                // 业务组件映射（可选）
+    'business/product': ProductComponent,
+    'business/order': OrderComponent
+  },
+  onReady() {                    // 应用启动完成回调（可选）
+    console.log('应用已启动!')
+  }
+})
+```
+
+#### install(Vue, options) - 传统方式
+安装 Vue 插件（兼容旧版本）
 
 ```javascript
 Vue.use(AdminFramework, {
@@ -268,12 +286,6 @@ Vue.use(AdminFramework, {
 // 初始化 HTTP 配置
 AdminFramework.initHttp(config, store)
 
-// 创建路由实例
-AdminFramework.createRouter(Router, components, customRoutes, ViewUI, homeName)
-
-// 创建 Store 实例
-AdminFramework.createStore(Vuex, customModules, createPersistedState)
-
 // 添加组件映射
 AdminFramework.addComponentMap(customMap)
 ```

快速开始.md

@@ -1,12 +1,11 @@
 # AdminFramework 快速开始
 
-## 🚀 5 分钟上手
+## 🚀 3 分钟上手
 
 ### 第一步：引入框架
 
 ```javascript
 import AdminFramework from './admin-framework.js'
-import componentMap from './router/component-map.js'
 ```
 
 ### 第二步：创建应用
@@ -15,7 +14,10 @@ import componentMap from './router/component-map.js'
 const app = AdminFramework.createApp({
   title: '我的管理系统',
   apiUrl: 'http://localhost:9098/admin_api/',
-  componentMap: componentMap
+  componentMap: {
+    'business/product': ProductComponent,
+    'business/order': OrderComponent
+  }
 })
 ```
 
@@ -27,17 +29,21 @@ app.$mount('#app')
 
 ## ✨ 就这么简单！
 
-**完整代码只需 18 行：**
+**完整代码只需 12 行：**
 
 ```javascript
 // main.js
 import AdminFramework from './admin-framework.js'
-import componentMap from './router/component-map.js'
+import ProductComponent from './views/business/product.vue'
+import OrderComponent from './views/business/order.vue'
 
 const app = AdminFramework.createApp({
   title: '我的管理系统',
   apiUrl: 'http://localhost:9098/admin_api/',
-  componentMap: componentMap
+  componentMap: {
+    'business/product': ProductComponent,
+    'business/order': OrderComponent
+  }
 })
 
 app.$mount('#app')
@@ -50,23 +56,25 @@ app.$mount('#app')
 **重要提示：** 只需传递不带 `.vue` 后缀的路径，框架会自动处理带后缀和不带后缀的两种情况！
 
 ```javascript
-// router/component-map.js
-import ProductList from '../views/business/product-list.vue'
-import OrderList from '../views/business/order-list.vue'
-
-export default {
+// 直接在 createApp 中配置
+const app = AdminFramework.createApp({
+  title: '我的管理系统',
+  apiUrl: 'http://localhost:9098/admin_api/',
+  componentMap: {
     // ✅ 正确：只传递不带 .vue 的路径
-  'business/product': ProductList,
-  'business/order': OrderList,
+    'business/product': ProductComponent,
+    'business/order': OrderComponent,
+    'system/user': UserComponent,
 
     // ❌ 错误：不要同时传递带和不带 .vue 的路径（多余）
-  // 'business/product.vue': ProductList,  // 框架会自动添加
-}
+    // 'business/product.vue': ProductComponent,  // 框架会自动添加
+  }
+})
 ```
 
 **说明：** 框架内部会自动为每个组件创建两个映射：
-- `'business/product'` → ProductList
-- `'business/product.vue'` → ProductList（自动添加）
+- `'business/product'` → ProductComponent
+- `'business/product.vue'` → ProductComponent（自动添加）
 
 所以后台菜单配置 `business/product` 或 `business/product.vue` 都可以正常工作！