congmao-cli 1.0.0

package/src/template/Vue2/src/store/modules/notification.ts

@@ -0,0 +1,90 @@
+export interface msgDataItem {
+  id: string;
+  content: string;
+  type: string;
+  status: boolean;
+  collected: boolean;
+  date: string;
+  quality: string;
+}
+// 定义的state初始值
+const state: { msgData: Array<msgDataItem> } = {
+  msgData: [
+    {
+      id: '123',
+      content: '腾讯大厦一楼改造施工项目 已通过审核！',
+      type: '合同动态',
+      status: true,
+      collected: false,
+      date: '2021-01-01 08:00',
+      quality: 'high',
+    },
+    {
+      id: '124',
+      content: '三季度生产原材料采购项目 开票成功！',
+      type: '票务动态',
+      status: true,
+      collected: false,
+      date: '2021-01-01 08:00',
+      quality: 'low',
+    },
+    {
+      id: '125',
+      content: '2021-01-01 10:00的【国家电网线下签约】会议即将开始，请提前10分钟前往 会议室1 进行签到！',
+      type: '会议通知',
+      status: true,
+      collected: false,
+      date: '2021-01-01 08:00',
+      quality: 'middle',
+    },
+    {
+      id: '126',
+      content: '一季度生产原材料采购项目 开票成功！',
+      type: '票务动态',
+      status: true,
+      collected: false,
+      date: '2021-01-01 08:00',
+      quality: 'low',
+    },
+    {
+      id: '127',
+      content: '二季度生产原材料采购项目 开票成功！',
+      type: '票务动态',
+      status: true,
+      collected: false,
+      date: '2021-01-01 08:00',
+      quality: 'low',
+    },
+    {
+      id: '128',
+      content: '三季度生产原材料采购项目 开票成功！',
+      type: '票务动态',
+      status: true,
+      collected: false,
+      date: '2021-01-01 08:00',
+      quality: 'low',
+    },
+  ],
+};
+
+const mutations = {
+  setMsgData(state, data) {
+    // eslint-disable-next-line no-param-reassign
+    state.msgData = data;
+  },
+};
+
+const getters = {
+  unreadMsg: (state) => state.msgData.filter((item) => item.status),
+  readMsg: (state) => state.msgData.filter((item) => !item.status),
+};
+
+const actions = {};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters,
+};

package/src/template/Vue2/src/store/modules/permission.ts

