@hostlink/nuxt-light 0.0.89 → 0.0.91

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "light",
   "configKey": "light",
-  "version": "0.0.89"
+  "version": "0.0.91"
 }

package/dist/runtime/components/l-app-main.vue

@@ -1,7 +1,8 @@
 <script setup>
+import { useLight } from "#imports";
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { useLight, q, getCurrentUser, m, f } from '../';
+import { q, getCurrentUser, m, f } from '../';
 import { ref, computed, reactive, provide, watch } from 'vue';
 import { useRuntimeConfig } from 'nuxt/app';
 
@@ -17,12 +18,6 @@ const quasar = useQuasar();
 quasar.dark.set(false);
 const light = useLight();
 
-const props = defineProps({
-    company: {
-        type: String
-    }
-});
-
 const tt = await q({
     app: ["menus", "viewAsMode", "languages", { i18nMessages: ["name", "value"] }],
     my: ["styles", "language", f('granted_storage:granted', { right: "system.storage" }, [])],
@@ -204,7 +199,7 @@ const storageUsagePercent = computed(() => {
                 <q-btn dense flat round icon="menu" class="q-mr-sm" @click="toggleLeftDrawer" />
 
                 <q-toolbar-title>
-                    {{ company }}
+                    {{ light.getCompany() }}
                 </q-toolbar-title>
 
                 <q-space />
@@ -338,7 +333,7 @@ const storageUsagePercent = computed(() => {
         <q-footer class="bg-white text-grey" bordered>
             <q-item>
                 <q-item-section>
-                    {{ company }} {{ appVersion }} - Copyright 2023 HostLink(HK). Build {{ light.getVersion() }}
+                    {{ light.getCompany() }} {{ appVersion }} - Copyright 2023 HostLink(HK). Build {{ light.getVersion() }}
                 </q-item-section>
             </q-item>
         </q-footer>

package/dist/runtime/components/l-app.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useLight } from "#imports";
 import { useRuntimeConfig } from 'nuxt/app'
 import { setApiUrl } from '@hostlink/light'
 import { Dialog } from 'quasar'
@@ -8,9 +9,11 @@ setApiUrl(config?.public?.apiBase ?? '/api/');
 
 
 let app = null
-
+const light = useLight()
 try {
     app = (await q({ app: ['company', 'companyLogo', 'logged', 'twoFactorAuthentication', 'googleClientId'] })).app;
+    light.setCompany(app.company);
+    light.setCompanyLogo(app.companyLogo);
 } catch (e) {
     Dialog.create({
         title: 'Error',
@@ -27,13 +30,13 @@ try {
     <q-layout v-if="!app.logged">
         <q-page-container class="bg-grey-2" style="color:#1f1f1f">
             <q-page padding>
-                <l-login :company="app.company" :company-logo="app.companyLogo"
-                    :twoFactorAuthentication="app.twoFactorAuthentication" :google-client-id="app.googleClientId"></l-login>
+                <l-login :two-factor-authentication="app.twoFactorAuthentication"
+                    :google-client-id="app.googleClientId"></l-login>
             </q-page>
         </q-page-container>
     </q-layout>
 
-    <l-app-main v-else :company="app.company">
+    <l-app-main v-else>
         <slot></slot>
     </l-app-main>
 </template>

package/dist/runtime/components/l-date-picker.vue

@@ -45,14 +45,21 @@ const localValue = computed({
 
 const rules = [];
 
-if (props.required && !props.range) {
+if (props.required) {
     rules.push((val) => {
         if (!val) {
             return "Required";
         }
+    })
+}
+
+if (!props.range) {
+    rules.push((val) => {
         //check val is YYYY-MM-DD
-        if (!val.match(/^\d{4}-\d{2}-\d{2}$/)) {
-            return "Invalid date format";
+        if (val) {
+            if (!val.match(/^\d{4}-\d{2}-\d{2}$/)) {
+                return "Invalid date format";
+            }
         }
     });
 }
@@ -70,9 +77,11 @@ const attrs = {
     ...useAttrs(),
 }
 
+const mask = props.range ? "####-##-## - ####-##-##" : "####-##-##";
+
 </script>
 <template>
-    <q-input v-bind="attrs" v-model="localValue" :rules="rules" :label="$t(label)" hide-bottom-space>
+    <q-input v-bind="attrs" v-model="localValue" :rules="rules" :label="$t(label)" hide-bottom-space :mask="mask">
         <template v-slot:prepend>
             <q-btn icon="sym_o_event" round dense flat>
                 <q-popup-proxy cover transition-show="scale" transition-hide="scale" ref="popup">

package/dist/runtime/components/l-field.vue

@@ -0,0 +1,8 @@
+<script setup>
+const props = defineProps(['label']);
+</script>
+<template>
+    <q-field :label="$t(props.label ?? '')">
+        <slot></slot>
+    </q-field>
+</template>

package/dist/runtime/components/l-login.vue

@@ -1,19 +1,15 @@
 <script setup>
+import { useLight } from "#imports";
 import { ref, reactive, onMounted } from 'vue'
 import { useQuasar, Notify } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { m, notify } from '../';
 
-import { useRuntimeConfig } from 'nuxt/app';
-
 import { login, webauthnLogin } from '@hostlink/light';
 
-const config = useRuntimeConfig();
-
+const light = useLight();
 
 const props = defineProps({
-  company: String,
-  companyLogo: String,
   twoFactorAuthentication: Boolean,
   googleClientId: String
 })
@@ -178,9 +174,9 @@ onMounted(() => {
 <template>
   <q-card bordered flat style="min-width:400px;max-width: 400px;" class="fixed-center">
     <q-card-section>
-      <q-img :src="companyLogo" class="full-width" />
+      <q-img :src="light.getCompanyLogo()" class="full-width" />
       <div class="text-h6">
-        {{ company }}
+        {{ light.getCompany() }}
       </div>
       <q-form ref="form1">
         <div class="q-gutter-sm">

package/dist/runtime/components/l-menu.vue

@@ -1,11 +1,31 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
-const i18n = useI18n();
+import { ref } from 'vue'
+const props = defineProps(["value", "dense"])
+const menus = ref(null);
 
-defineProps(["value", "dense"])
 
-</script>
+const expansion = ref(null);
+
+const onShowChild = (menu) => {
+    menus.value.forEach((m) => {
+        if (m.value() !== menu) {
+            m.hide()
+        }
+    })
+}
 
+defineExpose({
+    hide: () => {
+        if (expansion.value) {
+            expansion.value.hide();
+        }
+    },
+    value: () => {
+        return props.value;
+    }
+})
+
+</script>
 
 <style scoped>
 .menu-list .q-item {
@@ -19,11 +39,12 @@ defineProps(["value", "dense"])
     color: #fff;
 }
 </style>
-
 <template>
-    <q-expansion-item v-if="value.children?.length > 0" :label="i18n.t(value.label)" :icon="value.icon" :dense="dense">
+    <q-expansion-item v-if="value.children?.length > 0" :label="$t(value.label)" :icon="value.icon" :dense="dense"
+        ref="expansion">
         <q-list class="q-pl-md">
-            <l-menu :value="menu" v-for="menu in value.children" :dense="dense"></l-menu>
+            <l-menu :value="menu" v-for="menu in value.children" :dense="dense" @show="onShowChild(menu)"
+                ref="menus"></l-menu>
         </q-list>
     </q-expansion-item>
     <q-list v-else class="menu-list" :dense="dense">
@@ -32,8 +53,8 @@ defineProps(["value", "dense"])
                 <q-icon :name="value.icon" />
             </q-item-section>
             <q-item-section>
-                <q-item-label v-text="i18n.t(value.label)"></q-item-label>
+                <q-item-label v-text="$t(value.label)"></q-item-label>
             </q-item-section>
         </q-item>
     </q-list>
-</template>
+</template>

package/dist/runtime/components/l-page.vue

@@ -1,11 +1,11 @@
 <script setup>
+import { useHead, useLight } from "#imports";
 import { useRouter, useRoute } from "vue-router"
 import { removeObject, getID } from '../'
-import { useI18n } from 'vue-i18n';
 
-const i18n = useI18n();
 const router = useRouter();
 const route = useRoute();
+const light = useLight();
 
 const props = defineProps({
     type: {
@@ -71,7 +71,12 @@ if (props.addBtn) {
     showAddBtn = true
 }
 
-const title = props.title || route.path.split("/")[1].replace(/([a-z])(?=[A-Z])/g, '$1 ').replace(/([A-Z]*)(?=[A-Z][a-z])/g, '$1 ')
+let title = props.title || route.path.split("/")[1].replace(/([a-z])(?=[A-Z])/g, '$1 ').replace(/([A-Z]*)(?=[A-Z][a-z])/g, '$1 ')
+
+//remove double space
+title = title.replace(/\s\s+/g, ' ');
+//trim title    
+title = title.trim()
 const module = route.path.split("/")[1];
 const onDelete = async () => {
 
@@ -79,6 +84,10 @@ const onDelete = async () => {
         router.push(`/${module}`);
     }
 }
+
+useHead({
+    title: light.getCompany() + " - " + title,
+})
 </script>
 
 <template>
@@ -88,7 +97,7 @@ const onDelete = async () => {
             <l-add-btn v-if="showAddBtn" />
             <l-edit-btn v-if="showEditBtn" />
             <l-delete-btn v-if="showDeleteBtn" @submit="onDelete" />
-            <q-toolbar-title>{{ i18n.t(title) }}</q-toolbar-title>
+            <q-toolbar-title>{{ $t(title) }}</q-toolbar-title>
         </q-toolbar>
 
         <div class="q-gutter-sm q-mb-sm">

package/dist/runtime/components/l-table.vue

@@ -338,7 +338,9 @@ const getFilterValue = () => {
         if (col.searchable) {
             if (filters.value[col.name]) {
 
-                if (col.searchType == "date") {
+                if (col.searchType == "number") {
+                    f[col.name] = filters.value[col.name]
+                } else if (col.searchType == "date") {
                     if (filters.value[col.name].from) {
                         f[col.name] = {
                             between: [filters.value[col.name].from, filters.value[col.name].to]
@@ -479,6 +481,11 @@ const filter = ref('');
                 <q-td v-for="col in props.cols">
                     <template v-if="col.searchable">
 
+                        <template v-if="col.searchType == 'number'">
+                            <q-input dense clearable v-model.number="filters[col.name]" @keydown.enter.prevent="onFilters"
+                                @clear="onFilters" mask="##########"></q-input>
+                        </template>
+
                         <template v-if="col.searchType == 'select'">
                             <q-select dense v-model="filters[col.name]" @update:model-value="onFilters" clearable
                                 :options="col.searchOptions" @clear="onFilters" emit-value />

package/dist/runtime/index.d.ts

@@ -5,6 +5,10 @@ interface Light {
     getStyle: (name: String, defaultValue: any) => any;
     setStyles: (styles: Object) => void;
     getVersion(): string;
+    getCompany(): string;
+    setCompany(company: string): void;
+    getCompanyLogo(): string;
+    setCompanyLogo(logo: string): void;
 }
-export declare function useLight(): Light;
+export declare const useLight: () => Light;
 export * from "./lib";

package/dist/runtime/index.mjs

@@ -1,8 +1,24 @@
 import packageJson from "../../package.json";
 const errors = [];
 let styles = {};
-export function useLight() {
+const app = {
+  company: "",
+  companyLogo: ""
+};
+export const useLight = () => {
   return {
+    setCompany: (company) => {
+      app.company = company;
+    },
+    getCompany: () => {
+      return app.company;
+    },
+    setCompanyLogo: (logo) => {
+      app.companyLogo = logo;
+    },
+    getCompanyLogo: () => {
+      return app.companyLogo;
+    },
     getVersion: () => {
       return packageJson.version;
     },
@@ -28,5 +44,5 @@ export function useLight() {
       styles = s;
     }
   };
-}
+};
 export * from "./lib/index.mjs";

package/dist/runtime/locales/zh-hk.json

@@ -18,6 +18,7 @@
     "System": "系統",
     "SystemBackup": "系統備份",
     "SystemValue": "系統值",
+    "System Value": "系統值",
     "Translate": "翻譯",
     "User": "使用者",
     "Setting": "設定",
@@ -151,5 +152,10 @@
     "Login": "登入",
     "Forget password": "忘記密碼",
     "Password is required": "密碼為必填",
-    "Username is required": "使用者名稱為必填"
+    "Username is required": "使用者名稱為必填",
+    "Export": "匯出",
+    "Event Log": "事件紀錄",
+    "Mail Log": "郵件紀錄",
+    "User Log": "使用者紀錄"
+    
 }

package/dist/runtime/pages/EventLog/index.vue

@@ -1,42 +1,6 @@
 <script setup>
-const columns = [
-    {
-        label: "EventLog ID",
-        name: "eventlog_id",
-        sortable: true,
-        searchable: true,
-    },
-
-    {
-        label: "Class",
-        name: "class",
-        sortable: true,
-        searchable: true,
-    },
-
-    {
-        label: "ID",
-        name: "id",
-        sortable: true,
-        searchable: true,
-    },
-    {
-        label: "Action",
-        name: "action",
-        sortable: true,
-        searchable: true,
-    }, {
-        label: "Created time",
-        name: "created_time",
-        sortable: true,
-        searchable: true,
-    }, {
-        label: "Username",
-        name: "username",
-        sortable: true,
-        searchable: true,
-    }
-]
+import { getModelColumns } from "#imports"
+const columns = getModelColumns('EventLog', ['eventlog_id', 'class', 'id', 'action', 'created_time', 'username'])
 
 </script>
 

package/dist/runtime/pages/MailLog/index.vue

@@ -1,40 +1,41 @@
 <script setup>
-const columns = [
-    {
-        label: "ID",
-        name: "maillog_id",
-        sortable: true,
-        searchable: true,
-    }, {
-        label: "From",
-        name: "from",
-        sortable: true,
-        searchable: true,
-    }, {
-        label: "To",
-        name: "to",
-        sortable: true,
-        searchable: true,
-    },
-    {
-        label: "Subject",
-        name: "subject",
-        sortable: true,
-        searchable: true,
-    },
-    {
-        label: "Created time",
-        name: "created_time",
-        sortable: true,
-        searchable: true,
-        searchType: "date",
-    }
-]
+import { getModelColumns } from "#imports"
+import { ref } from 'vue'
+const columns = getModelColumns("MailLog", ["maillog_id", "from", "to", "subject", "created_time"])
 
+
+columns.push({
+    label: "Content",
+    name: "_act",
+    gqlField: ["body"]
+})
+const show = ref(false)
+const content = ref("")
 </script>
 
 <template>
     <l-page>
-        <l-table @request="$event.loadObjects('MailLog')" :columns="columns" sort-by="maillog_id:desc" />
+        <q-dialog v-model="show" full-width>
+            <l-card>
+                <q-card-section>
+                    <iframe width="100%" height="500px" :srcdoc="content" frameborder="0"></iframe>
+                </q-card-section>
+            </l-card>
+        </q-dialog>
+        <l-table row-key="maillog_id" @request="$event.loadObjects('MailLog')" :columns="columns" sort-by="maillog_id:desc">
+
+            <template #body-cell-_act="props">
+                <q-td :props="props">
+                    <l-btn @click="
+                        content = props.row.body;
+                    show = true" label="Show" icon="sym_o_visibility">
+                    </l-btn>
+
+
+                </q-td>
+
+            </template>
+
+        </l-table>
     </l-page>
 </template>

package/dist/runtime/pages/User/_user_id/update-role.vue

@@ -42,11 +42,10 @@ const submit = async () => {
 <template>
     <l-page>
         <l-form @submit="submit">
-            <q-field label="Roles" stack-label>
+            <l-field label="Roles" stack-label>
                 <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
                 </q-option-group>
-            </q-field>
-
+            </l-field>
         </l-form>
 
     </l-page>

package/dist/runtime/pages/User/add.vue

@@ -58,10 +58,10 @@ roles = roles.map((role) => {
 
                     <l-input label="Default page" v-model="obj.default_page"></l-input>
 
-                    <q-field label="Roles" stack-label>
+                    <l-field label="Roles" stack-label>
                         <q-option-group type="checkbox" :options="roles" v-model="obj.roles" inline>
                         </q-option-group>
-                    </q-field>
+                    </l-field>
                 </l-col>
             </l-row>
         </l-form>

package/dist/runtime/pages/User/profile.vue

@@ -1,6 +1,50 @@
 <script setup>
-import { q } from '../../'
-const my = await q("my", ["user_id", "username", "first_name", "last_name", "email", "phone", "roles", "addr1", "addr2", "addr3", "join_date"])
+import { q, getModelColumns } from '../../'
+import { getGQLFields } from '#imports'
+import { toQuery } from '@hostlink/light';
+
+const { my } = await q(
+    {
+        my: ["user_id", "username", "first_name", "last_name", "email", "phone", "roles", "addr1", "addr2", "addr3", "join_date", {
+            userLog: {
+                __args: {
+                    sort: "userlog_id:desc"
+                },
+                data: {
+                    __args: {
+                        limit: 10
+                    },
+                    ...toQuery(getGQLFields('UserLog', ['login_dt', 'result', "user_agent"]))
+                }
+            },
+            eventLog: {
+                __args: {
+                    sort: "eventlog_id:desc"
+                },
+                data: {
+                    __args: {
+                        limit: 10
+                    },
+                    ...toQuery(getGQLFields('EventLog', ['class', 'id', 'action', "created_time"]))
+                }
+            }
+        }]
+    }
+)
+
+const userlogColumns = getModelColumns('UserLog', ['login_dt', 'result', 'user_agent']);
+//remove all searchable
+userlogColumns.forEach(col => {
+    col.searchable = false;
+})
+
+
+const eventLogCols = getModelColumns('EventLog', ['class', 'action', 'created_time']);
+//remove all searchable
+eventLogCols.forEach(col => {
+    col.searchable = false;
+})
+
 </script>
 <template>
     <l-page title="User profile">
@@ -8,18 +52,32 @@ const my = await q("my", ["user_id", "username", "first_name", "last_name", "ema
             <l-btn icon="sym_o_key" to="update-password" label="Update password" />
             <l-btn icon="sym_o_key" to="two-factor-auth" label="Two factor auth" />
         </template>
-        <l-card>
-            <l-list>
-                <l-item label="Username">{{ my.username }}</l-item>
-                <l-item label="First name">{{ my.first_name }}</l-item>
-                <l-item label="Last name">{{ my.last_name }}</l-item>
-                <l-item label="Email">{{ my.email }}</l-item>
-                <l-item label="Phone">{{ my.phone }}</l-item>
-                <l-item label="Address">{{ my.addr1 }} {{ my.addr2 }} {{ my.addr3 }}</l-item>
-                <l-item label="Join date">{{ my.join_date }}</l-item>
-                <l-item label="Roles">{{ my.roles.join(",") }}</l-item>
-            </l-list>
-        </l-card>
+
+        <div class="q-gutter-md q-mt-md">
+            <l-card>
+                <l-list>
+                    <l-item label="Username">{{ my.username }}</l-item>
+                    <l-item label="First name">{{ my.first_name }}</l-item>
+                    <l-item label="Last name">{{ my.last_name }}</l-item>
+                    <l-item label="Email">{{ my.email }}</l-item>
+                    <l-item label="Phone">{{ my.phone }}</l-item>
+                    <l-item label="Address">{{ my.addr1 }} {{ my.addr2 }} {{ my.addr3 }}</l-item>
+                    <l-item label="Join date">{{ my.join_date }}</l-item>
+                    <l-item label="Roles">{{ my.roles.join(",") }}</l-item>
+                </l-list>
+            </l-card>
+
+            <l-card title="User Log">
+                <l-table :rows="my.userLog.data" :columns="userlogColumns" searchable :rows-per-page-options="[0]">
+                </l-table>
+            </l-card>
+
+            <l-card title="Event Log">
+                <l-table :rows="my.eventLog.data" :columns="eventLogCols" searchable :rows-per-page-options="[0]">
+                </l-table>
+            </l-card>
+        </div>
+
 
     </l-page>
 </template>

package/dist/runtime/plugin.mjs

@@ -12,10 +12,14 @@ import { useLight } from "./index.mjs";
 import TypeUser from "./types/User.mjs";
 import TypeUserLog from "./types/UserLog.mjs";
 import TypeSystemValue from "./types/SystemValue.mjs";
+import TypeMailLog from "./types/MailLog.mjs";
+import TypeEventLog from "./types/EventLog.mjs";
 export default defineNuxtPlugin((nuxtApp) => {
   defineModel("User", TypeUser);
   defineModel("UserLog", TypeUserLog);
   defineModel("SystemValue", TypeSystemValue);
+  defineModel("MailLog", TypeMailLog);
+  defineModel("EventLog", TypeEventLog);
   nuxtApp.vueApp.config.errorHandler = (error) => {
     console.log(error);
     const light = useLight();

package/dist/runtime/types/EventLog.d.ts

@@ -0,0 +1,33 @@
+declare const _default: {
+    eventlog_id: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    class: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    id: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    action: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    created_time: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    username: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+};
+export default _default;

package/dist/runtime/types/EventLog.mjs

@@ -0,0 +1,32 @@
+export default {
+  eventlog_id: {
+    label: "EventLog ID",
+    sortable: true,
+    searchable: true
+  },
+  class: {
+    label: "Class",
+    sortable: true,
+    searchable: true
+  },
+  id: {
+    label: "ID",
+    sortable: true,
+    searchable: true
+  },
+  action: {
+    label: "Action",
+    sortable: true,
+    searchable: true
+  },
+  created_time: {
+    label: "Created time",
+    sortable: true,
+    searchable: true
+  },
+  username: {
+    label: "Username",
+    sortable: true,
+    searchable: true
+  }
+};

package/dist/runtime/types/MailLog.d.ts

@@ -0,0 +1,30 @@
+declare const _default: {
+    maillog_id: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+        searchType: string;
+    };
+    from: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    to: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    subject: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+    };
+    created_time: {
+        label: string;
+        sortable: boolean;
+        searchable: boolean;
+        searchType: string;
+    };
+};
+export default _default;

package/dist/runtime/types/MailLog.mjs

@@ -0,0 +1,29 @@
+export default {
+  maillog_id: {
+    label: "ID",
+    sortable: true,
+    searchable: true,
+    searchType: "number"
+  },
+  from: {
+    label: "From",
+    sortable: true,
+    searchable: true
+  },
+  to: {
+    label: "To",
+    sortable: true,
+    searchable: true
+  },
+  subject: {
+    label: "Subject",
+    sortable: true,
+    searchable: true
+  },
+  created_time: {
+    label: "Created time",
+    sortable: true,
+    searchable: true,
+    searchType: "date"
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hostlink/nuxt-light",
-  "version": "0.0.89",
+  "version": "0.0.91",
   "description": "HostLink Nuxt Light Framework",
   "repository": "@hostlink/nuxt-light",
   "license": "MIT",

package/dist/runtime/system_menus.d.ts

@@ -1,10 +0,0 @@
-declare const _default: {
-    label: string;
-    icon: string;
-    menus: {
-        label: string;
-        link: string;
-        icon: string;
-    }[];
-}[];
-export default _default;

package/dist/runtime/system_menus.mjs

@@ -1,37 +0,0 @@
-export default [
-    {
-        label: "系統管理",
-        icon: "sym_o_settings",
-        menus: [
-            {
-                label: "使用者管理",
-                link: "/User",
-                icon: "sym_o_person"
-            }, {
-                label: "角色管理",
-                link: "/Role",
-                icon: "sym_o_group"
-            }, {
-                label: "權限管理",
-                link: "/Permission",
-                icon: "sym_o_key"
-            }, {
-                label: "系統設定",
-                link: "/Setting",
-                icon: "sym_o_settings"
-            }, {
-                label: "User log",
-                link: "/UserLog",
-                icon: "sym_o_description"
-            }, {
-                label: "Mail log",
-                link: "/MailLog",
-                icon: "sym_o_description"
-            }, {
-                label: "Event log",
-                link: "/EventLog",
-                icon: "sym_o_description"
-            }
-        ]
-    }
-];