blackteay/ThinkAdmin
1
0
Fork 0
mirror of https://gitee.com/zoujingli/ThinkAdmin.git synced 2026-01-09 16:56:56 +08:00
Code Issues Projects Releases Wiki Activity

更新注释

Browse Source
This commit is contained in:
邹景立 2024-07-26 09:23:17 +08:00
parent 7afe94f1a2
commit 403c0059a7
5 changed files with 155 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -27,10 +27,12 @@
<style> <style>
@keyframes shadow { @keyframes shadow {
0%, 0%,
100% { 100% {
transform: scale(1, 1); transform: scale(1, 1);
} }
50% { 50% {
transform: scale(1.2, 1); transform: scale(1.2, 1);
} }
@ -40,16 +42,20 @@
17% { 17% {
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
} }
25% { 25% {
transform: translateY(9px) rotate(22.5deg); transform: translateY(9px) rotate(22.5deg);
} }
50% { 50% {
border-bottom-right-radius: 40px; border-bottom-right-radius: 40px;
transform: translateY(18px) scale(1, 0.9) rotate(45deg); transform: translateY(18px) scale(1, 0.9) rotate(45deg);
} }
75% { 75% {
transform: translateY(9px) rotate(67.5deg); transform: translateY(9px) rotate(67.5deg);
} }
100% { 100% {
transform: translateY(0) rotate(90deg); transform: translateY(0) rotate(90deg);
} }
@ -105,10 +111,10 @@
</head> </head>
<body> <body>
<div class="think-page-loader"> <div class="think-page-loader">
<div class="loader"></div> <div class="loader"></div>
</div> </div>
<router-view></router-view> <router-view></router-view>
</body> </body>
</html> </html>

15
readme.md
View File

@ -1,15 +1,16 @@
## ThinkAdmin for html ## ThinkAdmin for html
此分支是为`ThinkAdmin`下个版本前端`UI`构建测试用途。 此分支是为 `ThinkAdmin` 下个版本前端 `UI` 构建测试用途。
目前拟定以`Vue3`为技术核心库，基础`UI`组件库使用`Element-Plus`构建。 目前拟定以 `Vue3` 为技术核心库，基础 `UI` 组件库使用 `Element-Plus` 构建。
##### **集成组件：** ##### **集成组件：**
* vue v3.2.31 - vue v3.4.34
* vue.router v4.0.12 - vue.router v4.4.0
* vue.sfc.loader v0.8.4 - vue.sfc.loader v0.9.5
* vue element-plus v2.0.3 - vue element-plus v2.7.7
- vue element-plugs-icons v2.0.9
##### **在线体验：** ##### **在线体验：**
@ -17,4 +18,4 @@ http://html.thinkadmin.top
##### **建议收集：** ##### **建议收集：**
https://gitee.com/zoujingli/ThinkAdmin/issues/I4CK3H https://gitee.com/zoujingli/ThinkAdmin/issues/I4CK3H

139
static/app.js
View File

@ -1,112 +1,131 @@
;(async () => { ;(async () => {
/*! 项目应用根路径 */ /*! 项目应用根路径 */
window.appRoot = document.querySelector('script[src*="app.js"]').src.split('/').slice(3, -2).join('/') + '/'; // @ts-ignore
window.appRoot = document.querySelector('script[src*="app.js"]').src.split('/').slice(3, -2).join('/') + '/'
/*! 模块加载请求处理 */ /*! 模块加载请求处理 */
const options = { const options = {
// 模块缓存 // 模块缓存
moduleCache: {vue: Vue, less: less}, // @ts-ignore
moduleCache: { vue: Vue, less: less },
// 动态加载文件 // 动态加载文件
getFile(url) { getFile(url) {
if (!(/^(https?:)?\/\//)) { if (!/^(https?:)?\/\//) {
url = (appRoot + url).replace(/\/+.?\/+/g, '/'); // @ts-ignore
url = (appRoot + url).replace(/\/+.?\/+/g, '/')
} }
return fetch(url).then(res => { return fetch(url).then((res) => {
if (res.ok) { if (res.ok) {
return {getContentData: binary => binary ? res.arrayBuffer() : res.text()}; return { getContentData: (binary) => (binary ? res.arrayBuffer() : res.text()) }
} else if (res.status === 404) { } else if (res.status === 404) {
return `<template><el-empty description="${res.status}，${res.statusText}">${url}</el-empty></template>`; return `<template><el-empty description="${res.status}，${res.statusText}">${url}</el-empty></template>`
} else { } else {
throw Object.assign(new Error(url + ' ' + res.statusText), {res}); throw Object.assign(new Error(url + ' ' + res.statusText), { res })
} }
}); })
}, },
// 追加样式HTML // 追加样式HTML
addStyle(style) { addStyle(style) {
const before = document.head.getElementsByTagName('style')[0] || null; const before = document.head.getElementsByTagName('style')[0] || null
const object = Object.assign(document.createElement('style'), {textContent: style}); const object = Object.assign(document.createElement('style'), { textContent: style })
document.head.insertBefore(object, before); document.head.insertBefore(object, before)
}, },
// 输出日志信息 // 输出日志信息
log(type, ...args) { log(type, ...args) {
console.log(type, ...args); console.log(type, ...args)
}, },
}; }
const {loadModule} = window['vue3-sfc-loader']; const { loadModule } = window['vue3-sfc-loader']
const loadVue = (vuePath) => loadModule(vuePath, options); const loadVue = (vuePath) => loadModule(vuePath, options)
// @ts-ignore
const router = VueRouter.createRouter({ const router = VueRouter.createRouter({
routes: [], history: VueRouter.createWebHashHistory(), routes: [],
}); // @ts-ignore
history: VueRouter.createWebHashHistory(),
})
// 创建后台主路由 // 创建后台主路由
router.addRoute({ router.addRoute({
name: 'layout', path: '/', component: () => { name: 'layout',
return loadVue('/static/template/layout.vue'); path: '/',
}, children: [{path: '/', redirect: '/static/template/login.vue'},] component: () => {
}); return loadVue('/static/template/layout.vue')
},
children: [{ path: '/', redirect: '/static/template/login.vue' }],
})
// 动态注销路由 // 动态注销路由
router.afterEach(function (to) { router.afterEach(function (to) {
let name = to.fullPath.replace(/[.\/]+/g, '_'); let name = to.fullPath.replace(/[.\/]+/g, '_')
if (router.hasRoute(name)) router.removeRoute(name) if (router.hasRoute(name)) router.removeRoute(name)
if (loading) loading = loading.close(), null; if (loading) (loading = loading.close()), null
document.querySelectorAll('.think-page-loader').forEach((el) => el.style.display = 'none'); // @ts-ignore
}); document.querySelectorAll('.think-page-loader').forEach((el) => (el.style.display = 'none'))
})
// 动态注册路由 // 动态注册路由
let loading = null; let loading = null
// @ts-ignore
router.beforeEach(function (to, fr, next) { router.beforeEach(function (to, fr, next) {
let name = to.fullPath.replace(/[.\/]+/g, '_'); let name = to.fullPath.replace(/[.\/]+/g, '_')
if (router.hasRoute(name)) { if (router.hasRoute(name)) {
console.log('PAGE-LOADING:', to.fullPath) console.log('PAGE-LOADING:', to.fullPath)
// @ts-ignore
loading = ElementPlus.ElLoading.service({ loading = ElementPlus.ElLoading.service({
lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.3)', lock: true,
}); text: 'Loading',
next(); background: 'rgba(0, 0, 0, 0.3)',
})
next()
} else { } else {
// 删除页面缓存 // 删除页面缓存
delete options.moduleCache[to.fullPath]; delete options.moduleCache[to.fullPath]
// 登录页面处理 // 登录页面处理
if (to.fullPath.indexOf('/login.vue') > -1) { if (to.fullPath.indexOf('/login.vue') > -1) {
router.addRoute({name: name, path: to.fullPath, component: () => loadVue(to.fullPath)}) router.addRoute({ name: name, path: to.fullPath, component: () => loadVue(to.fullPath) })
} else { } else {
// 动态注册路由并触发新路由 // 动态注册路由并触发新路由
router.addRoute('layout', {name: name, path: to.fullPath, component: () => loadVue(to.fullPath)}); router.addRoute('layout', { name: name, path: to.fullPath, component: () => loadVue(to.fullPath) })
} }
next({name: name}); next({ name: name })
}
});
// 创建 Vue 应用
const app = Vue.createApp({});
app.directive('href', {
mounted(el, binding) {
console.log(el)
el.addEventListener('click', (e) => {
e.stopPropagation();
if (binding.value) {
router.push(binding.value);
}
}, {passive: false})
},
unmounted(el) {
// 移除点击事件监听器
el.removeEventListener('click');
} }
}) })
// 创建 Vue 应用
// @ts-ignore
const app = Vue.createApp({})
app.directive('href', {
mounted(el, binding) {
console.log(el)
el.addEventListener(
'click',
(e) => {
e.stopPropagation()
if (binding.value) {
router.push(binding.value)
}
},
{ passive: false }
)
},
unmounted(el) {
// 移除点击事件监听器
el.removeEventListener('click')
},
})
// 定义全局缓存，加载字体组件 // 定义全局缓存，加载字体组件
app.cache = {loadOpt: options, loadVue: loadVue, icons: ElementPlusIconsVue}; // @ts-ignore
for (let i in app.cache.icons) app.component(i, app.cache.icons[i]); app.cache = { loadOpt: options, loadVue: loadVue, icons: ElementPlusIconsVue }
for (let i in app.cache.icons) app.component(i, app.cache.icons[i])
// 注册 getApp 获取应用 // 注册 getApp 获取应用
window.getApp = () => app; // @ts-ignore
window.getApp = () => app
// 应用组件及路由 // 应用组件及路由
app.use(ElementPlus).use(router).mount(document.body); // @ts-ignore
app.use(ElementPlus).use(router).mount(document.body)
})().catch(ex => console.error(ex)); })().catch((ex) => console.error(ex))

112
static/template/layout.vue
View File

@ -1,12 +1,7 @@
<template> <template>
<el-container> <el-container>
<el-header> <el-header>
<el-menu <el-menu mode="horizontal" text-color="#fff" background-color="rgba(54,25,88,0.9)" active-text-color="rgba(54,25,88,1.0)">
mode="horizontal"
text-color="#fff"
background-color="rgba(54,25,88,0.9)"
active-text-color="rgba(54,25,88,1.0)"
>
<el-menu-item data-route="/" index="1"> <el-menu-item data-route="/" index="1">
<el-avatar size="small">Ta</el-avatar> <el-avatar size="small">Ta</el-avatar>
<span style="margin-left:5px">ThinkAdmin For HTML</span> <span style="margin-left:5px">ThinkAdmin For HTML</span>
@ -85,25 +80,57 @@
<el-main> <el-main>
<router-view></router-view> <router-view></router-view>
</el-main> </el-main>
<el-footer>©版权所有 2014-2021 ThinkAdmin</el-footer> <el-footer>©版权所有 2014-2024 ThinkAdmin</el-footer>
</el-container> </el-container>
</el-container> </el-container>
</el-container> </el-container>
</template> </template>
<style lang="less"> <script>
export default {
name: 'layout',
data() {
return {
menus: [
{ name: 'ONE', title: 'SHOW-ONE-LIST', subs: [] },
{ name: 'TWO', title: 'SHOW-TWO-LIST', subs: [] },
{ name: 'THR', title: 'SHOW-THR-LIST', subs: [] },
{ name: 'FOR', title: 'SHOW-FOR-LIST', subs: [] },
{ name: 'FIV', title: 'SHOW-FOR-LIST', subs: [] },
{ name: 'SIX', title: 'SHOW-FOR-LIST', subs: [] },
{ name: 'SEN', title: 'SHOW-FOR-LIST', subs: [] },
{ name: 'SIX', title: 'SHOW-FOR-LIST', subs: [] },
{ name: 'EVN', title: 'SHOW-FOR-LIST', subs: [] },
{ name: 'TEN', title: 'SHOW-FOR-LIST', subs: [] },
{ name: '111', title: 'SHOW-FOR-LIST', subs: [] },
{ name: '122', title: 'SHOW-FOR-LIST', subs: [] },
{ name: '133', title: 'SHOW-FOR-LIST', subs: [] },
{ name: '144', title: 'SHOW-FOR-LIST', subs: [] },
{ name: '155', title: 'SHOW-FOR-LIST', subs: [] },
{ name: '166', title: 'SHOW-FOR-LIST', subs: [] },
{ name: '177', title: 'SHOW-FOR-LIST', subs: [] },
{ name: '188', title: 'SHOW-FOR-LIST', subs: [] },
{ name: '199', title: 'SHOW-FOR-LIST', subs: [] },
]
}
}
}
</script>
html, body {
<style lang="less">
html,
body {
margin: 0; margin: 0;
height: 100%; height: 100%;
padding: 0; padding: 0;
display: block; display: block;
} }
body > .el-container { body>.el-container {
height: 100%; height: 100%;
> .el-header { >.el-header {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -124,7 +151,10 @@ body > .el-container {
padding: 0; padding: 0;
font-weight: bold; font-weight: bold;
&:hover, &:active, &:focus, &.is-active { &:hover,
&:active,
&:focus,
&.is-active {
color: #FFF !important; color: #FFF !important;
background: rgba(0, 0, 0, 0) !important; background: rgba(0, 0, 0, 0) !important;
} }
@ -162,10 +192,10 @@ body > .el-container {
} }
} }
> .el-container { >.el-container {
height: 1px; height: 1px;
> .el-aside { >.el-aside {
z-index: 99; z-index: 99;
background: #53a8ff; background: #53a8ff;
--el-aside-width: 280px; --el-aside-width: 280px;
@ -200,9 +230,11 @@ body > .el-container {
.el-tabs__item { .el-tabs__item {
color: #FFF; color: #FFF;
display: flex;
height: 58px !important; height: 58px !important;
line-height: 58px !important; line-height: 58px !important;
text-align: center !important; text-align: center !important;
justify-content: center;
&.is-active { &.is-active {
color: #333; color: #333;
@ -236,34 +268,34 @@ body > .el-container {
} }
} }
> .el-container { >.el-container {
> .el-main { >.el-main {
padding: 0; padding: 0;
background: #EFEFEF; background: #EFEFEF;
> .el-container { >.el-container {
height: 100%; height: 100%;
> .el-header { >.el-header {
z-index: 99; z-index: 99;
background: white; background: white;
line-height: 60px; line-height: 60px;
box-shadow: 0 0 6px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 6px 0 rgb(0 0 0 / 20%);
} }
> .el-main { >.el-main {
height: 1px; height: 1px;
z-index: 88; z-index: 88;
--el-main-padding: 0; --el-main-padding: 0;
> .el-scrollbar { >.el-scrollbar {
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
> .el-scrollbar__wrap { >.el-scrollbar__wrap {
border-radius: 5px; border-radius: 5px;
> .el-scrollbar__view { >.el-scrollbar__view {
margin: 15px; margin: 15px;
padding: 20px; padding: 20px;
background: #FFF; background: #FFF;
@ -276,7 +308,7 @@ body > .el-container {
} }
} }
> .el-footer { >.el-footer {
color: #333; color: #333;
z-index: 99; z-index: 99;
box-shadow: 0 0 6px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 6px 0 rgb(0 0 0 / 20%);
@ -288,37 +320,3 @@ body > .el-container {
} }
} }
</style> </style>
<script>
export default {
name: 'layout',
data() {
return {
menus: [
{name: 'ONE', title: 'SHOW-ONE-LIST', subs: []},
{name: 'TWO', title: 'SHOW-TWO-LIST', subs: []},
{name: 'THR', title: 'SHOW-THR-LIST', subs: []},
{name: 'FOR', title: 'SHOW-FOR-LIST', subs: []},
{name: 'FIV', title: 'SHOW-FOR-LIST', subs: []},
{name: 'SIX', title: 'SHOW-FOR-LIST', subs: []},
{name: 'SEN', title: 'SHOW-FOR-LIST', subs: []},
{name: 'SIX', title: 'SHOW-FOR-LIST', subs: []},
{name: 'EVN', title: 'SHOW-FOR-LIST', subs: []},
{name: 'TEN', title: 'SHOW-FOR-LIST', subs: []},
{name: '111', title: 'SHOW-FOR-LIST', subs: []},
{name: '122', title: 'SHOW-FOR-LIST', subs: []},
{name: '133', title: 'SHOW-FOR-LIST', subs: []},
{name: '144', title: 'SHOW-FOR-LIST', subs: []},
{name: '155', title: 'SHOW-FOR-LIST', subs: []},
{name: '166', title: 'SHOW-FOR-LIST', subs: []},
{name: '177', title: 'SHOW-FOR-LIST', subs: []},
{name: '188', title: 'SHOW-FOR-LIST', subs: []},
{name: '199', title: 'SHOW-FOR-LIST', subs: []},
]
}
},
created() {
let app = this;
}
}
</script>

6
static/template/pages/thr.vue
View File

@ -28,9 +28,9 @@
</el-form> </el-form>
<el-table :data="tableData" border style="width:100%"> <el-table :data="tableData" border style="width:100%">
<el-table-column prop="date" label="Date" width="180"/> <el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180"/> <el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address"/> <el-table-column prop="address" label="Address" />
</el-table> </el-table>
</el-scrollbar> </el-scrollbar>