@arkxos/arkos-system 0.1.0

package/src/utils/color.js

@@ -0,0 +1,274 @@
+import JSON5 from 'json5';
+
+export const COLOR_CASES = [
+  {
+    name: '默认',
+    value: 'default',
+    colors: [
+      '#1E90FF',
+      '#90EE90',
+      '#00CED1',
+      '#E2BD84',
+      '#7A90E0',
+      '#3BA272',
+      '#2BE7FF',
+      '#0A8ADA',
+      '#FFD700'
+    ]
+  },
+  {
+    name: '复古',
+    value: 'retro',
+    colors: [
+      '#0780cf',
+      '#765005',
+      '#fa6d1d',
+      '#0e2c82',
+      '#b6b51f',
+      '#da1f18',
+      '#701866',
+      '#f47a75',
+      '#009db2'
+    ]
+  },
+  {
+    name: '淡雅',
+    value: 'elegant',
+    colors: [
+      '#95a2ff',
+      '#fa8080',
+      '#ffc076',
+      '#fae768',
+      '#87e885',
+      '#3cb9fc',
+      '#73abf5',
+      '#cb9bff',
+      '#434348'
+    ]
+  },
+  {
+    name: '未来',
+    value: 'future',
+    colors: [
+      '#63b2ee',
+      '#76da91',
+      '#f8cb7f',
+      '#f89588',
+      '#7cd6cf',
+      '#9192ab',
+      '#7898e1',
+      '#efa666',
+      '#eddd86'
+    ]
+  },
+  {
+    name: '渐变',
+    value: 'gradual',
+    colors: [
+      '#71ae46',
+      '#96b744',
+      '#c4cc38',
+      '#ebe12a',
+      '#eab026',
+      '#e3852b',
+      '#d85d2a',
+      '#ce2626',
+      '#ac2026'
+    ]
+  },
+  {
+    name: '简洁',
+    value: 'simple',
+    colors: [
+      '#929fff',
+      '#9de0ff',
+      '#ffa897',
+      '#af87fe',
+      '#7dc3fe',
+      '#bb60b2',
+      '#433e7c',
+      '#f47a75',
+      '#009db2'
+    ]
+  },
+  {
+    name: '商务',
+    value: 'business',
+    colors: [
+      '#194f97',
+      '#555555',
+      '#bd6b08',
+      '#00686b',
+      '#c82d31',
+      '#625ba1',
+      '#898989',
+      '#9c9800',
+      '#007f54'
+    ]
+  },
+  {
+    name: '柔和',
+    value: 'gentle',
+    colors: [
+      '#5b9bd5',
+      '#ed7d31',
+      '#70ad47',
+      '#ffc000',
+      '#4472c4',
+      '#91d024',
+      '#b235e6',
+      '#02ae75',
+      '#5b9bd5'
+    ]
+  },
+  {
+    name: '科技',
+    value: 'technology',
+    colors: [
+      '#05f8d6',
+      '#0082fc',
+      '#fdd845',
+      '#22ed7c',
+      '#09b0d3',
+      '#1d27c9',
+      '#f9e264',
+      '#f47a75',
+      '#009db2'
+    ]
+  },
+  {
+    name: '明亮',
+    value: 'light',
+    colors: [
+      '#884898',
+      '#808080',
+      '#82ae46',
+      '#00a3af',
+      '#ef8b07',
+      '#007bbb',
+      '#9d775f',
+      '#fae800',
+      '#5f9b3c'
+    ]
+  },
+  {
+    name: '经典',
+    value: 'classical',
+    colors: [
+      '#007bbb',
+      '#ffdb4f',
+      '#dd4b4b',
+      '#2ca9e1',
+      '#ef8b07',
+      '#4a488e',
+      '#82ae46',
+      '#dd4b4b',
+      '#bb9581'
+    ]
+  },
+  {
+    name: '清新',
+    value: 'fresh',
+    colors: [
+      '#5f9b3c',
+      '#75c24b',
+      '#83d65f',
+      '#aacf53',
+      '#c7dc68',
+      '#d8e698',
+      '#e0ebaf',
+      '#bbc8e6',
+      '#e5e5e5'
+    ]
+  },
+  {
+    name: '活力',
+    value: 'energy',
+    colors: [
+      '#ef8b07',
+      '#2a83a2',
+      '#f07474',
+      '#c55784',
+      '#274a78',
+      '#7058a3',
+      '#0095d9',
+      '#75c24b',
+      '#808080'
+    ]
+  },
+  {
+    name: '火红',
+    value: 'red',
+    colors: [
+      '#ff0000',
+      '#ef8b07',
+      '#4c6cb3',
+      '#f8e944',
+      '#69821b',
+      '#9c5ec3',
+      '#00ccdf',
+      '#f07474',
+      '#bb9581'
+    ]
+  },
+  {
+    name: '轻快',
+    value: 'fast',
+    colors: [
+      '#fae800',
+      '#00c039',
+      '#0482dc',
+      '#bb9581',
+      '#ff7701',
+      '#9c5ec3',
+      '#00ccdf',
+      '#00c039',
+      '#ff7701'
+    ]
+  },
+  {
+    name: '灵动',
+    value: 'spiritual',
+    colors: [
+      '#00a3af',
+      '#4da798',
+      '#57baaa',
+      '#62d0bd',
+      '#6ee4d0',
+      '#86e7d6',
+      '#aeede1',
+      '#bde1e6',
+      '#e5e5e5'
+    ]
+  }
+];
+
+export const PREDEFINE_COLORS = [
+  '#FF4500',
+  '#FF8C00',
+  '#FFD700',
+  '#71AE46',
+  '#00CED1',
+  '#1E90FF',
+  '#C71585',
+  '#999999',
+  '#000000',
+  '#FFFFFF'
+];
+
+export const parseColors = (scheme) => {
+  try {
+    const colorScheme = JSON5.parse(scheme || '{}');
+    if (colorScheme.colors && colorScheme.colors.length > 0) {
+      return colorScheme.colors;
+    } else if (colorScheme.name) {
+      const item = COLOR_CASES.find(ele => ele.value === colorScheme.name);
+      if (item) {
+        return item.colors;
+      }
+    }
+    return COLOR_CASES[0].colors;
+  } catch (e) {
+    return COLOR_CASES[0].colors;
+  }
+};

