zc/admin_core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
张成
2025-10-09 23:13:42 +08:00
parent f91206702b
commit 1d3eb75c64
28 changed files with 118 additions and 832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
demo/README-LOCAL.md
View File

@@ -273,23 +273,23 @@ export default {
methods: {
example() {
// 成功提示
this.$uiTool.success('操作成功')
this.$ window.framework.uiTool.success('操作成功')
// 错误提示
this.$uiTool.error('操作失败')
this.$ window.framework.uiTool.error('操作失败')
// 警告提示
this.$uiTool.warning('警告信息')
this.$ window.framework.uiTool.warning('警告信息')
// 确认对话框
this.$uiTool.confirm('确定删除吗？').then(() => {
this.$ window.framework.uiTool.confirm('确定删除吗？').then(() => {
// 确认后的操作
}).catch(() => {
// 取消后的操作
})
// Loading
const loading = this.$uiTool.loading('加载中...')
const loading = this.$ window.framework.uiTool.loading('加载中...')
setTimeout(() => loading.close(), 2000)
}
}

6
demo/README.md
View File

@@ -188,13 +188,13 @@ tools.throttle(fn, 500)
const uiTool = framework.uiTool
// 成功提示
uiTool.success('操作成功')
window.framework.uiTool.success('操作成功')
// 错误提示
uiTool.error('操作失败')
window.framework.uiTool.error('操作失败')
// 确认对话框
uiTool.confirm('确定删除吗？').then(() => {
window.framework.uiTool.confirm('确定删除吗？').then(() => {
// 确认后的操作
})
```

14
demo/src/api/ball/game_participants_server.js
View File

@@ -1,6 +1,6 @@
import http from '@/libs/http'
export default {
const gameParticipantsServer = {
// 获取球局参与者列表
getGameParticipantsList: (params) => {
return window.framework.http.post('/game_participants/page', params)
@@ -45,4 +45,14 @@ export default {
updateParticipantStatus: (params) => {
return window.framework.http.post('/game_participants/update_status', params)
}
}
}
// 添加简写方法名别名，保持向后兼容
gameParticipantsServer.page = gameParticipantsServer.getGameParticipantsList
gameParticipantsServer.all = gameParticipantsServer.getAllGameParticipants
gameParticipantsServer.add = gameParticipantsServer.addGameParticipant
gameParticipantsServer.edit = gameParticipantsServer.updateGameParticipant
gameParticipantsServer.del = gameParticipantsServer.deleteGameParticipant
gameParticipantsServer.exportCsv = gameParticipantsServer.exportGameParticipants
export default gameParticipantsServer

8
demo/src/components/CustomPage.vue
View File

@@ -123,19 +123,19 @@ export default {
// UI 工具测试
showSuccess() {
this.$uiTool.success('这是一个成功提示')
window.framework.uiTool.success('这是一个成功提示')
},
showWarning() {
this.$uiTool.warning('这是一个警告提示')
window.framework.uiTool.warning('这是一个警告提示')
},
showError() {
this.$uiTool.error('这是一个错误提示')
window.framework.uiTool.error('这是一个错误提示')
},
showConfirm() {
this.$uiTool.confirm('确定要执行此操作吗？').then(() => {
window.framework.uiTool.confirm('确定要执行此操作吗？').then(() => {
this.$Message.success('已确认')
}).catch(() => {
this.$Message.info('已取消')

6
demo/src/router/component-map.js
View File

@@ -35,6 +35,8 @@ import Resources from '../views/statistics/resources.vue'
import RecommendBlocks from '../views/users/recommend_blocks.vue'
import UserFollows from '../views/users/user_follows.vue'
import UserTracking from '../views/users/user_tracking.vue'
import WchCities from '../views/users/wch_cities.vue'
import WchProfessions from '../views/users/wch_professions.vue'
// ========== 自定义组件 ==========
import CustomPage from '../components/CustomPage.vue'
@@ -98,6 +100,10 @@ const componentMap = {
'users/user_follows.vue': UserFollows,
'users/user_tracking': UserTracking,
'users/user_tracking.vue': UserTracking,
"users/wch_cities.vue": WchCities,
"users/wch_cities": WchCities,
"users/wch_professions.vue": WchProfessions,
"users/wch_professions": WchProfessions,
// ===== 自定义组件 =====
'custom/page': CustomPage,

10
demo/src/views/ai/ai_messages.vue
View File

@@ -40,8 +40,8 @@
</div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import ai_messagesServer from '@/api/ai/ai_messages_server.js'
export default {
data() {
@@ -102,7 +102,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
}
],
@@ -138,7 +138,7 @@ export default {
this.$refs.editModal.showModal(row);
},
delConfirm(row) {
uiTool.delConfirm(async () => {
window.framework.uiTool.delConfirm(async () => {
await ai_messagesServer.del(row)
rootVue.$Message.success('删除成功！')
this.query(1)
@@ -146,7 +146,7 @@ export default {
},
exportCsv() {
ai_messagesServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, 'AI消息管理.csv');
window.framework.funTool.downloadFile(res, 'AI消息管理.csv');
});
},
resetQuery() {

10
demo/src/views/ball/game_comments.vue
View File

@@ -33,8 +33,8 @@
</div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import game_commentsServer from '@/api/ball/game_comments_server.js'
export default {
data() {
@@ -96,7 +96,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
}
],
@@ -131,7 +131,7 @@ export default {
this.$refs.editModal.showModal(row);
},
delConfirm(row) {
uiTool.delConfirm(async () => {
window.framework.uiTool.delConfirm(async () => {
await game_commentsServer.del(row)
rootVue.$Message.success('删除成功！')
this.query(1)
@@ -147,7 +147,7 @@ export default {
},
exportCsv() {
game_commentsServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, '球局评论.csv');
window.framework.funTool.downloadFile(res, '球局评论.csv');
});
}
},

8
demo/src/views/ball/game_participants.vue
View File

@@ -39,8 +39,8 @@
</div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import menuServer from '@/api/system_high/menuServer.js'
import gameParticipantsServer from '@/api/ball/game_participants_server.js'
export default {
@@ -204,7 +204,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
},],
data: []
@@ -288,7 +288,7 @@ export default {
})
},
async delConfirm(row) {
uiTool.delConfirm(async () => {
window.framework.uiTool.delConfirm(async () => {
await gameParticipantsServer.del(row)
rootVue.$Message.success('删除成功！')
this.init()

8
demo/src/views/ball/games.vue
View File

@@ -48,8 +48,8 @@
</div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import menuServer from '@/api/system_high/menuServer.js'
import gamesServer from '@/api/ball/games_server.js'
export default {
@@ -423,7 +423,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
},],
data: []
@@ -528,7 +528,7 @@ export default {
})
},
async delConfirm(row) {
uiTool.delConfirm(async () => {
window.framework.uiTool.delConfirm(async () => {
await gamesServer.del(row)
rootVue.$Message.success('删除成功！')
this.init()

8
demo/src/views/ball/venues.vue
View File

@@ -48,8 +48,8 @@
</div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import menuServer from '@/api/system_high/menuServer.js'
import venuesServer from '@/api/ball/venues_server.js'
export default {
@@ -198,7 +198,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
}
@@ -272,7 +272,7 @@ export default {
})
},
async delConfirm(row) {
uiTool.delConfirm(async () => {
window.framework.uiTool.delConfirm(async () => {
await venuesServer.del(row)
rootVue.$Message.success('删除成功！')
this.init()

8
demo/src/views/ball/wch_users.vue
View File

@@ -44,8 +44,8 @@
</div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import menuServer from '@/api/system_high/menuServer.js'
import wch_usersServer from '@/api/ball/wch_users_server.js'
export default {
@@ -261,7 +261,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
},],
data: []
@@ -333,7 +333,7 @@ export default {
})
},
async delConfirm(row) {
uiTool.delConfirm(async () => {
window.framework.uiTool.delConfirm(async () => {
await wch_usersServer.del(row)
rootVue.$Message.success('删除成功！')
this.init()

6
demo/src/views/business/hot_city_qr.vue
View File

@@ -31,8 +31,8 @@
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import hotCityQrServer from '@/api/business/hot_city_qr_server.js'
export default {
@@ -195,7 +195,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
}
],

10
demo/src/views/message/msg_notifications.vue
View File

@@ -41,8 +41,8 @@
</div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import msg_notificationsServer from '@/api/message/msg_notifications_server.js'
export default {
data() {
@@ -112,7 +112,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
}
],
@@ -156,7 +156,7 @@ export default {
this.$Message.info('发送功能暂未实现');
},
delConfirm(row) {
uiTool.delConfirm(async () => {
window.framework.uiTool.delConfirm(async () => {
await msg_notificationsServer.del(row)
this.$Message.success('删除成功！')
this.query(1)
@@ -164,7 +164,7 @@ export default {
},
exportCsv() {
msg_notificationsServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, '消息通知.csv');
window.framework.funTool.downloadFile(res, '消息通知.csv');
});
},
resetQuery() {

10
demo/src/views/ntrp/ntr_questions.vue
View File

@@ -32,8 +32,8 @@
</div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import ntr_questionsServer from '@/api/ntrp/ntr_questions_server.js'
export default {
data() {
@@ -119,7 +119,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
}
],
@@ -213,7 +213,7 @@ export default {
}
},
delConfirm(row) {
uiTool.delConfirm(async () => {
window.framework.uiTool.delConfirm(async () => {
await ntr_questionsServer.del(row)
this.$Message.success('删除成功！')
this.query(1)
@@ -229,7 +229,7 @@ export default {
},
exportCsv() {
ntr_questionsServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, '题库管理.csv');
window.framework.funTool.downloadFile(res, '题库管理.csv');
});
}
},

10
demo/src/views/ntrp/ntr_records.vue
View File

@@ -37,8 +37,8 @@
</div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import ntr_recordsServer from '@/api/ntrp/ntr_records_server.js'
export default {
data() {
@@ -125,7 +125,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
}
],
@@ -231,7 +231,7 @@ export default {
}
},
delConfirm(row) {
uiTool.delConfirm(async () => {
window.framework.uiTool.delConfirm(async () => {
await ntr_recordsServer.del(row)
this.$Message.success('删除成功！')
this.query(1)
@@ -247,7 +247,7 @@ export default {
},
exportCsv() {
ntr_recordsServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, '测试记录.csv');
window.framework.funTool.downloadFile(res, '测试记录.csv');
});
}
},

6
demo/src/views/order/frozen_funds.vue
View File

@@ -90,8 +90,8 @@
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import frozenFundsServer from '@/api/order/frozen_funds_server.js'
export default {
@@ -222,7 +222,7 @@ export default {
}
}
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
}
}
]

8
demo/src/views/order/pay_orders.vue
View File

@@ -218,8 +218,8 @@
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import paymentOrdersServer from '@/api/order/payment_orders_server.js'
export default {
@@ -366,7 +366,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
}
]
@@ -493,7 +493,7 @@ export default {
exportOrders() {
paymentOrdersServer.exportPaymentOrders(this.gridOption.param).then(res => {
if (res.code === 0) {
funTool.downloadFile(res, '订单列表.csv')
window.framework.funTool.downloadFile(res, '订单列表.csv')
} else {
this.$Message.error(res.message || '导出失败')
}

10
demo/src/views/order/transfer_details.vue
View File

@@ -33,8 +33,8 @@
</div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import transfer_detailsServer from '@/api/order/transfer_details_server.js'
export default {
data() {
@@ -138,7 +138,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
}
],
@@ -184,7 +184,7 @@ export default {
this.$refs.editModal.showModal(row);
},
delConfirm(row) {
uiTool.delConfirm(async () => {
window.framework.uiTool.delConfirm(async () => {
try {
const res = await transfer_detailsServer.del(row);
if (res.code === 0) {
@@ -203,7 +203,7 @@ export default {
try {
const res = await transfer_detailsServer.exportCsv(this.gridOption.param);
if (res.code === 0) {
funTool.downloadFile(res.data, '转账详情.csv');
window.framework.funTool.downloadFile(res.data, '转账详情.csv');
} else {
this.$Message.error(res.message || '导出失败');
}

8
demo/src/views/order/wallet_transactions.vue
View File

@@ -43,8 +43,8 @@
</div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import menuServer from '@/api/system_high/menuServer.js'
import walletTransactionsServer from '@/api/ball/wallet_transactions_server.js'
@@ -215,7 +215,7 @@ export default {
},
}
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
}
],
@@ -255,7 +255,7 @@ export default {
},
exportCsv() {
walletTransactionsServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, '交易记录.csv');
window.framework.funTool.downloadFile(res, '交易记录.csv');
});
},
resetQuery() {

6
demo/src/views/order/wch_wallets.vue
View File

@@ -165,8 +165,8 @@
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import wchWalletsServer from '@/api/order/wch_wallets_server.js'
export default {
@@ -303,7 +303,7 @@ export default {
}
}
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
}
}
]

8
demo/src/views/statistics/resources.vue
View File

@@ -55,8 +55,8 @@
<script>
import { getList, add, edit, del, exportData } from '@/api/ball/resources_server'
import uiTool from '@/libs/uiTool'
import funTool from '@/libs/funTool'
export default {
name: 'resources',
@@ -230,7 +230,7 @@ export default {
}
}
];
return uiTool.getBtn(h, btns);
return window.framework.uiTool.getBtn(h, btns);
}
}
],
@@ -301,7 +301,7 @@ export default {
},
exportCsv() {
exportData(this.gridOption.param).then(res => {
funTool.downloadFile(res, '资源管理.csv')
window.framework.funTool.downloadFile(res, '资源管理.csv')
})
},
resetQuery() {

10
demo/src/views/users/recommend_blocks.vue
View File

@@ -26,8 +26,8 @@
</div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import recommend_blocksServer from '@/api/users/recommend_blocks_server.js'
export default {
data() {
@@ -88,7 +88,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
}
],
@@ -117,7 +117,7 @@ export default {
this.$refs.editModal.showModal(row);
},
delConfirm(row) {
uiTool.delConfirm(async () => {
window.framework.uiTool.delConfirm(async () => {
await recommend_blocksServer.del(row)
rootVue.$Message.success('删除成功！')
this.query(1)
@@ -125,7 +125,7 @@ export default {
},
exportCsv() {
recommend_blocksServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, '推荐屏蔽.csv');
window.framework.funTool.downloadFile(res, '推荐屏蔽.csv');
});
},
resetQuery() {

10
demo/src/views/users/user_follows.vue
View File

@@ -26,8 +26,8 @@
</div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import menuServer from '@/api/system_high/menuServer.js'
import user_followsServer from '@/api/users/user_follows_server.js'
export default {
@@ -89,7 +89,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
}
],
@@ -118,7 +118,7 @@ export default {
this.$refs.editModal.showModal(row);
},
delConfirm(row) {
uiTool.delConfirm(async () => {
window.framework.uiTool.delConfirm(async () => {
await user_followsServer.del(row)
rootVue.$Message.success('删除成功！')
this.query(1)
@@ -126,7 +126,7 @@ export default {
},
exportCsv() {
user_followsServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, '用户关注关系.csv');
window.framework.funTool.downloadFile(res, '用户关注关系.csv');
});
},
resetQuery() {

10
demo/src/views/users/user_tracking.vue
View File

@@ -34,8 +34,8 @@
</div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import user_trackingServer from '@/api/users/user_tracking_server.js'
export default {
data() {
@@ -100,7 +100,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
}
],
@@ -143,7 +143,7 @@ export default {
this.$refs.editModal.showModal(row);
},
delConfirm(row) {
uiTool.delConfirm(async () => {
window.framework.uiTool.delConfirm(async () => {
await user_trackingServer.del(row)
rootVue.$Message.success('删除成功！')
this.query(1)
@@ -151,7 +151,7 @@ export default {
},
exportCsv() {
user_trackingServer.exportCsv(this.gridOption.param).then(res => {
funTool.downloadFile(res, '用户行为追踪.csv');
window.framework.funTool.downloadFile(res, '用户行为追踪.csv');
});
},
resetQuery() {

5
src/views/system/wch_cities.vue → demo/src/views/users/wch_cities.vue
View File

@@ -24,8 +24,7 @@
</div>
</template>
<script>
import tools from '@/utils/tools'
import uiTool from '@/utils/uiTool'
import wch_citiesServer from '@/api/venues/wch_cities_server.js'
export default {
data() {
@@ -89,7 +88,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
}
}
],

8
src/views/system/wch_professions.vue → demo/src/views/users/wch_professions.vue
View File

@@ -24,8 +24,8 @@
</div>
</template>
<script>
import tools from '@/utils/tools'
import uiTool from '@/utils/uiTool'
import menuServer from '@/api/system_high/menuServer.js'
import wch_professionsServer from '@/api/system/wch_professions_server.js'
export default {
@@ -147,7 +147,7 @@ export default {
},
},
]
return uiTool.getBtn(h, btns)
return window.framework.uiTool.getBtn(h, btns)
},
},
],
@@ -223,7 +223,7 @@ export default {
})
},
async delConfirm(row) {
uiTool.delConfirm(async () => {
window.framework.uiTool.delConfirm(async () => {
await wch_professionsServer.del(row)
this.$Message.success('删除成功！')
this.init()

584
demo/使用说明.md
View File

@@ -1,584 +0,0 @@
# Admin Framework 正确使用方法
## 一、框架打包说明
Admin Framework 打包后是一个单独的 JS 文件：
- **生产版本**: `dist/admin-framework.js` （压缩，无 sourcemap）
- **开发版本**: `dist/admin-framework.dev.js` （不压缩，有 sourcemap）
## 二、在业务页面中使用框架功能
### 1. HTTP 请求
❌ **错误用法**（不要这样写）：
```javascript
import http from '@/utils/admin-framework.js' // ❌ 错误！
```
✅ **正确用法**：
```javascript
// 方式一：在 Vue 组件中使用 this.$http（推荐）
export default {
async mounted() {
// GET 请求
const res = await this.$http.get('/api/users')
// POST 请求
const res2 = await this.$http.post('/api/users', { name: '张三' })
}
}
// 方式二：使用全局 framework.http
const res = await window.framework.http.get('/api/users')
```
### 2. 工具函数
✅ **正确用法**：
```javascript
export default {
methods: {
formatDate() {
// 使用 this.$tools
const formatted = this.$tools.formatDate(new Date(), 'yyyy-MM-dd')
// 或使用全局 framework.tools
const formatted2 = window.framework.tools.formatDate(new Date(), 'yyyy-MM-dd')
}
}
}
```
### 3. UI 工具
✅ **正确用法**：
```javascript
export default {
methods: {
showMessage() {
// 使用 this.$uiTool
this.$uiTool.success('操作成功')
this.$uiTool.error('操作失败')
// 或使用全局 framework.uiTool
window.framework.uiTool.success('操作成功')
},
async confirmDelete() {
// 确认对话框
try {
await this.$uiTool.confirm('确定删除吗？')
// 确认后的操作
this.$Message.success('已删除')
} catch {
// 取消操作
this.$Message.info('已取消')
}
}
}
}
```
### 4. 配置信息
✅ **正确用法**：
```javascript
export default {
data() {
return {
// 从配置中获取 API 地址
uploadUrl: this.$config.uploadUrl
}
},
mounted() {
console.log('系统标题:', this.$config.title)
console.log('API 地址:', this.$config.apiUrl)
}
}
```
### 5. Vuex Store
✅ **正确用法**：
```javascript
import { mapGetters, mapActions } from 'vuex'
export default {
computed: {
// 使用框架内置的 store
...mapGetters('user', ['userName', 'menuList']),
...mapGetters('app', ['sysFormModel'])
},
methods: {
...mapActions('user', ['handleLogOut'])
}
}
```
### 6. 路由跳转
✅ **正确用法**：
```javascript
export default {
methods: {
goToPage() {
// 使用 path 跳转（推荐）
this.$router.push({ path: '/ball/games' })
// 带参数跳转
this.$router.push({
path: '/ball/game_comments',
query: { id: 123 }
})
}
}
}
```
## 三、创建业务 API 模块
### 正确的 API 封装方式
```javascript
// src/api/ball/gamesServer.js
/**
* 球赛管理 API
* 注意：不需要 import http，直接使用 window.framework.http
*/
class GamesServer {
/**
* 获取球赛列表
*/
async getList(params) {
return await window.framework.http.post('/games/page', params)
}
/**
* 获取球赛详情
*/
async getDetail(id) {
return await window.framework.http.get(`/games/detail/${id}`)
}
/**
* 创建球赛
*/
async create(data) {
return await window.framework.http.post('/games/create', data)
}
/**
* 更新球赛
*/
async update(id, data) {
return await window.framework.http.post(`/games/update/${id}`, data)
}
/**
* 删除球赛
*/
async delete(id) {
return await window.framework.http.post(`/games/delete/${id}`)
}
/**
* 批量删除
*/
async batchDelete(ids) {
return await window.framework.http.post('/games/batch_delete', { ids })
}
}
export default new GamesServer()
```
### 在组件中使用 API
```vue
<template>
<div>
<Tables
:columns="columns"
:data="tableData"
:loading="loading"
@on-refresh="getList"
/>
</div>
</template>
<script>
// 导入 API 模块
import gamesServer from '@/api/ball/gamesServer.js'
export default {
name: 'Games',
data() {
return {
columns: [
{ title: 'ID', key: 'id' },
{ title: '名称', key: 'name' },
{ title: '时间', key: 'time' }
],
tableData: [],
loading: false,
queryParams: {
page: 1,
size: 20
}
}
},
mounted() {
this.getList()
},
methods: {
async getList() {
this.loading = true
try {
const res = await gamesServer.getList(this.queryParams)
if (res.code === 0) {
this.tableData = res.data.list
}
} catch (error) {
this.$uiTool.error('获取数据失败')
} finally {
this.loading = false
}
},
async handleDelete(id) {
try {
await this.$uiTool.confirm('确定删除吗？')
const res = await gamesServer.delete(id)
if (res.code === 0) {
this.$uiTool.success('删除成功')
this.getList()
}
} catch (error) {
// 取消删除
}
}
}
}
</script>
```
## 四、完整的页面示例
```vue
<template>
<div class="page-container">
<Card>
<p slot="title">
<Icon type="ios-list" />
球赛管理
</p>
<!-- 搜索栏 -->
<Form inline style="margin-bottom: 16px;">
<FormItem>
<Input
v-model="queryParams.keyword"
placeholder="请输入关键词"
clearable
style="width: 200px;"
/>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSearch">
<Icon type="ios-search" />
搜索
</Button>
<Button @click="handleReset" style="margin-left: 8px;">
重置
</Button>
<Button type="success" @click="handleAdd" style="margin-left: 8px;">
<Icon type="ios-add" />
新增
</Button>
</FormItem>
</Form>
<!-- 数据表格 -->
<Tables
ref="table"
:columns="columns"
:data="tableData"
:loading="loading"
:total="total"
:page-size="queryParams.size"
:current-page="queryParams.page"
@on-page-change="handlePageChange"
@on-page-size-change="handlePageSizeChange"
/>
</Card>
<!-- 编辑弹窗 -->
<Modal
v-model="modalVisible"
:title="modalTitle"
width="600"
@on-ok="handleSubmit"
@on-cancel="handleCancel"
>
<Form ref="form" :model="formData" :rules="rules" :label-width="100">
<FormItem label="名称" prop="name">
<Input v-model="formData.name" placeholder="请输入名称" />
</FormItem>
<FormItem label="时间" prop="time">
<DatePicker
v-model="formData.time"
type="datetime"
placeholder="请选择时间"
style="width: 100%;"
/>
</FormItem>
</Form>
</Modal>
</div>
</template>
<script>
import gamesServer from '@/api/ball/gamesServer.js'
export default {
name: 'Games',
data() {
return {
// 查询参数
queryParams: {
page: 1,
size: 20,
keyword: ''
},
// 表格数据
columns: [
{ title: 'ID', key: 'id', width: 80 },
{ title: '名称', key: 'name' },
{
title: '时间',
key: 'time',
render: (h, params) => {
return h('span', this.$tools.formatDate(params.row.time, 'yyyy-MM-dd HH:mm'))
}
},
{
title: '操作',
width: 200,
render: (h, params) => {
return h('div', [
h('Button', {
props: { type: 'primary', size: 'small' },
style: { marginRight: '5px' },
on: { click: () => this.handleEdit(params.row) }
}, '编辑'),
h('Button', {
props: { type: 'error', size: 'small' },
on: { click: () => this.handleDelete(params.row.id) }
}, '删除')
])
}
}
],
tableData: [],
total: 0,
loading: false,
// 弹窗相关
modalVisible: false,
modalTitle: '新增',
formData: {
name: '',
time: ''
},
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
time: [
{ required: true, type: 'date', message: '请选择时间', trigger: 'change' }
]
}
}
},
mounted() {
this.getList()
},
methods: {
// 获取列表
async getList() {
this.loading = true
try {
const res = await gamesServer.getList(this.queryParams)
if (res.code === 0) {
this.tableData = res.data.list
this.total = res.data.total
} else {
this.$uiTool.error(res.message || '获取数据失败')
}
} catch (error) {
this.$uiTool.error('获取数据失败')
} finally {
this.loading = false
}
},
// 搜索
handleSearch() {
this.queryParams.page = 1
this.getList()
},
// 重置
handleReset() {
this.queryParams = {
page: 1,
size: 20,
keyword: ''
}
this.getList()
},
// 新增
handleAdd() {
this.modalTitle = '新增'
this.formData = {
name: '',
time: ''
}
this.modalVisible = true
},
// 编辑
handleEdit(row) {
this.modalTitle = '编辑'
this.formData = { ...row }
this.modalVisible = true
},
// 删除
async handleDelete(id) {
try {
await this.$uiTool.confirm('确定删除吗？')
const res = await gamesServer.delete(id)
if (res.code === 0) {
this.$uiTool.success('删除成功')
this.getList()
} else {
this.$uiTool.error(res.message || '删除失败')
}
} catch (error) {
// 取消删除
}
},
// 提交表单
handleSubmit() {
this.$refs.form.validate(async (valid) => {
if (valid) {
try {
const res = this.formData.id
? await gamesServer.update(this.formData.id, this.formData)
: await gamesServer.create(this.formData)
if (res.code === 0) {
this.$uiTool.success('操作成功')
this.modalVisible = false
this.getList()
} else {
this.$uiTool.error(res.message || '操作失败')
}
} catch (error) {
this.$uiTool.error('操作失败')
}
}
})
},
// 取消
handleCancel() {
this.$refs.form.resetFields()
},
// 分页
handlePageChange(page) {
this.queryParams.page = page
this.getList()
},
handlePageSizeChange(size) {
this.queryParams.size = size
this.queryParams.page = 1
this.getList()
}
}
}
</script>
<style scoped>
.page-container {
padding: 20px;
}
</style>
```
## 五、全局可用的对象
在任何 Vue 组件中，都可以使用以下对象：
| 对象 | 说明 | 使用示例 |
|-----|------|---------|
| `this.$http` | HTTP 请求实例 | `this.$http.get('/api/users')` |
| `this.$tools` | 工具函数集合 | `this.$tools.formatDate(new Date())` |
| `this.$uiTool` | UI 工具函数 | `this.$uiTool.success('成功')` |
| `this.$config` | 配置对象 | `this.$config.apiUrl` |
| `this.$router` | 路由实例 | `this.$router.push({ path: '/home' })` |
| `this.$store` | Vuex Store | `this.$store.state.user.userName` |
| `window.framework` | 框架实例 | `window.framework.version` |
| `window.app` | Vue 根实例 | `window.app.$router` |
## 六、注意事项
1. ❌ **不要尝试导入框架内部模块**
```javascript
import http from '@/utils/admin-framework.js' // ❌ 错误
import tools from 'admin-framework/tools' // ❌ 错误
```
2. ✅ **使用 Vue 实例上的属性**
```javascript
this.$http // ✅ 正确
this.$tools // ✅ 正确
this.$uiTool // ✅ 正确
```
3. ✅ **或使用全局对象**
```javascript
window.framework.http // ✅ 正确
window.framework.tools // ✅ 正确
window.framework.uiTool // ✅ 正确
```
4. **路由跳转使用 path 而不是 name**
```javascript
this.$router.push({ path: '/ball/games' }) // ✅ 正确
this.$router.push({ name: '球赛管理' }) // ❌ 错误（name 可能不存在）
```
## 七、快速开始检查清单
- [ ] 框架已构建：`npm run build`
- [ ] Demo 依赖已安装：`cd demo && npm install`
- [ ] 组件映射表已配置：`demo/src/router/component-map.js`
- [ ] API 地址已配置：`demo/src/main.js` 中的 `config.apiUrl`
- [ ] 页面中使用 `this.$http` 而不是 `import http`
- [ ] 路由跳转使用 `path` 而不是 `name`

145
demo/快速修复指南.md
View File

@@ -1,145 +0,0 @@
# 🚀 快速修复指南
## ❌ 常见错误用法
### 1. 错误的 HTTP 导入
```javascript
// ❌ 错误！不要这样写
import http from '@/utils/admin-framework.js'
import { http } from 'admin-framework'
// ✅ 正确！直接使用
this.$http.get('/api/xxx')
window.framework.http.get('/api/xxx')
```
### 2. 错误的工具函数导入
```javascript
// ❌ 错误！不要这样写
import tools from 'admin-framework/tools'
// ✅ 正确！直接使用
this.$tools.formatDate(new Date())
window.framework.tools.formatDate(new Date())
```
## ✅ 正确的使用方式
### 在 Vue 组件中
```vue
<script>
export default {
data() {
return {
// ✅ 从配置中获取
uploadUrl: this.$config.uploadUrl
}
},
methods: {
async loadData() {
// ✅ 使用 this.$http
const res = await this.$http.get('/api/users')
// ✅ 使用 this.$tools
const date = this.$tools.formatDate(new Date(), 'yyyy-MM-dd')
// ✅ 使用 this.$uiTool
this.$uiTool.success('操作成功')
// ✅ 路由跳转使用 path
this.$router.push({ path: '/home' })
}
}
}
</script>
```
### 在 API 模块中
```javascript
// src/api/ball/gamesServer.js
class GamesServer {
async getList(params) {
// ✅ 使用 window.framework.http
return await window.framework.http.post('/games/page', params)
}
}
export default new GamesServer()
```
### 在组件中使用 API
```vue
<script>
import gamesServer from '@/api/ball/gamesServer.js'
export default {
methods: {
async loadData() {
const res = await gamesServer.getList({ page: 1, size: 20 })
}
}
}
</script>
```
## 📝 修改步骤
### 步骤1：修改所有 API 文件
查找并替换：
```javascript
// 查找
import http from '@/utils/admin-framework.js'
http.http.get(...)
// 替换为
window.framework.http.get(...)
```
### 步骤2：修改路由跳转
查找并替换：
```javascript
// 查找
this.$router.push({ name: 'xxx' })
// 替换为
this.$router.push({ path: '/xxx/yyy' })
```
### 步骤3：重新构建框架
```bash
# 在项目根目录
npm run build
```
### 步骤4：测试
```bash
# 在 demo 目录
cd demo
npm run dev
```
## 🔍 检查清单
- [ ] 所有 API 文件都使用 `window.framework.http`
- [ ] 所有路由跳转都使用 `path` 而不是 `name`
- [ ] 组件中使用 `this.$http`、`this.$tools`、`this.$uiTool`
- [ ] 组件映射表已配置（`demo/src/router/component-map.js`）
- [ ] 框架已重新构建（`npm run build`）
- [ ] Demo 可以正常运行（`cd demo && npm run dev`）
## 📚 更多说明
详细使用说明请查看：
- `demo/使用说明.md` - 完整的使用指南
- `demo/src/api/ball/gamesServer.js` - API 模块示例
- `_doc/完整使用文档.md` - 框架完整文档