kejun

生成一张用于企业级云服务 / SaaS 官网首页功能卡片的技术插图。

【主题】
[主题描述或附件内容]

【核心技术关系，可选】
[希望重点表达的技术关系；留空时根据主题提炼]

【优先场景，可选】
[希望采用的具体应用场景；留空时根据主题选择最容易用图形表达的场景]

kejun

const babel = require('@babel/core');
const t = require('@babel/types');

const sampleCode = `\
import {uniq, extend, flatten, cloneDeep } from "lodash";
export default function Test() {
  return (
    <Sky.Card>
      Test
      <Wind.Button type="primary" loading>{intl('sas.baseline.inDetection')}</Wind.Button>

kejun

function getUUID() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#ff0000';
  ctx.fillRect(0,0,8,10);
  const b64 = canvas.toDataURL().replace('data:image/png;base64,', '');
  const bin = window.atob(b64);
  return bin2hex(bin.slice(-16, -12));
}

kejun

;(() => {
  const mergeText = (str, text) => {
    if (str === '') {
      return text;
    }
    if (!text || text === ' ' || str === text) {
      return str;
    }
    str = str.replace(/\s+/g, ' ')
             .replace(/\t|\r|\n/g, '');

kejun

// pug
div.menu
  ul
    each v in [1,2,3,4,5,6,7,8]
      li
        a( href='#' )= v
        
 // css
 @mixin circle-layout($radius, $dot-radius, $num) {
  $deg: 360deg / $num;

kejun

/**
 * r: circle -> r, ellipse -> rx, ry 
*/
export const getCenterPoint = (x, y, r) => (r.rx ? {
  x: x + r.rx,
  y: y + r.ry,
  rx: r.rx,
  ry: r.ry,
} : {
  x: x + r,

kejun

package.json
{
  "devDependencies": {
    "autoprefixer": "^7.2.5",
    "babel-preset-env": "^1.6.1",
    "node-sass": "^4.7.2",
    "postcss-inline-svg": "^3.0.0",
    "postcss-write-svg": "^3.0.1"
  },
  "dependencies": {

kejun

body {  background: #333;} 

a {
  display: inline-block;
}

a img{
 position: relative;
 z-index: -1;
}

kejun

  "scripts": {
    "build": "webpack --progress --profile --colors",
    "build-watch": "webpack --progress --profile --colors --watch",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base demo",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

kejun

const path = require('path');
const webpack = require('webpack');
const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractSass = new ExtractTextPlugin({
  filename: 'css/[name].css'
});

const jsBuildPath = path.resolve(__dirname, 'dist');