Commit dca95f62ebf4b2a0505a2d16572bf3e39c432346
1 parent
58dc1f76
Exists in
master
and in
1 other branch
调整代码高亮风格，增加组件搜索
Showing
6 changed files
with
193 additions
and
12 deletions
Show diff stats
examples/main.js
| @@ -11,7 +11,7 @@ import NProgress from 'nprogress'; | @@ -11,7 +11,7 @@ import NProgress from 'nprogress'; | ||
| 11 | import EagleCodeSnippet from "@/components/code-snippet"; | 11 | import EagleCodeSnippet from "@/components/code-snippet"; |
| 12 | 12 | ||
| 13 | import '@/styles/index.scss'; | 13 | import '@/styles/index.scss'; |
| 14 | -import "highlight.js/styles/github.css"; | 14 | +import "@/styles/highlight.scss"; |
| 15 | 15 | ||
| 16 | const request = axios.create({ | 16 | const request = axios.create({ |
| 17 | baseURL: 'http://localhost', | 17 | baseURL: 'http://localhost', |
| @@ -0,0 +1,103 @@ | @@ -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
| @@ -9,6 +9,8 @@ $green-light: #5edd8e; | @@ -9,6 +9,8 @@ $green-light: #5edd8e; | ||
| 9 | $orange: #ff9852; | 9 | $orange: #ff9852; |
| 10 | $grey: #8c8c8c; | 10 | $grey: #8c8c8c; |
| 11 | $black: #000; | 11 | $black: #000; |
| 12 | +$purple: #722ed1; | ||
| 13 | +$cyan: #13c2c2; | ||
| 12 | 14 | ||
| 13 | $text: #314659; | 15 | $text: #314659; |
| 14 | $border: #e8e8e8; | 16 | $border: #e8e8e8; |
| 15 | \ No newline at end of file | 17 | \ No newline at end of file |
examples/views/docs/guide/installation.md
| @@ -6,12 +6,16 @@ | @@ -6,12 +6,16 @@ | ||
| 6 | 6 | ||
| 7 | ## npm安装 | 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 | ## yarn安装 | 15 | ## yarn安装 |
| 14 | 16 | ||
| 15 | -```bash | ||
| 16 | -yarn add git+https://frameworkweb:frame1WorkwEb@git.yunweidashi.com/framework/eagle-web-toolkit.git#版本号 | ||
| 17 | -``` | ||
| 18 | \ No newline at end of file | 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
| 1 | <template> | 1 | <template> |
| 2 | <el-container> | 2 | <el-container> |
| 3 | - <layout-header></layout-header> | 3 | + <layout-header @menu-change="handleSelect"></layout-header> |
| 4 | <el-container class="layout-container__component"> | 4 | <el-container class="layout-container__component"> |
| 5 | <el-aside class="layout-aside__component" width="240px"> | 5 | <el-aside class="layout-aside__component" width="240px"> |
| 6 | <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect"> | 6 | <el-menu :default-active="activeMenu" class="layout-aside-menu__component" @select="handleSelect"> |
| @@ -132,7 +132,10 @@ export default { | @@ -132,7 +132,10 @@ export default { | ||
| 132 | document.documentElement.scrollTop = dom.offsetTop - headerHeight; | 132 | document.documentElement.scrollTop = dom.offsetTop - headerHeight; |
| 133 | }, | 133 | }, |
| 134 | handleSelect(key) { | 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
| @@ -3,6 +3,26 @@ | @@ -3,6 +3,26 @@ | ||
| 3 | <div class="left"> | 3 | <div class="left"> |
| 4 | <img class="logo" src="/img/logo.svg" /> | 4 | <img class="logo" src="/img/logo.svg" /> |
| 5 | <span class="title">{{ appName }}</span> | 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 | </div> | 26 | </div> |
| 7 | <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect"> | 27 | <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect"> |
| 8 | <el-menu-item v-for="(data, index) in pages" :key="index" :index="data.meta.path">{{ data.meta.title }}</el-menu-item> | 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,18 +31,28 @@ | ||
| 11 | </template> | 31 | </template> |
| 12 | 32 | ||
| 13 | <script> | 33 | <script> |
| 14 | -import { pages } from '@/router/routes'; | 34 | +import { pages, components } from '@/router/routes'; |
| 15 | 35 | ||
| 16 | export default { | 36 | export default { |
| 17 | name: 'layoutHeader', | 37 | name: 'layoutHeader', |
| 18 | data() { | 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 | return { | 47 | return { |
| 20 | appName: process.env.VUE_APP_NAME, | 48 | appName: process.env.VUE_APP_NAME, |
| 21 | activeMenu: '/index', | 49 | activeMenu: '/index', |
| 50 | + components: componentList, | ||
| 22 | pages: pages.map((data, index) => { | 51 | pages: pages.map((data, index) => { |
| 23 | const param = data.meta && data.meta.path ? {} : { meta: { title: `Page - ${index}`, path: '/index' } } | 52 | const param = data.meta && data.meta.path ? {} : { meta: { title: `Page - ${index}`, path: '/index' } } |
| 24 | return { ...data, ...param } | 53 | return { ...data, ...param } |
| 25 | - }) | 54 | + }), |
| 55 | + searchKey: undefined, | ||
| 26 | } | 56 | } |
| 27 | }, | 57 | }, |
| 28 | created() { | 58 | created() { |
| @@ -31,8 +61,24 @@ export default { | @@ -31,8 +61,24 @@ export default { | ||
| 31 | this.activeMenu = route.path || '/index'; | 61 | this.activeMenu = route.path || '/index'; |
| 32 | }, | 62 | }, |
| 33 | methods: { | 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 | handleSelect(key) { | 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,6 +113,29 @@ export default { | ||
| 67 | background-clip: text; | 113 | background-clip: text; |
| 68 | -webkit-text-fill-color: transparent; | 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 | </style> | 141 | </style> |