package/src/utils/date.js

@@ -0,0 +1,180 @@
+/**
+ * 时间格式化
+ * 将 2018-09-23T11:54:16.000+0000 格式化成 2018/09/23 11:54:16
+ * @param datetime 国际化日期格式
+ */
+export function format(datetime) {
+  return formatWithSeperator(new Date(datetime), '/', ':');
+}
+
+/**
+ * 时间格式化
+ * 将 2018-09-23T11:54:16.000+0000 格式化成类似 2018/09/23 11:54:16
+ * 可以指定日期和时间分隔符
+ * @param dateMat
+ * @param dateSeparator
+ * @param timeSeparator
+ */
+export function formatWithSeperator(dateMat, dateSeparator, timeSeparator) {
+  if (dateMat != null) {
+    const year = dateMat.getFullYear();
+    const month = dateMat.getMonth() + 1;
+    const day = dateMat.getDate();
+    const hh = dateMat.getHours();
+    const mm = dateMat.getMinutes();
+    const ss = dateMat.getSeconds();
+    return year + dateSeparator +
+          (month < 10 ? '0' : '') + month + dateSeparator +
+          (day < 10 ? '0' : '') + day + ' ' +
+          (hh < 10 ? '0' : '') + hh + timeSeparator +
+          (mm < 10 ? '0' : '') + mm + timeSeparator +
+          (ss < 10 ? '0' : '') + ss;
+  }
+}
+
+/**
+ * 时间格式化
+ * 将 毫秒格式转换为 yyyy-MM-dd HH:mm
+ * 可以指定日期和时间分隔符
+ * @param dateTime
+ * @param type
+ */
+export function simpleDateFormat(dateTime, type) {
+  const d = new Date(dateTime);
+  const year = d.getFullYear();
+  let month = d.getMonth() + 1;
+  let day = d.getDate();
+  let hh = d.getHours();
+  let mm = d.getMinutes();
+  let ss = d.getSeconds();
+  if (month < 10)month = '0' + month;
+  if (day < 10) day = '0' + day;
+  if (hh < 10) hh = '0' + hh;
+  if (mm < 10) mm = '0' + mm;
+  if (ss < 10) ss = '0' + ss;
+
+  let timeFormat = '';
+  if (type === 'yyyy-MM-dd') {
+    timeFormat = year + '-' + month + '-' + day;
+  } else if (type === 'yyyy-MM-dd HH:mm') {
+    timeFormat = year + '-' + month + '-' + day + ' ' + hh + ':' + mm;
+  } else if (type === 'yyyy-MM-dd HH:mm:ss') {
+    timeFormat = year + '-' + month + '-' + day + ' ' + hh + ':' + mm + ':' + ss;
+  } else if (type === 'yyyy年MM月dd日') {
+    timeFormat = year + '年' + month + '月' + day + '日';
+  } else if (type === 'yyyyMMdd') {
+    timeFormat = year + '' + month + '' + day;
+  } else if (type === 'yyyy-MM') {
+    timeFormat = year + '-' + month;
+  }
+  return timeFormat;
+}
+
+/**
+ * 时间格式化
+ * 将长整形时间 格式化成 2018-09-23 11:54:16
+ * @param millis 长整型时间
+ * @param format 日期格式
+ */
+export function formatLongDate(millis, format) {
+  if (!millis) return '';
+  if (!format) format = 'yyyy-MM-dd HH:mm:ss';
+
+  return simpleDateFormat(millis, format);
+}
+
+/**
+ * 时间解释
+ * 将格式为2018-09-23 11:54:16转成长整形
+ * @param datetime 国际化日期格式
+ */
+export function parseLongDate(datetime) {
+  if (!datetime) return '';
+
+  return new Date(datetime.replace(/-/g, '/')).getTime();
+}
+
+/**
+ * 获取当前时间，长整形
+ */
+export function getCurrTime() {
+  return new Date().getTime();
+}
+
+export function formatDate(dateMat) {
+  const year = dateMat.getFullYear();
+  const month = dateMat.getMonth() + 1;
+  const day = dateMat.getDate();
+
+  return year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
+}
+
+/**
+ * 获取2个日期相关天数
+ * @param startTime
+ * @param endTime
+ * @returns {number}
+ */
+function getDiffDay(startTime, endTime) {
+  if (!startTime || !endTime) return '';
+
+  const milliSecond = endTime - startTime;
+  return Math.floor(milliSecond / (24 * 60 * 60 * 1000));
+}
+
+/**
+ * 获取2个日期相关天数
+ * @param startTime
+ * @param endTime
+ */
+function getDiffPeriod(startTime, endTime) {
+  if (!startTime || !endTime) return '';
+  const d1 = new Date(startTime);
+  const d2 = new Date(endTime);
+  if (d2.getFullYear() - d1.getFullYear() > 0) {
+    return d2.getFullYear() - d1.getFullYear() + ' 年';
+  } else if (d2.getMonth() - d1.getMonth() > 0) {
+    return d2.getMonth() - d1.getMonth() + ' 月';
+  } else if (d2.getDay() - d1.getDay() > 0) {
+    return d2.getDay() - d1.getDay() + ' 日';
+  } else if (d2.getDay() - d1.getDay() === 0) {
+    return '1';
+  } else {
+    return '0';
+  }
+}
+
+function getDiffTime(startDate, endDate) {
+  const total = (endDate - startDate) / 1000;
+  const day = Math.floor(total / (24 * 60 * 60));
+  const hour = Math.floor((total - day * 24 * 60 * 60) / (60 * 60));
+  const minute = Math.floor((total - day * 24 * 60 * 60 - hour * 60 * 60) / 60);
+  const second = Math.floor(total - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60);
+
+  let result = '';
+  if (day > 0) {
+    result += ' ' + day + ' 天';
+  }
+  if (hour > 0) {
+    result += ' ' + hour + ' 小时';
+  }
+  if (minute > 0) {
+    result += ' ' + minute + ' 分';
+  }
+  if (second > 0) {
+    result += ' ' + second + ' 秒';
+  }
+  if (result === '') {
+    result += '0 秒';
+  }
+  return result;
+}
+
+export default {
+  getCurrTime,
+  parseLongDate,
+  formatLongDate,
+  getDiffDay,
+  getDiffPeriod,
+  getDiffTime
+}

