@dt-frames/ui 1.0.1 → 1.0.4

package/src/theme/header/components/lang-picker.vue

@@ -0,0 +1,36 @@
+<template>
+    <Popover placement="bottom" v-model:visible="visible" overlayClassName="lacale__popover" trigger="click">
+        <template #content>
+            <ul class="lang">
+               <li v-for="it in localeList" @click="toggleLang(it.event)">
+                   <span v-icon="it.icon"></span>
+                   <span>{{ it.text }}</span>
+                </li> 
+            </ul>
+        </template>
+
+        <span v-icon="'ic:baseline-language'" :fontSize="16"></span>
+    </Popover>
+</template>
+
+
+<script setup lang="ts">
+    import { ref } from 'vue'
+    import { Popover } from 'ant-design-vue'
+    import { DtCache, Language, changeLocale, localeList, CacheKey } from '@dt-frames/core'
+
+    const visible = ref<boolean>(false);
+
+    const props = defineProps({
+        reload: { type: Boolean }
+    })
+
+    function toggleLang( lang: Language ) {
+        visible.value = false;
+
+        if( DtCache.getLocal(CacheKey.LOCALE) !== lang ) {
+            changeLocale(lang);
+            props.reload && location.reload();
+        }
+    }
+</script>

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

@@ -0,0 +1,33 @@
+<template>
+    <div class="dt-logo" :class="getLogoClass">
+        <img src="../../../assets/imgs/logo/logo.png" />
+        <div class="dt-logo__title" v-show="showTitle">
+            {{ title }}
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { computed, unref } from "vue";
+    import { useMenu, useTheme } from "@dt-frames/core"
+
+    const title = 'Ithink-DT 深迪科技';
+    const { getCollapsedShowTitle } = useMenu()
+
+    const props = defineProps({
+        // logo主题
+        theme: { type: String, validator: ( v: string ) => ['light', 'dark'].includes(v) },
+        
+        // 是否显示标题
+        showTitle: { type: Boolean, default: true },
+    });
+
+    // logo 背景颜色修改 logo是否显示标题
+    const getLogoClass = computed(() => {
+        return [
+            'dt-logo',
+            props.theme,
+            { 'collapsed-show-title': unref(getCollapsedShowTitle) }
+        ]
+    })
+</script>

package/src/theme/header/components/menu-search.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="dt-menu-search" v-if="isUseDef">
+        <Popover placement="bottom" overlayClassName="menu_search__popover" trigger="focus" @visibleChange="visibleChange">
+            <template #content>
+                <p v-for="menu in menuList" @click="navigation(menu.url)">{{ menu.label }}</p>
+
+                <div v-if="!menuList.length">
+                    <Empty description="" :imageStyle="{width: '100%'}"/>
+                </div>
+            </template>
+
+            <InputSearch v-model:value="filter" placeholder="搜索..." @input="filterMenu"></InputSearch>
+        </Popover>
+    </div>
+
+    <template v-else>
+        <getShowSearch></getShowSearch>
+    </template>
+   
+</template>
+
+<script setup lang="ts">
+    import { ref, computed } from 'vue';
+    import { Popover,InputSearch, Empty } from 'ant-design-vue'
+    import { useRouter } from 'vue-router'
+    import { getFilterMenu } from '../helper/menu-tree'
+    import { useHeader, isBoolean } from '@dt-frames/core'
+    
+
+    const menuList = ref([]);
+    const router = useRouter()
+    const filter = ref('');
+
+
+    const { getShowSearch } = useHeader()
+
+    const isUseDef = computed(() => {
+        return isBoolean(getShowSearch.value)
+    })
+
+    function visibleChange(e) {
+        if( e ) {
+            filterMenu()
+        } else {
+            filter.value = null
+        }
+    }
+
+    function filterMenu() {
+        menuList.value = getFilterMenu( filter.value, true );
+    }
+
+    function navigation(url: string) {
+        router.push(url);
+
+        setTimeout(() => {
+            filter.value = '';
+            menuList.value = [];
+        });
+    }
+
+</script>

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

