framework / eagle-web-toolkit

Download as
Browse Code »

Commit dca95f62ebf4b2a0505a2d16572bf3e39c432346

Authored by Aaron
1 parent 58dc1f76
Exists in master and in 1 other branch legacy

调整代码高亮风格，增加组件搜索

Showing 6 changed files with 193 additions and 12 deletions   Show diff stats
examples/main.js
  Diff comments   View file @dca95f6
... ... @@ -11,7 +11,7 @@ import NProgress from 'nprogress';
11 11 import EagleCodeSnippet from "@/components/code-snippet";
12 12  
13 13 import '@/styles/index.scss';
14   -import "highlight.js/styles/github.css";
  14 +import "@/styles/highlight.scss";
15 15  
16 16 const request = axios.create({
17 17 baseURL: 'http://localhost',
... ...
examples/styles/highlight.scss 0 → 100644
  Diff comments   View file @dca95f6
... ... @@ -0,0 +1,103 @@
  1 +.hljs {
  2 + display: block;
  3 + overflow-x: auto;
  4 + padding: 0.5em;
  5 + color: #333;
  6 + background: #f8f8f8;
  7 +}
  8 +
  9 +.hljs-comment,
  10 +.hljs-quote {
  11 + color: #237804;
  12 + // color: #998;
  13 + font-style: italic;
  14 +}
  15 +
  16 +.hljs-params {
  17 + color: green;
  18 +}
  19 +
  20 +.hljs-keyword,
  21 +.hljs-selector-tag,
  22 +.hljs-subst {
  23 + color: #1d39c4;
  24 + // color: #333;
  25 + font-weight: bold;
  26 +}
  27 +
  28 +.hljs-number,
  29 +.hljs-literal,
  30 +.hljs-variable,
  31 +.hljs-template-variable,
  32 +
  33 +.hljs-tag .hljs-attr {
  34 + color: #f5222d;
  35 + // color: #008080;
  36 +}
  37 +
  38 +.hljs-string,
  39 +.hljs-doctag {
  40 + color: #08979c;
  41 + // color: #d14;
  42 +}
  43 +
  44 +.hljs-title,
  45 +.hljs-section,
  46 +.hljs-selector-id {
  47 + color: #900;
  48 + font-weight: bold;
  49 +}
  50 +
  51 +.hljs-subst {
  52 + font-weight: normal;
  53 +}
  54 +
  55 +.hljs-type,
  56 +.hljs-class .hljs-title {
  57 + color: #458;
  58 + font-weight: bold;
  59 +}
  60 +
  61 +.hljs-tag,
  62 +.hljs-name,
  63 +.hljs-attribute {
  64 + color: #1d39c4;
  65 + // color: #000080;
  66 + font-weight: normal;
  67 +}
  68 +
  69 +.hljs-regexp,
  70 +.hljs-link {
  71 + color: #009926;
  72 +}
  73 +
  74 +.hljs-symbol,
  75 +.hljs-bullet {
  76 + color: #990073;
  77 +}
  78 +
  79 +.hljs-built_in,
  80 +.hljs-builtin-name {
  81 + color: #0086b3;
  82 +}
  83 +
  84 +.hljs-meta {
  85 + color: #999;
  86 + font-weight: bold;
  87 +}
  88 +
  89 +.hljs-deletion {
  90 + background: #fdd;
  91 +}
  92 +
  93 +.hljs-addition {
  94 + background: #dfd;
  95 +}
  96 +
  97 +.hljs-emphasis {
  98 + font-style: italic;
  99 +}
  100 +
  101 +.hljs-strong {
  102 + font-weight: bold;
  103 +}
... ...
examples/styles/variables.scss
  Diff comments   View file @dca95f6
... ... @@ -9,6 +9,8 @@ $green-light: #5edd8e;
9 9 $orange: #ff9852;
10 10 $grey: #8c8c8c;
11 11 $black: #000;
  12 +$purple: #722ed1;
  13 +$cyan: #13c2c2;
12 14  
13 15 $text: #314659;
14 16 $border: #e8e8e8;
15 17 \ No newline at end of file
... ...
examples/views/docs/guide/installation.md
  Diff comments   View file @dca95f6
... ... @@ -6,12 +6,16 @@
6 6  
7 7 ## npm安装
8 8  
9   -```bash
10   -npm install --save git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#版本号
11   -```
  9 +<div class="hljs">
  10 + <code>
  11 + <span class="hljs-keyword">npm</span> install --save <span class="hljs-string">git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#{{ appVersion }}</span>
  12 + </code>
  13 +</div>
12 14  
13 15 ## yarn安装
14 16  
15   -```bash
16   -yarn add git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#版本号
17   -```
18 17 \ No newline at end of file
  18 +<div class="hljs">
  19 + <code>
  20 + <span class="hljs-keyword">yarn</span> add <span class="hljs-string">git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#{{ appVersion }}</span>
  21 + </code>
  22 +</div>
... ...
examples/views/layout/component.vue
  Diff comments   View file @dca95f6
1 1 <template>
2 2 <el-container>
3   - <layout-header></layout-header>
  3 + <layout-header @menu-change="handleSelect"></layout-header>
4 4 <el-container class="layout-container__component">
5 5 <el-aside class="layout-aside__component" width="240px">
6 6 <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect">
... ... @@ -132,7 +132,10 @@ export default {
132 132 document.documentElement.scrollTop = dom.offsetTop - headerHeight;
133 133 },
134 134 handleSelect(key) {
135   - this.$router.push({ name: key });
  135 + if (key && this.$route.name !== key) {
  136 + this.activeMenu = key;
  137 + this.$router.push({ name: key });
  138 + }
136 139 }
137 140 }
138 141 }
... ...
examples/views/layout/components/header.vue
  Diff comments   View file @dca95f6
