213 lines
5.7 KiB
HTML
213 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Admin Framework - 高级示例</title>
|
|
|
|
<!-- 引入 iView 样式 -->
|
|
<link rel="stylesheet" href="https://unpkg.com/view-design@4.7.0/dist/styles/iview.css">
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
|
|
}
|
|
#app {
|
|
height: 100vh;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
|
|
<!-- 引入依赖库 -->
|
|
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
|
|
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
|
|
<script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
|
|
<script src="https://unpkg.com/view-design@4.7.0/dist/iview.js"></script>
|
|
<script src="https://unpkg.com/axios@0.27.2/dist/axios.js"></script>
|
|
|
|
<!-- 引入 admin-framework -->
|
|
<script src="../dist/admin-framework.js"></script>
|
|
|
|
<script>
|
|
// 获取框架实例
|
|
const framework = window.AdminFramework
|
|
|
|
// ========== 1. 自定义页面组件 ==========
|
|
const CustomPage = {
|
|
name: 'CustomPage',
|
|
template: `
|
|
<div style="padding: 20px;">
|
|
<Card>
|
|
<p slot="title">自定义页面</p>
|
|
<p>这是一个自定义页面示例</p>
|
|
<p>当前时间: {{ currentTime }}</p>
|
|
<Button type="primary" @click="handleClick">点击测试</Button>
|
|
</Card>
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
currentTime: new Date().toLocaleString()
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick() {
|
|
this.$Message.success('按钮点击成功!')
|
|
}
|
|
},
|
|
mounted() {
|
|
// 定时更新时间
|
|
this.timer = setInterval(() => {
|
|
this.currentTime = new Date().toLocaleString()
|
|
}, 1000)
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timer)
|
|
}
|
|
}
|
|
|
|
// ========== 2. 自定义 Vuex 模块 ==========
|
|
const customModule = {
|
|
namespaced: true,
|
|
state: {
|
|
customData: '自定义数据'
|
|
},
|
|
getters: {
|
|
customData: state => state.customData
|
|
},
|
|
mutations: {
|
|
SET_CUSTOM_DATA(state, data) {
|
|
state.customData = data
|
|
}
|
|
},
|
|
actions: {
|
|
updateCustomData({ commit }, data) {
|
|
commit('SET_CUSTOM_DATA', data)
|
|
}
|
|
}
|
|
}
|
|
|
|
// ========== 3. 配置参数 ==========
|
|
const config = {
|
|
title: 'Admin Framework 高级示例',
|
|
apiUrl: 'http://localhost:3000/api/',
|
|
uploadUrl: 'http://localhost:3000/api/upload',
|
|
// 其他自定义配置
|
|
theme: 'light',
|
|
language: 'zh-CN'
|
|
}
|
|
|
|
// ========== 4. 组件映射（用于动态路由加载） ==========
|
|
const componentMap = {
|
|
'custom/page': CustomPage,
|
|
'custom/page.vue': CustomPage
|
|
}
|
|
|
|
// ========== 5. 初始化框架 ==========
|
|
framework.install(Vue, {
|
|
config: config,
|
|
ViewUI: iview,
|
|
VueRouter: VueRouter,
|
|
Vuex: Vuex,
|
|
createPersistedState: null,
|
|
componentMap: componentMap
|
|
})
|
|
|
|
// ========== 6. 添加自定义 Vuex 模块 ==========
|
|
framework.store.registerModule('custom', customModule)
|
|
|
|
// ========== 7. 添加自定义路由 ==========
|
|
const customRoutes = [
|
|
{
|
|
path: '/custom',
|
|
component: framework.Main, // 使用框架的主布局
|
|
children: [
|
|
{
|
|
path: 'page',
|
|
name: 'custom_page',
|
|
component: CustomPage,
|
|
meta: {
|
|
title: '自定义页面',
|
|
hideInMenu: false
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
|
|
// 添加路由
|
|
customRoutes.forEach(route => {
|
|
framework.router.addRoute(route)
|
|
})
|
|
|
|
// ========== 8. 路由守卫（可选） ==========
|
|
framework.router.beforeEach((to, from, next) => {
|
|
// 可以在这里添加权限验证等逻辑
|
|
console.log('路由跳转:', from.path, '->', to.path)
|
|
next()
|
|
})
|
|
|
|
// ========== 9. Axios 拦截器配置（可选） ==========
|
|
framework.http.interceptors.request.use(
|
|
config => {
|
|
// 在请求发送前做些什么
|
|
console.log('发送请求:', config.url)
|
|
return config
|
|
},
|
|
error => {
|
|
return Promise.reject(error)
|
|
}
|
|
)
|
|
|
|
framework.http.interceptors.response.use(
|
|
response => {
|
|
// 对响应数据做些什么
|
|
console.log('收到响应:', response.config.url)
|
|
return response
|
|
},
|
|
error => {
|
|
// 对响应错误做些什么
|
|
console.error('请求错误:', error)
|
|
return Promise.reject(error)
|
|
}
|
|
)
|
|
|
|
// ========== 10. 创建 Vue 实例 ==========
|
|
const app = new Vue({
|
|
router: framework.router,
|
|
store: framework.store,
|
|
render: h => h('router-view'),
|
|
created() {
|
|
console.log('=== Admin Framework 高级示例启动 ===')
|
|
console.log('配置信息:', this.$config)
|
|
console.log('可用路由:', this.$router.options.routes)
|
|
}
|
|
})
|
|
|
|
// ========== 11. 挂载应用 ==========
|
|
app.$mount('#app')
|
|
|
|
// ========== 12. 全局暴露（方便调试） ==========
|
|
window.app = app
|
|
window.rootVue = app
|
|
window.framework = framework
|
|
|
|
// ========== 13. 打印框架信息 ==========
|
|
console.log('框架版本:', framework.version)
|
|
console.log('框架实例:', framework)
|
|
console.log('路由实例:', framework.router)
|
|
console.log('Store 实例:', framework.store)
|
|
console.log('工具函数:', framework.tools)
|
|
console.log('UI 工具:', framework.uiTool)
|
|
console.log('HTTP 实例:', framework.http)
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|