@dt-frames/ui 1.0.0 → 1.0.1

package/src/directives/index.ts

@@ -1,26 +0,0 @@
-
-import { App } from 'vue'
-import { authMounted } from './permission'
-import { iconMounted } from './icon'
-
-
-const dtDirectives = [
-    { name: 'auth', directive: authMounted },
-    { name: 'icon', directive: iconMounted },
-];
-
-
-// 初始化所有组件
-export function initDirectives() {
-    return {
-        install(app: App) {
-            dtDirectives.forEach( comp => app.directive(comp.name, {
-                mounted: comp.directive
-            }));
-        }
-    }
-}
-
-
-export * from './permission'
-export * from './icon'

package/src/directives/permission.ts

@@ -1,21 +0,0 @@
-/**
- * 权限控制，不使用传统的通过css隐藏dom元素
- * 使用方法： v-auth="'ADD'"
-*/
-import { useAuthStore } from '@dt-frames/core';
-import type { DirectiveBinding } from 'vue';
-
-
-function hasAuth( el: Element, binding: any ) {
-    const value = binding.value;
-    if (!value) return;
-
-    let { getAuths } = useAuthStore();
-    if(!getAuths.includes( value )) {
-        el.parentNode?.removeChild(el);
-    }
-}
-
-export const authMounted = (el: Element, binding: DirectiveBinding<any>) => {
-    hasAuth(el, binding);
-};

package/src/global.d.ts

@@ -1,8 +0,0 @@
-// 主要解决文件后缀引入后 代码报错的问题
-declare module '*.vue' {
-    import { DefineComponent } from 'vue';
-    const Component: DefineComponent<{}, {}, any>;
-    export default Component;
-}
-
-declare module 'lodash-es';

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from './components'
-export * from './theme'
-export * from './directives'
-

package/src/theme/content/index.vue

@@ -1,37 +0,0 @@
-<template>
-    <div id="dt-layout-content" :class="['dt-layout-content', getLayoutContentMode]" :loading="getPageLoading && getOpenPageLoading">
-        <LayoutContent>
-            <router-view #default="{ Component, route}">
-                <transition :name="getTransitionName(route)">
-                    <keep-alive v-if="!route.meta.hideTab && getCanCache" :include="getCaches">
-                        <component :is="Component" :key="route.path" />
-                    </keep-alive>
-
-                    <component v-else :is="Component" />
-                </transition>
-            </router-view>
-        </LayoutContent>
-    </div>
-</template>
-
-<script setup lang="ts">
-    import { unref, computed } from 'vue';
-    import { LayoutContent } from 'ant-design-vue';
-    import { useTheme, useApp, RouteReuseStore, useMultipleTab } from '@dt-frames/core';
-    import { RouteRecordRaw } from 'vue-router';
-
-    const { getTransitionMode, getOpenPageLoading } = useApp()
-    const { getLayoutContentMode, getPageLoading } = useTheme()
-    const { getCanCache } = useMultipleTab()
-
-    const tabStore = RouteReuseStore()
-
-    // 返回动画name
-    function getTransitionName( route: RouteRecordRaw ): string | undefined {
-        return (route.meta.transitionName || unref(getTransitionMode))  as string;
-    }
-
-    const getCaches = computed((): string[] => {
-        return tabStore.getCachedTabList
-    })
-</script>

package/src/theme/feature/back-top.vue

@@ -1,11 +0,0 @@
-<template>
-    <BackTop v-if="getShowBackToTop" :target="getTarget" :visibilityHeight="300" />
-</template>
-
-<script lang="ts" setup>
-    import { BackTop } from 'ant-design-vue'
-    import { useTheme } from '@dt-frames/core'
-
-    const getTarget = () => document.getElementById('dt-layout-content')
-    const { getShowBackToTop } = useTheme()
-</script>

package/src/theme/feature/index.vue

@@ -1,7 +0,0 @@
-<template>
-    <DtBackTop />
-</template>
-
-<script lang="ts" setup>
-    import DtBackTop from './back-top.vue'
-</script>

package/src/theme/footer/index.less

@@ -1,16 +0,0 @@
-.dt-theme-footer{
-    text-align: center;
-    padding: 0;
-    width: 100%;
-    display: block;
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    z-index: 1;
-    background: #ebeff5;
-    color: #b5b5b5;
-    border-top: 1px solid #e7e7e7;
-    span:first-of-type{
-        padding-right: 10px;
-    }
-}

package/src/theme/footer/index.vue

@@ -1,24 +0,0 @@
-<template>
-    <LayoutFooter class="dt-theme-footer" :style="footerOptions">
-        <span>{{ title }}</span>
-        <span>{{ subTitle }}</span>
-    </LayoutFooter>
-</template>
-
-<script setup lang="ts">
-    import { useMenu, useTheme } from '@dt-frames/core';
-    import { LayoutFooter } from 'ant-design-vue';
-    import { computed, unref } from 'vue';
-
-    const { getFooter } = useTheme()
-    const { title, subTitle, height } = unref(getFooter) as any;
-
-    const footerOptions = computed( () => {
-        return {
-            lineHeight: `${ height }px`,
-            height: `${ height }px`,
-            padding: '0',
-            width: `100%`
-        }
-    } );
-</script>