... ... @@ -3,6 +3,26 @@
3 3 <div class="left">
4 4 <img class="logo" src="/img/logo.svg" />
5 5 <span class="title">{{ appName }}</span>
  6 + <el-divider class="divider" direction="vertical"></el-divider>
  7 + <el-autocomplete
  8 + v-model="searchKey"
  9 + :fetch-suggestions="querySearch"
  10 + placeholder="搜索组件"
  11 + :trigger-on-focus="false"
  12 + @select="handleSelectMenu"
  13 + prefix-icon="el-icon-search"
  14 + class="autocomplete"
  15 + popper-class="search"
  16 + size="small"
  17 + clearable
  18 + >
  19 + <div slot-scope="{ item }">
  20 + <div class="search-option">
  21 + <span>{{ item.title }}</span>
  22 + <span class="group">{{ item.group }}</span>
  23 + </div>
  24 + </div>
  25 + </el-autocomplete>
6 26 </div>
7 27 <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect">
8 28 <el-menu-item v-for="(data, index) in pages" :key="index" :index="data.meta.path">{{ data.meta.title }}</el-menu-item>
... ... @@ -11,18 +31,28 @@
11 31 </template>
12 32  
13 33 <script>
14   -import { pages } from '@/router/routes';
  34 +import { pages, components } from '@/router/routes';
15 35  
16 36 export default {
17 37 name: 'layoutHeader',
18 38 data() {
  39 + let componentList = [];
  40 + components.forEach((data, index) => {
  41 + if (data.children && data.children.length > 0) {
  42 + data.children.forEach(item => {
  43 + componentList.push({ group: data.group, name: item.name, ...item.meta });
  44 + });
  45 + }
  46 + });
19 47 return {
20 48 appName: process.env.VUE_APP_NAME,
21 49 activeMenu: '/index',
  50 + components: componentList,
22 51 pages: pages.map((data, index) => {
23 52 const param = data.meta && data.meta.path ? {} : { meta: { title: `Page - ${index}`, path: '/index' } }
24 53 return { ...data, ...param }
25   - })
  54 + }),
  55 + searchKey: undefined,
26 56 }
27 57 },
28 58 created() {
... ... @@ -31,8 +61,24 @@ export default {
31 61 this.activeMenu = route.path || '/index';
32 62 },
33 63 methods: {
  64 + querySearch(queryString, cb) {
  65 + var components = this.components;
  66 + var results = queryString ? components.filter(this.createFilter(queryString)) : components;
  67 + // 调用 callback 返回建议列表的数据
  68 + cb(results);
  69 + },
  70 + createFilter(queryString) {
  71 + return (component) => {
  72 + return (component.name.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
  73 + };
  74 + },
34 75 handleSelect(key) {
35   - this.$router.push({ path: key });
  76 + if (key && this.$route.path !== key) {
  77 + this.$router.push({ path: key });
  78 + }
  79 + },
  80 + handleSelectMenu({ name }) {
  81 + this.$emit('menu-change', name);
36 82 }
37 83 }
38 84 }
... ... @@ -67,6 +113,29 @@ export default {
67 113 background-clip: text;
68 114 -webkit-text-fill-color: transparent;
69 115 }
  116 + .divider {
  117 + margin: 0 20px;
  118 + }
  119 + .autocomplete {
  120 + input {
  121 + border-top: 0;
  122 + border-left: 0;
  123 + border-right: 0;
  124 + border-radius: 0;
  125 + }
  126 + }
  127 + }
  128 +}
  129 +.search {
  130 + min-width: 300px;
  131 + .search-option {
  132 + display: flex;
  133 + align-items: center;
  134 + justify-content: space-between;
  135 + font-weight: 600;
  136 + .group {
  137 + color: #d9d9d9;
  138 + }
70 139 }
71 140 }
72 141 </style>
... ...