@dt-frames/ui 1.0.3 → 1.0.4

package/src/components/forms/index.less

@@ -0,0 +1,84 @@
+@import '../modal/index.less';
+
+.text-secondary{
+    color: #666;
+}
+
+.suffix-item .suffix {
+    display: inline-flex;
+    padding-left: 6px;
+    margin-top: 1px;
+    line-height: 1;
+    align-items: center;
+}
+
+.form-btns{
+    button{
+        margin-left: 12px;
+    }
+
+    .advanced{
+        margin-left: 8px;
+        .text{
+            margin-right: 5px;
+        }
+        .basic-arrow{
+            margin-left: -8px;
+        }
+    }
+}
+
+.basic-arrow{
+    display: inline-block;
+    cursor: pointer;
+    transform: rotate(0deg);
+    transition: all 0.3s ease 0.1s;
+    transform-origin: center center;
+
+    
+    .dt-icon{
+        vertical-align: middle;
+        color: @primary-color !important;
+    }
+
+    &--active{
+        transform: rotate(180deg);
+    }
+}
+
+.form-btns{
+    .ant-form-item-control-input-content{
+        display: flex;
+        .ant-btn{
+            display: flex;
+            align-items: center;
+        }
+        .ant-btn .dt-icon{
+            font-size: 20px;
+            height: 100%;
+
+            svg{
+                display: block;
+                height: 100%;
+                text-align: center;
+            }
+
+            .preIcon{
+                padding-right: 2px;
+            }
+        }
+
+        .ant-btn-primary .dt-icon svg{
+            color: #fff;
+        }
+    }
+}
+
+.basic-form--compact{
+    .ant-form-item {
+        margin-bottom: 14px !important;
+    }
+}
+
+
+

package/src/components/forms/src/components/formButton.vue

@@ -29,7 +29,7 @@
                 @click="toggleAdvanced">
                 <span class="text">{{ advancedRef ? '收起' : '展开' }}</span>
                 <span :class="getAdvanceClass">
-                    <DtIcon :icon-class="'ic:baseline-arrow-drop-down'" :size="22"></DtIcon>
+                    <DtIcon icon-class="ic:baseline-arrow-drop-down" :size="22"></DtIcon>
                 </span>
             </Button>
             

package/src/components/iframe/index.less

@@ -0,0 +1,3 @@
+.iframe-page{
+    height: 100%;
+}

package/src/components/iframe/index.ts

@@ -1,5 +1,5 @@
-import DtIFrame from './src/index.vue' 
+import DtIframe from './src/index.vue' 
 
 export {
-    DtIFrame
+    DtIframe
 }

package/src/components/index.ts

@@ -7,7 +7,7 @@ import { DtTable, useTable } from './table'
 import { useSource } from './source'
 import { useCurd } from './curd'
 import { export2Excel } from './excel'