package/src/theme/header/components/bread-crumb.vue

@@ -1,26 +0,0 @@
-<template>
-    <div class="dt-breadcrumb">
-        <Breadcrumb :routes="routes">
-            <template #itemRender="{ route }">
-                <span>{{ route.label || route.meta?.title }}</span>
-            </template>
-        </Breadcrumb>
-    </div>
-</template>
-
-<script lang="ts" setup>
-    import { ref, watch, watchEffect } from 'vue'
-    import { Breadcrumb } from 'ant-design-vue'
-    import { getBreadCrumb } from '../helper/menu-tree'
-    import { useRouter } from 'vue-router';
-
-    let routes = ref([]);
-    const { currentRoute } = useRouter();
-
-    watchEffect( () => {
-        if (currentRoute.value.path === '/') return
-
-        routes.value = getBreadCrumb( currentRoute.value.path );
-    });
-    
-</script>

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

@@ -1,14 +0,0 @@
-<template>
-    <span class="icon" @click="toggle">
-        <span v-if="!isFullscreen" v-icon="'ic:baseline-fullscreen'"></span>
-        <span v-else v-icon="'ic:baseline-fullscreen-exit'"></span>
-    </span>
-</template>
-
-<script lang="ts" setup>
-    import { useFullscreen } from '@vueuse/core';
-    import { DtIcon } from '../../../components/icons'
-    
-    const { toggle, isFullscreen } = useFullscreen();
-
-</script>

package/src/theme/header/components/handler.ts

@@ -1,81 +0,0 @@
-import { useThemeStore, ThemeOptions } from "@dt-frames/core";
-import { HandlerEnum } from "../const";
-
-export function baseHandler(event: HandlerEnum, value: any) {
-    const themeStore = useThemeStore()
-    const config = handler(event, value)
-    themeStore.initThemeStore(config)
-}
-
-function handler(event: HandlerEnum, value: any): ThemeOptions {
-    switch(event) {
-        case HandlerEnum.CHANGE_LAYOUT: 
-            const { mode, type, split, headTheme, menuTheme } = value
-            return {
-                headOptions: {
-                    theme: headTheme
-                },
-                menuOptions: {
-                    mode, 
-                    type, 
-                    split,
-                    theme: menuTheme,
-                    show: true
-                }
-            }
-        
-        case HandlerEnum.SHOW_BREADCRUMB:
-            return {
-                headOptions: {
-                    showBreadCrumb: value
-                }
-            }
-            
-        case HandlerEnum.SHOW_SEARCH:
-            return {
-                headOptions: {
-                    showSearch: value
-                }
-            }
-
-        case HandlerEnum.SHOW_NOTICY:
-            return {
-                headOptions: {
-                    notice: value
-                }
-            }
-
-        case HandlerEnum.SHOW_FULL_SCREEN:
-            return {
-                headOptions: {
-                    showFullScreen: value
-                }
-            }
-
-        case HandlerEnum.SHOW_LOCAL:
-            return {
-                headOptions: {
-                    showLocaleSwitch :value
-                }
-            }
-            
-        case HandlerEnum.SHOW_ROUTE_REUSE:
-            return {
-                routeReuse: {
-                    show: value
-                }
-            }
-            
-        case HandlerEnum.SHOW_FOOTER:
-            return {
-                footerOptions: {
-                    show: value
-                }
-            }
-
-        case HandlerEnum.CONTENT_MODE:
-            return {
-                contentMode: value
-            }
-    }
-}

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

@@ -1,21 +0,0 @@
-import DtLogo from './logo.vue'
-import DtTrigger from './trigger.vue'
-import DtBreadCrumb from './bread-crumb.vue'
-import Notify from './notify.vue'
-import FullScreen from './fullscreen.vue'
-import UserInfo from './user-info.vue'
-import LangPicker from './lang-picker.vue'
-import SettingTheme from './setting-theme.vue'
-import MenuSearch from './menu-search.vue'
-
-export {
-    DtLogo,
-    DtTrigger,
-    DtBreadCrumb,
-    Notify,
-    FullScreen,
-    UserInfo,
-    LangPicker,
-    SettingTheme,
-    MenuSearch
-}

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

@@ -1,36 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-<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

@@ -1,62 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-<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, Tabs, TabPane } from 'ant-design-vue';
-    import { useHeader } from '@dt-frames/core';
-
-    const activeKey = ref('1');
-    const { getShowNotice } = useHeader()
-    
-</script>

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

@@ -1,123 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-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

@@ -1,75 +0,0 @@
-<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>