diff --git a/packages/devui-vue/devui-cli/shared/constant.js b/packages/devui-vue/devui-cli/shared/constant.js index 177dc3948b..73bf306901 100644 --- a/packages/devui-vue/devui-cli/shared/constant.js +++ b/packages/devui-vue/devui-cli/shared/constant.js @@ -29,52 +29,45 @@ exports.VITEPRESS_SIDEBAR_FILE_EN = resolve( `config/${this.VITEPRESS_SIDEBAR_FILE_NAME_EN}` ); // 这里的分类顺序将会影响最终生成的页面侧边栏顺序 -exports.VITEPRESS_SIDEBAR_CATEGORY = ['通用', 'DesignToken', '导航', '反馈', '数据录入', '数据展示', '布局', '演进中']; +exports.VITEPRESS_SIDEBAR_CATEGORY = ['通用', '导航', '反馈', '数据录入', '数据展示', '布局', '演进中']; exports.DESIGN_TOKENS_INFO = [ { - category: 'DesignToken', text: 'Animation 动效', status: '100%', name: 'design-animation', link: "/components/design-animation/", }, { - category: 'DesignToken', text: 'BorderRadius 圆角', status: '100%', name: 'design-radius', link: "/components/design-radius/", }, { - category: 'DesignToken', text: 'Color 颜色', status: '100%', name: 'design-color', link: "/components/design-color/", }, { - category: 'DesignToken', text: 'Font 字体', status: '100%', name: 'design-font', link: "/components/design-font/", }, { - category: 'DesignToken', text: 'Link 链接', status: '100%', name: 'design-link', link: "/components/design-link/", }, { - category: 'DesignToken', text: 'Shadow 阴影', status: '100%', name: 'design-shadow', link: "/components/design-shadow/", }, { - category: 'DesignToken', text: 'ZIndex 层级', status: '100%', name: 'design-zindex', diff --git a/packages/devui-vue/devui/editor-md/src/composables/md-render-service.ts b/packages/devui-vue/devui/editor-md/src/composables/md-render-service.ts index 2e0b94ead1..32e7c5e720 100644 --- a/packages/devui-vue/devui/editor-md/src/composables/md-render-service.ts +++ b/packages/devui-vue/devui/editor-md/src/composables/md-render-service.ts @@ -1,4 +1,4 @@ -import * as hljs from 'highlight.js'; +import hljs from 'highlight.js'; import MarkdownIt from 'markdown-it'; import { filterXSS, getDefaultCSSWhiteList, getDefaultWhiteList, IWhiteList } from 'xss'; import { mermaidRender, refreshMermaid } from '../plugins/mermaid'; @@ -15,10 +15,10 @@ export class MDRenderService { if (lang && hljs.getLanguage(lang)) { try { return hljs.highlight(str, { language: lang }).value; - } catch (_) { } + } catch (_) {} } return ''; - } + }, }) as any; private baseUrl = ''; private breaks = true; @@ -26,10 +26,12 @@ export class MDRenderService { constructor() { this.setDefaultXss(); - this.mdt.use(tocAndAnchor, { - linkify: false, - anchorLink: false - }).use(mermaidRender, { id: 'devui-mermaid' }); + this.mdt + .use(tocAndAnchor, { + linkify: false, + anchorLink: false, + }) + .use(mermaidRender, { id: 'devui-mermaid' }); } private setDefaultXss() { @@ -46,7 +48,6 @@ export class MDRenderService { this.xssWhiteList['path'] = ['style', 'class', 'd', 'id', 'fill', 'stroke']; this.xssWhiteList['th'] = ['style']; this.xssWhiteList['td'] = ['style']; - } setBaseUrl(url: string) { @@ -71,7 +72,7 @@ export class MDRenderService { setCustomXssRules(rules: ICustomXssRule[]) { if (rules) { - rules.forEach(rule => { + rules.forEach((rule) => { this.xssWhiteList[rule['key']] = rule['value']; }); } @@ -79,7 +80,7 @@ export class MDRenderService { setCustomRendererRules(rules: ICustomRenderRule[]) { if (rules) { - rules.forEach(rule => { + rules.forEach((rule) => { this.mdt.renderer.rules[rule['key']] = rule['value']; }); } @@ -90,7 +91,7 @@ export class MDRenderService { } setPlugins(plugins: Array) { - plugins.forEach(item => { + plugins.forEach((item) => { const { plugin, opts } = item; this.mdt.use(plugin, opts); }); @@ -139,7 +140,7 @@ export class MDRenderService { top: true, left: true, bottom: true, - right: true + right: true, }), }, }); @@ -153,7 +154,7 @@ export class MDRenderService { public setRules(mdRules: Record): void { if (mdRules) { - Object.keys(mdRules).forEach(rule => { + Object.keys(mdRules).forEach((rule) => { this.mdt[rule].set(mdRules[rule]); }); } diff --git a/packages/devui-vue/devui/editor-md/src/toolbar-config.ts b/packages/devui-vue/devui/editor-md/src/toolbar-config.ts index 11e71b75ca..29f35fac14 100644 --- a/packages/devui-vue/devui/editor-md/src/toolbar-config.ts +++ b/packages/devui-vue/devui/editor-md/src/toolbar-config.ts @@ -153,12 +153,12 @@ class ToolBarHandler { const selection = editor.getSelection(); editor.focus(); if (selection === '') { - editor.replaceSelection('- [ ] ' + selection); + editor.replaceSelection('[ ] ' + selection); } else { const selectionText = selection.split('\n'); for (let i = 0, len = selectionText.length; i < len; i++) { - selectionText[i] = selectionText[i] === '' ? '' : '- [ ] ' + selectionText[i]; + selectionText[i] = selectionText[i] === '' ? '' : '[ ] ' + selectionText[i]; } editor.replaceSelection(selectionText.join('\n')); diff --git a/packages/devui-vue/docs/.vitepress/demo/Demo.vue b/packages/devui-vue/docs/.vitepress/demo/Demo.vue index ec64bbd807..a7d72179b4 100644 --- a/packages/devui-vue/docs/.vitepress/demo/Demo.vue +++ b/packages/devui-vue/docs/.vitepress/demo/Demo.vue @@ -209,7 +209,7 @@ export default { .demo-block { margin: 10px 0; border: solid 1px #ebebeb; - border-radius: 3px; + border-radius: 20px; transition: 0.2s; } @@ -249,8 +249,8 @@ export default { height: 44px; box-sizing: border-box; background-color: #fff; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; + border-bottom-left-radius: 20px; + border-bottom-right-radius: 20px; text-align: center; margin-top: -1px; color: #d3dce6; diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue b/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue index 3f40adbe4e..63d0d01869 100644 --- a/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue +++ b/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue @@ -7,6 +7,7 @@ import NavBar from './components/NavBar.vue'; import SideBar from './components/SideBar.vue'; import Page from './components/Page.vue'; import HomeFooter from './components/HomeFooter.vue'; +import DevuiFooter from './components/DevuiFooter.vue'; import { CONTRIBUTORS_MAP } from './components/PageContributorConfig'; import PageContributor from './components/PageContributor.vue'; import { Button } from '@devui/button'; @@ -73,6 +74,13 @@ const pageClasses = computed(() => { }, ]; }); +const homeContainerClass = computed(() => { + return [ + { + 'home-page-bg': enableHome.value, + }, + ]; +}); const initLanguageConfig = () => { // layout组件加载，初始化国际化语言. const result = location.pathname.match(/[a-zA-Z]*-[A-Z]*/); @@ -135,74 +143,76 @@ const contributors = computed(() => { diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/AlgoliaSearchBox.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/AlgoliaSearchBox.vue index e963061f47..f716ab2e4e 100644 --- a/packages/devui-vue/docs/.vitepress/devui-theme/components/AlgoliaSearchBox.vue +++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/AlgoliaSearchBox.vue @@ -31,7 +31,7 @@ function poll() { } const docsearch$ = docsearch.default ?? docsearch; -type DocSearchProps = Parameters[0] +type DocSearchProps = Parameters[0]; function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) { // note: multi-lang search support is removed since the theme @@ -42,10 +42,8 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) { navigator: { navigate({ itemUrl }) { const _itemUrl = itemUrl.replaceAll('//', '/'); - const { pathname: hitPathname } = new URL( - window.location.origin + _itemUrl, - ); - + const { pathname: hitPathname } = new URL(window.location.origin + _itemUrl); + // router doesn't handle same-page navigation so we use the native // browser location API for anchor navigation if (route.path === hitPathname) { @@ -82,12 +80,7 @@ function initialize(userOptions: DefaultTheme.AlgoliaSearchOptions) { function getRelativePath(absoluteUrl: string) { const { pathname, hash } = new URL(absoluteUrl); - return ( - pathname.replace( - /\.html$/, - site.value.cleanUrls === 'disabled' ? '.html' : '', - ) + hash - ); + return pathname.replace(/\.html$/, site.value.cleanUrls === 'disabled' ? '.html' : '') + hash; } @@ -102,19 +95,20 @@ function getRelativePath(absoluteUrl: string) { --docsearch-primary-color: var(--c-brand); --docsearch-highlight-color: var(--devui-brand); - --docsearch-searchbox-shadow: inset 0 0 0 2px var(--devui-brand); + --docsearch-searchbox-shadow: inset 0 0 0 1px var(--devui-form-control-line-active); --docsearch-text-color: var(--devui-text); --docsearch-muted-color: var(--devui-text); --docsearch-searchbox-background: var(--devui-global-bg); --docsearch-modal-background: var(--devui-global-bg-normal); --docsearch-footer-background: var(--devui-global-bg); - --docsearch-searchbox-focus-background: var(--devui-base-bg); + --docsearch-searchbox-focus-background: var(--devui-gray-form-control-hover-bg); --docsearch-hit-background: var(--devui-default-bg); --docsearch-footer-shadow: ''; --docsearch-hit-shadow: ''; - .DocSearch-Commands-Key, .DocSearch-Button-Key{ + .DocSearch-Commands-Key, + .DocSearch-Button-Key { color: var(--devui-light-text); } @@ -122,9 +116,26 @@ function getRelativePath(absoluteUrl: string) { .DocSearch-Hit-icon, .DocSearch-Hit-path, .DocSearch-Hit-text, - .DocSearch-Hit-title, - { + .DocSearch-Hit-title { color: var(--devui-text-weak); } } + +#docsearch { + padding: 16px 12px 16px 8px; +} + +.DocSearch-Button { + width: 100%; + margin: 0; + border-radius: var(--devui-border-radius-full); +} + +.DocSearch-Button-Placeholder { + color: var(--devui-placeholder); +} + +.DocSearch-Button-Keys { + display: none; +} diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue index 9027ab995c..8c200837bf 100644 --- a/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue +++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/BackToTop.vue @@ -1,29 +1,20 @@ diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/HomeHero.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/HomeHero.vue index 1f9b64562c..c89bb3cc89 100644 --- a/packages/devui-vue/docs/.vitepress/devui-theme/components/HomeHero.vue +++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/HomeHero.vue @@ -1,55 +1,77 @@ @@ -58,63 +80,9 @@ const heroText = computed(() => frontmatter.value.heroText || site.value.title) @import '@devui/styles-var/devui-var'; .home-hero { - margin: 2.5rem 0 2.75rem; - padding: 0 1.5rem; - text-align: center; - - .image { - width: auto !important; - height: 260px !important; - } -} - -@media (min-width: 420px) { - .home-hero { - margin: 3.5rem 0; - } -} - -@media (min-width: 720px) { - .home-hero { - margin: 4rem 0 4.25rem; - } -} - -.figure { - padding: 0 1.5rem; -} - -.image { - display: block; - margin: 0 auto; - width: auto; - max-width: 100%; - max-height: 280px; - height: 260px; -} - -@media (max-width: 420px) { - .home-hero .image { - height: 180px; - } -} - -.title { - margin-top: 2.5rem; - font-size: 2rem; - font-weight: 700; -} - -@media (min-width: 420px) { - .title { - font-size: 3rem; - } -} - -@media (min-width: 720px) { - .title { - margin-top: 3rem; - } + margin: auto; + padding: 60px 0; + max-width: 1200px; } .description { @@ -125,13 +93,6 @@ const heroText = computed(() => frontmatter.value.heroText || site.value.title) color: $devui-text-weak; } -@media (min-width: 420px) { - .description { - line-height: 1.2; - font-size: 1.6rem; - } -} - .action { margin-top: 2rem; display: inline-block; @@ -151,28 +112,28 @@ const heroText = computed(() => frontmatter.value.heroText || site.value.title) .action :deep(.item) { display: inline-flex; align-items: center; - border-radius: 6px; - padding: 0 20px; + border-radius: 22px; + padding: 0 30px; line-height: 44px; - font-size: 1rem; + font-size: $devui-font-size-page-title; font-weight: 500; color: $devui-light-text; background-color: $devui-primary; - border: 2px solid $devui-primary; + border: 1px solid $devui-primary; transition: background-color 0.2s; } .action.alt :deep(.item) { color: $devui-text; - border-color: $devui-list-item-hover-bg; - background-color: $devui-list-item-hover-bg; + border-color: $devui-line; + background-color: $devui-block; border-style: solid; } .action.alt :deep(.item:hover) { - color: $devui-text; - border-color: $devui-list-item-selected-bg; - background-color: $devui-list-item-selected-bg; + color: $devui-brand-active; + border-color: $devui-form-control-line-active; + background-color: $devui-block; } .action :deep(.item:hover) { @@ -182,18 +143,100 @@ const heroText = computed(() => frontmatter.value.heroText || site.value.title) border-color: $devui-primary-hover; } -@media (min-width: 420px) { - .action :deep(.item) { - padding: 0 24px; - line-height: 52px; - font-size: 1.2rem; - font-weight: 500; +.devui-banner-card { + padding: 42px 32px; + border-radius: 20px; + box-shadow: 0 8px 32px 0 rgba(150, 180, 255, 0.16); + display: flex; + + .devui-banner-card-left { + flex: 1; + min-width: 340px; + + .design-title { + font-size: 88px; + line-height: 96px; + letter-spacing: 0; + font-weight: 600; + max-width: 710px; + } + + .subtitle { + margin-top: 16px; + font-size: $devui-font-size-modal-title; + } + } + + .devui-banner-card-right { + flex: 1; + + .banner-img-wrapper { + width: 100%; + position: relative; + } + + img { + width: 810px; + position: absolute; + top: -170px; + right: -152px; + max-width: none; + } + } + + .quick-ref { + margin-top: 32px; + display: flex; + flex-wrap: wrap; } } -.home-action-container { - display: flex; - align-items: center; - justify-content: center; +@media (max-width: 1440px) and (min-width: 1280px) { + .devui-banner-card .devui-banner-card-right img { + right: -40px; + } +} + +@media (max-width: 1280px) and (min-width: 960px) { + .devui-banner-card .devui-banner-card-right img { + width: 600px; + top: -46px; + right: 0; + } +} + +@media (max-width: 960px) and (min-width: 840px) { + .devui-banner-card .devui-banner-card-right img { + width: 500px; + top: -12px; + right: -32px; + } +} + +@media (max-width: 840px) { + .home { + padding-top: 0; + + .home-hero { + padding: 0; + } + } + + .devui-banner-card { + flex-direction: column; + + .devui-banner-card-left .design-title { + font-size: 64px; + } + + .devui-banner-card-right img { + width: 100%; + position: static; + } + + .quick-ref { + margin-top: 0; + } + } } diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/NextAndPrevLinks.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/NextAndPrevLinks.vue index 13d585222f..3fd31cb863 100644 --- a/packages/devui-vue/docs/.vitepress/devui-theme/components/NextAndPrevLinks.vue +++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/NextAndPrevLinks.vue @@ -1,10 +1,10 @@