feat: develop dokit web

Web/packages/core/package.json

@@ -28,7 +28,6 @@
     "url": "https://github.com/didi/DoraemonKit/issues"
   },
   "dependencies": {
-    "vue": "^3.0.11",
     "vue-router": "^4.0.6"
   }
 }

Web/packages/core/src/common/components/card.vue

+<template>
+  <div class="card">
+    <div class="card-title">
+      <span class="card-title-text"> {{title}} </span>
+    </div>
+    <div class="item-list">
+      <div class="item" v-for="(item,index) in list" :key="index" @click="handleClickItem(item)">
+        <div class="item-icon">
+          <img
+            class="item-icon-image"
+            :src="item.icon || defaultIcon"
+          />
+        </div>
+        <div class="item-title">{{item.title || '默认功能'}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import {DefaultItemIcon} from '../js/icon'
+export default {
+  props: {
+    title: {
+      default: '专区'
+    },
+    list: {
+      default: []
+    }
+  },
+  data(){
+    return {
+      defaultIcon: DefaultItemIcon
+    }
+  },
+  methods: {
+    handleClickItem(item){
+      this.$router.push({
+        name: item.name
+      })
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+.card {
+  margin-top: 15px;
+  padding: 10px;
+  background-color: white;
+}
+.card-title-text {
+  font-size: 17px;
+  color: #333333;
+}
+.item-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 25%;
+  margin-top: 10px;
+  .item-icon-image {
+    width: 50px;
+  }
+  .item-title {
+    font-size: 16px;
+  }
+}
+</style>
\ No newline at end of file

Web/packages/core/src/common/components/top-bar.vue

+<template>
+  <div class="bar">
+    <div class="bar-back" @click="handleBackRoute">
+      <img class="bar-back-icon" :src="icon"/>
+      <span class="bar-back-btn">返回</span>
+    </div>
+    <div class="bar-title">
+      <span class="bar-title-text">{{title}}</span>
+    </div>
+    <div class="bar-other">
+      <span class="bar-other-text">更多</span>
+    </div>
+  </div>
+</template>
+<script>
+import {IconBack} from '../js/icon';
+export default {
+  props: {
+    title: {
+      default: 'DoKit'
+    }
+  },
+  data(){
+    return {
+      icon: IconBack
+    }
+  },
+  methods: {
+    handleBackRoute(){
+      this.$router.back()
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .bar{
+    background-color: white;
+    height: 50px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 10px;
+    box-sizing: border-box;
+  }
+  .bar-back{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .bar-back-icon{
+    display: inline-block;
+    height: 20px;
+  }
+  .bar-back-btn{
+    color: #337CC4;
+    font-size: 19px;
+    margin-left: 5px;
+  }
+  .bar-title-text{
+    color: #333333;
+    font-size: 22px;
+  }
+  .bar-other-text{
+    color:  #666666;
+    font-size: 15px;
+  }
+</style>
\ No newline at end of file

Web/packages/core/src/common/components/version.vue

+<template>
+  <div class="card version">
+    <div>
+      <span class="version-text">当前版本：V{{version}}</span>
+    </div>
+    <div class="version-image">
+      <img class="dokit-icon" :src="dokitIcon"/>
+    </div>
+  </div>
+</template>
+<script>
+import {dokitIcon} from '../js/icon'
+export default {
+  props: {
+    version: String
+  },
+  data(){
+    return {
+      dokitIcon: dokitIcon
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.card {
+  margin-top: 15px;
+  padding: 10px;
+  background-color: white;
+}
+.version{
+  padding: 20px 0;
+  text-align: center;
+  .version-text{
+    font-size: 16px;
+    color: #999999;
+  }
+  .version-image{
+    margin-top: 20px;
+  }
+  .dokit-icon{
+    width: 300px;
+  }
+}
+</style>
\ No newline at end of file

Web/packages/core/src/common/js/icon.js

+export const IconBack = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAzCAMAAADIDVqJAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAXFQTFRFAAAANX7GNHzFM3zFM3zFNn3ENYDHNHzFM3zENIDHNH7INH3ENX3GNn7GM33ENYDFNYDGM4DINH7HM3zENH3HNHzENYDGM37FM33FNH3FNn3FNX7HN4DINHzEM33HNH7FNIDGNn7GM33ENX3FNXzHNoDENH7FNH3EM3zEN33INHzFNH3FM4DHNX3HNH3GNX7ENHzENHzFNYDFNH3FM33ENn3JM33GN4DINX7EM3zEM33GNH7FM33FM33FNIDFNH3GNX3KM37HNHzFN4DINX7FNH3EOHzHNH3GM3zFM4DGM33EM3zENHzENH3EM33FOoTFgID/NHzFOIDHM3zEM3zFNoPJM33FM33ENH3FNHzENYDL////NHzENH3FM4PFM3zFOYDGNH3FM3zFN3zINHzEM33FNoDJM3zFM33FNH3ENHzFM37FNH3ENH3FM33ENH7GNX7FM33ENH3FNH7FM37ENH7FM3zFNH3EM4jMM3zE////TdHL6gAAAHl0Uk5TAEPy+vA9RPb0QEX3P0fzPkg8Sfg7SjpL+fE5TThON082Ue81UjRT++4zVO0yVjFX/OwwWOsvWi5b6i1d/eksXitf6Cph5yli/ihk5ieh3x8CoiCg4CGf4Z3iIgGc4yOaJJnkJZjlJpaVk5KQj42LioiHhYSCgHOyD3AmCqsAAAABYktHRFt0vJU0AAAACXBIWXMAAABIAAAASABGyWs+AAABPUlEQVQ4y43UxVoCUBQE4Ctgd3cXKAYoKqioINiBrdjdXby9C+6c3ZzPWf+rE2MMS4bDmY4rk5qs7FQ6ObnU5OXDFFBTCFNUTE2JmFJqysqtcVRQUymmiprqGmtq66ipF9NATSOMq4maZidMCzWtMG3t1HSI6aSmq9sat4eaHpheLzV9YvqpGRi0xuenZghmOEDNiJhRasZggiFqxiesmQxTMyVmmpoZmEiUmlmYWJyauXmYBWoWYZaWqTEr1qRW1zhaT4jaUNQm1Na2onagdjW1B7V/wFXyEOroWFEnok4VdQZ1fqGoS6ira0XdpP4x+uStKL5EY+6gYpq6h4rEFfUgKqqoRyjlkI15ggqGFfUsKqSoFyjlTY15hfIFFPUmyq+odyilhIz5gHJ7FfUpyqOoLyilYo35/rFJ/Jo/DZ3bT7fEcIgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDQtMjFUMTc6MzI6MjgrMDg6MDBBnT5hAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTA0LTIxVDE3OjMyOjI4KzA4OjAwMMCG3QAAAABJRU5ErkJggg=='
+
+export const DefaultItemIcon = 'https://pt-starimg.didistatic.com/static/starimg/img/FHqpI3InaS1618997548865.png'
+
+export const dokitIcon = 'https://pt-starimg.didistatic.com/static/starimg/img/eM7MJKDqVG1618998466986.png'
\ No newline at end of file

Web/packages/core/src/common/js/store.js

+import {reactive} from 'vue'
+const storeKey = 'store'
+export class Store{
+  constructor(options){
+    let {state} = options
+    this.initData(state)
+  }
+
+  initData(data = {}){
+    this._state = reactive({
+      data: data
+    })
+  }
+
+  get state(){
+    return this._state.data
+  }
+
+  install(app){
+    app.provide(storeKey, this)
+    app.config.globalProperties.$store = this
+  }
+
+}

Web/packages/core/src/components/app.vue

@@ -18,7 +18,7 @@ export default {
   },
   data() {
     return {
-      showContainer: false,
+      showContainer: true,
     };
   },
   methods: {

Web/packages/core/src/components/container.vue

 <template>
   <div class="container">
-    <router-view v-slot="{Component}">
+    <top-bar :title="title"></top-bar>
+    <router-view v-slot="{ Component }">
       <keep-alive>
-        <component :is="{Component}"/>
+        <component :is="Component" />
       </keep-alive>
     </router-view>
   </div>
 </template>
 <script>
+import TopBar from "../common/components/top-bar";
+
 export default {
-  
+  components: {
+   TopBar 
+  },
+  data(){
+
+  },
+  computed:{
+    curRoute(){
+      return this.$router.currentRoute.value
+    },
+    title(){
+      return this.curRoute.meta.title || 'Dokit'
+    }
+  },
+  created(){
+  }
 }
 </script>
 <style lang="less" scoped>
@@ -19,6 +37,6 @@ export default {
   right: 0;
   top:0;
   bottom: 0;
-  background-color: #ffffff;
+  background-color: #f5f6f7;
 }
 </style>
\ No newline at end of file

Web/packages/core/src/components/index.vue

 <template>
-  <div>
-    门户
+  <div class="container">
+    <top-bar></top-bar>
+    <card
+      v-for="(item, index) in features"
+      :key="index"
+      :title="item.title"
+      :list="item.list"
+    ></card>
+    <version-card :version="version"></version-card>
   </div>
 </template>
 <script>
+import TopBar from "../common/components/top-bar";
+import Card from "../common/components/card";
+import VersionCard from "../common/components/version";
 export default {
-  
-}
+  components: {
+    TopBar,
+    Card,
+    VersionCard
+  },
+  data(){
+    return {
+      version: '1.0.0'
+    }
+  },
+  mounted(){
+  },
+  computed: {
+    features(){
+      return this.$store.state.features
+    }
+  }
+};
 </script>
 <style lang="less" scoped>
-
+.container {
+  background-color: #f5f6f7;
+}
 </style>
\ No newline at end of file

Web/packages/core/src/index.js

-import * as vue from 'vue'
+import {createApp} from 'vue'
 import App from './components/app'
-import Router from './router'
+import Store from './store'
+import {getRouter} from './router'
 export class Dokit{
   constructor(options){
-    let app = vue.createApp(App);
-    let {plugins} = options; 
-    console.log('plugins1', plugins)
-    app.use(Router);
+    let app = createApp(App);
+    let {features} = options; 
+    app.use(getRouter(features));
+    app.use(Store);
+    Store.state.features = features;
+
     this.app = app;
-    this._vue = vue;
     this.init();
   }
 
-  init(options){
+  init(){
     let dokitRoot = document.createElement('div')
     dokitRoot.id = "dokit-root"
     document.documentElement.appendChild(dokitRoot);

Web/packages/core/src/router/index.js

 import { createRouter, createMemoryHistory } from 'vue-router'
-import {routes} from './routes'
+import {routes, getRoutes} from './routes'
 
-const router = createRouter({
-  routes,
-  history: createMemoryHistory()
-})
-
-export default router
\ No newline at end of file
+export function getRouter(features){
+  return createRouter({
+    routes: [...routes, ...getRoutes(features)],
+    history: createMemoryHistory()
+  })
+}
\ No newline at end of file

Web/packages/core/src/router/routes.js

 import Index from '../components/index'
 export const routes = [{
   path: '/',
+  name: 'index',
   component: Index
-}]
\ No newline at end of file
+}]
+
+export function getRoutes(features){
+  let routes = []
+  features.forEach(feature => {
+    let {list, title:featureTitle} = feature
+    list.forEach(item => {
+      // TODO 暂时只支持路由方式的插件
+      let {name, title, component} = item
+      routes.push({
+        path: `/${name}`,
+        name: name,
+        component: component,
+        meta: {
+          title: title,
+          feature: featureTitle
+        }
+      })
+    })
+  })
+  return routes
+}
\ No newline at end of file

Web/packages/core/src/store/index.js

+import { Store } from "../common/js/store";
+
+export default new Store({
+  state: {
+    features: []
+  }
+})
\ No newline at end of file

Web/packages/web/src/components/ToolAppInfo.vue

-<template lang="">
+<template>
   <div class="app-info-container">
     <div class="info-wrapper">
       <Card title="Page Info">

Web/packages/web/src/components/ToolConsole.vue

-<template lang="">
+<template>
   <div class="console-container">
     <div class="log-container">
       <LogItem v-for="(log, index) in logList" :key="index" :value="log" ></LogItem>
@@ -23,12 +23,12 @@ export default {
   },
   created () {
     let self = this
-    let originConsole = window.console
-    ;['log'].forEach(type => {
+    let originConsole = window.console;
+    ['log'].forEach(type => {
       let origin =  originConsole[type].bind(originConsole)
       originConsole[type] = function (...args) {
-        origin(...args)
         self.logList.push(args)
+        origin(...args)
       }
     })
   }

Web/packages/web/src/components/ToolHelloWorld.vue

-<template lang="">
+<template>
   <div class="hello-world">
     <div style="font-weight:bold;font-size:30px;font-style:italic;">Hello World</div>
     <div>this is a demo plugin</div>
@@ -9,7 +9,7 @@ export default {
   
 }
 </script>
-<style lang="">
+<style>
 .hello-world{
   padding:10px;
   text-align: center;

Web/packages/web/src/components/common/Card.vue

-<template lang="">
+<template>
   <div class="dokit-card">
     <div class="dokit-card__header">{{title}}</div>
     <div class="dokit-card__body">

Web/packages/web/src/components/console/LogItem.vue

-<template lang="">
+<template>
   <div class="log-ltem">
+    {{value}}
     <div class="log-preview" v-html="logPreview" @click="toggleDetail"></div>
     <div v-if="showDetail">
       <div class="list-item" v-if="typeof value === 'object'" v-for="(key, index) in value">
@@ -9,7 +10,7 @@
   </div>
 </template>
 <script>
-import { getDataType, getDataStructureStr } from '../../assets/util'
+import { getDataType, getDataStructureStr } from './../../assets/util'
 import Detail from './Detail'
 
 const DATATYPE_NOT_DISPLAY = ['Number', 'String', 'Boolean']

Web/packages/web/src/feature.js

+import Console from './components/ToolConsole'
+import AppInfo from './components/ToolAppInfo'
+import HelloWorld from './components/ToolHelloWorld'
+
+export const BasicFeatures = {
+  title: '基础功能',
+  list: [{
+    title: '日志',
+    name: 'console',
+    icon: '',
+    component: Console
+  }, {
+    title: '应用信息',
+    name: 'app-info',
+    icon: '',
+    component: AppInfo
+  },  {
+    title: '测试',
+    name: 'hello',
+    icon: '',
+    component: HelloWorld
+  }]
+}
+
+export const DokitFeatures = {
+  title: '平台功能',
+  list: [{
+    title: '接口 Mock',
+    name: 'mock',
+    icon: '',
+    component: HelloWorld
+  }]
+}
+export const Features = [BasicFeatures, DokitFeatures]
\ No newline at end of file

Web/packages/web/src/index.js

-import Console from './components/ToolConsole'
-import AppInfo from './components/ToolAppInfo'
-import HelloWorld from './components/ToolHelloWorld'
-
 import {Dokit} from '@dokit/web-core'
-
+import {Features} from './feature'
 
 new Dokit({
-  plugins: [{
-    name: '日志',
-    component: Console
-  }, {
-    name: '应用信息',
-    component: AppInfo
-  }, {
-    name: '你好',
-    component: HelloWorld
-  }]
+  features: Features
 });
\ No newline at end of file

Web/playground/index.html

@@ -9,6 +9,7 @@
 </head>
 
 <body>
+  <h1>Dokit For Web</h1>
 </body>
 <script src="../packages/web/dist/dokit.js"></script>
 </html>
\ No newline at end of file