@dt-frames/ui 1.0.1 → 1.0.4

package/src/components/table/src/props.ts

@@ -0,0 +1,152 @@
+import { Recordable } from '@dt-frames/core'
+import { PropType } from 'vue'
+import { DEFAULT_SORT_FN } from './const'
+import type { PaginationProps } from 'ant-design-vue/lib/pagination'
+import type { TableRowSelection } from 'ant-design-vue/lib/table/interface'
+import { ActionType, BasicColumn, BtnsType, SizeType } from './types/table.type'
+import { ButtonProps } from '../../forms'
+import { DownloadType } from './types/tableHeader.type'
+
+export const TableProps = {
+    // 点击行是否选中数据
+    clickRowSelect: { type: Boolean, default: false },
+
+    // 表格设置
+    tableSetting: {type: Array, default: ['redo', 'size', 'setting', 'fullscreen']},
+
+    // 是否显示斑马条纹
+    striped: { type: Boolean, default: true },
+
+    // 是否支持拖拽排序
+    canColDrag: { type: Boolean, default: true },
+
+    // 是否支持拖拽改变列宽
+    resizable: { type: Boolean, default: true },
+    // 最小拖拽宽度
+    minWidth: { type: Number },
+    // 最大拖拽宽度
+    maxWidth: { type: Number },
+
+    // 是否需要虚拟滚动
+    virtual: { type: Boolean, default: true },
+
+    // 排序
+    sortFn: { type: Function, default: DEFAULT_SORT_FN },
+
+    // 过滤
+    filterFn: {
+        type: Function as PropType<(data: Partial<Recordable<string[]>>) => any>,
+        default: (data: Partial<Recordable<string[]>>) => {
+            return data;
+        }
+    },
+
+    // 数据的key值
+    rowKey: {
+        type: String,
+        default: 'id'
+    },
+
+    // 默认的排序
+    defSort: { type: Object as PropType<Recordable>, default: null },
+
+    // 列 
+    columns: { type: [Array] as PropType<BasicColumn[]>, default: () => [] },
+
+    // 超出部分是否已省略号显示
+    ellipsis: { type: Boolean, default: true },
+
+    // 需要渲染的数据
+    dataSource: { type: Array as PropType<Recordable[]>, default: null },
+
+    // 表格是否需要边框
+    bordered: { type: Boolean, default: true },
+
+    // 分页数据
+    pagination: {
+        type: [Object, Boolean] as PropType<PaginationProps | boolean>,
+        default: {}
+    },
+
+    // 是否处于加载中
+    loading: { type: Boolean, default: false },
+
+    // 动态定义行class
+    rowClassName: { type: Function as PropType<(record: any, index: number) => string> },
+
+    // 定义何时出现滚动条
+    scroll: {
+        type: Object as PropType<{ x?: number | true; y?: number }>,
+        default: {},
+    },
+
+    size: {
+        type: String as PropType<SizeType>,
+        default: 'default',
+    },
+
+    // 分页、排序、筛选变化时触发
+    onTableChange: {
+        type: Function,
+        default: () => {}
+    },
+
+    // 下载
+    onDownload: {
+        type: Function,
+        default: (excelData: DownloadType) => {}
+    },
+
+    // 选中的行数据
+    rowSelection: {
+        type: Object as PropType<TableRowSelection | null>,
+        default: null,
+    },
+
+    /**
+     * 设置行属性
+     * 用法: 
+     * ( record ) => { 
+            onClick: (event) => {},
+            onDblclick: (event) => {},
+            onContextmenu: (event) => {},
+            onMouseenter: (event) => {},  // 鼠标移入行
+            onMouseleave: (event) => {}
+     * }
+    */
+    customRow: {
+        type: Function as PropType<( record, index ) => void>,
+        default: () => {}
+    },
+
+    childrenColumnName: {
+        type: String,
+        default: 'children'
+    },
+
+    showIndexColumn: {
+        type: Boolean,
+        default: false
+    },
+
+    indexColumnProps: {
+        type: [Array] as PropType<BasicColumn[]>, 
+        default: () => [],
+    },
+
+    isTreeTable: {
+        type: Boolean,
+        default: false
+    },
+
+    // 操作栏
+    operations: {
+        type: Object as PropType<ActionType | BtnsType[]>,
+    },
+
+    // 工具栏按钮
+    toolbar: {
+        type: Array as PropType<ButtonProps[]>
+    }
+
+}

package/src/components/table/src/types/table.type.ts

