misp-ui-library-test 0.0.1

package/package.json

@@ -0,0 +1,161 @@
+{
+  "name": "misp-ui-library-test",
+  "version": "0.0.1",
+  "description": "基于Vue2的轻量级UI组件库，由Misp团队打造",
+  "main": "dist/vue2-ui-library.common.js",
+  "module": "dist/vue2-ui-library.esm.js",
+  "unpkg": "dist/vue2-ui-library.umd.js",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "types"
+  ],
+  "typings": "types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/your-name/vue2-ui-library.git"
+  },
+  "homepage": "https://your-name.github.io/vue2-ui-library",
+  "bugs": {
+    "url": "https://github.com/your-name/vue2-ui-library/issues"
+  },
+  "scripts": {
+    "dev": "node scripts/prepare-docs-dist.js && cross-env WEBPACK_DEV_SERVER_HOST=localhost WEBPACK_DEV_SERVER_PORT=8080 NODE_OPTIONS=--openssl-legacy-provider vuepress dev docs",
+    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider vuepress build docs",
+    "build:lib": "node scripts/build-styles.js && cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production webpack --config webpack.config.js --mode production",
+    "build:lib:dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=development webpack --config webpack.config.js --mode development",
+    "build:commonjs": "node scripts/build-styles.js && cross-env NODE_OPTIONS=--openssl-legacy-provider node scripts/build-commonjs.js",
+    "build:esm": "node scripts/build-styles.js && cross-env NODE_OPTIONS=--openssl-legacy-provider node scripts/build-esm.js",
+    "build:all": "npm run build:styles && npm run build:commonjs && npm run build:esm && npm run build:lib",
+    "build:styles": "node scripts/build-styles.js",
+    "lint": "eslint src --ext .js,.vue,.ts",
+    "lint:fix": "eslint src --ext .js,.vue,.ts --fix",
+    "prepublishOnly": "npm run build:styles && npm run build:commonjs && npm run build:esm && npm run build:lib",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "demo": "node scripts/demo-server.js",
+    "clean": "rimraf dist coverage",
+    "prepare": "husky install"
+  },
+  "keywords": [
+    "vue",
+    "vue2",
+    "ui",
+    "component-library",
+    "typescript",
+    "vuepress",
+    "webpack"
+  ],
+  "author": "MISP",
+  "license": "MIT",
+  "engines": {
+    "node": ">=14.0.0",
+    "npm": ">=6.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.0 || ^2.7.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@babel/core": "7.23.2",
+    "@babel/eslint-parser": "7.23.3",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-proposal-decorators": "7.23.2",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-transform-object-assign": "7.23.3",
+    "@babel/preset-env": "7.23.2",
+    "@babel/preset-typescript": "7.23.2",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+    "@vue/babel-preset-jsx": "^1.4.0",
+    "@vue/test-utils": "1.3.6",
+    "@vuepress/plugin-back-to-top": "1.9.9",
+    "@vuepress/plugin-search": "1.9.9",
+    "assert": "^2.1.0",
+    "autoprefixer": "10.4.16",
+    "babel-loader": "8.3.0",
+    "babel-plugin-component": "1.1.1",
+    "babel-plugin-import": "^1.13.8",
+    "buffer": "^6.0.3",
+    "clean-webpack-plugin": "^3.0.0",
+    "core-js": "^3.6.5",
+    "cross-env": "7.0.3",
+    "css-loader": "4.3.0",
+    "cssnano": "6.0.2",
+    "deepmerge": "4.3.1",
+    "eslint": "8.48.0",
+    "eslint-config-prettier": "9.0.0",
+    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-vue": "9.17.0",
+    "file-loader": "6.2.0",
+    "husky": "8.0.3",
+    "jest": "27.5.1",
+    "postcss": "8.4.31",
+    "postcss-loader": "4.3.0",
+    "prettier": "3.0.3",
+    "process": "^0.11.10",
+    "rimraf": "5.0.5",
+    "sass": "1.69.5",
+    "sass-loader": "10.1.1",
+    "sockjs-client": "^1.4.0",
+    "stream-browserify": "^3.0.0",
+    "style-loader": "2.0.0",
+    "ts-jest": "27.1.5",
+    "typescript": "4.9.5",
+    "vue": "2.7.16",
+    "vue-jest": "3.0.7",
+    "vue-loader": "15.10.1",
+    "vue-template-compiler": "2.7.16",
+    "vuepress": "1.9.9",
+    "vuepress-plugin-demo-container": "^0.2.0",
+    "webpack": "4.46.0",
+    "webpack-cli": "3.3.12",
+    "webpack-dev-server": "^3.7.2",
+    "webpack-node-externals": "3.0.0"
+  },
+  "dependencies": {
+    "echarts": "^5.6.0",
+    "throttle-debounce": "^1.0.1",
+    "vxe-table": "^3.6.11",
+    "xe-utils": "^3.5.7"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "vue",
+      "ts"
+    ],
+    "transform": {
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.vue$": "vue-jest",
+      "^.+\\.ts$": "ts-jest"
+    },
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1"
+    },
+    "collectCoverage": true,
+    "coverageDirectory": "coverage",
+    "coverageReporters": [
+      "text",
+      "lcov",
+      "html"
+    ],
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/dist/",
+      "/docs/"
+    ]
+  },
+  "browserslist": [
+    "last 2 versions",
+    "> 1%",
+    "IE 11"
+  ]
+}