@@ -0,0 +1,22 @@
+<template>
+    <Popover trigger="click" overlayClassName="nofify__popover">
+        <template #content>
+            <getShowNotice></getShowNotice>
+        </template>
+
+        <span>
+            <span v-icon="'ant-design:bell-outlined'"></span>
+            <span class="red-dot"></span>
+        </span>
+        
+    </Popover>
+</template>
+
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    import { Popover } from 'ant-design-vue';
+    import { useHeader } from '@dt-frames/core';
+
+    const { getShowNotice } = useHeader()
+    
+</script>

package/src/theme/header/components/setting-theme.vue

@@ -0,0 +1,123 @@
+<template>
+    <Tooltip placement="bottom" title="风格设置">
+        <span v-icon="'ant-design:setting-outlined'" @click="visible = true"></span>
+    </Tooltip>
+
+    <Drawer
+        v-model:visible="visible"
+        title="项目配置"
+        placement="right"
+        width="320"
+    >
+        <Divider>导航栏模式</Divider>
+        <MenuType></MenuType>
+        <Divider>界面显示</Divider>
+        <Feature></Feature>
+        <Divider></Divider>
+        <div class="dt-setting-theme-footer">
+            <Button @click="copy" type="primary" block>拷贝</Button>
+            <Button @click="reset" block>重置</Button>
+        </div>
+
+        <div class="setting-theme-tips">
+            该功能主要实时预览各种布局效果，更多完整配置在 src/core/settings/theme.ts 中设置，在生产环境该布局预览功能将被关闭。
+        </div>
+    </Drawer>
+</template>
+
+<script setup lang="tsx">
+    import { ref, unref, computed } from 'vue'
+    import { useMenu, useHeader, useMultipleTab, useTheme, useThemeStore, copyText } from '@dt-frames/core'
+    import { Tooltip, Drawer, Divider, Button, Modal } from 'ant-design-vue'
+    import { MenuType, Feature } from './theme-drawer' 
+    import { Recordable } from '../../../../../core/es'
+
+    const themeStore = useThemeStore()
+    const { getMenuType, getMenuMode } = useMenu()
+    const {
+        getShowBread,
+        getShowSearch,
+        getShowNotice,
+        getShowFullScreen,
+        getShowLocale
+    } = useHeader()
+    const { getShowMultipleTab } = useMultipleTab()
+    const { getFooter, getContentMode } = useTheme()
+
+    const showFooter = computed(() => unref(getFooter)?.show)
+
+    const visible = ref(false)
+    function getConfig() {
+        return {
+            contentMode: unref(getContentMode),
+            menuOptions: {
+                mode: unref(getMenuMode),
+                type: unref(getMenuType),
+                split: unref(getMenuType) === MenuType.MIX ? true : false,
+            },
+            headOptions: {
+                showBreadCrumb: unref(getShowBread),
+                showSearch: unref(getShowSearch),
+                notice: unref(getShowNotice),
+                showFullScreen: unref(getShowFullScreen),
+                showLocaleSwitch: unref(getShowLocale)
+            },
+            mulTabsOptions: {
+                show: unref(getShowMultipleTab)
+            },
+            footerOptions: {
+                show: unref(showFooter)
+            }
+        }
+    }
+
+    const defaultConfig = getConfig()
+
+    // 拷贝配置项
+    function copy() {
+        const afterUpdateConfig = getConfig()
+        let copyObj: Recordable = {}
+
+        const isDiff = (newVal, oldVal) => newVal !== oldVal ? newVal : null
+        const isSameObj = ( val1, val2 ) => JSON.stringify(val1) === JSON.stringify(val2)
+
+        const getDiff = (target, orgTarget) => {
+            let obj = {}
+            for( let it in target ) {
+                if(isDiff(target[it], orgTarget[it]) !== null) {
+                    obj[it] = target[it]
+                }
+            }
+
+            return obj
+        }
+
+        for( let it in afterUpdateConfig ) {
+            if( !isSameObj(afterUpdateConfig[it], defaultConfig[it]) ) {
+                copyObj[it] = getDiff( afterUpdateConfig[it], defaultConfig[it] )
+            }
+        }
+
+        if( Object.keys(copyObj).length ) {
+            if( copyText(JSON.stringify(copyObj)) ) {
+                Modal.success({
+                    centered: true,
+                    okText: '确定',
+                    title: '操作成功',
+                    content: '复制成功,请到 src/core/settings/theme.ts 中修改配置！'
+                })
+            }
+        } else {
+            Modal.info({
+                centered: true,
+                okText: '确定',
+                title: '拷贝提示',
+                content: '未检测到修改任何配置信息!'
+            })
+        }
+    }
+
+    function reset() {
+        themeStore.initThemeStore( defaultConfig )
+    }
+</script>

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

