git-sync/crawlab
1
0
Fork 0
mirror of https://github.com/crawlab-team/crawlab.git synced 2026-01-22 17:31:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

build(ui): migrated to pnpm and vite

Browse Source
This commit is contained in:
Marvin Zhang
2022-12-03 17:48:25 +08:00
parent e0cb6196b8
commit 1d7f2aa22c
8 changed files with 3930 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/public/index.html → frontend/index.html
View File

@@ -1,18 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="icon" type="image/x-icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="font-awesome.min.css">
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<script>
window.VUE_APP_API_BASE_URL = '<%= VUE_APP_API_BASE_URL %>';
window.VUE_APP_INIT_UMENG = '<%= VUE_APP_INIT_UMENG %>';
window.VUE_APP_INIT_BAIDU_TONGJI = '<%= VUE_APP_INIT_BAIDU_TONGJI %>';
</script>
<script src="/js/vue3-sfc-loader.js"></script>
<link href="favicon.ico" rel="icon">
<link href="font-awesome.min.css" rel="stylesheet">
<title>Crawlab</title>
<script src="js/vue3-sfc-loader.js"></script>
<script src="js/login-canvas.js"></script>
<script src="simplemde/simplemde.js"></script>
<style>
#loading-placeholder {
position: fixed;
@@ -216,6 +213,7 @@
</div>
</div>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<!-- built files will be auto injected -->
</body>
</html>

26
frontend/package.json
View File

@@ -2,9 +2,9 @@
"name": "@crawlab/app",
"version": "0.6.0",
"scripts": {
"serve": "vue-cli-service serve",
"serve": "vite --debug",
"serve:dist": "serve dist",
"build": "vue-cli-service build",
"build": "vite build",
"build:development": "vue-cli-service build --mode development",
"build:docker": "vue-cli-service build --mode docker",
"build:analyze": "vue-cli-service build --mode analyze"
@@ -21,26 +21,22 @@
"@fortawesome/free-regular-svg-icons": "^6.0.0",
"@fortawesome/free-solid-svg-icons": "^6.0.0",
"@fortawesome/vue-fontawesome": "^3.0.0-5",
"@vitejs/plugin-vue": "^3.2.0",
"atom-material-icons": "^3.0.0",
"codemirror": "^5.59.1",
"crawlab-ui": "0.6.0-18",
"crawlab-ui": "0.6.0-23",
"echarts": "^5.1.2",
"element-plus": "^1.3.0-beta.10",
"vue": "^3.2",
"vue-router": "^4.0.11"
},
"devDependencies": {
"@babel/core": "^7.17.2",
"@babel/preset-env": "^7.16.11",
"@babel/preset-typescript": "^7.16.7",
"@vue/cli-plugin-babel": "^4.5.15",
"@vue/cli-service": "^4.5.15",
"@vue/compiler-sfc": "^3.0.11",
"babel-loader": "^8.2.3",
"copy-webpack-plugin": "^6.0",
"raw-loader": "^4.0.2",
"serve": "^13.0.2",
"webpack-bundle-analyzer": "^4.5.0"
"@types/node": "^18.11.10",
"@vue/compiler-sfc": "^3.2.45",
"typescript": "^4.6.4",
"vite": "^3.2.4",
"vite-aliases": "^0.9.7",
"vite-plugin-dynamic-import": "^1.2.4",
"vue-tsc": "^1.0.9"
}
}

3605
frontend/pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

258
frontend/public/js/login-canvas.js Normal file
View File