package/src/directives/clickoutside/index.js

@@ -0,0 +1,111 @@
+/**
+ * @module clickoutside
+ * @description Vue 2 点击外部区域关闭指令
+ * 
+ * 当用户点击元素外部区域时触发指定的回调函数。
+ * 支持通过指令表达式绑定方法名，或直接通过 binding.value 传递回调函数。
+ * 自动处理包含 popperElm（如下拉菜单、Tooltip）的情况，点击 popper 内部不会触发关闭。
+ * 
+ * @example
+ * // 模板中使用
+ * <div v-clickoutside="handleClose">Content</div>
+ * 
+ * // 或者绑定方法名
+ * <div v-clickoutside="onClose">Content</div>
+ */
+import Vue from 'vue';
+import { on } from '../../utils/dom/index.js';
+
+const nodeList = [];
+const ctx = '@@clickoutsideContext';
+
+let startClick;
+let seed = 0;
+
+// 全局监听 mousedown 记录起始点击位置
+!Vue.prototype.$isServer && on(document, 'mousedown', e => (startClick = e));
+
+// 全局监听 mouseup 触发检测逻辑
+!Vue.prototype.$isServer && on(document, 'mouseup', e => {
+  nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
+});
+
+/**
+ * 创建文档点击处理器
+ * @param {HTMLElement} el - 绑定指令的元素
+ * @param {Object} binding - 绑定对象
+ * @param {VNode} vnode - 虚拟节点
+ * @returns {Function} 点击处理函数
+ */
+function createDocumentHandler(el, binding, vnode) {
+  return function(mouseup = {}, mousedown = {}) {
+    // 基本校验：确保 vnode、context 和 target 存在
+    if (!vnode ||
+      !vnode.context ||
+      !mouseup.target ||
+      !mousedown.target ||
+      // 如果点击发生在元素内部，则忽略
+      el.contains(mouseup.target) ||
+      el.contains(mousedown.target) ||
+      el === mouseup.target ||
+      // 如果存在 popperElm（如 Select、Dropdown），且点击发生在 popper 内部，则忽略
+      (vnode.context.popperElm &&
+      (vnode.context.popperElm.contains(mouseup.target) ||
+      vnode.context.popperElm.contains(mousedown.target)))) return;
+
+    // 执行回调：优先使用表达式绑定的方法名，否则使用 binding.value 传入的函数
+    if (binding.expression &&
+      el[ctx].methodName &&
+      vnode.context[el[ctx].methodName]) {
+      vnode.context[el[ctx].methodName](mouseup, mousedown);
+    } else {
+      el[ctx].bindingFn && el[ctx].bindingFn(mouseup, mousedown);
+    }
+  };
+}
+
+export default {
+  /**
+   * 指令绑定钩子
+   * @param {HTMLElement} el - 绑定指令的元素
+   * @param {Object} binding - 绑定对象
+   * @param {VNode} vnode - 虚拟节点
+   */
+  bind(el, binding, vnode) {
+    nodeList.push(el);
+    const id = seed++;
+    el[ctx] = {
+      id,
+      documentHandler: createDocumentHandler(el, binding, vnode),
+      methodName: binding.expression,
+      bindingFn: binding.value
+    };
+  },
+
+  /**
+   * 指令更新钩子
+   * @param {HTMLElement} el - 绑定指令的元素
+   * @param {Object} binding - 绑定对象
+   * @param {VNode} vnode - 虚拟节点
+   */
+  update(el, binding, vnode) {
+    el[ctx].documentHandler = createDocumentHandler(el, binding, vnode);
+    el[ctx].methodName = binding.expression;
+    el[ctx].bindingFn = binding.value;
+  },
+
+  /**
+   * 指令解绑钩子
+   * @param {HTMLElement} el - 绑定指令的元素
+   */
+  unbind(el) {
+    let len = nodeList.length;
+    for (let i = 0; i < len; i++) {
+      if (nodeList[i][ctx].id === el[ctx].id) {
+        nodeList.splice(i, 1);
+        break;
+      }
+    }
+    delete el[ctx];
+  }
+};

