@sugarat/theme 0.5.10 → 0.5.12-beta.0

package/src/index.ts

@@ -2,26 +2,17 @@
 // override style
 import './styles/index.scss'
 
-// element-ui
-// import 'element-plus/dist/index.css'
-import 'element-plus/theme-chalk/base.css'
-import 'element-plus/theme-chalk/el-button.css'
-import 'element-plus/theme-chalk/el-tag.css'
-import 'element-plus/theme-chalk/el-icon.css'
-import 'element-plus/theme-chalk/el-avatar.css'
-import 'element-plus/theme-chalk/el-image.css'
-import 'element-plus/theme-chalk/el-image-viewer.css'
-import 'element-plus/theme-chalk/el-pagination.css'
-import 'element-plus/theme-chalk/el-carousel.css'
-import 'element-plus/theme-chalk/el-carousel-item.css'
-import 'element-plus/theme-chalk/el-alert.css'
-import 'element-plus/theme-chalk/dark/css-vars.css'
+// element-ui-copy
+import './styles/el-base.css'
 
 // 引入时间线组件样式
-import 'vitepress-markdown-timeline/dist/theme/index.css'
+// replace-timeline-import-code
+// import 'vitepress-markdown-timeline/dist/theme/index.css'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
-import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
+
+// replace-tabs-import-code
+// import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
 
 // 图表渲染组件
 // replace-mermaid-import-code
@@ -36,13 +27,15 @@ import UserWorksPage from './components/UserWorks.vue'
 import './styles/theme/inline-theme.var.css'
 
 // 导入group icons，改由自定义插件导入