@@ -0,0 +1,258 @@
function initCanvas() {
let canvas, ctx, circ, nodes, mouse, SENSITIVITY, SIBLINGS_LIMIT, DENSITY, NODES_QTY, ANCHOR_LENGTH, MOUSE_RADIUS,
TURBULENCE, MOUSE_MOVING_TURBULENCE, MOUSE_ANGLE_TURBULENCE, MOUSE_MOVING_RADIUS, BASE_BRIGHTNESS, RADIUS_DEGRADE,
SAMPLE_SIZE
let handle
// how close next node must be to activate connection (in px)
// shorter distance == better connection (line width)
SENSITIVITY = 200
// note that siblings limit is not 'accurate' as the node can actually have more connections than this value that's because the node accepts sibling nodes with no regard to their current connections this is acceptable because potential fix would not result in significant visual difference
// more siblings == bigger node
SIBLINGS_LIMIT = 10
// default node margin
DENSITY = 100
// total number of nodes used (incremented after creation)
NODES_QTY = 0
// avoid nodes spreading
ANCHOR_LENGTH = 100
// highlight radius
MOUSE_RADIUS = 200
// turbulence of randomness
TURBULENCE = 3
// turbulence of mouse moving
MOUSE_MOVING_TURBULENCE = 50
// turbulence of mouse moving angle
MOUSE_ANGLE_TURBULENCE = 0.002
// moving radius of mouse
MOUSE_MOVING_RADIUS = 600
// base brightness
BASE_BRIGHTNESS = 0.12
// radius degrade
RADIUS_DEGRADE = 0.4
// sample size
SAMPLE_SIZE = 0.5
circ = 2 * Math.PI
nodes = []
canvas = document.querySelector('#canvas')
if (!canvas) return;
resizeWindow()
ctx = canvas.getContext('2d')
if (!ctx) {
alert('Ooops! Your browser does not support canvas :\'(')
}
function Mouse(x, y) {
this.anchorX = x
this.anchorY = y
this.x = x
this.y = y - MOUSE_RADIUS / 2
this.angle = 0
}
Mouse.prototype.computePosition = function () {
// this.x = this.anchorX + MOUSE_MOVING_RADIUS / 2 * Math.sin(this.angle)
// this.y = this.anchorY - MOUSE_MOVING_RADIUS / 2 * Math.cos(this.angle)
}
Mouse.prototype.move = function () {
let vx = Math.random() * MOUSE_MOVING_TURBULENCE
let vy = Math.random() * MOUSE_MOVING_TURBULENCE
if (this.x + vx + MOUSE_RADIUS / 2 > window.innerWidth || this.x + vx - MOUSE_RADIUS / 2 < 0) {
vx = -vx
}
if (this.y + vy + MOUSE_RADIUS / 2 > window.innerHeight || this.y + vy - MOUSE_RADIUS / 2 < 0) {
vy = -vy
}
this.x += vx
this.y += vy
// this.angle += Math.random() * MOUSE_ANGLE_TURBULENCE * 2 * Math.PI
// this.angle -= Math.floor(this.angle / (2 * Math.PI)) * 2 * Math.PI
// this.computePosition()
}
function Node(x, y) {
this.anchorX = x
this.anchorY = y
this.x = Math.random() * (x - (x - ANCHOR_LENGTH)) + (x - ANCHOR_LENGTH)
this.y = Math.random() * (y - (y - ANCHOR_LENGTH)) + (y - ANCHOR_LENGTH)
this.vx = Math.random() * TURBULENCE - 1
this.vy = Math.random() * TURBULENCE - 1
this.energy = Math.random() * 100
this.radius = Math.random()
this.siblings = []
this.brightness = 0
}
Node.prototype.drawNode = function () {
let color = 'rgba(64, 156, 255, ' + this.brightness + ')'
ctx.beginPath()
ctx.arc(this.x, this.y, 2 * this.radius + 2 * this.siblings.length / SIBLINGS_LIMIT / 1.5, 0, circ)
ctx.fillStyle = color
ctx.fill()
}
Node.prototype.drawConnections = function () {
for (let i = 0; i < this.siblings.length; i++) {
let color = 'rgba(64, 156, 255, ' + this.brightness + ')'
ctx.beginPath()
ctx.moveTo(this.x, this.y)
ctx.lineTo(this.siblings[i].x, this.siblings[i].y)
ctx.lineWidth = 1 - calcDistance(this, this.siblings[i]) / SENSITIVITY
ctx.strokeStyle = color
ctx.stroke()
}
}
Node.prototype.moveNode = function () {
this.energy -= 2
if (this.energy < 1) {
this.energy = Math.random() * 100
if (this.x - this.anchorX < -ANCHOR_LENGTH) {
this.vx = Math.random() * TURBULENCE
} else if (this.x - this.anchorX > ANCHOR_LENGTH) {
this.vx = Math.random() * -TURBULENCE
} else {
this.vx = Math.random() * 2 * TURBULENCE - TURBULENCE
}
if (this.y - this.anchorY < -ANCHOR_LENGTH) {
this.vy = Math.random() * TURBULENCE
} else if (this.y - this.anchorY > ANCHOR_LENGTH) {
this.vy = Math.random() * -TURBULENCE
} else {
this.vy = Math.random() * 2 * TURBULENCE - TURBULENCE
}
}
this.x += this.vx * this.energy / 100
this.y += this.vy * this.energy / 100
}
function Handle() {
this.isStopped = false
}
Handle.prototype.stop = function () {
this.isStopped = true
}
function initNodes() {
ctx.clearRect(0, 0, canvas.width, canvas.height)
nodes = []
for (let i = DENSITY; i < canvas.width; i += DENSITY) {
for (let j = DENSITY; j < canvas.height; j += DENSITY) {
nodes.push(new Node(i, j))
NODES_QTY++
}
}
}
function initMouse() {
mouse = new Mouse(canvas.width / 2, canvas.height / 2)
}
function initHandle() {
handle = new Handle()
}
function calcDistance(node1, node2) {
return Math.sqrt(Math.pow(node1.x - node2.x, 2) + (Math.pow(node1.y - node2.y, 2)))
}
function findSiblings() {
let node1, node2, distance
for (let i = 0; i < NODES_QTY; i++) {
node1 = nodes[i]
node1.siblings = []
for (let j = 0; j < NODES_QTY; j++) {
node2 = nodes[j]
if (node1 !== node2) {
distance = calcDistance(node1, node2)
if (distance < SENSITIVITY) {
if (node1.siblings.length < SIBLINGS_LIMIT) {
node1.siblings.push(node2)
} else {
let node_sibling_distance = 0
let max_distance = 0
let s
for (let k = 0; k < SIBLINGS_LIMIT; k++) {
node_sibling_distance = calcDistance(node1, node1.siblings[k])
if (node_sibling_distance > max_distance) {
max_distance = node_sibling_distance
s = k
}
}
if (distance < max_distance) {
node1.siblings.splice(s, 1)
node1.siblings.push(node2)
}
}
}
}
}
}
}
function redrawScene() {
if (handle && handle.isStopped) {
return
}
resizeWindow()
ctx.clearRect(0, 0, canvas.width, canvas.height)
findSiblings()
let i, node, distance
for (i = 0; i < NODES_QTY; i++) {
node = nodes[i]
distance = calcDistance({
x: mouse.x,
y: mouse.y
}, node)
node.brightness = (1 - Math.log(distance / MOUSE_RADIUS * RADIUS_DEGRADE)) * BASE_BRIGHTNESS
}
for (i = 0; i < NODES_QTY; i++) {
node = nodes[i]
if (node.brightness) {
node.drawNode()
node.drawConnections()
}
node.moveNode()
}
// mouse.move()
setTimeout(() => {
requestAnimationFrame(redrawScene)
}, 50)
}
function initHandlers() {
document.addEventListener('resize', resizeWindow, {passive: true})
// canvas.addEventListener('mousemove', mousemoveHandler, false)
}
function resizeWindow() {
canvas.width = window.innerWidth
canvas.height = window.innerHeight
}
function mousemoveHandler(e) {
mouse.x = e.clientX
mouse.y = e.clientY
}
function init() {
initHandlers()
initNodes()
initMouse()
initHandle()
redrawScene()
}
function reset() {
handle.isStopped = true
}
init()
window.resetCanvas = reset
}