package/src/directives/init/index.js

@@ -0,0 +1,50 @@
+/**
+ * @fileoverview Vue2 UI Library - 初始化指令模块
+ * @description 提供 v-init 指令，用于在元素绑定时执行初始化回调函数
+ * @module directives/init
+ */
+
+/**
+ * v-init 初始化指令
+ * @namespace init
+ * @memberof module:directives/init
+ * @description 在元素绑定到 DOM 时立即执行传入的初始化函数
+ * 
+ * @example
+ * // 模板中使用
+ * <div v-init="initFunction"></div>
+ * 
+ * // 组件中定义
+ * export default {
+ *   methods: {
+ *     initFunction(el) {
+ *       console.log('元素已初始化', el);
+ *     }
+ *   }
+ * }
+ */
+export default {
+  /**
+   * 指令绑定钩子
+   * @function bind
+   * @memberof module:directives/init
+   * @param {HTMLElement} el - 指令绑定的 DOM 元素
+   * @param {Object} binding - 绑定对象，包含 value 等属性
+   * @param {VNode} vnode - 虚拟节点对象
+   * @param {Vue} vnode.context - Vue 实例上下文
+   * @param {Function} binding.value - 传入的初始化处理函数
+   * @returns {void}
+   * @description 在指令第一次绑定到元素时调用，执行传入的初始化函数
+   * @throws {Error} 当 binding.value 不是函数时抛出错误
+   */
+  bind(el, binding, vnode) {
+    const that = vnode.context;
+    const handler = binding.value;
+
+    if (handler instanceof Function) {
+      handler.call(this, el);
+    } else {
+      throw new Error('v-init only accepts a function as handler');
+    }
+  }
+};

package/src/directives/resize/index.js

