菜单调整，无用代码删除
This commit is contained in:
parent
067e82de7d
commit
205a8a63f7
@ -1,34 +0,0 @@
|
|||||||
<template>
|
|
||||||
<q-item
|
|
||||||
clickable
|
|
||||||
tag="a"
|
|
||||||
target="_blank"
|
|
||||||
:href="link"
|
|
||||||
>
|
|
||||||
<q-item-section
|
|
||||||
v-if="icon"
|
|
||||||
avatar
|
|
||||||
>
|
|
||||||
<q-icon :name="icon" />
|
|
||||||
</q-item-section>
|
|
||||||
|
|
||||||
<q-item-section>
|
|
||||||
<q-item-label>{{ title }}</q-item-label>
|
|
||||||
<q-item-label caption>{{ caption }}</q-item-label>
|
|
||||||
</q-item-section>
|
|
||||||
</q-item>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
export interface EssentialLinkProps {
|
|
||||||
title: string;
|
|
||||||
caption?: string;
|
|
||||||
link?: string;
|
|
||||||
icon?: string;
|
|
||||||
}
|
|
||||||
withDefaults(defineProps<EssentialLinkProps>(), {
|
|
||||||
caption: '',
|
|
||||||
link: '#',
|
|
||||||
icon: '',
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<p>{{ title }}</p>
|
|
||||||
<ul>
|
|
||||||
<li v-for="todo in todos" :key="todo.id" @click="increment">
|
|
||||||
{{ todo.id }} - {{ todo.content }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
|
|
||||||
<p>Active: {{ active ? 'yes' : 'no' }}</p>
|
|
||||||
<p>Clicks on todos: {{ clickCount }}</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { computed, ref } from 'vue';
|
|
||||||
import { Todo, Meta } from './models';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
title: string;
|
|
||||||
todos?: Todo[];
|
|
||||||
meta: Meta;
|
|
||||||
active: boolean;
|
|
||||||
}
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
|
||||||
todos: () => [],
|
|
||||||
});
|
|
||||||
|
|
||||||
const clickCount = ref(0);
|
|
||||||
function increment() {
|
|
||||||
clickCount.value += 1;
|
|
||||||
return clickCount.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
const todoCount = computed(() => props.todos.length);
|
|
||||||
|
|
||||||
</script>
|
|
||||||
70
src/components/SysMenu.vue
Normal file
70
src/components/SysMenu.vue
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
<template>
|
||||||
|
<q-list bordered separator>
|
||||||
|
<div v-for="(menu, ii) in list" :key="ii">
|
||||||
|
<div v-if="menu.children">
|
||||||
|
<q-expansion-item :icon="menu.icon" :label="menu.label">
|
||||||
|
<q-card>
|
||||||
|
<q-list bordered separator>
|
||||||
|
<q-item
|
||||||
|
v-for="(item, index) in menu.children"
|
||||||
|
:key="index"
|
||||||
|
clickable
|
||||||
|
:to="item.path"
|
||||||
|
exact
|
||||||
|
:inset-level="1"
|
||||||
|
>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<q-icon :name="item.icon"></q-icon>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label>{{ item.label }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</q-list>
|
||||||
|
</q-card>
|
||||||
|
</q-expansion-item>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<q-item clickable :to="menu.path" exact>
|
||||||
|
<q-item-section avatar>
|
||||||
|
<q-icon :name="menu.icon"></q-icon>
|
||||||
|
</q-item-section>
|
||||||
|
<q-item-section>
|
||||||
|
<q-item-label>{{ menu.label }}</q-item-label>
|
||||||
|
</q-item-section>
|
||||||
|
</q-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { reactive } from 'vue';
|
||||||
|
|
||||||
|
const list = reactive([
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
label: '系统管理',
|
||||||
|
icon: 'dataset',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/sysManage/user',
|
||||||
|
label: '用户管理',
|
||||||
|
icon: 'manage_accounts',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
label: '数据管理',
|
||||||
|
icon: 'list_alt',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/dataManage/draft',
|
||||||
|
label: '草稿管理',
|
||||||
|
icon: 'app_registration',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
</script>
|
||||||
@ -1,8 +0,0 @@
|
|||||||
export interface Todo {
|
|
||||||
id: number;
|
|
||||||
content: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Meta {
|
|
||||||
totalCount: number;
|
|
||||||
}
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<q-layout view="lHh Lpr lFf">
|
<q-layout view="hHh Lpr lFf">
|
||||||
<q-header elevated>
|
<q-header elevated>
|
||||||
<q-toolbar>
|
<q-toolbar>
|
||||||
<q-btn
|
<q-btn
|
||||||
@ -11,32 +11,25 @@
|
|||||||
@click="toggleLeftDrawer"
|
@click="toggleLeftDrawer"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<q-toolbar-title>
|
<q-toolbar-title> 西安NCC调度辅助决策系统 </q-toolbar-title>
|
||||||
Quasar App
|
|
||||||
</q-toolbar-title>
|
|
||||||
|
|
||||||
<div>Quasar v{{ $q.version }}</div>
|
<div class="q-gutter-sm row items-center no-wrap">
|
||||||
|
<q-btn
|
||||||
|
round
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
color="white"
|
||||||
|
:icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
|
||||||
|
@click="$q.fullscreen.toggle()"
|
||||||
|
v-if="$q.screen.gt.sm"
|
||||||
|
>
|
||||||
|
</q-btn>
|
||||||
|
</div>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
</q-header>
|
</q-header>
|
||||||
|
|
||||||
<q-drawer
|
<q-drawer v-model="leftDrawerOpen" show-if-above bordered>
|
||||||
v-model="leftDrawerOpen"
|
<sys-menu></sys-menu>
|
||||||
show-if-above
|
|
||||||
bordered
|
|
||||||
>
|
|
||||||
<q-list>
|
|
||||||
<q-item-label
|
|
||||||
header
|
|
||||||
>
|
|
||||||
Essential Links
|
|
||||||
</q-item-label>
|
|
||||||
|
|
||||||
<EssentialLink
|
|
||||||
v-for="link in essentialLinks"
|
|
||||||
:key="link.title"
|
|
||||||
v-bind="link"
|
|
||||||
/>
|
|
||||||
</q-list>
|
|
||||||
</q-drawer>
|
</q-drawer>
|
||||||
|
|
||||||
<q-page-container>
|
<q-page-container>
|
||||||
@ -47,56 +40,11 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import EssentialLink, { EssentialLinkProps } from 'components/EssentialLink.vue';
|
import SysMenu from 'src/components/SysMenu.vue';
|
||||||
|
|
||||||
const essentialLinks: EssentialLinkProps[] = [
|
const leftDrawerOpen = ref(false);
|
||||||
{
|
|
||||||
title: 'Docs',
|
|
||||||
caption: 'quasar.dev',
|
|
||||||
icon: 'school',
|
|
||||||
link: 'https://quasar.dev'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Github',
|
|
||||||
caption: 'github.com/quasarframework',
|
|
||||||
icon: 'code',
|
|
||||||
link: 'https://github.com/quasarframework'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Discord Chat Channel',
|
|
||||||
caption: 'chat.quasar.dev',
|
|
||||||
icon: 'chat',
|
|
||||||
link: 'https://chat.quasar.dev'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Forum',
|
|
||||||
caption: 'forum.quasar.dev',
|
|
||||||
icon: 'record_voice_over',
|
|
||||||
link: 'https://forum.quasar.dev'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Twitter',
|
|
||||||
caption: '@quasarframework',
|
|
||||||
icon: 'rss_feed',
|
|
||||||
link: 'https://twitter.quasar.dev'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Facebook',
|
|
||||||
caption: '@QuasarFramework',
|
|
||||||
icon: 'public',
|
|
||||||
link: 'https://facebook.quasar.dev'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Quasar Awesome',
|
|
||||||
caption: 'Community Quasar projects',
|
|
||||||
icon: 'favorite',
|
|
||||||
link: 'https://awesome.quasar.dev'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const leftDrawerOpen = ref(false)
|
|
||||||
|
|
||||||
function toggleLeftDrawer() {
|
function toggleLeftDrawer() {
|
||||||
leftDrawerOpen.value = !leftDrawerOpen.value
|
leftDrawerOpen.value = !leftDrawerOpen.value;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,42 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<q-page class="row items-center justify-evenly">
|
<q-page class="row items-center justify-evenly">
|
||||||
<example-component
|
<div class="text-center">主界面</div>
|
||||||
title="Example component"
|
|
||||||
active
|
|
||||||
:todos="todos"
|
|
||||||
:meta="meta"
|
|
||||||
></example-component>
|
|
||||||
</q-page>
|
</q-page>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts"></script>
|
||||||
import { Todo, Meta } from 'components/models';
|
|
||||||
import ExampleComponent from 'components/ExampleComponent.vue';
|
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
const todos = ref<Todo[]>([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
content: 'ct1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
content: 'ct2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
content: 'ct3'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
content: 'ct4'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
content: 'ct5'
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
const meta = ref<Meta>({
|
|
||||||
totalCount: 1200
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user