水印模块

  1. import { createGlobalStyle } from 'styled-components'
  3. // 卡片水印
  4. // 防止表格遮挡水印
  5. const Water = createGlobalStyle`
  6.   .ant-card {
  7.     // prettier-ignore
  8.     background-position: 0 0, 160PX 160PX !important;
  9.     background-repeat: repeat, repeat !important;
  10.     background-image: url('${window.location.origin}/script/account/print.svg'), url('${window.location.origin}/script/account/print.svg') !important;
  11.   }
  12.   .ant-table-placeholder {
  13.     background: transparent !important;
  14.   }
  15. `
  17. export default Water

获取水印

app/router.js

  1. router.get('/script/account/print.svg', controller.script.account.print)

app/controller/script/account.js

  1. 'use strict'
  3. const { Controller } = require('egg')
  4. const path = require('path')
  5. const TextToSVG = require('text-to-svg')
  7. const textToSVG = TextToSVG.loadSync(path.resolve(__dirname, '../../fonts/SourceHanSansCN-Light.otf'))
  8. const attributes = { fill: '#ededed', stroke: '#ededed', transform: 'rotate(-20, 90 75)' }
  9. const options = { anchor: 'center middle', x: 160, y: 160, width: 320, height: 320, fontSize: 18, letterSpacing: 0.05, attributes }
  11. const getSvgContent = text => {
  12.   const svgPath = textToSVG.getPath(text, options)
  14.   return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${options.width}" height="${options.height}">${svgPath}</svg>`
  15. }
  17. const loginRules = {
  18.   token: {
  19.     type: 'string',
  20.     required: true,
  21.   },
  22. }
  24. class EggController extends Controller {
  25.   async print() {
  26.     const accountInfo = await this.ctx.adminUser.getAccountInfo()
  27.     const { isLogin, name, mobile } = accountInfo
  28.     const content = isLogin ? `${name}${String(mobile).slice(7)}` : '小帮规划'
  30.     this.ctx.type = 'image/svg+xml'
  31.     this.ctx.body = getSvgContent(content)
  32.   }
  34.   async infojs() {
  35.     const token = await this.ctx.cookieUtils.getToken()
  36.     const accountInfo = await this.ctx.adminUser.getAccountInfo()
  37.     const info = Object.assign({ token }, accountInfo)
  39.     this.ctx.type = 'application/javascript'
  40.     this.ctx.body = `
  41.       window.APP_ACCOUNT = ${JSON.stringify(info)};
  42.     `
  43.   }
  45.   async login() {
  46.     try {
  47.       this.ctx.validator.validateBody(loginRules)
  48.     } catch (error) {
  49.       return this.ctx.reject(10004, error.message)
  50.     }
  52.     const { token } = this.ctx.request.body
  53.     this.ctx.cookieUtils.setToken(token)
  55.     return this.ctx.resolve()
  56.   }
  58.   async logout() {
  59.     const { deprecateTokenKey } = this.app.config
  61.     this.ctx.cookieUtils.removeToken()
  62.     this.ctx.cookies.set(deprecateTokenKey, null, this.ctx.cookieUtils.cookieOptions)
  64.     return this.ctx.redirect('/')
  65.   }
  66. }
  68. module.exports = EggController

依赖

package.json

  1. "@types/styled-components": "^5.0.1",
  2. "babel-plugin-styled-components": "^1.10.7",
  3. "styled-components": "^5.0.1",

配置

.umirc.js

  1. extraBabelPlugins: [
  2.     [
  3.       'babel-plugin-styled-components',
  4.       {
  5.         ssr: false,
  6.         fileName: false,
  7.         displayName: false,
  8.       },
  9.     ],
  10.   ],