+// replace-group-icon-import-code
 // import 'virtual:group-icons.css'
 
 export const BlogTheme: Theme = {
   ...DefaultTheme,
   Layout: withConfigProvider(BlogApp),
   enhanceApp(ctx) {
-    enhanceAppWithTabs(ctx.app as any)
+    // replace-tabs-enhance-app-code
+    // enhanceAppWithTabs(ctx.app)
     DefaultTheme.enhanceApp(ctx)
     ctx.app.component('UserWorksPage', UserWorksPage as any)
     // replace-mermaid-mounted-code

package/src/node.ts

@@ -80,9 +80,6 @@ export function defineLocaleConfig(cfg: Omit<Theme.BlogConfig, 'locales' | 'page
   return cfg
 }
 
-// 重新导包 tabsMarkdownPlugin 导出CJS格式支持
-export { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
-
 export function footerHTML(footerData: Theme.FooterItem | Theme.FooterItem[]) {
   const data = [footerData || []].flat()
   return data.map((d) => {

package/src/styles/el-base.css

@@ -0,0 +1,340 @@
+@charset "UTF-8";
+
+:root {
+    --el-color-white: #ffffff;
+    --el-color-black: #000000;
+    --el-color-primary-rgb: 64, 158, 255;
+    --el-color-success-rgb: 103, 194, 58;
+    --el-color-warning-rgb: 230, 162, 60;
+    --el-color-danger-rgb: 245, 108, 108;
+    --el-color-error-rgb: 245, 108, 108;
+    --el-color-info-rgb: 144, 147, 153;
+    --el-font-size-extra-large: 20px;
+    --el-font-size-large: 18px;
+    --el-font-size-medium: 16px;
+    --el-font-size-base: 14px;
+    --el-font-size-small: 13px;
+    --el-font-size-extra-small: 12px;
+    --el-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+    --el-font-weight-primary: 500;
+    --el-font-line-height-primary: 24px;
+    --el-index-normal: 1;
+    --el-index-top: 1000;
+    --el-index-popper: 2000;
+    --el-border-radius-base: 4px;
+    --el-border-radius-small: 2px;
+    --el-border-radius-round: 20px;
+    --el-border-radius-circle: 100%;
+    --el-transition-duration: 0.3s;
+    --el-transition-duration-fast: 0.2s;
+    --el-transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
+    --el-transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
+    --el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
+    --el-transition-fade: opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
+    --el-transition-md-fade: transform var(--el-transition-duration) var(--el-transition-function-fast-bezier), opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
+    --el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear;
+    --el-transition-border: border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
+    --el-transition-box-shadow: box-shadow var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
+    --el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
+    --el-component-size-large: 40px;
+    --el-component-size: 32px;
+    --el-component-size-small: 24px
+}
+
+:root {
+    color-scheme: light;
+    --el-color-primary: #409eff;
+    --el-color-primary-light-3: #79bbff;
+    --el-color-primary-light-5: #a0cfff;
+    --el-color-primary-light-7: #c6e2ff;
+    --el-color-primary-light-8: #d9ecff;
+    --el-color-primary-light-9: #ecf5ff;
+    --el-color-primary-dark-2: #337ecc;
+    --el-color-success: #67c23a;
+    --el-color-success-light-3: #95d475;
+    --el-color-success-light-5: #b3e19d;
+    --el-color-success-light-7: #d1edc4;
+    --el-color-success-light-8: #e1f3d8;
+    --el-color-success-light-9: #f0f9eb;
+    --el-color-success-dark-2: #529b2e;
+    --el-color-warning: #e6a23c;
+    --el-color-warning-light-3: #eebe77;
+    --el-color-warning-light-5: #f3d19e;
+    --el-color-warning-light-7: #f8e3c5;
+    --el-color-warning-light-8: #faecd8;
+    --el-color-warning-light-9: #fdf6ec;
+    --el-color-warning-dark-2: #b88230;
+    --el-color-danger: #f56c6c;
+    --el-color-danger-light-3: #f89898;
+    --el-color-danger-light-5: #fab6b6;
+    --el-color-danger-light-7: #fcd3d3;
+    --el-color-danger-light-8: #fde2e2;
+    --el-color-danger-light-9: #fef0f0;
+    --el-color-danger-dark-2: #c45656;
+    --el-color-error: #f56c6c;
+    --el-color-error-light-3: #f89898;
+    --el-color-error-light-5: #fab6b6;
+    --el-color-error-light-7: #fcd3d3;
+    --el-color-error-light-8: #fde2e2;
+    --el-color-error-light-9: #fef0f0;
+    --el-color-error-dark-2: #c45656;
+    --el-color-info: #909399;
+    --el-color-info-light-3: #b1b3b8;
+    --el-color-info-light-5: #c8c9cc;
+    --el-color-info-light-7: #dedfe0;
+    --el-color-info-light-8: #e9e9eb;
+    --el-color-info-light-9: #f4f4f5;
+    --el-color-info-dark-2: #73767a;
+    --el-bg-color: #ffffff;
+    --el-bg-color-page: #f2f3f5;
+    --el-bg-color-overlay: #ffffff;
+    --el-text-color-primary: #303133;
+    --el-text-color-regular: #606266;
+    --el-text-color-secondary: #909399;
+    --el-text-color-placeholder: #a8abb2;
+    --el-text-color-disabled: #c0c4cc;
+    --el-border-color: #dcdfe6;
+    --el-border-color-light: #e4e7ed;
+    --el-border-color-lighter: #ebeef5;
+    --el-border-color-extra-light: #f2f6fc;
+    --el-border-color-dark: #d4d7de;
+    --el-border-color-darker: #cdd0d6;
+    --el-fill-color: #f0f2f5;
+    --el-fill-color-light: #f5f7fa;
+    --el-fill-color-lighter: #fafafa;
+    --el-fill-color-extra-light: #fafcff;
+    --el-fill-color-dark: #ebedf0;
+    --el-fill-color-darker: #e6e8eb;
+    --el-fill-color-blank: #ffffff;
+    --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
+    --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
+    --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
+    --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
+    --el-disabled-bg-color: var(--el-fill-color-light);
+    --el-disabled-text-color: var(--el-text-color-placeholder);
+    --el-disabled-border-color: var(--el-border-color-light);
+    --el-overlay-color: rgba(0, 0, 0, 0.8);
+    --el-overlay-color-light: rgba(0, 0, 0, 0.7);
+    --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
+    --el-mask-color: rgba(255, 255, 255, 0.9);
+    --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
+    --el-border-width: 1px;
+    --el-border-style: solid;
+    --el-border-color-hover: var(--el-text-color-disabled);
+    --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
+    --el-svg-monochrome-grey: var(--el-border-color)
+}
+
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+    transition: var(--el-transition-fade-linear)
+}
+
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-to {
+    opacity: 0
+}
+
+.el-fade-in-linear-enter-active,
+.el-fade-in-linear-leave-active {
+    transition: var(--el-transition-fade-linear)
+}
+
+.el-fade-in-linear-enter-from,
+.el-fade-in-linear-leave-to {
+    opacity: 0
+}
+
+.el-fade-in-enter-active,
+.el-fade-in-leave-active {
+    transition: all var(--el-transition-duration) cubic-bezier(.55, 0, .1, 1)
+}
+
+.el-fade-in-enter-from,
+.el-fade-in-leave-active {
+    opacity: 0
+}
+
+.el-zoom-in-center-enter-active,
+.el-zoom-in-center-leave-active {
+    transition: all var(--el-transition-duration) cubic-bezier(.55, 0, .1, 1)
+}
+
+.el-zoom-in-center-enter-from,
+.el-zoom-in-center-leave-active {
+    opacity: 0;
+    transform: scaleX(0)
+}
+
+.el-zoom-in-top-enter-active,
+.el-zoom-in-top-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transform-origin: center top;
+    transition: var(--el-transition-md-fade)
+}
+
+.el-zoom-in-top-enter-active[data-popper-placement^=top],
+.el-zoom-in-top-leave-active[data-popper-placement^=top] {
+    transform-origin: center bottom
+}
+
+.el-zoom-in-top-enter-from,
+.el-zoom-in-top-leave-active {
+    opacity: 0;
+    transform: scaleY(0)
+}
+
+.el-zoom-in-bottom-enter-active,
+.el-zoom-in-bottom-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transform-origin: center bottom;
+    transition: var(--el-transition-md-fade)
+}
+
+.el-zoom-in-bottom-enter-from,
+.el-zoom-in-bottom-leave-active {
+    opacity: 0;
+    transform: scaleY(0)
+}
+
+.el-zoom-in-left-enter-active,
+.el-zoom-in-left-leave-active {
+    opacity: 1;
+    transform: scale(1);
+    transform-origin: top left;
+    transition: var(--el-transition-md-fade)
+}
+
+.el-zoom-in-left-enter-from,
+.el-zoom-in-left-leave-active {
+    opacity: 0;
+    transform: scale(.45)
+}
+
+.collapse-transition {
+    transition: var(--el-transition-duration) height ease-in-out, var(--el-transition-duration) padding-top ease-in-out, var(--el-transition-duration) padding-bottom ease-in-out
+}
+
+.el-collapse-transition-enter-active,
+.el-collapse-transition-leave-active {
+    transition: var(--el-transition-duration) max-height ease-in-out, var(--el-transition-duration) padding-top ease-in-out, var(--el-transition-duration) padding-bottom ease-in-out
+}
+
+.horizontal-collapse-transition {
+    transition: var(--el-transition-duration) width ease-in-out, var(--el-transition-duration) padding-left ease-in-out, var(--el-transition-duration) padding-right ease-in-out
+}
+
+.el-list-enter-active,
+.el-list-leave-active {
+    transition: all 1s
+}
+
+.el-list-enter-from,
+.el-list-leave-to {
+    opacity: 0;
+    transform: translateY(-30px)
+}
+
+.el-list-leave-active {
+    position: absolute !important
+}
+
+.el-opacity-transition {
+    transition: opacity var(--el-transition-duration) cubic-bezier(.55, 0, .1, 1)
+}
+
+
+@-webkit-keyframes rotating {
+    0% {
+        transform: rotate(0deg)
+    }
+
+    to {
+        transform: rotate(1turn)
+    }
+}
+
+@keyframes rotating {
+    0% {
+        transform: rotate(0deg)
+    }
+
+    to {
+        transform: rotate(1turn)
+    }
+}
+
+html.dark {
+    color-scheme: dark;
+    --el-color-primary: #409eff;
+    --el-color-primary-light-3: #3375b9;
+    --el-color-primary-light-5: #2a598a;
+    --el-color-primary-light-7: #213d5b;
+    --el-color-primary-light-8: #1d3043;
+    --el-color-primary-light-9: #18222c;
+    --el-color-primary-dark-2: #66b1ff;
+    --el-color-success: #67c23a;
+    --el-color-success-light-3: #4e8e2f;
+    --el-color-success-light-5: #3e6b27;
+    --el-color-success-light-7: #2d481f;
+    --el-color-success-light-8: #25371c;
+    --el-color-success-light-9: #1c2518;
+    --el-color-success-dark-2: #85ce61;
+    --el-color-warning: #e6a23c;
+    --el-color-warning-light-3: #a77730;
+    --el-color-warning-light-5: #7d5b28;
+    --el-color-warning-light-7: #533f20;
+    --el-color-warning-light-8: #3e301c;
+    --el-color-warning-light-9: #292218;
+    --el-color-warning-dark-2: #ebb563;
+    --el-color-danger: #f56c6c;
+    --el-color-danger-light-3: #b25252;
+    --el-color-danger-light-5: #854040;
+    --el-color-danger-light-7: #582e2e;
+    --el-color-danger-light-8: #412626;
+    --el-color-danger-light-9: #2b1d1d;
+    --el-color-danger-dark-2: #f78989;
+    --el-color-error: #f56c6c;
+    --el-color-error-light-3: #b25252;
+    --el-color-error-light-5: #854040;
+    --el-color-error-light-7: #582e2e;
+    --el-color-error-light-8: #412626;
+    --el-color-error-light-9: #2b1d1d;
+    --el-color-error-dark-2: #f78989;
+    --el-color-info: #909399;
+    --el-color-info-light-3: #6b6d71;
+    --el-color-info-light-5: #525457;
+    --el-color-info-light-7: #393a3c;
+    --el-color-info-light-8: #2d2d2f;
+    --el-color-info-light-9: #202121;
+    --el-color-info-dark-2: #a6a9ad;
+    --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
+    --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
+    --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
+    --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
+    --el-bg-color-page: #0a0a0a;
+    --el-bg-color: #141414;
+    --el-bg-color-overlay: #1d1e1f;
+    --el-text-color-primary: #E5EAF3;
+    --el-text-color-regular: #CFD3DC;
+    --el-text-color-secondary: #A3A6AD;
+    --el-text-color-placeholder: #8D9095;
+    --el-text-color-disabled: #6C6E72;
+    --el-border-color-darker: #636466;
+    --el-border-color-dark: #58585B;
+    --el-border-color: #4C4D4F;
+    --el-border-color-light: #414243;
+    --el-border-color-lighter: #363637;
+    --el-border-color-extra-light: #2B2B2C;
+    --el-fill-color-darker: #424243;
+    --el-fill-color-dark: #39393A;
+    --el-fill-color: #303030;
+    --el-fill-color-light: #262727;
+    --el-fill-color-lighter: #1D1D1D;
+    --el-fill-color-extra-light: #191919;
+    --el-fill-color-blank: transparent;
+    --el-mask-color: rgba(0, 0, 0, 0.8);
+    --el-mask-color-extra-light: rgba(0, 0, 0, 0.3)
+}

package/src/utils/client/index.ts

@@ -174,3 +174,20 @@ export function wrapperCleanUrls(cleanUrls: boolean, route: string) {
 export function replaceValue(str: string, value: any) {
   return str.replace(/\{\{value\}\}/, value)
 }
+
+// https://github.com/mdit-vue/mdit-vue/blob/main/packages/shared/src/slugify.ts
+// eslint-disable-next-line no-control-regex
+const rControl = /[\u0000-\u001F]/g
+const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'“”‘’<>,.?/]+/g
+const rCombining = /[\u0300-\u036F]/g
+export function slugify(str: string) {
+  return str
+    .normalize('NFKD')
+    .replace(rCombining, '')
+    .replace(rControl, '')
+    .replace(rSpecial, '-')
+    .replace(/-{2,}/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .replace(/^(\d)/, '_$1')
+    .toLowerCase()
+}

package/src/utils/node/mdPlugins.ts

@@ -78,7 +78,7 @@ export function patchOptimizeDeps(config: any) {
     config.vite.optimizeDeps = {}
   }
   config.vite.optimizeDeps.exclude = ['vitepress-plugin-tabs', '@sugarat/theme']
-  config.vite.optimizeDeps.include = ['element-plus']
+  // config.vite.optimizeDeps.include = ['element-plus']
 }
 
 export function supportRunExtendsPlugin(config: UserConfig<Theme.Config>) {

package/src/utils/node/theme.ts

@@ -3,7 +3,7 @@ import path from 'node:path'
 import { getDefaultTitle, getFileLastModifyTime, getTextSummary, getVitePressPages, grayMatter, normalizePath, renderDynamicMarkdown } from '@sugarat/theme-shared'
 import type { SiteConfig } from 'vitepress'
 import type { Theme } from '../../composables/config/index'
-import { formatDate } from '../client'
+import { formatDate, shuffleArray } from '../client'
 import { getFirstImagURLFromMD } from './index'
 
 export function patchDefaultThemeSideBar(cfg?: Partial<Theme.BlogConfig>) {
@@ -147,5 +147,8 @@ export function patchVPThemeConfig(
 }
 
 export function checkConfig(cfg?: Partial<Theme.BlogConfig>) {
-  // 保留
+  const friendConfig = cfg?.friend
+  if (!Array.isArray(friendConfig) && friendConfig?.random) {
+    friendConfig.list = shuffleArray(friendConfig.list)
+  }
 }

package/src/utils/node/vitePlugins.ts

@@ -63,22 +63,35 @@ export function getVitePlugins(cfg: Partial<Theme.BlogConfig> = {}) {
     plugins.push(groupIconVitePlugin(cfg?.groupIcon))
   }
 
+  // patch tabs
+  if (cfg?.tabs !== false) {
+    plugins.push(patchTabsPlugin())
+  }
+
+  // patch timeline
+  if (cfg?.timeline !== false) {
+    plugins.push(patchTimelinePlugin())
+  }
   return plugins
 }
 
 export function patchGroupIconPlugin() {
-  return {
+  return createPatchPlugin({
     name: '@sugarat/theme-plugin-patch-group-icon',
-    enforce: 'pre',
-    transform(code: string, id: string) {
-      // 匹配 theme/index.ts 或 theme/index.js 文件
-      if (id.match(/[\/\\]theme[\/\\]index\.(ts|js)$/)) {
-        // 在文件顶部插入 import 语句
-        return `import 'virtual:group-icons.css'\n${code}`
-      }
-      return code
+    replacements: {
+      '// replace-group-icon-import-code': 'import \'virtual:group-icons.css\''
     }
-  }
+  })
+}
+
+export function patchTabsPlugin() {
+  return createPatchPlugin({
+    name: '@sugarat/theme-plugin-patch-tabs',
+    replacements: {
+      '// replace-tabs-import-code': 'import { enhanceAppWithTabs } from \'vitepress-plugin-tabs/client\'',
+      '// replace-tabs-enhance-app-code': 'enhanceAppWithTabs(ctx.app)'
+    }
+  })
 }
 
 export function registerVitePlugins(vpCfg: any, plugins: any[]) {
@@ -89,18 +102,30 @@ export function registerVitePlugins(vpCfg: any, plugins: any[]) {
 }
 
 export function inlineInjectMermaidClient() {
-  return {
+  return createPatchPlugin({
     name: '@sugarat/theme-plugin-inline-inject-mermaid-client',
+    replacements: {
+      '// replace-mermaid-import-code': 'import Mermaid from \'vitepress-plugin-mermaid/Mermaid.vue\'',
+      '// replace-mermaid-mounted-code': 'if (!ctx.app.component(\'Mermaid\')) { ctx.app.component(\'Mermaid\', Mermaid as any) }'
+    }
+  })
+}
+
+function createPatchPlugin({ name, replacements }: { name: string; replacements: Record<string, string> }) {
+  return {
+    name,
     enforce: 'pre',
-    transform(code, id) {
-      if (id.endsWith('src/index.ts') && code.startsWith('// @sugarat/theme index')) {
-        return code
-          .replace('// replace-mermaid-import-code', 'import Mermaid from \'vitepress-plugin-mermaid/Mermaid.vue\'')
-          .replace('// replace-mermaid-mounted-code', 'if (!ctx.app.component(\'Mermaid\')) { ctx.app.component(\'Mermaid\', Mermaid as any) }')
+    transform(code: string, id: string) {
+      if (id.endsWith('theme/src/index.ts') && code.startsWith('// @sugarat/theme index')) {
+        let newCode = code
+        for (const [key, value] of Object.entries(replacements)) {
+          newCode = newCode.replace(key, value)
+        }
+        return newCode
       }
       return code
-    },
-  } as PluginOption
+    }
+  }
 }
 
 export function inlineBuildEndPlugin(buildEndFn: any[]) {
@@ -312,3 +337,11 @@ export function setThemeScript(
   }
   return pluginOps
 }
+function patchTimelinePlugin() {
+  return createPatchPlugin({
+    name: '@sugarat/theme-plugin-patch-timeline',
+    replacements: {
+      '// replace-timeline-import-code': 'import \'vitepress-markdown-timeline/dist/theme/index.css\''
+    }
+  })
+}