package/src/utils/loading.js

@@ -0,0 +1,22 @@
+import { ElLoading } from 'element-plus';
+
+let loading = null;
+export const showLoading = (message) => {
+  loading = ElLoading.service({
+    lock: true,
+    text: message || '数据处理中，请稍候...',
+    customClass: 'cc-loading'
+  });
+};
+
+export const hideLoading = () => {
+  if (loading) {
+    loading.close();
+    loading = null;
+  }
+};
+
+export default {
+  showLoading,
+  hideLoading
+};

package/src/utils/page.js

@@ -0,0 +1,36 @@
+import emitter from '@/utils/bus';
+
+export const fmtTitle = (title, now) => {
+  if (!title) {
+    return '';
+  }
+
+  const reg = /\${(.+?)}/;
+  const reg_g = /\${(.+?)}/g;
+  const result = title.match(reg_g);
+  if (result) {
+    result.forEach((item) => {
+      const key = item.match(reg)[1];
+      const value = now.params[key] || now.query[key];
+      title = title.replace(item, value);
+    });
+  }
+  return title;
+};
+
+export const closeCurrPage = () => {
+  emitter.emit('closeCurrPage');
+};
+
+export const getPageTitle = (pageTitle, route) => {
+  if (pageTitle) {
+    return fmtTitle(pageTitle, route);
+  }
+  return '';
+};
+
+export default {
+  closeCurrPage,
+  getPageTitle,
+  fmtTitle
+};