@@ -0,0 +1,66 @@
+import { resetRouter, asyncRouterList } from '@/router';
+
+function filterPermissionsRouters(routes, roles) {
+  const res = [];
+  routes.forEach((route) => {
+    const children = [];
+    route.children?.forEach((childRouter) => {
+      const roleCode = childRouter.meta?.roleCode || childRouter.name;
+      if (roles.indexOf(roleCode) !== -1) {
+        children.push(childRouter);
+      }
+    });
+    if (children.length > 0) {
+      route.children = children;
+      res.push(route);
+    }
+  });
+  return res;
+}
+
+const state = {
+  whiteListRouters: ['/login'],
+  routers: [],
+};
+
+const mutations = {
+  setRouters: (state, routers) => {
+    state.routers = routers;
+  },
+};
+
+const getters = {
+  routers: (state) => state.routers,
+  whiteListRouters: (state) => state.whiteListRouters,
+};
+
+const actions = {
+  async initRoutes({ commit }, roles) {
+    let accessedRouters;
+
+    // special token
+    if (roles.includes('ALL_ROUTERS')) {
+      accessedRouters = asyncRouterList;
+    } else {
+      accessedRouters = filterPermissionsRouters(asyncRouterList, roles);
+    }
+
+    commit('setRouters', accessedRouters);
+
+    // register routers
+    // router.addRoutes(state.routers);
+  },
+  async restore({ commit }) {
+    // remove routers
+    resetRouter();
+    commit('setRouters', []);
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters,
+};

package/src/template/Vue2/src/store/modules/setting.ts

@@ -0,0 +1,122 @@
+/* eslint-disable no-param-reassign */
+import { Color } from 'tvision-color';
+import STYLE_CONFIG from '@/config/style';
+import { TColorSeries, TColorToken, LIGHT_CHART_COLORS, DARK_CHART_COLORS } from '@/config/color';
+import { insertThemeStylesheet, generateColorMap } from '@/utils/color';
+
+// 定义的state初始值
+const state = {
+  ...STYLE_CONFIG,
+  showSettingPanel: false,
+  colorList: {},
+  chartColors: LIGHT_CHART_COLORS,
+};
+
+type IInitStateType = typeof state;
+
+export interface IStateType extends IInitStateType {
+  isAsideFooter: boolean;
+  showSettingPanel: boolean;
+}
+
+// 定义的state的初始值方法，传入state或者额外的方法，然后利用 vuex 的双向数据驱动进行值的改变
+// 可通过this.$store.commit(' ')调用，但是触发的是同步事件
+const mutations = {
+  update(state: IStateType, payload: IStateType) {
+    state.showBreadcrumb = payload.showBreadcrumb;
+    state.mode = payload.mode;
+    state.layout = payload.layout;
+    state.isSidebarCompact = payload.isSidebarCompact;
+    state.splitMenu = payload.splitMenu;
+    state.isFooterAside = payload.isFooterAside;
+    state.isSidebarFixed = payload.isSidebarFixed;
+    state.isHeaderFixed = payload.isHeaderFixed;
+    state.showHeader = payload.showHeader;
+    state.showFooter = payload.showFooter;
+    state.backgroundTheme = payload.backgroundTheme;
+    state.brandTheme = payload.brandTheme;
+    state.isUseTabsRouter = payload.isUseTabsRouter;
+  },
+  toggleSidebarCompact(state: IStateType) {
+    state.isSidebarCompact = !state.isSidebarCompact;
+  },
+  toggleUseTabsRouter(state: IStateType) {
+    state.isUseTabsRouter = !state.isUseTabsRouter;
+  },
+  showSidebarCompact(state: IStateType, payload: boolean) {
+    state.isSidebarCompact = payload;
+  },
+  toggleSettingPanel(state: IStateType, payload: boolean) {
+    state.showSettingPanel = payload;
+  },
+  addColor(state: IStateType, payload: TColorSeries) {
+    state.colorList = { ...state.colorList, ...payload };
+  },
+  changeChartColor(state: IStateType, payload: TColorToken) {
+    state.chartColors = { ...payload };
+  },
+};
+
+const getters = {
+  showHeader: (state: IStateType) => state.showHeader,
+  showSidebar: (state: IStateType) => state.layout !== 'top',
+  showSidebarLogo: (state: IStateType) => state.layout === 'side',
+  showHeaderLogo: (state: IStateType) => state.layout !== 'side',
+  showFooter: (state: IStateType) => state.showFooter,
+  isUseTabsRouter: (state: IStateType) => state.isUseTabsRouter,
+  mode: (state: IStateType) => {
+    if (state.mode === 'auto') {
+      const media = window.matchMedia('(prefers-color-scheme:dark)');
+      if (media.matches) {
+        return 'dark';
+      }
+      return 'light';
+    }
+    return state.mode;
+  },
+};
+
+const actions = {
+  changeTheme({ commit, dispatch }, payload: IStateType) {
+    dispatch('changeMode', payload);
+    dispatch('changeBrandTheme', payload);
+    commit('update', payload);
+  },
+  changeMode({ commit }, payload: IStateType) {
+    let theme = payload.mode;
+    if (payload.mode === 'auto') {
+      const media = window.matchMedia('(prefers-color-scheme:dark)');
+      if (media.matches) {
+        theme = 'dark';
+      } else {
+        theme = 'light';
+      }
+    }
+    const isDarkMode = theme === 'dark';
+
+    document.documentElement.setAttribute('theme-mode', isDarkMode ? 'dark' : '');
+
+    commit('changeChartColor', isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS);
+  },
+  changeBrandTheme(_: { state: IStateType }, payload: IStateType) {
+    const { brandTheme, mode } = payload;
+    const { colors: newPalette, primary: brandColorIndex } = Color.getColorGradations({
+      colors: [brandTheme],
+      step: 10,
+      remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
+    })[0];
+    const colorMap = generateColorMap(brandTheme, newPalette, mode as 'light' | 'dark', brandColorIndex);
+
+    insertThemeStylesheet(brandTheme, colorMap, mode as 'light' | 'dark');
+
+    document.documentElement.setAttribute('theme-color', brandTheme);
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters,
+};

package/src/template/Vue2/src/store/modules/tab-router.ts

@@ -0,0 +1,83 @@
+export type TRouterInfo = {
+  path: string;
+  routeIdx: number;
+  title: string;
+  name?: string;
+  isAlive?: boolean;
+  isHome?: boolean;
+};
+
+export type TTabRouterType = {
+  isRefreshing: boolean;
+  tabRouterList: Array<TRouterInfo>;
+};
+
+const homeRoute: Array<TRouterInfo> = [
+  {
+    path: '/dashboard/base',
+    routeIdx: 0,
+    title: '仪表盘',
+    name: 'DashboardBase',
+    isHome: true,
+  },
+];
+
+const state: TTabRouterType = {
+  tabRouterList: homeRoute,
+  isRefreshing: false,
+};
+
+const mutations = {
+  // 处理刷新
+  toggleTabRouterAlive(state: TTabRouterType, routeIdx: number) {
+    state.isRefreshing = !state.isRefreshing;
+    state.tabRouterList[routeIdx].isAlive = !state.tabRouterList[routeIdx].isAlive;
+  },
+  // 处理新增
+  appendTabRouterList(state: TTabRouterType, newRoute: TRouterInfo) {
+    if (!state.tabRouterList.find((route: TRouterInfo) => route.path === newRoute.path))
+      // eslint-disable-next-line no-param-reassign
+      state.tabRouterList = state.tabRouterList.concat({ ...newRoute, isAlive: true });
+  },
+  // 处理关闭当前
+  subtractCurrentTabRouter(state: TTabRouterType, newRoute: TRouterInfo) {
+    const { routeIdx } = newRoute;
+    state.tabRouterList = state.tabRouterList.slice(0, routeIdx).concat(state.tabRouterList.slice(routeIdx + 1));
+  },
+  // 处理关闭右侧
+  subtractTabRouterBehind(state: TTabRouterType, newRoute: TRouterInfo) {
+    const { routeIdx } = newRoute;
+    state.tabRouterList = state.tabRouterList.slice(0, routeIdx + 1);
+  },
+  // 处理关闭左侧
+  subtractTabRouterAhead(state: TTabRouterType, newRoute: TRouterInfo) {
+    const { routeIdx } = newRoute;
+    state.tabRouterList = homeRoute.concat(state.tabRouterList.slice(routeIdx));
+  },
+  // 处理关闭其他
+  subtractTabRouterOther(state: TTabRouterType, newRoute: TRouterInfo) {
+    const { routeIdx } = newRoute;
+    state.tabRouterList = homeRoute.concat([state.tabRouterList?.[routeIdx]]);
+  },
+  removeTabRouterList() {
+    state.tabRouterList = [];
+  },
+  initTabRouterList(state: TTabRouterType, newRoute: TRouterInfo[]) {
+    state.tabRouterList = newRoute;
+  },
+};
+
+const getters = {
+  tabRouterList: (state: TTabRouterType) => state.tabRouterList,
+  isRefreshing: (state: TTabRouterType) => state.isRefreshing,
+};
+
+const actions = {};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters,
+};

package/src/template/Vue2/src/store/modules/user.ts

@@ -0,0 +1,98 @@
+import { TOKEN_NAME } from '@/config/global';
+
+const InitUserInfo = {
+  roles: [],
+};
+
+// 定义的state初始值
+const state = {
+  token: localStorage.getItem(TOKEN_NAME) || 'main_token', // 默认token不走权限
+  userInfo: InitUserInfo,
+};
+
+const mutations = {
+  setToken(state, token) {
+    localStorage.setItem(TOKEN_NAME, token);
+    state.token = token;
+  },
+  removeToken(state) {
+    localStorage.removeItem(TOKEN_NAME);
+    state.token = '';
+  },
+  setUserInfo(state, userInfo) {
+    state.userInfo = userInfo;
+  },
+};
+
+const getters = {
+  token: (state) => state.token,
+  roles: (state) => state.userInfo?.roles,
+};
+
+const actions = {
+  async login({ commit }, userInfo) {
+    const mockLogin = async (userInfo) => {
+      // 登录请求流程
+      console.log(userInfo);
+      // const { account, password } = userInfo;
+      // if (account !== 'td') {
+      //   return {
+      //     code: 401,
+      //     message: '账号不存在',
+      //   };
+      // }
+      // if (['main_', 'dev_'].indexOf(password) === -1) {
+      //   return {
+      //     code: 401,
+      //     message: '密码错误',
+      //   };
+      // }
+      // const token = {
+      //   main_: 'main_token',
+      //   dev_: 'dev_token',
+      // }[password];
+      return {
+        code: 200,
+        message: '登陆成功',
+        data: 'main_token',
+      };
+    };
+
+    const res = await mockLogin(userInfo);
+    if (res.code === 200) {
+      commit('setToken', res.data);
+    } else {
+      throw res;
+    }
+  },
+  async getUserInfo({ commit, state }) {
+    const mockRemoteUserInfo = async (token) => {
+      if (token === 'main_token') {
+        return {
+          name: 'td_main',
+          roles: ['ALL_ROUTERS'],
+        };
+      }
+      return {
+        name: 'td_dev',
+        roles: ['UserIndex', 'DashboardBase', 'login'],
+      };
+    };
+
+    const res = await mockRemoteUserInfo(state.token);
+
+    commit('setUserInfo', res);
+  },
+  async logout({ commit }) {
+    commit('removeToken');
+    commit('setUserInfo', InitUserInfo);
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters,
+};

package/src/template/Vue2/src/style/font-family.less

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'TencentSansW7';
+  src: url('data:application/font-woff;charset=utf-8;base64,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') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}

package/src/template/Vue2/src/style/index.less

@@ -0,0 +1,5 @@
+@import './variables.less';
+
+@import './font-family.less';
+
+@import './reset.less';

package/src/template/Vue2/src/style/layout.less

@@ -0,0 +1,201 @@
+@import './variables.less';
+@import './font-family.less';
+
+// layout rewrite
+
+.t-layout__sider {
+  width: fit-content;
+}
+
+.t-layout__header {
+  height: auto;
+}
+
+.t-layout.t-layout--with-sider {
+  > .t-layout {
+    flex: 1;
+    min-width: 760px;
+  }
+}
+
+.t-layout.t-layout--with-sider {
+  > .t-layout__content {
+    flex: 1;
+    min-width: 760px;
+  }
+}
+
+.t-menu--dark .t-menu__operations .t-icon {
+  color: rgba(255, 255, 255, 0.55);
+  &:hover {
+    cursor: pointer;
+  }
+}
+.t-default-menu.t-menu--dark {
+  background: var(--td-gray-color-13);
+}
+.t-default-menu:not(.t-menu--dark) .t-menu__item.t-is-active:not(.t-is-opened) {
+  background-color: var(--td-brand-color-1);
+  color: var(--td-brand-color);
+  .t-icon {
+    color: var(--td-brand-color);
+  }
+}
+
+.t-alert--info {
+  background-color: var(--td-brand-color-1);
+}
+
+.@{starter-prefix} {
+  // 布局元素调整
+  &-wrapper {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-main-wrapper {
+    height: 500px;
+    overflow: scroll;
+  }
+
+  &-side-nav-layout {
+    &-relative {
+      height: 100%;
+    }
+  }
+
+  &-content-layout {
+    padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
+  }
+
+  &-layout {
+    height: calc(100vh - var(--td-comp-size-xxxl));
+    overflow-y: scroll;
+
+    &-tabs-nav {
+      max-width: 100%;
+      position: fixed;
+      overflow: visible;
+      z-index: 100;
+    }
+    &-tabs-nav + .@{starter-prefix}-content-layout {
+      padding-top: var(--td-comp-paddingTB-xl);
+    }
+
+    &::-webkit-scrollbar {
+      width: 8px;
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 6px;
+      border: 2px solid transparent;
+      background-clip: content-box;
+      background-color: var(--td-scrollbar-color);
+    }
+  }
+
+  &-footer-layout {
+    padding: 0;
+    margin-bottom: var(--td-comp-margin-l);
+  }
+
+  // slideBar
+  &-sidebar-layout {
+    height: 100%;
+  }
+
+  &-sidebar-compact {
+    width: var(--td-comp-size-xxxl);
+  }
+
+  &-sidebar-layout-side {
+    z-index: 100;
+  }
+
+  &-side-nav {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    z-index: 200;
+    transition: all 0.3s;
+    min-height: 100%;
+
+    &-mix {
+      top: var(--td-comp-size-xxxl);
+
+      &-fixed {
+        top: var(--td-comp-size-xxxl);
+        z-index: 0;
+      }
+    }
+
+    &-no-fixed {
+      position: relative;
+      z-index: 1;
+    }
+
+    &-no-logo {
+      z-index: 1;
+    }
+
+    &-logo-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    &-logo-t-logo {
+      height: 32px;
+      width: 100%;
+    }
+
+    &-logo-tdesign-logo {
+      padding: 0 24px;
+      height: 32px;
+      width: 100%;
+      color: var(--td-text-color-primary);
+    }
+
+    &-logo-normal {
+      color: var(--td-brand-color);
+      font: var(--td-font-body-large);
+      transition: all 0.3s;
+    }
+  }
+
+  &-side-nav-placeholder {
+    flex: 1 1 232px;
+    min-width: 232px;
+    transition: all 0.3s;
+
+    &-hidden {
+      flex: 1 1 72px;
+      min-width: 72px;
+      transition: all 0.3s;
+    }
+  }
+}
+
+.route-tabs-dropdown {
+  .t-icon {
+    margin-right: 8px;
+  }
+}
+
+.logo-container {
+  cursor: pointer;
+  display: inline-flex;
+  height: var(--td-comp-size-xxxl);
+  margin-left: 24px;
+}
+
+.version-container {
+  color: var(--td-text-color-primary);
+  opacity: 0.4;
+}