@@ -0,0 +1,69 @@
+/**
+ * @fileoverview Vue2 UI Library - 尺寸变化监听指令模块
+ * @description 提供 v-resize 指令，用于监听 DOM 元素尺寸变化并执行回调
+ * @module directives/resize
+ */
+
+/**
+ * v-resize 尺寸变化监听指令
+ * @namespace resize
+ * @memberof module:directives/resize
+ * @description 使用 ResizeObserver API 监听元素尺寸变化，自动执行传入的回调函数
+ * 
+ * @example
+ * // 模板中使用
+ * <div v-resize="onResize"></div>
+ * 
+ * // 组件中定义
+ * export default {
+ *   methods: {
+ *     onResize() {
+ *       console.log('元素尺寸发生变化');
+ *     }
+ *   }
+ * }
+ */
+export default {
+  /**
+   * 指令绑定钩子
+   * @function bind
+   * @memberof module:directives/resize
+   * @param {HTMLElement} element - 指令绑定的 DOM 元素
+   * @param {Object} binding - 绑定对象，包含 value 等属性
+   * @param {VNode} vnode - 虚拟节点对象
+   * @param {Vue} vnode.context - Vue 实例上下文
+   * @param {Function} binding.value - 尺寸变化时的回调函数
+   * @returns {void}
+   * @description 创建 ResizeObserver 实例并监听元素尺寸变化
+   * @throws {Error} 当 binding.value 不是函数时抛出错误
+   */
+  bind: (element, binding, vnode) => {
+    const that = vnode.context;
+    const handler = binding.value;
+
+    if (handler instanceof Function) {
+      const resizeObserver = new ResizeObserver(() => {
+        handler.call(that);
+      });
+      resizeObserver.observe(element);
+      // 将 ResizeObserver 实例挂载到元素上，便于解绑时清理
+      that.$set(element, '$_resizeObserver', resizeObserver);
+    } else {
+      throw new Error('v-resize only accepts a function as handler');
+    }
+  },
+
+  /**
+   * 指令解绑钩子
+   * @function unbind
+   * @memberof module:directives/resize
+   * @param {HTMLElement} element - 指令绑定的 DOM 元素
+   * @returns {void}
+   * @description 断开 ResizeObserver 监听，防止内存泄漏
+   */
+  unbind: element => {
+    if (element.$_resizeObserver) {
+      element.$_resizeObserver?.disconnect();
+    }
+  }
+};

package/src/index.js

