@dt-frames/ui 1.0.0

package/src/theme/header/components/theme-drawer/index.ts

@@ -0,0 +1,7 @@
+import MenuType from './menu-type.vue'
+import Feature from './feature.vue'
+
+export {
+    MenuType,
+    Feature
+}

package/src/theme/header/components/theme-drawer/menu-type.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="dt-menu-type__wrap">
+        <template v-for="item in menuTypeList" :key="item.title">
+            <Tooltip :title="item.title" placement="bottom">
+                <div
+                    @click="changeMenuType(item)"
+                    :class="[
+                        'dt-menu-type__item',
+                        `dt-menu-type__item--${ item.type }`,
+                        {
+                            [`dt-menu-type__item--active`]: getMenuType === item.type && getMenuMode === item.mode
+                        }
+                    ]"
+                >
+                    <div class="dt-sidebar-menu-type"></div>
+                </div>
+            </Tooltip>
+        </template>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { unref, ref } from 'vue'
+    import { HandlerEnum, menuTypeList } from '../../const'
+    import { useMenu } from '@dt-frames/core'
+    import { Tooltip } from 'ant-design-vue'
+    import { baseHandler } from '../handler';
+
+    
+    const { getMenuType, getMenuMode } = useMenu()
+    const defMenuType = ref(unref(getMenuType))
+
+    function changeMenuType(item) {
+        // document.getElementsByTagName('html')[0].style.setProperty('--primary',color);
+
+        defMenuType.value = item.type
+
+        baseHandler(HandlerEnum.CHANGE_LAYOUT, item)
+    }
+</script>

package/src/theme/header/components/theme-drawer/select-item.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="dt-feature-item">
+        <span> {{ title }}</span>
+        <Select
+            v-bind="getBindValue"
+            class="select-item"
+            @change="handleChange"
+            :disabled="disabled"
+            size="small"
+            :options="options"
+        />
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { PropType, computed } from 'vue'
+    import { Select } from 'ant-design-vue'
+    import { HandlerEnum } from '../../const'
+    import { baseHandler } from '../handler';
+
+    type OptType = {
+        label: string
+        value: any
+        [key: string]: string | number | boolean
+    }
+
+    const props = defineProps({
+        event: { type: Number as PropType<HandlerEnum> },
+        disabled: { type: Boolean },
+        title: { type: String },
+        def: { type: [String, Number] as PropType<string | number> },
+        initValue: { type: [String, Number] as PropType<string | number> },
+        options: {
+            type: Array as PropType<OptType[]>,
+            default: () => [],
+        }
+    })
+
+    const getBindValue = computed(() => {
+        return props.def ? { value: props.def, defaultValue: props.initValue || props.def } : {};
+    })
+
+    function handleChange(e) {
+        props.event && baseHandler(props.event, e);
+    }
+</script>

package/src/theme/header/components/theme-drawer/switch-item.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="dt-feature-item">
+        <span>{{ props.title }}</span>
+        <Switch
+            v-bind="getBindValue"
+            :disabled="disabled"
+            @change="handleChange"
+            checkedChildren="开"
+            unCheckedChildren="关"
+        ></Switch>
+    </div>
+    
+</template>
+
+<script lang="ts" setup>
+    import { Switch } from 'ant-design-vue'
+    import { computed, PropType } from 'vue';
+    import { HandlerEnum } from '../../const';
+    import { baseHandler } from '../handler';
+
+    const props = defineProps({
+        event: {
+            type: Number as PropType<HandlerEnum>
+        },
+        disabled: { type: Boolean },
+        title: { type: String },
+        def: {
+            type: Boolean,
+        }
+    })
+
+    const getBindValue = computed(() => {
+        return props.def ? { checked: props.def } : {};
+    })
+
+    function handleChange(e) {
+        props.event && baseHandler(props.event, e)
+    }
+</script>

package/src/theme/header/components/theme-drawer/theme-color.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="dt-theme-picker">
+        <template>
+
+        </template>
+    </div>
+    
+</template>
+
+<script lang="ts" setup>
+    import { PropType } from 'vue';
+    import { HandlerEnum } from '../../const';
+
+    const props = defineProps({
+        colorList: {
+            type: Array as PropType<string[]>,
+            default: []
+        },
+        event: {
+            type: Number as PropType<HandlerEnum>
+        },
+        def: {
+            type: String
+        }
+    })
+</script>

package/src/theme/header/components/trigger.vue

@@ -0,0 +1,14 @@
+<template>
+    <div :class="['dt-header-trigger', props.theme]" @click="toggleCollapsed">
+        <span v-if="getCollapsed" v-icon="'ic:baseline-format-indent-increase'"></span>
+        <span v-else v-icon="'ic:baseline-format-indent-decrease'"></span>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { useMenu } from '@dt-frames/core'
+
+    const props = defineProps({ theme: String });
+    const { getCollapsed, toggleCollapsed } = useMenu();
+
+</script>