@@ -0,0 +1,133 @@
+import { DictType, Recordable } from '@dt-frames/core'
+import type { ColumnProps } from 'ant-design-vue/lib/table'
+import type { TableRowSelection as ITableRowSelection } from 'ant-design-vue/lib/table/interface'
+import { ExtractPropTypes, VNode, DefineComponent } from 'vue'
+import { TableProps } from '../props'
+import { SetColumnsParams } from './tableHeader.type'
+
+export interface TableRowSelection<T = any> extends ITableRowSelection {
+    // table选择发生改变
+    onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => any
+
+    // 触发一行选择
+    onSelect?: (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any
+
+    // 全选
+    onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => any
+
+    // 反选
+    onSelectInvert?: (selectedRows: string[] | number[]) => any
+}
+
+export type TableSetting = {
+    // 表格刷新
+    redo?: boolean
+    // 表格的尺寸
+    size?: boolean
+    // 是否显示列控制
+    setting?: boolean
+    // 全屏按钮
+    fullscreen?: boolean
+}
+
+export type ColumnChangeParam = {
+    dataIndex: string
+    fixed: boolean | 'left' | 'right' | undefined
+    visible: boolean
+}
+
+export type BasicTableProps = ExtractPropTypes<typeof TableProps> & {
+    onColumnsChange?: (data: ColumnChangeParam[]) => void
+}
+
+export type SizeType = 'default' | 'middle' | 'small'
+
+export type SorterResult = {
+    column: ColumnProps
+    order: 'ascend' | 'descend'
+    field: string
+    columnKey: string
+}
+
+export type CellFormat =
+  | ((text: string, record: Recordable, index: number) => any)
+  | { dict: DictType }
+  | { number: string }
+  | { date: string }
+  | { percent: string }
+  | { [key: string]: Recordable }
+  | VNode 
+  | JSX.Element
+
+export type BtnsType = {
+    title?: string
+    icon?: string
+    auth?: string
+    color?: string
+    type?: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default'
+    size?: 'large' | 'middle' | 'small'
+    loading?: boolean
+    disabled?: boolean
+    ifShow?: boolean | ((column: BasicColumn) => boolean)
+    action?: (data: { 
+        row: Recordable,
+        index: number
+    }) => void
+}
+
+
+export type ActionType = {
+    title?: string
+    // 操作栏宽度
+    width?: number | string
+    // 图标是否展开
+    expand?: boolean
+    // 操作栏固定位置
+    fixed?: 'left' | 'right' | 'auto'
+    // 按钮设置
+    btns?: BtnsType[]
+}
+
+
+export interface BasicColumn extends ColumnProps {
+    // 子元素
+    children?: BasicColumn[]
+    
+    // 默认是否显示
+    defaultHidden?: boolean;
+
+    // 业务控制是否显示
+    ifShow?: boolean | ((row: Recordable) => boolean)
+
+    // 列标识
+    flag?: 'INDEX' | 'DEFAULT' | 'CHECKBOX' | 'RADIO' | 'ACTION'
+
+    // 过滤器转换
+    render?: CellFormat
+
+    edit?: boolean
+    editRow?: boolean
+    // editable?: boolean
+
+    // 是否显示序号列
+    showIndexColumn?: boolean
+
+    // 是否展开按钮组 只针对ACTION
+    expand?: boolean
+
+}
+
+
+// table相关的操作
+export type TableActionType = {
+    setProps: (props: Partial<BasicTableProps>) => void
+    setLoading: ( loading: boolean ) => void
+    getColumns: (opt?: SetColumnsParams) => BasicColumn[]
+    setColumns: (columns: BasicColumn[] | string[]) => void
+    getSize: () => SizeType
+    getRowSelection: () => TableRowSelection<Recordable>
+    getCacheColumns: () => BasicColumn[]
+    setCacheColumnsByField?: (dataIndex: string | undefined, value: BasicColumn) => void
+    getSelectRows: ( ) => void
+    getSelectRowKeys: ( ) => void
+}

package/src/components/table/src/types/tableHeader.type.ts

@@ -0,0 +1,27 @@
+import { Recordable } from "@dt-frames/core"
+import { BasicColumn } from "./table.type"
+
+export type ColumnStateType = {
+    checkAll: boolean
+    isInit?: boolean
+    checkedList: string[]
+    defaultCheckList: string[]
+}
+
+export type ColumnOptionsType = {
+    label: string
+    value: string
+    fixed?: boolean | 'left' | 'right'
+}
+
+export type SetColumnsParams = {
+    ignoreIndex?: boolean
+    ignoreAction?: boolean
+    sort?: boolean
+}
+
+export type DownloadType = {
+    type: 'current' | 'select' | 'all',
+    columns?: BasicColumn[],
+    rows?: Recordable<any>[]
+}

package/src/directives/icon.ts

@@ -0,0 +1,36 @@
+/**
+ * 字体图标指令，目前支持awesome、ant-design以及assets/icons/下的svg图标
+ * 使用方法: <span v-icon="'fa fa-user'" :color="'red'" :fontSize="12"></span>
+ * 
+ * 动态设置ant-design 图标
+ * https://blog.csdn.net/weixin_45803990/article/details/116270387
+ */
+import { DirectiveBinding, h, render, VNode } from "vue";
+import { Nullable } from '@dt-frames/core'
+import { DtIcon } from "../components";
+
+
+function setIconHTML( el: Element, binding: any, props: any ) {
+    const value = binding.value;
+    if (!value) return;
+
+    let vm: Nullable<VNode> = null;
+
+    vm = h(DtIcon, {
+        iconClass: value,
+        size: props?.size,
+        color: props?.color || null,
+        style: {
+            display: 'block'
+        }
+    });
+
+    if( vm ) {
+        render(vm, document.createElement('div'));
+        el.appendChild(vm.el as HTMLElement);
+    }
+ }
+ 
+export const iconMounted = (el: Element, binding: DirectiveBinding<any>, props: any) => {
+    setIconHTML(el, binding, props.props);
+};

package/src/directives/index.ts

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

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

package/src/global.d.ts

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

package/src/index.ts

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

package/src/theme/content/index.vue

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

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

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

package/src/theme/footer/index.less

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

@@ -0,0 +1,24 @@
+<template>
+    <LayoutFooter class="dt-theme-footer" :style="footerOptions">
+        <span>{{ title }}</span>
+        <span>{{ subTitle }}</span>
+    </LayoutFooter>
+</template>
+
+<script setup lang="ts">
+    import { 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

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

@@ -0,0 +1,12 @@
+<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';
+    const { toggle, isFullscreen } = useFullscreen();
+
+</script>

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

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

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