@@ -0,0 +1,12 @@
+import { ContentMode } from "@dt-frames/core";
+
+export const contentModeOptions = [
+    {
+      value: ContentMode.FULL,
+      label: '流式',
+    },
+    {
+      value: ContentMode.FIXED,
+      label: '定宽',
+    },
+];

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

@@ -0,0 +1,75 @@
+<template>
+    <SwitchItem
+        title="面包屑"
+        :event="HandlerEnum.SHOW_BREADCRUMB"
+        :def="unref(getShowBread)"
+    ></SwitchItem>
+
+    <SwitchItem
+        title="菜单检索"
+        :event="HandlerEnum.SHOW_SEARCH"
+        :def="unref(getShowSearch) ? true : false"
+    ></SwitchItem>
+
+    <SwitchItem
+        title="通知公告"
+        :event="HandlerEnum.SHOW_NOTICY"
+        :def="unref(getShowNotice) ? true : false"
+    ></SwitchItem>
+
+    <SwitchItem
+        title="页面全屏"
+        :event="HandlerEnum.SHOW_FULL_SCREEN"
+        :def="unref(getShowFullScreen)"
+    ></SwitchItem>
+
+    <SwitchItem
+        title="国际化"
+        :event="HandlerEnum.SHOW_LOCAL"
+        :def="unref(getShowLocale)"
+    ></SwitchItem>
+
+    <SwitchItem
+        title="路由复用"
+        :event="HandlerEnum.SHOW_ROUTE_REUSE"
+        :def="unref(getShowMultipleTab)"
+    ></SwitchItem>
+
+    <SwitchItem
+        title="显示底部"
+        :event="HandlerEnum.SHOW_FOOTER"
+        :def="unref(showFooter)"
+    ></SwitchItem>
+
+    <!-- 内容区域宽度 -->
+    <SelectItem
+        title="内容区域宽度"
+        :event="HandlerEnum.CONTENT_MODE"
+        :def="getContentMode"
+        :options="contentModeOptions"
+    ></SelectItem>
+
+</template>
+
+<script lang="ts" setup>
+    import { unref, computed } from 'vue'
+    import { useMultipleTab, useHeader, useTheme } from '@dt-frames/core'
+    import { HandlerEnum } from '../../const'
+    import { contentModeOptions } from './enum'
+    import SwitchItem from './switch-item.vue'
+    import SelectItem from './select-item.vue'
+
+    const {
+        getShowBread,
+        getShowSearch,
+        getShowNotice,
+        getShowFullScreen,
+        getShowLocale
+    } = useHeader()
+
+    const { getShowMultipleTab } = useMultipleTab()
+    const { getFooter, getContentMode } = useTheme()
+
+    const showFooter = computed(() => unref(getFooter)?.show)
+
+</script>

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 { CacheKey, DtCache, useHeader } from '@dt-frames/core';
+
+    const getUserInfo = DtCache.getLocal(CacheKey.USER_INFO)
+    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
+}