package/src/theme/header/components/user-info.vue

@@ -0,0 +1,43 @@
+<template>
+    <Popover placement="bottom" overlayClassName="user-info__popover" trigger="click">
+        <template #content>
+            <ul class="user-operate">
+                <li v-for="it in getUserActions" @click="it.handleClick">
+                    <span v-icon="it.icon"></span>
+                    {{ it.label }}
+                </li>
+                <li>
+                    <span v-icon="'mdi:account-cog'"></span>
+                    个人中心
+                </li>
+                <li>
+                    <span v-icon="'ic:baseline-key'"></span>
+                    修改密码
+                </li>
+                <li class="border-bottom"></li>
+                <li>
+                    <span v-icon="'ic:baseline-lock'"></span>
+                    锁定屏幕
+                </li>
+                <li>
+                    <span v-icon="'ant-design:logout-outlined'"></span>
+                    退出系统
+                </li>
+            </ul>
+        </template> 
+
+        <div class="userInfo">
+            <Avatar :src="getUserInfo.avatar" :size="28" />
+            <span class="name">{{ getUserInfo.realName }}</span>
+        </div>
+    </Popover>
+</template>
+
+<script setup lang="ts">
+    import { Popover, Avatar } from 'ant-design-vue';
+    import { useAuthStore, useHeader } from '@dt-frames/core';
+
+    const { getUserInfo } = useAuthStore()
+    const { getUserActions } = useHeader()
+
+</script>

package/src/theme/header/const/index.ts

@@ -0,0 +1,40 @@
+import { MenuMode, MenuType, Theme } from "@dt-frames/core";
+
+export const menuTypeList = [
+    {
+        title: '左侧菜单模式',
+        headTheme: Theme.LIGHT,
+        menuTheme: Theme.DARK,
+        mode: MenuMode.INLINE,
+        type: MenuType.SIDE,
+        split: false
+    },
+    {
+        title: '菜单混合模式',
+        headTheme: Theme.DARK,
+        menuTheme: Theme.LIGHT,
+        mode: MenuMode.INLINE,
+        type: MenuType.MIX,
+        split: true
+    },
+    {
+        title: '顶部菜单模式',
+        headTheme: Theme.DARK,
+        menuTheme: Theme.LIGHT,
+        mode: MenuMode.HORIZONTAL,
+        type: MenuType.TOP_MENU,
+        split: false
+    }
+]
+
+export enum HandlerEnum {
+    CHANGE_LAYOUT,
+    SHOW_BREADCRUMB,
+    SHOW_SEARCH,
+    SHOW_NOTICY,
+    SHOW_FULL_SCREEN,
+    SHOW_LOCAL,
+    SHOW_ROUTE_REUSE,
+    SHOW_FOOTER,
+    CONTENT_MODE
+}

package/src/theme/header/helper/menu-tree.ts

@@ -0,0 +1,67 @@
+/** =====================================
+ *  定义一些菜单操作的方法
+ *  =====================================*/
+import { Menus, useAuthStore } from "@dt-frames/core";
+import { trim } from 'lodash-es'
+
+function deleteChildrenProp( menu: any ) {
+    let obj = { ...menu };
+    delete obj.children;
+
+    return obj;
+}
+
+// 获取当前路由的面包屑
+export function getBreadCrumb(path: string, menus?: Menus[]) {
+    const { getMenus } = useAuthStore()
+    const _menus = menus || getMenus
+
+    let routes: Menus[] = []
+
+    let getParentByPath = ( menu: any, path: string = '' ) => {
+
+        if( menu.children && menu.children.length ) {
+            menu.children.forEach( (subMenu: any) => {
+                subMenu.parentMenus = 
+                    [...menu.parentMenus]
+                    .concat( [ deleteChildrenProp( subMenu ) ] );
+                    
+                getParentByPath( subMenu, path );
+            } )
+        }
+
+        if( menu.url === path ) {
+            routes = menu.parentMenus;
+        }
+    }
+
+    _menus.forEach( (menu: any) => {
+        menu.parentMenus = [ deleteChildrenProp( menu ) ];
+
+        getParentByPath( menu, path );
+    } );
+
+    return routes;
+}
+
+export function getFilterMenu( filter: string = '', flag: boolean = false) {
+    const { getMenus } = useAuthStore()
+
+    let _menus = [];
+
+    if( !trim(filter) && !flag ) return _menus;
+
+    let getTargetMenus = ( menusArr ) => {
+        menusArr.forEach( menu => {
+            if( menu.children && menu.children.length ) {
+                getTargetMenus( menu.children );
+            } else if( menu.label.indexOf( filter ) !== -1 || (flag && !trim(filter))){
+                _menus.push( menu );
+            }
+        } )
+    }
+
+    getTargetMenus( getMenus );
+
+    return _menus;
+}