package/src/utils/progress.js

@@ -0,0 +1,19 @@
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+
+export const useNProgress = () => {
+  NProgress.configure({ showSpinner: false, easing: 'ease', speed: 500 });
+
+  const start = () => {
+    NProgress.start()
+  }
+
+  const done = () => {
+    NProgress.done()
+  }
+
+  return {
+    start,
+    done
+  }
+}

package/src/utils/system.js

@@ -0,0 +1,92 @@
+import { store as pinia } from '@/pinia';
+import { useIconStore } from '@/pinia/modules/icon';
+import { useDictionaryStore } from '@/pinia/modules/dictionary';
+import { useEmployeeStore } from '@/pinia/modules/employee';
+import { useOrganizationStore } from '@/pinia/modules/organization';
+import { useSubsystemStore } from '@/pinia/modules/subsystem';
+import { useSettingStore } from '@/pinia/modules/setting';
+
+const dictionaryStore = useDictionaryStore(pinia);
+const employeeStore = useEmployeeStore(pinia);
+const iconStore = useIconStore(pinia);
+const organizationStore = useOrganizationStore(pinia);
+const settingStore = useSettingStore(pinia);
+const subsystemStore = useSubsystemStore(pinia);
+
+export const getDictionary = (dictCode) => {
+  return dictionaryStore.getDictionary(dictCode);
+};
+
+export const getDictValue = (dictCode, dictKey) => {
+  return dictionaryStore.getDictValue(dictCode, dictKey);
+};
+
+export const getEmployee = () => {
+  return employeeStore.getEmployee();
+};
+
+export const getIconList = () => {
+  return iconStore.getIconList();
+};
+
+export const getRegion = () => {
+  return organizationStore.getRegion();
+};
+
+export const getUnit = () => {
+  return organizationStore.getUnit();
+};
+
+export const getEntp = () => {
+  return organizationStore.getEntp();
+};
+
+export const getOrganization = () => {
+  return organizationStore.getOrganization();
+};
+
+export const getSetting = () => {
+  return settingStore.getSetting();
+};
+
+export const getSubsystem = () => {
+  return subsystemStore.getSubsystem();
+};
+
+export const clearDictionary = () => {
+  return dictionaryStore.clearDictionary();
+};
+
+export const clearEmployee = () => {
+  return employeeStore.clearEmployee();
+};
+
+export const clearIconList = () => {
+  return iconStore.clearIconList();
+};
+
+export const clearOrganization = () => {
+  return organizationStore.clearOrganization();
+};
+
+export const clearSetting = () => {
+  return settingStore.clearSetting();
+};
+
+export default {
+  getDictionary,
+  getDictValue,
+  getEmployee,
+  getIconList,
+  getRegion,
+  getUnit,
+  getEntp,
+  getOrganization,
+  getSetting,
+  getSubsystem,
+  clearDictionary,
+  clearEmployee,
+  clearIconList,
+  clearOrganization,
+  clearSetting,
+}