使用

  1. import { useState, useEffect, Fragment } from 'react'
  2. import { ConfigProvider } from 'antd'
  3. import ProLayout from '@ant-design/pro-layout'
  4. import Dashboard from '@xb/layouts/Dashboard'
  5. import Water from '@xb/components/Water'
  6. import PageLoading from '@xb/components/PageLoading'
  7. import HeaderContent from '@xb/components/HeaderContent'
  8. import router from 'umi/router'
  9. import { registerApplication, start } from 'single-spa'
  10. import { connect } from 'dva'
  11. import iconLogo from '@xb/assets/logo.gif'
  13. // 布局默认样式配置
  14. const layoutSettings = {
  15.   navTheme: 'dark',
  16.   primaryColor: '#1890ff',
  17.   layout: 'sidemenu',
  18.   contentWidth: 'Fluid',
  19.   fixedHeader: true,
  20.   autoHideHeader: false,
  21.   fixSiderbar: true,
  22.   menu: {
  23.     locale: true,
  24.   },
  25.   title: '小帮规划',
  26.   pwa: false,
  27.   colorWeak: false,
  28. }
  30. const { mobileLayoutPrefix, wxworkAuthBlackList, menuList, subappList } = window.APP_STATE
  32. // 获取扁平菜单标识
  33. const getFlattenKeys = menuList => {
  34.   let flattenKeys = []
  36.   menuList.forEach(item => {
  37.     flattenKeys.push({
  38.       path: item.path,
  39.       keys: item.keys,
  40.     })
  42.     if (item.children) {
  43.       flattenKeys = [...flattenKeys, ...getFlattenKeys(item.children)]
  44.     }
  45.   })
  47.   return flattenKeys
  48. }
  50. // 判断当前菜单是否展开
  51. const isMenuExpanded = (currentKeys = [], menuKeys = []) => {
  52.   const currentKey = currentKeys.join(',')
  53.   const menuKey = menuKeys.join(',')
  55.   return currentKey.indexOf(menuKey) !== -1
  56. }
  58. // 获取父级菜单展开键
  59. const getFatherKeys = (keys = []) => {
  60.   return keys.filter((item, index) => index + 1 !== keys.length)
  61. }
  63. // 获取默认展开菜单
  64. const flattenKeys = getFlattenKeys(menuList)
  65. const defaultMenu = flattenKeys.find(item => item.path === window.location.pathname)
  66. const defaultOpenKeys = defaultMenu ? defaultMenu.keys : []
  68. const BasicLayout = ({ collapsed, location, dispatch }) => {
  69.   const [openKeys, setOpenKeys] = useState(defaultOpenKeys)
  71.   const { pathname } = location
  73.   // 获取应用名称
  74.   const getAppByPath = pathname => {
  75.     const row = subappList.find(({ manifest }) => {
  76.       return manifest.paths.some(prefix => pathname.startsWith(prefix))
  77.     })
  79.     return Object.assign({}, row)
  80.   }
  82.   // 应用注册
  83.   useEffect(() => {
  84.     subappList.forEach(({ name, manifest }) => {
  85.       const loadingFunction = () => window.System.import(manifest.mainScript)
  87.       const activityFunction = location => {
  88.         const isMatched = manifest.paths.some(prefix => location.pathname.startsWith(prefix))
  89.         return isMatched
  90.       }
  92.       registerApplication(name, loadingFunction, activityFunction)
  93.       start()
  94.     })
  95.   }, [])
  97.   // 侧边栏开关
  98.   const onCollapse = collapsed => {
  99.     dispatch({
  100.       type: 'global/changeLayoutCollapsed',
  101.       payload: Boolean(collapsed),
  102.     })
  103.   }
  105.   // 获取当前子应用
  106.   const { name: sourceAppName, manifest: sourceManifest } = getAppByPath(pathname)
  107.   const hasMatched = Boolean(sourceAppName && sourceManifest)
  109.   // 菜单数据
  110.   const menuDataRender = () => menuList
  112.   // 父级菜单
  113.   const subMenuItemRender = (menuItemProps, defaultDom) => {
  114.     const onMenuItemClick = () => {
  115.       const isExpanded = isMenuExpanded(openKeys, menuItemProps.keys)
  116.       const keys = isExpanded ? getFatherKeys(menuItemProps.keys) : menuItemProps.keys
  117.       setOpenKeys(keys)
  118.     }
  120.     return (
  121.       <div style={{ overflow: 'hidden' }} onClick={onMenuItemClick}>
  122.         {defaultDom}
  123.       </div>
  124.     )
  125.   }
  127.   // 基础菜单
  128.   // 参考文档 http://docs.xiaobangtouzi.com/pages/viewpage.action?pageId=6529045
  129.   const menuItemRender = (menuItemProps, defaultDom) => {
  130.     const onItemClick = () => {
  131.       setOpenKeys(menuItemProps.keys)
  133.       const { name: targetAppName } = getAppByPath(menuItemProps.path)
  134.       const httpReload = sourceAppName !== targetAppName
  135.       const isReplacePath = pathname === menuItemProps.path
  137.       switch (menuItemProps.type) {
  138.         case 0:
  139.           return window.open(window.APP_HERO.Linker.getDeprecatedAdminUrl(menuItemProps.path))
  140.         case 1:
  141.           return window.open(window.APP_HERO.Linker.getInsuranceAdminUrl(menuItemProps.path))
  142.         case 2:
  143.           if (httpReload) {
  144.             return isReplacePath ? window.location.replace(menuItemProps.path) : window.open(menuItemProps.path, '_self')
  145.           }
  147.           return isReplacePath ? router.replace({ pathname: menuItemProps.path }) : router.push({ pathname: menuItemProps.path })
  148.         case 3:
  149.           return window.open(menuItemProps.originalUrl)
  150.         default:
  151.           return null
  152.       }
  153.     }
  155.     return (
  156.       <div style={{ overflow: 'hidden' }} onClick={onItemClick}>
  157.         {defaultDom}
  158.       </div>
  159.     )
  160.   }
  162.   const children = (
  163.     <Fragment>
  164.       <Water />
  165.       <div id='sub-app'>
  166.         {/* 首页友情提示 */}
  167.         {pathname === '/' && <Dashboard />}
  168.         {/* 子应用匹配成功显示默认加载动画 */}
  169.         {hasMatched && <PageLoading />}
  170.       </div>
  171.       {/* 异步加载样式 */}
  172.       {hasMatched && <link rel='stylesheet' href={sourceManifest.mainStyle} />}
  173.     </Fragment>
  174.   )
  176.   // 没有侧边栏
  177.   const withoutLayout = wxworkAuthBlackList.includes(pathname) || pathname.startsWith(mobileLayoutPrefix)
  179.   if (withoutLayout) {
  180.     return <ConfigProvider autoInsertSpaceInButton={false}>{children}</ConfigProvider>
  181.   }
  183.   return (
  184.     <ConfigProvider autoInsertSpaceInButton={false}>
  185.       <ProLayout
  186.         menuProps={{ openKeys }}
  187.         logo={iconLogo}
  188.         settings={layoutSettings}
  189.         collapsed={collapsed}
  190.         onCollapse={onCollapse}
  191.         subMenuItemRender={subMenuItemRender}
  192.         menuItemRender={menuItemRender}
  193.         menuDataRender={menuDataRender}
  194.         footerRender={false}
  195.         rightContentRender={props => <HeaderContent {...props} />}
  196.         {...layoutSettings}
  197.       >
  198.         {children}
  199.       </ProLayout>
  200.     </ConfigProvider>
  201.   )
  202. }
  204. const connector = ({ global: { collapsed } }) => ({ collapsed })
  205. export default connect(connector)(BasicLayout)