-import { DtIFrame } from './iframe'
+import { DtIframe } from './iframe'
 
 const dtComponents = [
     { name: 'dt-base-router', component: DtBaseRouter },
@@ -35,7 +35,7 @@ export {
     DtForm,
     DtTable,
     FormButtons,
-    DtIFrame,
+    DtIframe,
     useForm,
     useTable,
     useSource,

package/src/components/modal/index.less

@@ -0,0 +1,63 @@
+
+// @import 'ant-design-vue/es/modal/style/index.less';
+
+.fullscreen-modal {
+    overflow: hidden;
+
+    .ant-modal {
+        top: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        left: 0 !important;
+        width: 100% !important;
+        height: 100%;
+        padding: 0;
+
+        &-content {
+            height: 100%;
+        }
+    }
+}
+
+.dt-basic-modal-close {
+    display: flex;
+    height: 95%;
+    align-items: center;
+    justify-content: space-around;
+
+    > span {
+        margin-left: 48px;
+        font-size: 16px;
+    }
+
+    &--can-full {
+        margin-right: 15px;
+        > i {
+            padding-right: 15px;
+            width: 40px;
+        }
+    }
+
+    &:not(&--can-full) {
+        > i:nth-child(1) {
+            &:hover {
+                font-weight: 700;
+            }
+        }
+
+        &>i:nth-child(1) {
+            display: inline-block;
+            padding: 10px;
+
+            &:hover {
+                color: @primary-color;
+            }
+        }
+
+        &>i:last-child {
+            &:hover {
+                color: @error-color;
+            }
+        }
+    }
+}

package/src/components/table/index.less

@@ -0,0 +1,162 @@
+.table-striped td {
+    background-color: #fafafa;
+}
+
+.dt-table-header{
+    .dt-table-header-actions{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .dt-table-header-actions__right{
+        display: flex;
+        .dt-icon{
+            margin: 0 5px;
+            cursor: pointer;
+        }
+    }
+}
+
+.column-setting{
+    &__check-item{
+        display: flex;
+        align-items: center;
+        min-width: 100%;
+        padding: 4px 16px 8px 0;
+    }
+    &__popover-title {
+        display: flex;
+    }
+}
+
+.column-setting__cloumn-list {
+    .ant-popover-inner-content{
+        padding: 12px 0 0 0;
+    }
+    .ant-checkbox-group {
+        width: 100%;
+        min-width: 260px;
+    }
+
+    .drag-icon{
+        margin: 0 5px;
+        cursor: move;
+    }
+
+    .ant-checkbox-wrapper{
+        flex: 1;
+    }
+
+    .dt-icon{
+        cursor: pointer;
+        display: flex;
+    }
+
+    .disabled{
+        .dt-icon{
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+    }
+
+    .active{
+        .dt-icon{
+            color: @primary-color !important;
+        }
+    }
+
+    .ant-popover-inner-content {
+        max-height: 400px;
+        overflow-y: auto;
+    }
+}
+
+.dt-table-action-btn{
+    width: 24px;
+    display: inline-block;
+    vertical-align: middle;
+    cursor: pointer;
+    svg{
+        display: flex;
+    }
+}
+
+.ant-table-fixed-left table, .ant-table-fixed-right table{
+    width: min-content;
+}
+
+.ant-table-cell {
+    height: 44px !important;
+    line-height: 24px !important;
+    font-size: 14px !important;
+    padding: 4px 8px !important;
+} 
+
+.ant-table-small{
+    .ant-table-cell {
+        height: 32px !important;
+        line-height: 16px !important;
+        font-size: 12px !important;
+        padding: 2px 8px !important;
+    }
+}
+
+.ant-table-middle{
+    .ant-table-cell {
+        height: 38px !important;
+        line-height: 20px !important;
+        font-size: 13px !important;
+        padding: 4px 8px !important;
+    }  
+}
+
+.dt-action-select{
+    .ant-dropdown-menu-title-content{
+        display: flex;
+        align-items: center;
+        svg{
+            display: block;
+        }
+
+        .dt-icon{
+            padding: 0 8px;
+        }
+    }
+}
+
+
+.dt-table{
+    .ant-table-pagination{
+        margin: 0 !important;
+        padding: 10px 0;
+        border: 1px solid #f0f0f0;
+    }
+    
+    .ant-table-title{
+        padding: 8px 0 !important;
+        border: none !important;
+    }
+
+    .ant-table-resize-handle{
+        right: -7px;
+        .ant-table-resize-handle-line{
+            width: 2px;
+        }
+    }
+
+    .ant-table-body {
+        position: relative;
+        table{
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    }
+
+    .form-btns{
+        button:first-of-type {
+            margin-left: 0;
+        }
+    }
+}

package/src/directives/index.ts

@@ -2,7 +2,6 @@
 import { App } from 'vue'
 import { authMounted } from './permission'
 import { iconMounted } from './icon'
-import '@purge-icons/generated'
 
 
 const dtDirectives = [

package/src/directives/permission.ts

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

package/src/theme/footer/index.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-    import { useMenu, useTheme } from '@dt-frames/core';
+    import { useTheme } from '@dt-frames/core';
     import { LayoutFooter } from 'ant-design-vue';
     import { computed, unref } from 'vue';
 

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

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-    import { ref, watch, watchEffect } from 'vue'
+    import { ref, watchEffect } from 'vue'
     import { Breadcrumb } from 'ant-design-vue'
     import { getBreadCrumb } from '../helper/menu-tree'
     import { useRouter } from 'vue-router';

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

@@ -7,8 +7,6 @@
 
 <script lang="ts" setup>
     import { useFullscreen } from '@vueuse/core';
-    import { DtIcon } from '../../../components/icons'
-    
     const { toggle, isFullscreen } = useFullscreen();
 
 </script>

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

@@ -14,10 +14,9 @@
 
 <script lang="ts" setup>
     import { ref } from 'vue';
-    import { Popover, Tabs, TabPane } from 'ant-design-vue';
+    import { Popover } from 'ant-design-vue';
     import { useHeader } from '@dt-frames/core';
 
-    const activeKey = ref('1');
     const { getShowNotice } = useHeader()
     
 </script>

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

@@ -27,17 +27,17 @@
         </template> 
 
         <div class="userInfo">
-            <Avatar :src="getUserInfo.avatar" :size="28" />
-            <span class="name">{{ getUserInfo.realName }}</span>
+            <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';
+    import { CacheKey, DtCache, useHeader } from '@dt-frames/core';
 
-    const { getUserInfo } = useAuthStore()
+    const getUserInfo = DtCache.getLocal(CacheKey.USER_INFO)
     const { getUserActions } = useHeader()
 
 </script>

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

@@ -1,7 +1,7 @@
 /** =====================================
  *  定义一些菜单操作的方法
  *  =====================================*/
-import { Menus, useAuthStore } from "@dt-frames/core";
+import { CacheKey, DtCache, Menus, useAuthStore } from "@dt-frames/core";
 import { trim } from 'lodash-es'
 
 function deleteChildrenProp( menu: any ) {
@@ -13,8 +13,7 @@ function deleteChildrenProp( menu: any ) {
 
 // 获取当前路由的面包屑
 export function getBreadCrumb(path: string, menus?: Menus[]) {
-    const { getMenus } = useAuthStore()
-    const _menus = menus || getMenus
+    const _menus = menus || DtCache.getLocal(CacheKey.MENUS) || []
 
     let routes: Menus[] = []
 
@@ -45,8 +44,6 @@ export function getBreadCrumb(path: string, menus?: Menus[]) {
 }
 
 export function getFilterMenu( filter: string = '', flag: boolean = false) {
-    const { getMenus } = useAuthStore()
-
     let _menus = [];
 
     if( !trim(filter) && !flag ) return _menus;
@@ -61,7 +58,7 @@ export function getFilterMenu( filter: string = '', flag: boolean = false) {
         } )
     }
 
-    getTargetMenus( getMenus );
+    getTargetMenus( DtCache.getLocal(CacheKey.MENUS) );
 
     return _menus;
 }

package/src/theme/sider/helper/split-menu.ts

@@ -67,8 +67,7 @@ export function useSplitMenu( splitType: Ref<MenuSplitTye> ) {
 
     async function getMenus() {
         if (unref(normalType)) {
-            const { getMenus } = useAuthStore()
-            menusRef.value = getMenus
+            menusRef.value = DtCache.getLocal(CacheKey.MENUS)
             return;
         }
 

package/src/theme/tabs/components/TabContent.vue

@@ -29,7 +29,6 @@
 
 <script lang="ts" setup>
     import { Dropdown, Menu, MenuDivider, MenuItem } from 'ant-design-vue'
-    import { DtIcon } from '../../../components/icons';
     import { useTabDropdown } from '../hooks/useTabDropdown';
 
     const { getDropMenuList, handleContext, handleMenuEvent } = useTabDropdown()

package/src/theme/tabs/index.vue

@@ -30,7 +30,7 @@
     import { Tabs, TabPane } from 'ant-design-vue'
     import { computed, ref, unref, watch } from 'vue'
     import { menuList2Map, RouteReuseStore, useGo, useMultipleTab } from '@dt-frames/core'
-    import { useRouter, Router } from 'vue-router'
+    import { useRouter } from 'vue-router'
     import TabContent from './components/TabContent.vue'
     import TabRedo from './components/TabRedo.vue'
     import { initAffixTabs, useTabsDrag } from './hooks/useMultifyTabs'

package/src/theme/theme.less

@@ -3,7 +3,8 @@
 @import './tabs/index.less';
 @import './footer/index.less';
 @import './transition.less';
-
+@import '../components/icons/index.less';
+@import '../components/container/index.less';
 
 @page-bg-color: #f0f2f5;
 

package/src/theme/theme.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="dt-theme">
+    <div class="dt-theme" v-if="currentRoute.fullPath && getAppConf?.router.unRequireAuthPage.length">
         <ConfigProvider :locale="zhCN">
             <!-- 不需要权限登录 -->
-            <template v-if="currentRoute.meta?.requiresAuth === false">
+            <template v-if="getAppConf?.router.unRequireAuthPage.includes(currentRoute.fullPath)">
                 <router-view></router-view>
             </template>
 
@@ -33,7 +33,7 @@
     import { computed, unref, ref } from 'vue'
     import { useRouter } from 'vue-router'
     import { Layout, ConfigProvider } from 'ant-design-vue'
-    import { useHeader, useMenu, useTheme } from '@dt-frames/core'
+    import { useAppStore, useHeader, useMenu, useTheme } from '@dt-frames/core'
 
     import DtFeature from './feature/index.vue'
     import DtHeader from './header/index.vue'
@@ -57,6 +57,7 @@
     const { getShowFullHeaderRef, getFixed, getHeaderHeight } = useHeader()
     const { getSplit, getShowMenu, getShowSidebar } = useMenu()
     const { getFooter, getShowFooter } = useTheme()
+    const { getAppConf } = useAppStore()
 
     const { height } = unref(getFooter) as any;
 

package/es/assets/data/icon.d.ts

@@ -1,4 +0,0 @@
-export declare const pickIcons: {
-    type: string;
-    icons: string[];
-}[];

package/es/assets/data/icon.ts

@@ -1,69 +0,0 @@
-export const pickIcons = [
-    {
-        type: '操作',
-        icons: [
-            'ic:baseline-3d-rotation',
-            'ic:baseline-abc',
-            'ic:baseline-accessibility',
-            'ic:baseline-accessibility-new',
-            'ic:baseline-accessible',
-            'ic:baseline-accessible-forward',
-            'ic:baseline-account-balance',
-            'ic:baseline-account-balance-wallet',
-            'ic:baseline-account-box',
-            'ic:baseline-account-circle',
-            'ic:baseline-add-card',
-            'ic:baseline-add-shopping-cart',
-            'ic:baseline-add-task',
-            'ic:baseline-add-to-drive',
-            'ic:baseline-addchart',
-            'ic:baseline-admin-panel-settings',
-            'ic:baseline-ads-click',
-            'ic:baseline-alarm',
-            'ic:baseline-alarm-add',
-            'ic:baseline-alarm-off',
-            'ic:baseline-alarm-on',
-            'ic:baseline-all-inbox',
-            'ic:baseline-analytics',
-            'ic:baseline-anchor',
-            'ic:baseline-android',
-            'ic:baseline-announcement',
-            'ic:baseline-api',
-            'ic:baseline-app-blocking',
-            'ic:baseline-app-shortcut',
-            'ic:baseline-arrow-circle-down'
-        ]
-    }, {
-        type: '警告',
-        icons: [
-            'ic:baseline-add-alert',
-            'ic:baseline-auto-delete',
-            'ic:baseline-error',
-            'ic:baseline-error-outline',
-            'ic:baseline-notification-important',
-            'ic:baseline-warning',
-            'ic:baseline-warning-amber',
-            'ic:outline-add-alert',
-            'ic:outline-auto-delete',
-            'ic:outline-error',
-            'ic:outline-error-outline',
-            'ic:outline-notification-important',
-            'ic:outline-warning',
-            'ic:outline-warning-amber',
-            'ic:round-add-alert',
-            'ic:round-auto-delete',
-            'ic:round-error',
-            'ic:round-error-outline',
-            'ic:round-notification-important',
-            'ic:round-warning',
-            'ic:round-warning-amber',
-            'ic:sharp-add-alert',
-            'ic:sharp-auto-delete',
-            'ic:sharp-error',
-            'ic:sharp-error-outline',
-            'ic:sharp-notification-important',
-            'ic:sharp-warning',
-            'ic:sharp-warning-amber'
-        ]
-    }
-]