15
frontend/public/simplemde/simplemde.js Normal file
View File

File diff suppressed because one or more lines are too long

2
frontend/src/main.ts
View File

@@ -1,4 +1,4 @@
import 'crawlab-ui/dist/crawlab-ui.css';
import '../node_modules/crawlab-ui/dist/style.css';
import 'vue';
import {createApp} from 'crawlab-ui';

10
frontend/tsconfig.json
View File

@@ -12,9 +12,6 @@
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
@@ -25,14 +22,17 @@
"dom",
"dom.iterable",
"scripthost"
],
"typeRoots": [
"src/interfaces"
]
},
"include": [
"src/shims-vue.d.ts",
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"__test__/**/*.ts",
"__test__/**/*.tsx"
"__test__/**/*.spec.ts"
],
"exclude": [
"node_modules",

28
frontend/vite.config.ts Normal file
View File

@@ -0,0 +1,28 @@
import {resolve} from 'path';
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import dynamicImport from 'vite-plugin-dynamic-import';
export default defineConfig({
resolve: {
alias: [
{find: '@', replacement: resolve(__dirname, 'src')},
],
extensions: [
'.js',
'.ts',
'.jsx',
'.tsx',
'.json',
'.vue',
'.scss',
]
},
plugins: [
vue(),
dynamicImport(),
],
server: {
cors: true,
},
});