@@ -0,0 +1,174 @@
+/**
+ * Vue2 UI Library 主入口文件
+ * 提供全局引入和按需引入两种方式
+ */
+
+// 全量引入的组件
+const componentFiles = require.context('./packages', true, /\/index\.js$/)
+export const components = componentFiles.keys().reduce((pack, path) => {
+  const module = componentFiles(path)
+  const moduleName = path.match(/^\.\/(.+?)\/index\.js$/)[1]
+  const componentName = moduleName.split(/[-/]/g).map(v => `${v.charAt(0).toUpperCase()}${v.slice(1)}`).join('')
+  pack[componentName] = module.default
+  // 组件同时导出了其他组件时，一并注入组件包
+  if (Object.keys(module).filter(k => k !== 'default').length > 0) {
+    Object.keys(module).filter(k => k !== 'default').forEach(k => {
+      pack[k] = module[k]
+    })
+  }
+  return pack
+}, {})
+
+// 全量引入自定义指令
+const directiveFiles = require.context('./directives', true, /\/index\.js$/)
+export const directives = directiveFiles.keys().reduce((pack, path) => {
+  const module = directiveFiles(path)
+  const moduleName = path.match(/^\.\/(.+?)\/index\.js$/)[1]
+  const componentName = moduleName.split(/[-/]/g).map((v, i) => i ? `${v.charAt(0).toUpperCase()}${v.slice(1)}` : v).join('')
+  pack[componentName] = module.default
+  return pack
+}, {})
+
+// 全局引入
+const install = function(Vue) {
+  if (install.installed) return
+
+  install.installed = true
+
+  // 注册所有组件
+  Object.keys(components).forEach(key => {
+    // 保留组件名大驼峰格式
+    const kebabCaseKey = `Ui${key}`
+    Vue.component(kebabCaseKey, components[key])
+  })
+  // 注册所有自定义指令
+  Object.keys(directives).forEach(key => {
+    // 保留组件名大驼峰格式
+    Vue.directive(key, directives[key])
+  })
+}
+
+// 自动安装 Vue.use()，并全局注入
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  install,
+  // 按需引入的组件
+  ...components
+}
+
+// 单独导出组件（支持按需引入）
+export { default as Button } from './packages/button'
+export { default as Input } from './packages/input'
+export { default as Select } from './packages/select'
+export { default as Option } from './packages/option'
+export { default as TimePicker } from './packages/time-picker'
+export { default as AutoGridLayout } from './packages/auto-grid-layout'
+
+// 展示组件
+export { default as Alert } from './packages/alert'
+export { default as Badge } from './packages/badge'
+export { default as Card } from './packages/card'
+export { default as Tag } from './packages/tag'
+export { default as Avatar } from './packages/avatar'
+
+// 布局组件
+export { default as Row } from './packages/row'
+export { default as Col } from './packages/col'
+export { default as Container } from './packages/container'
+export { default as Header } from './packages/header'
+export { default as Aside } from './packages/aside'
+export { default as Main } from './packages/main'
+export { default as Footer } from './packages/footer'
+
+// 导航组件
+export { default as Breadcrumb } from './packages/breadcrumb'
+export { default as BreadcrumbItem } from './packages/breadcrumb-item'
+export { default as Tabs } from './packages/tabs'
+export { default as TabPane } from './packages/tab-pane'
+export { default as TabsNavigation } from './packages/tabs-navigation'
+export { default as Steps } from './packages/steps'
+export { default as Step } from './packages/step'
+export { default as Timeline } from './packages/timeline'
+export { default as TimelineItem } from './packages/timeline-item'
+
+// 表单组件
+export { default as Radio, RadioGroup, RadioButton } from './packages/radio'
+export { default as Checkbox, CheckboxGroup, CheckboxButton } from './packages/checkbox'
+
+// 其他展示组件
+export { default as Divider } from './packages/divider'
+export { default as Empty } from './packages/empty'
+export { default as Link } from './packages/link'
+export { default as Progress } from './packages/progress'
+export { default as Skeleton } from './packages/skeleton'
+export { default as SkeletonItem } from './packages/skeleton-item'
+export { default as Spinner } from './packages/spinner'
+
+// 简单展示组件
+export { default as Icon } from './packages/icon'
+export { default as Image } from './packages/image'
+export { default as PageHeader } from './packages/page-header'
+export { default as Backtop } from './packages/backtop'
+export { default as Scrollbar } from './packages/scrollbar'
+export { default as Statistic } from './packages/statistic'
+export { default as Result } from './packages/result'
+
+// 表单组件
+export { default as Switch } from './packages/switch'
+export { default as InputNumber } from './packages/input-number'
+export { default as Rate } from './packages/rate'
+export { default as Slider } from './packages/slider'
+
+// 数据组件
+export { default as Pagination } from './packages/pagination'
+export { default as Tree } from './packages/tree'
+export { default as Table } from './packages/table'
+export { default as NoData } from './packages/no-data'
+export { default as Transfer } from './packages/transfer'
+export { default as Descriptions } from './packages/descriptions'
+export { default as DescriptionsItem } from './packages/descriptions-item'
+
+// 反馈组件
+export { default as Dialog } from './packages/dialog'
+export { default as Tooltip } from './packages/tooltip'
+export { default as Popover } from './packages/popover'
+export { default as Loading } from './packages/loading'
+export { default as Message } from './packages/message'
+export { default as MessageBox } from './packages/message-box'
+export { default as Notification } from './packages/notification'
+export { default as Popconfirm } from './packages/popconfirm'
+
+// 布局组件
+export { default as Drawer } from './packages/drawer'
+
+// 表单组件
+export { default as Form } from './packages/form'
+export { default as FormItem } from './packages/form-item'
+
+// 导航组件
+export { default as Dropdown } from './packages/dropdown'
+export { default as DropdownMenuItem } from './packages/dropdown-menu-item'
+export { default as Menu } from './packages/menu'
+export { default as MenuItem } from './packages/menu-item'
+export { default as Submenu } from './packages/submenu'
+export { default as Collapse } from './packages/collapse'
+export { default as CollapseItem } from './packages/collapse-item'
+
+// 表单组件
+export { default as Autocomplete } from './packages/autocomplete'
+export { default as DatePicker } from './packages/date-picker'
+export { default as Cascader } from './packages/cascader'
+export { default as ColorPicker } from './packages/color-picker'
+
+// 展示组件
+export { default as Calendar } from './packages/calendar'
+export { default as Carousel } from './packages/carousel'
+export { default as CarouselItem } from './packages/carousel-item'
+
+// 其他组件
+export { default as Upload } from './packages/upload'
+export { default as Chart } from './packages/chart'
+export { default as StatusTimelineChart } from './packages/status-timeline-chart'