package/src/utils/theme.js

@@ -0,0 +1,79 @@
+const themes = {};
+
+themes['global-default'] = new URL('@/assets/style/global/default.css', import.meta.url).href;
+themes['global-blue'] = new URL('@/assets/style/global/blue.css', import.meta.url).href;
+themes['global-green'] = new URL('@/assets/style/global/green.css', import.meta.url).href;
+themes['global-purple'] = new URL('@/assets/style/global/purple.css', import.meta.url).href;
+themes['global-red'] = new URL('@/assets/style/global/red.css', import.meta.url).href;
+
+themes['menu-default'] = new URL('@/assets/style/menu/default.css', import.meta.url).href;
+themes['menu-black'] = new URL('@/assets/style/menu/black.css', import.meta.url).href;
+themes['menu-grey'] = new URL('@/assets/style/menu/grey.css', import.meta.url).href;
+
+export const loadTheme = (type, theme) => {
+  const oldLink = document.querySelector(`link[data-${type}-theme]`);
+  if (oldLink) {
+    document.head.removeChild(oldLink);
+  }
+
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = themes[type + '-' + theme];
+  link.setAttribute(`data-${type}-theme`, theme);
+  document.head.appendChild(link);
+};
+
+// 处理主题样式
+export const changePrimaryStyle = (theme) => {
+  document.documentElement.style.setProperty('--el-color-primary', theme);
+  for (let i = 1; i <= 9; i++) {
+    document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, `${getLightColor(theme, i / 10)}`);
+  }
+  for (let i = 1; i <= 9; i++) {
+    document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, `${getDarkColor(theme, i / 10)}`);
+  }
+};
+
+// hex颜色转rgb颜色
+export const hexToRgb = (str) => {
+  str = str.replace('#', '');
+  const hex = str.match(/../g);
+  for (let i = 0; i < 3; i++) {
+    if (hex) {
+      hex[i] = String(parseInt(hex[i], 16));
+    }
+  }
+  return hex || [];
+};
+
+// 变浅颜色值
+export const getLightColor = (color, level) => {
+  if (!color) return '';
+  const rgb = hexToRgb(color);
+  for (let i = 0; i < 3; i++) {
+    const s = (255 - Number(rgb[i])) * level + Number(rgb[i]);
+    rgb[i] = String(Math.floor(s));
+  }
+  return rgbToHex(rgb[0], rgb[1], rgb[2]);
+};
+
+// 变深颜色值
+export const getDarkColor = (color, level) => {
+  if (!color) return '';
+  const rgb = hexToRgb(color);
+  for (let i = 0; i < 3; i++) {
+    rgb[i] = String(Math.floor(Number(rgb[i]) * (1 - level)));
+  }
+  return rgbToHex(rgb[0], rgb[1], rgb[2]);
+};
+
+// rgb颜色转Hex颜色
+export const rgbToHex = (r, g, b) => {
+  const hex = [Number(r).toString(16), Number(g).toString(16), Number(b).toString(16)];
+  for (let i = 0; i < 3; i++) {
+    if (hex[i].length === 1) {
+      hex[i] = `0${hex[i]}`;
+    }
+  }
+  return `#${hex.join('')}`;
+};