Superset如何快速建立看板CSS模板

在superset0.3.6的看板，在新增和编辑时，是能够直接添加css样式去控制整个看板页面任意元素的样式。或者在管理菜单--css模板添加相应css模板，而后编辑看板时直接选择应用css模板。
这个功能确实是香，这能够实现不用修改一句源代码就将看板的风格、样式彻底改变，好比以下这样：

但说实话，直接在看板的样式编辑弹窗里写样式，实在是太痛苦了，或者说这**彻底接受不了呀！
痛点以下：

• 实时预览效果太差--须要先保存，而后试下效果，而后继续编辑看板，选择编辑CSS模板，再接着写，如此往复；
• 没有代码提示；
• 不能够使用css预处理语言；

这是简单分享，我是使用使用gulp+electron解决这些问题的。

项目初始化

mkdir theme_editor
cd theme_editor
npm init -y

使用electron加载页面注入css

安装electron,下载electron会须要一点时间，可尝试使用cnpm

npm install electron -D

根目录下添加main.js

const { app, BrowserWindow } = require('electron')

// 建立electron window 
function createWindow () {
  const win = new BrowserWindow({
    webPreferences: {
      // 开启开发工具，方便调试
      devTools: true
    }
  })
  // superset web服务地址
  // 建议使用生产地址，本地就能够不须要启动superset后端服务了
  const url = 'http://127.0.0.1:5000'
  // 这个是要插入css样式文件的页面路径
  // 并不须要全部页面都插入css样式
  // 全部的看板页面都插入css样式
  const insertCssPath = new RegExp('/superset/dashboard/')
  // 若是是在本地superset的服务
  // 可直接把css文件放在superset项目的superset/static/assets目录下，而后以下使用
  // 若是是加载的生产地址，则可以使用IIS或者Nginx搭建一个本地web服务，返回css文件
  // 直接如：http://localhost:8080/style/theme.css,使用
  const cssUrl = '/static/assets/theme.css'

  // 加载页面
  win.loadURL(url)

  // 监听页面准备完成，插入样式
  win.webContents.on('dom-ready', () => {
    let webUrl = win.webContents.getURL()
    
    if (insertCssPath.test(webUrl)) {
      // 若是是须要插入样式文件
      // 执行js代码往当前页面插入样式文件
      win.webContents.executeJavaScript(`
        const link = document.createElement('link');
        link.setAttribute('type','text/css');
        link.setAttribute('rel','stylesheet');
        link.setAttribute('href','${cssUrl}');
        document.head.appendChild(link);`
      )

      return false
    }

  })

}

app.whenReady().then(createWindow)

package.json添加一个脚本，修改main属性：

{
  "name": "theme_editor",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^10.1.2"
  }
}

在superset项目，superset/static/assets目录下添加theme.css

#app {
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #3F4685 0%, #222648 100%);
}

而后，跑起superset先后端服务。当前目录执行命令

npm run start

若是一切正常，上面命令会弹出一个electron窗口，加载superset的web服务，登录后打开任意一个看板，看板的背景会变成theme文件设置成的颜色，以下：

这里有几个须要强调注意的地方：

1. loadURL的URL请根据实际状况配置(本地也可能并不是5000端口)，建议使用线上服务；
2. 关于css文件的路径，使用superset才可直接放在superset/static目录下，如何使用线上地址，须要在本地搭建web服务来访问css文件地址；
3. 若是使用superset服务加载css文件，会有缓存，须要在开发者工具的network中禁用缓存(Disable cache);
4. electron窗口中使用；

以上，咱们就实现了如何使用electron实现能够在本身喜欢的编辑器中，编辑样式了。但仍是有如下问题：

1. 虽然预览比以前好了，但每次修改后仍是要ctrl+r去刷新，没有作到自动刷新。
2. 若是我想使用CSS预编译语言呢？

接下来，用gulp解决上面两个问题。

使用gulp结合electron-connect实现自动刷新

安装相关依赖：

npm install gulp gulp-cli electron-connect -D

添加gulpfile.js:

const { watch, task } = require('gulp');
const elecConnect = require('electron-connect').server.create(); 

// 样式修改使用electron-connect刷新，electron窗体
function reload (cb) {
  elecConnect.reload()
  cb()
}

task('watch', function () {
  elecConnect.start()
  watch(['./theme.css'], reload)
})

同时，在main.js中使用connect：

// 修改main.js,在第二行引入connect
const client = require('electron-connect').client
...
// 在win.loadURL(url)后添加
client.create(win)

在当前目标下添加theme.css，起个IIS服务指向theme_editor，**我这里端口是88,因此须要把main.js的cssUrl值修改成http://localhost:88/theme.css

// main.js
...
const cssUrl = 'http://localhost:88/theme.css'
...

最后，当前目录执行命令：

npx gulp watch

若是这里没出问题，那么，你修改theme.css后，electron-connect就会自动把electron窗口当前的页面刷新一下。这里我碰到一个问题，提示electron不存在，删除node_modules再从新install一次解决。这里还有一点要注意下，若是npm版本小于5.2，是没法使用npx,要么升级node版本，要么全局安装gulp-cli而后直接跑gulp watch。
好了，到目前为止，咱们又解决了一个自动刷新的需求。下面，咱们来实现一下预处理。

使用gulp-less实现预处理

安装gulp-less,若是想使用其它css预编译语言，能够安装相关的gulp插件

npm install gulp-less -D

修改gulpfile.js

const { watch, task, dest, src, series } = require('gulp')
const elecConnect = require('electron-connect').server.create() 
const less = require('gulp-less')


// 样式修改使用electron-connect刷新，electron窗体
function reload (cb) {
  elecConnect.reload()
  cb()
}

// 编译less
function lessCompier () {
  return src('./*.less')
  .pipe(less())
  .pipe(dest('./'))
}

task('watch', function () {
  elecConnect.start()
  series(lessCompier)()
  // 修改成监听less改变
  watch(['./theme.less'], series(lessCompier, reload))
})

添加theme.less

#app{
  height: 100%;
  overflow: hidden;
  background: linear-gradient(180deg, #3F4685 0%, #222648 100%);
}

再次运行npx gulp watch,这时，只要你修改theme.less,页面也会自动刷新了。

其它

到这里，咱们的需求已经实在。但依然还有几个不完美的地方，好比每次启动electron咱们都须要从新登陆下，能够这样处理下：

// 在main.js的dom-ready事件的回调函数里面
// 判断下若是是进行了登陆页面，自动输入密码并登录
if (/\/login\/$/.test(webUrl)) {
  win.webContents.insertCSS('html, body { background-color: #f00; }')
  // 下面输入你系统的用户名，密码
  win.webContents.executeJavaScript(`
    $("#username")[0].value="admin";
    $("#password")[0].value="123456";
    $("form[name=login]")[0].submit();
  `, true)
  .then(() => {
    console.log('login success')
  })
  .catch(err => {
    console.log('login Error:', err)
  })
  return false
}

若是以为，但愿每次都直接登录，并跳转到具体看板，咱们能够粥在main.js的dom-ready事件的回调函数后面添加代码：

// href填入指定url
win.webContents.executeJavaScript(`location.href="http://127.0.0.1:5000/superset/dashboard/births/"`)

以上，完整代码: theme-editor。

有时，咱们想作的可能更复杂，好比对小图片转base64,对于未转base64的图片但愿能够自动输出到指定目录并在css文件中作替换，压缩css代码，打包前先压缩图片等等，这些gulp都有相应的插件去实现。相应能够看theme-editor,dev分支的gulpfile文件。