fixed routing and loading svg issues

.eslintignore

@@ -1,2 +1,3 @@
-*/**/*.js
 ./src/i18n/**/*.ts
+*/**/*.js
+*.js

package.json

@@ -1,18 +1,24 @@
 {
   "name": "crawlab-ui",
-  "version": "0.6.0-beta.202109050019",
+  "version": "0.6.0-beta.202109062027",
   "private": false,
+  "author": {
+    "name": "Marvin Zhang",
+    "email": "[email protected]"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/crawlab-team/crawlab-ui"
   },
+  "license": "BSD-3",
   "scripts": {
     "serve": "vue-cli-service serve --port=8081",
-    "serve:build:local": "vue-cli-service serve --port=8082 --model local",
+    "serve:local": "vue-cli-service serve --port=8081 --mode local",
     "gen:index": "node ./scripts/gen-index.js",
+    "gen:svg": "node ./scripts/gen-svg.js",
     "gen:dts": "node ./scripts/gen-dts.js",
     "prebuild": "yarn run prebuild:gen",
-    "prebuild:gen": "yarn run gen:index",
+    "prebuild:gen": "yarn run gen:index && yarn run gen:svg",
     "postbuild": "yarn run postbuild:gen",
     "postbuild:gen": "yarn run gen:dts",
     "build": "yarn run prebuild && yarn run build:lib && yarn run postbuild",
@@ -76,7 +82,9 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-typescript": "^5.0.2",
+    "base64-img": "^1.0.4",
     "chalk": "^4.1.2",
+    "copy-webpack-plugin": "^6.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.0.0-0",
     "esno": "^0.9.1",
@@ -88,7 +96,8 @@
     "ts-morph": "^12.0.0",
     "typescript": "~3.9.3"
   },
-  "main": "dist/crawlab-ui.umd.js",
+  "main": "dist/crawlab-ui.umd.min.js",
+  "module": "dist/crawlab-ui.umd.min.js",
   "files": [
     "dist",
     "typings"

scripts/gen-svg.js

@@ -0,0 +1,39 @@
+const path = require('path')
+const fs = require('fs')
+const klawSync = require('klaw-sync')
+const base64Img = require('base64-img')
+
+const includedFiles = [
+  '.svg',
+]
+const include = (path) => includedFiles.some(f => path.includes(f))
+
+const genSvg = async() => {
+  const root = path.resolve(__dirname, '../src/assets')
+  const filePaths = klawSync(root, {
+    nodir: true,
+  })
+    .map(item => item.path)
+    .filter(include)
+
+  await Promise.all(
+    filePaths.map(async file => {
+      if (file.endsWith('.svg')) {
+        const data = base64Img.base64Sync(file)
+
+        const fileName = path.basename(file).replace(/\.svg$/, '.js')
+        const dirPath = path.resolve(__dirname, `../src/assets/js/svg`)
+        const filePath = `${dirPath}/${fileName}`
+
+        if (!fs.existsSync(dirPath)) fs.mkdirSync(dirPath)
+
+        let content = `module.exports = \`${data}\``
+        await fs.promises.writeFile(filePath, content, 'utf-8')
+      }
+    })
+  )
+}
+
+(async function () {
+  await genSvg()
+})()

src/entry/app.ts

@@ -0,0 +1,3 @@
+import {createApp} from '@/package';
+
+createApp();

src/layouts/BasicLayout.vue

@@ -12,12 +12,11 @@
 </template>
 
 <script lang="ts">
-import {computed, defineComponent, onMounted} from 'vue';
+import {computed, defineComponent} from 'vue';
 import Header from './components/Header.vue';
 import Sidebar from './components/Sidebar.vue';
 import {useStore} from 'vuex';
 import TabsView from '@/layouts/components/TabsView.vue';
-import {initPlugins} from '@/utils/plugin';
 
 export default defineComponent({
   name: 'BasicLayout',

src/layouts/components/Sidebar.vue

@@ -1,12 +1,12 @@
 <template>
   <span :class="sidebarCollapsed ? 'collapsed' : ''" class="sidebar-toggle" @click="toggleSidebar">
-    <font-awesome-icon v-if="!sidebarCollapsed" :icon="['fas', 'outdent']" />
-    <font-awesome-icon v-else :icon="['fas', 'indent']" />
+    <font-awesome-icon v-if="!sidebarCollapsed" :icon="['fas', 'outdent']"/>
+    <font-awesome-icon v-else :icon="['fas', 'indent']"/>
   </span>
   <el-aside :class="sidebarCollapsed ? 'collapsed' : ''" class="sidebar" width="inherit">
     <div class="logo-container">
       <div class="logo">
-        <img :src="logo" alt="logo" className="logo-img" />
+        <img class="logo-img" alt="logo-img" :src="logo"/>
         <span class="logo-title">Crawlab</span>
         <span class="logo-sub-title">
           <div class="logo-sub-title-block">
@@ -32,24 +32,24 @@
             :index="item.path"
             @click="onMenuItemClick(item)"
         >
-          <MenuItemIcon :item="item" size="normal" />
+          <MenuItemIcon :item="item" size="normal"/>
           <template #title>
             <span class="menu-item-title">{{ item.title }}</span>
           </template>
         </el-menu-item>
-        <div class="plugin-anchor" />
+        <div class="plugin-anchor"/>
       </el-menu>
     </div>
   </el-aside>
-  <div class="script-anchor" />
+  <div class="script-anchor"/>
 </template>
 
 <script lang="ts">
 import {computed, defineComponent} from 'vue';
 import {useStore} from 'vuex';
 import {useRoute, useRouter} from 'vue-router';
 import variables from '@/styles/variables.scss';
-import logo from '@/assets/logo.svg';
+import logo from '@/assets/js/svg/logo.js';
 import MenuItemIcon from '@/components/icon/MenuItemIcon.vue';
 import {getPrimaryPath} from '@/utils/path';
 
@@ -59,6 +59,7 @@ export default defineComponent({
     MenuItemIcon,
   },
   setup() {
+    console.debug(logo);
     const router = useRouter();
     const route = useRoute();
     const store = useStore();

src/package/create-app.ts

@@ -1,12 +1,20 @@
 import {createApp as createVueApp} from 'vue';
 import ElementPlus from 'element-plus';
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 import App from './App.vue';
 import router from '@/router';
 import store from '@/store';
-// import i18n from '@/i18n';
+import i18n from '@/i18n';
 import {initBaiduTonji} from '@/admin/baidu';
+import {importScripts, importStylesheets} from '@/package/utils';
 
 const createApp = () => {
+  // import stylesheets
+  importStylesheets();
+
+  // import scripts
+  importScripts();
+
   // baidu tongji
   initBaiduTonji();
 
@@ -19,7 +27,8 @@ const createApp = () => {
     .use(store)
     .use(router)
     .use(ElementPlus)
-    // .use(i18n)
+    .use(i18n)
+    .component('font-awesome-icon', FontAwesomeIcon)
     .mount('#app');
 };
 

src/package/make-installer.ts

@@ -5,6 +5,7 @@ import {fab} from '@fortawesome/free-brands-svg-icons';
 import {far} from '@fortawesome/free-regular-svg-icons';
 import {fas} from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
+import {importStylesheets} from '@/package/utils';
 
 // fontawesome
 library.add(fab, far, fas);
@@ -15,10 +16,7 @@ const makeInstaller = (items: [string, ComponentOptionsMixin][] = []): Plugin =>
   // install function
   const install = (app: App) => {
     // import stylesheets
-    require('normalize.css/normalize.css');
-    require('font-awesome/css/font-awesome.min.css');
-    require('element-plus/lib/theme-chalk/index.css');
-    require('@/styles/index.scss');
+    importStylesheets();
 
     // skip if already exists in apps
     if (apps.includes(app)) return;

src/package/utils.ts

@@ -3,3 +3,14 @@ import {ComponentOptionsMixin} from 'vue';
 export const mapElements = (elements: any) => {
   return Object.keys(elements).map((name) => [name, elements[name]] as [string, ComponentOptionsMixin]);
 };
+
+export const importStylesheets = () => {
+  require('normalize.css/normalize.css');
+  require('font-awesome/css/font-awesome.min.css');
+  require('element-plus/lib/theme-chalk/index.css');
+  require('@/styles/index.scss');
+};
+
+export const importScripts = () => {
+  // require('@/../../public/js/vue3-sfc-loader.js');
+};

src/router/home.ts

@@ -1,11 +1,12 @@
 import {RouteRecordRaw} from 'vue-router';
+import Home from '@/views/home/Home.vue';
 
 const endpoint = '';
 
 export default [
   {
     name: 'Home',
     path: endpoint,
-    component: require('@/views/home/Home.vue'),
+    component: Home,
   },
 ] as Array<RouteRecordRaw>;

src/router/index.ts

@@ -12,13 +12,14 @@ import token from '@/router/token';
 import plugin from '@/router/plugin';
 import {initRouterAuth} from '@/router/hooks/auth';
 import {sendPv} from '@/utils/admin';
+import BasicLayout from '@/layouts/BasicLayout.vue';
 
 export const routes: Array<RouteRecordRaw> = [
   ...login,
   {
     path: '/',
     name: 'Root',
-    component: require('@/layouts/BasicLayout.vue'),
+    component: BasicLayout,
     children: [
       ...home,
       ...node,

src/router/login.ts

@@ -1,11 +1,12 @@
 import {RouteRecordRaw} from 'vue-router';
+import Login from '@/views/login/Login.vue';
 
 const endpoint = '/login';
 
 export default [
   {
     name: 'Login',
     path: endpoint,
-    component: require('@/views/login/Login.vue'),
+    component: Login,
   },
 ] as Array<RouteRecordRaw>;

src/router/node.ts

@@ -1,29 +1,33 @@
 import {RouteRecordRaw} from 'vue-router';
 import {TAB_NAME_OVERVIEW, TAB_NAME_TASKS} from '@/constants/tab';
+import NodeList from '@/views/node/list/NodeList.vue';
+import NodeDetail from '@/views/node/detail/NodeDetail.vue';
+import NodeDetailTabOverview from '@/views/node/detail/tabs/NodeDetailTabOverview.vue';
+import NodeDetailTabTasks from '@/views/node/detail/tabs/NodeDetailTabTasks.vue';
 
 const endpoint = 'nodes';
 
 export default [
   {
     name: 'NodeList',
     path: endpoint,
-    component: require('@/views/node/list/NodeList.vue'),
+    component: NodeList
   },
   {
     name: 'NodeDetail',
     path: `${endpoint}/:id`,
     redirect: to => {
       return {path: to.path + '/' + TAB_NAME_OVERVIEW};
     },
-    component: require('@/views/node/detail/NodeDetail.vue'),
+    component: NodeDetail,
     children: [
       {
         path: TAB_NAME_OVERVIEW,
-        component: require('@/views/node/detail/tabs/NodeDetailTabOverview.vue'),
+        component: NodeDetailTabOverview
       },
       {
         path: TAB_NAME_TASKS,
-        component: require('@/views/node/detail/tabs/NodeDetailTabTasks.vue'),
+        component: NodeDetailTabTasks
       }
     ]
   },

src/router/plugin.ts

@@ -1,25 +1,28 @@
 import {RouteRecordRaw} from 'vue-router';
 import {TAB_NAME_OVERVIEW} from '@/constants/tab';
+import PluginList from '@/views/plugin/list/PluginList.vue';
+import PluginDetailTabOverview from '@/views/plugin/detail/tabs/PluginDetailTabOverview.vue';
+import PluginDetail from '@/views/plugin/detail/PluginDetail.vue';
 
 const endpoint = 'plugins';
 
 export default [
   {
     name: 'PluginList',
     path: endpoint,
-    component: require('@/views/plugin/list/PluginList.vue'),
+    component: PluginList
   },
   {
     name: 'PluginDetail',
     path: `${endpoint}/:id`,
     redirect: to => {
       return {path: to.path + '/' + TAB_NAME_OVERVIEW};
     },
-    component: require('@/views/plugin/detail/PluginDetail.vue'),
+    component: PluginDetail,
     children: [
       {
         path: TAB_NAME_OVERVIEW,
-        component: require('@/views/plugin/detail/tabs/PluginDetailTabOverview.vue'),
+        component: PluginDetailTabOverview
       },
     ]
   },

src/router/project.ts

@@ -1,29 +1,33 @@
 import {RouteRecordRaw} from 'vue-router';
 import {TAB_NAME_OVERVIEW, TAB_NAME_SPIDERS} from '@/constants/tab';
+import ProjectDetail from '@/views/project/detail/ProjectDetail.vue';
+import ProjectList from '@/views/project/list/ProjectList.vue';
+import ProjectDetailTabOverview from '@/views/project/detail/tabs/ProjectDetailTabOverview.vue';
+import ProjectDetailTabSpiders from '@/views/project/detail/tabs/ProjectDetailTabSpiders.vue';
 
 const endpoint = 'projects';
 
 export default [
   {
     name: 'ProjectList',
     path: endpoint,
-    component: require('@/views/project/list/ProjectList.vue'),
+    component: ProjectList,
   },
   {
     name: 'ProjectDetail',
     path: `${endpoint}/:id`,
     redirect: to => {
       return {path: to.path + '/overview'};
     },
-    component: require('@/views/project/detail/ProjectDetail.vue'),
+    component: ProjectDetail,
     children: [
       {
         path: TAB_NAME_OVERVIEW,
-        component: require('@/views/project/detail/tabs/ProjectDetailTabOverview.vue'),
+        component: ProjectDetailTabOverview
       },
       {
         path: TAB_NAME_SPIDERS,
-        component: require('@/views/project/detail/tabs/ProjectDetailTabSpiders.vue'),
+        component: ProjectDetailTabSpiders
       },
     ]
   },