package/src/mixins/emitter.js

@@ -0,0 +1,47 @@
+/**
+ * Event Emitter Mixin
+ * 用于子组件向下广播事件
+ */
+function broadcast(componentName, eventName, params) {
+  this.$children.forEach(child => {
+    var name = child.$options.name;
+
+    if (name === componentName) {
+      child.$emit.apply(child, [eventName].concat(params));
+    } else {
+      broadcast.apply(child, [componentName, eventName].concat([params]));
+    }
+  });
+}
+export default {
+  methods: {
+    /**
+     * 向指定父组件派发事件
+     * @param {String} componentName - 目标组件名
+     * @param {String} eventName - 事件名
+     * @param {*} params - 事件参数
+     */
+    dispatch(componentName, eventName, params) {
+      var parent = this.$parent || this.$root;
+      var name = parent.$options.name;
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent;
+        if (parent) {
+          name = parent.$options.name;
+        }
+      }
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(params));
+      }
+    },
+    /**
+     * 向子组件广播事件
+     * @param {String} componentName - 目标组件名
+     * @param {String} eventName - 事件名
+     * @param {*} params - 事件参数
+     */
+    broadcast(componentName, eventName, params) {
+      broadcast.call(this, componentName, eventName, params);
+    }
+  }
+}

package/src/mixins/focus.js

@@ -0,0 +1,42 @@
+/**
+ * @fileoverview Vue2 UI Library - 焦点管理 Mixin
+ * @description 提供组件自动聚焦功能的混入模块
+ * @module mixins/focus
+ */
+
+/**
+ * 创建焦点管理 Mixin
+ * @function focus
+ * @memberof module:mixins/focus
+ * @param {String} ref - 目标元素的 ref 引用名称
+ * @returns {Object} 包含 focus 方法的 mixin 对象
+ * @description 生成一个包含 focus() 方法的混入对象，用于聚焦指定的 ref 元素
+ * 
+ * @example
+ * // 在组件中使用
+ * import Focus from '@/mixins/focus';
+ * 
+ * export default {
+ *   mixins: [Focus('inputRef')],
+ *   template: '<input ref="inputRef" />'
+ * };
+ * 
+ * // 调用聚焦
+ * this.focus();  // 自动聚焦到 ref="inputRef" 的元素
+ */
+export default function(ref) {
+  return {
+    methods: {
+      /**
+       * 聚焦到指定 ref 元素
+       * @function focus
+       * @memberof module:mixins/focus
+       * @returns {void}
+       * @description 调用 this.$refs[ref].focus() 使目标元素获得焦点
+       */
+      focus() {
+        this.$refs[ref].focus();
+      }
+    }
+  };
+};

package/src/mixins/locale.js

@@ -0,0 +1,24 @@
+import Vue from 'vue';
+
+/**
+ * 简化版国际化方法
+ * 直接代理 Vue 实例的 $t 方法
+ */
+
+export const t = function(path, options) {
+  // 直接调用 Vue 原生的 $t 方法
+  const vuei18n = (this ? Object.getPrototypeOf(this) : Vue.prototype).$t;
+  
+  if (typeof vuei18n === 'function') {
+    return vuei18n.apply(this || Vue, arguments);
+  }
+  
+  // 降级方案：返回路径本身或空字符串
+  return path || '';
+};
+
+export default {
+  methods: {
+    t
+  }
+};