Skip to content

Commit

Permalink
chore: 引入elementUI,简单做了布局和tree
Browse files Browse the repository at this point in the history
  • Loading branch information
NMTuan committed Jul 12, 2023
1 parent 0327e02 commit 9c827fa
Show file tree
Hide file tree
Showing 18 changed files with 344 additions and 35 deletions.
4 changes: 1 addition & 3 deletions app.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@
* @FilePath: \laf_curd\app.vue
-->
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<NuxtPage />
</template>
<script setup>
import { useConfigStore } from '@/stores/config'
Expand Down
Empty file added assets/scss/common.scss
Empty file.
6 changes: 6 additions & 0 deletions assets/scss/element/dark.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
$bg-color: (
'page': #0a0a0a,
'overlay': #1d1e1f
)
);
26 changes: 26 additions & 0 deletions assets/scss/element/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
$-colors: (
'primary': (
'base': #14b8a6
),
// 'success': (
// 'base': #67c23a
// ),
// 'warning': (
// 'base': #e6a23c
// ),
// 'danger': (
// 'base': #f56c6c
// ),
// 'error': (
// 'base': #f56c6c
// ),
// 'info': (
// 'base': #909399
// )
);

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: $-colors
);

// @use './dark.scss';
140 changes: 140 additions & 0 deletions components/manager/side.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<template>
<div class="">
<el-tree class="tree" :props="defaultProps" @node-click="handleNodeClick" lazy :load="handlerLoad" :indent="24"
highlight-current>
<template #default="{ node, data }">
<div v-if="node.level === 1" class="flex-1 flex items-center justify-between text-base">
<div class="flex items-center" @click="handlerClick(node, data)">
<i class="block i-ri-apps-line mr-2"></i>
{{ data.name }}
</div>
<div>
<i class="block i-ri-refresh-line"></i>
</div>
</div>
<div v-if="node.level === 2" class="flex items-center justify-between text-sm">
<div class="flex items-center" @click="handlerClick(node, data)">
<i class="block i-ri-file-list-line mr-2"></i>
{{ data.name }}
</div>
</div>
</template>
</el-tree>
<!-- {{ appStore.list }} -->
</div>
</template>
<script setup>
const appStore = useAppStore()
const collectionStore = useCollectionStore()
const defaultProps = {
label: 'name',
isLeaf: 'leaf',
'node-icon': (data, a, b) => {
console.log(1, data, a, b)
},
class: 'tree-item'
}
const handleNodeClick = (data) => {
console.log(data)
}
const handlerLoad = (node, resolve) => {
if (node.level === 0) {
appStore.fetch()
.then(res => {
console.log('app fetch', res)
resolve(res.data)
})
} else if (node.level === 1) {
const appid = node.data.appid
collectionStore.fetch(appid)
.then(res => {
res.data.map((item) => {
item.leaf = true
})
resolve(res.data)
})
} else {
resolve([])
}
}
const handlerClick = (node, data) => {
console.log('node', node)
console.log('data', data)
}
// data.value = [
// {
// label: 'Level one 1',
// children: [
// {
// label: 'Level two 1-1',
// children: [
// {
// label: 'Level three 1-1-1',
// },
// ],
// },
// ],
// },
// {
// label: 'Level one 2',
// children: [
// {
// label: 'Level two 2-1',
// children: [
// {
// label: 'Level three 2-1-1',
// },
// ],
// },
// {
// label: 'Level two 2-2',
// children: [
// {
// label: 'Level three 2-2-1',
// },
// ],
// },
// ],
// },
// {
// label: 'Level one 3',
// children: [
// {
// label: 'Level two 3-1',
// children: [
// {
// label: 'Level three 3-1-1',
// },
// ],
// },
// {
// label: 'Level two 3-2',
// children: [
// {
// label: 'Level three 3-2-1',
// },
// ],
// },
// ],
// },
// ]
</script>
<style scoped lang="scss">
.tree {
@apply select-none;
::v-deep {
.tree-item {
// @apply text-base;
.el-tree-node__content {
@apply py-1;
}
}
}
}
</style>
15 changes: 15 additions & 0 deletions components/manager/tmp.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<template>
<p v-for="i in x">
<span v-for="j in y" class="whitespace-nowrap" @click="handler">
{{ i }} | {{ j }}
</span>
</p>
</template>
<script setup>
const x = ref(100)
const y = ref(100)
const handler = () => {
x.value = parseInt(Math.random() * 100)
y.value = parseInt(Math.random() * 100)
}
</script>
24 changes: 24 additions & 0 deletions components/scrollBox.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!--
* @Author: NMTuan
* @Email: NMTuan@qq.com
* @Date: 2023-07-12 14:54:31
* @LastEditTime: 2023-07-12 16:26:16
* @LastEditors: NMTuan
* @Description:
* @FilePath: \laf_curd\components\scrollBox.vue
-->
<template>
<simplebar class="h-full outline-none">
<slot></slot>
</simplebar>
</template>
<script setup>
import simplebar from 'simplebar-vue'
</script>
<style lang="scss" scoped>
::v-deep {
.simplebar-content-wrapper {
@apply outline-none;
}
}
</style>
5 changes: 5 additions & 0 deletions layouts/manager.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<template>
<div class="bg-white">
<slot></slot>
</div>
</template>
26 changes: 23 additions & 3 deletions nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* @Author: NMTuan
* @Email: NMTuan@qq.com
* @Date: 2023-06-30 19:16:42
* @LastEditTime: 2023-07-12 10:40:03
* @LastEditTime: 2023-07-12 14:45:54
* @LastEditors: NMTuan
* @Description:
* @FilePath: \laf_curd\nuxt.config.ts
Expand All @@ -19,7 +19,11 @@ export default defineNuxtConfig({
]
}
},
css: ['@unocss/reset/normalize.css'],
css: [
'@unocss/reset/normalize.css',
'@/assets/scss/common.scss',
'simplebar-vue/dist/simplebar.min.css'
],
modules: ['@unocss/nuxt', '@pinia/nuxt', '@element-plus/nuxt'],
devtools: { enabled: true },
runtimeConfig: {
Expand All @@ -33,5 +37,21 @@ export default defineNuxtConfig({
},
imports: {
dirs: ['stores']
}
},
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/assets/scss/element/index.scss" as element;`
}
}
}
},
elementPlus: {
// icon: 'ElIcon',
importStyle: 'scss'
// themes: ['dark']
},
// spaLoadingTemplate: 'public/loading.html'
spaLoadingTemplate: false
})
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"dependencies": {
"@pinia/nuxt": "^0.4.11",
"laf-client-sdk": "^1.0.0-beta.8",
"pinia": "^2.1.4"
"pinia": "^2.1.4",
"simplebar-vue": "^2.3.3"
}
}
18 changes: 10 additions & 8 deletions pages/app/[appid].vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<template>
<LayoutPanel :title="configStore.appid">
<template #description>
<ApplicationsListFunc :appid="configStore.appid"></ApplicationsListFunc>
</template>
<div class="flex flex-col flex-1">
<NuxtPage></NuxtPage>
</div>
</LayoutPanel>
<NuxtLayout>
<LayoutPanel :title="configStore.appid">
<template #description>
<ApplicationsListFunc :appid="configStore.appid"></ApplicationsListFunc>
</template>
<div class="flex flex-col flex-1">
<NuxtPage></NuxtPage>
</div>
</LayoutPanel>
</NuxtLayout>
</template>
<script setup>
import { useConfigStore } from '@/stores/config';
Expand Down
2 changes: 1 addition & 1 deletion pages/app/[appid]/database.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* @Author: NMTuan
* @Email: NMTuan@qq.com
* @Date: 2023-07-01 18:13:40
* @LastEditTime: 2023-07-11 14:51:32
* @LastEditTime: 2023-07-12 11:20:58
* @LastEditors: NMTuan
* @Description:
* @FilePath: \laf_curd\pages\app\[appid]\database.vue
Expand Down
4 changes: 3 additions & 1 deletion pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,7 @@
* @FilePath: \laf_curd\pages\index.vue
-->
<template>
<ApplicationsList></ApplicationsList>
<NuxtLayout>
<ApplicationsList></ApplicationsList>
</NuxtLayout>
</template>
32 changes: 32 additions & 0 deletions pages/manager.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!--
* @Author: NMTuan
* @Email: NMTuan@qq.com
* @Date: 2023-07-12 10:50:52
* @LastEditTime: 2023-07-12 17:32:36
* @LastEditors: NMTuan
* @Description:
* @FilePath: \laf_curd\pages\manager.vue
-->
<template>
<NuxtLayout name="manager">
<div class="flex h-screen overflow-hidden">
<div class="flex flex-col w-280px flex-shrink-0 bg-gray-200">
<div class="flex-shrink-0">logo</div>
<div class="flex-1 overflow-hidden">
<ScrollBox>
<ManagerSide></ManagerSide>
</ScrollBox>
</div>
</div>
<div class="flex-1">
<div class="flex flex-col h-full">
<div class="flex-shrink-0">header</div>
<div class="flex-1 overflow-hidden">
<ScrollBox>
</ScrollBox>
</div>
</div>
</div>
</div>
</NuxtLayout>
</template>
Loading

0 comments on commit 9c827fa

Please sign in to comment.