xframelib

xframelib

XFramelib Front-End Basic Library

The core implementation is an enterprise-level micro-front-end architecture based on a Widget mechanism. It accumulates basic functions and components independent of UI interface libraries, improves the stability and high reusability of the basic code, and adheres to the philosophy of originating from and serving projects.

README中文.md | 更新日志-中文

Main Functions:

• System configuration Sysconfig.js, corresponding Global.Config object

• LayoutManager: Implements the Widget scheduling mechanism

• Global.EventBus: Public event bus

• UI Components:

  • LayoutContainer (Layout container)

  • ScaleContainer (Scale container)

  • XWindow (Window-like component)

  • SplitPanes (Page area splitting panel)

  • Popover (Floating panel)

  • RouterTransition related components

• Backend Service Calls:

  • HTTP Web Requests: Axios encapsulation implementation Global.Axios, AxiosHelper{get, post, requestPost, requestGet, getData, requestPostBody}

  • Hprose Service: Hprose Proxy method to call the backend hprose service

• Common Basic Functions:

  • H5Tool ：General functions

  • IsTool ：type detection tool (number, string, object, array, function, etc.)

  • ValidateTool： verification tool (ID card, mobile phone number, IP address, email, password strength judgment, URL, license plate number, etc.)

  • jQuery：jquery tools (hasClass, addClass, removeClass, toggleClass, setCssProperty)

  • Compression and decompression tools: ZipTool and GzipTool

  • Caching functions: StorageHelper for operating local cache objects, WebCacheTool for front-end caching

  • XXTEA encryption and decryption algorithm

• Commands: (Register and load commands using setupDirectives)

  • v-wow tiled scrolling display

  • v-media adaptive style

  • v-drag draggable

  • v-repeatClick to avoid repeated clicks

  • v-dc double-click command

• File upload and download:

  • BigFileDownload: large file download

  • FileUpload: large file upload

  • FileDownload Encapsulated for regular file downloads, including { Download, SaveAs, JsonDownload, HttpDownload, DownloadByUrl }

• WebWorkers:

  • iconvWorker: Text encoding/decoding

  • webCacheWorker: Front-end caching layer

  • xmathWorker: General mathematical calculations, large front-end images, tiled loading

• NavigatorPlugin ：Browser plugin(provides general browser global method encapsulation)

Usage

pnpm add xframelib

or npm i xframelib

Globally import library styles:

import 'xframelib/dist/index.css';

• Open source application example: Front-end development template vue-widget-template

https://github.com/zorrowm/vue-widget-template

A development template fully based on XFramelib and Widget concepts

• main.ts file

In Typescript:

import { createApp } from 'vue';
import App from './App.vue';
//added by template
import { setupRouter } from './router/index';
import {setupGlobDirectives} from './directives/index';
import { init, Global } from 'xframelib';
import 'xframelib/dist/index.css';
import { getSystemPKG, getSystemID } from '@/utils/sysTool';
import { createPinia } from 'pinia';
import { message } from 'ant-design-vue';
import {Icon} from '@iconify/vue';
//dev phase opens, build logs out
import 'ant-design-vue/dist/antd.css';


message.config({ 
top: `100px`, 
duration: 1, maxCount: 3

});
// Bind messages and initialize xframe

// System ID, unique identifier

const sysID = getSystemID();

// Group name, project name

const sysGroup = getSystemPKG().name;

init(message, sysID, sysGroup);

// Create a pinia instance

const pinia = createPinia();

const app = createApp(App);

// Mount to the Vue root instance

app.use(pinia);

// Define v-drag commands

setupGlobDirectives(app);

setupRouter(app);

// Register global components

app.component('Icon', Icon);

app.mount('#app');

• Quasar boot usage example

import { boot } from 'quasar/wrappers';
import { addAPIProvider, Icon } from '@iconify/vue';
import { Dropdown } from 'floating-vue';
import { EmitLoadingInfo } from 'src/events/index';
import { autoRefresh } from 'src/utils/autoUpdate';
import { message } from 'src/utils/MessageNotify';

// Encapsulated message notification

import { getSystemID, getSystemPKG } from 'src/utils/sysTool';

import { Global, init } from 'xframelib';

function preInit() {

// System ID, unique identifier

const sysID = getSystemID();

 // Group name, project name

const sysGroup = getSystemPKG().name;

init(message, sysID, sysGroup);

 // Mounting progress notification method

Global.Loading = EmitLoadingInfo;

 // Register your own IconAPIProvider

if (Global.Config?.ServiceURL.IconServiceURL)

addAPIProvider('', {

resources: [Global.Config?.ServiceURL.IconServiceURL]

});

else {

//Offline icon usage: Enabled, IconServiceURL configuration is empty

import('../components/IconOffline').then((it) => {

it.default();

});

}
}
export default boot(({ app }) => {

EmitLoadingInfo('XFramelib library');

//Initialize Xframelib

preInit();

//Start hot update monitoring

if (import.meta.env.DEV) autoRefresh();

// Create pinia instance — 20240221 is not needed here, it is attached in src/stores/index.ts

// Register global component
app.component('Icon', Icon); app.component('VDropdown', Dropdown);
// app.component('VTooltip', Tooltip);
// app.component('VMenu', Menu);

console.log('Environment Variables',process.env);
 // Save the website root address
app.config.globalProperties.$AppURL=process.env.APP_URL;

});

• XWindowWidgetTemplate.vue 示例widget代码

  from v1.1.9 , @close="doClosePanel" is removed

<template>
    <XWindow v-show="isShow" top="10px" left="10px" nWidth="300px" nHeight="400px" title="XWindowWidget模版"
        icon="img/basicimage/arcgis_img.png" :hasMax="true"pid="widgetID"  @loaded="loadedHandle" >
        <span>这是XWindowWidget模版，窗体的内容示例</span>
    </XWindow>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Global, XWindow, XWindowManager,WindowsMap,MinWindowMap } from 'xframelib';
const widgetID = ref('xwindowWidgetTemplate');
let windowID = '';
//获取到窗体的id
function loadedHandle(panelData) {
    windowID = panelData.id;
}
// 从v1.1.9版本移除
// function doClosePanel(panelData) {
//     widgetID.value = panelData.pid;
//     if (panelData.pid) {
//         Global.LayoutManager?.unloadWidget(widgetID.value);
//     }
// }
onMounted(() => {
    //最小化后，定时打开widget
    setTimeout(() => {
        const tmpLayoutManager = Global.getLayoutManager(widgetID.value);
        tmpLayoutManager?.changeWidgetVisible(widgetID.value, true);
    }, 8000);
})
/**
 * 对外暴露接口
 */
const isShow = ref(true);
function changeVisible(isVisible: boolean = false) {
    isShow.value = isVisible;
    if (windowID && isVisible)
        XWindowManager.openWindowPanel(windowID);
}
defineExpose({ changeVisible, isShow });
</script>
<style lang="scss" scoped></style>

Application Examples