fix: code review fixes for feat 优化文档 增加css使用

example/app.ts

@@ -18,7 +18,6 @@ configProvider({
 })
 
 // app.js
-// 触发 main 分支 docs 更新 23
 createApp({})
 
 if (isIframe) {

packages/website-build/src/compiler/compile-base-css-variables-md.ts

@@ -6,7 +6,7 @@ import { CACHE_DIR_NAME } from '../common/constant.js'
 import { createRequire } from 'node:module'
 import { fileURLToPath } from 'node:url'
 import { dirname } from 'node:path'
-import { readFileSync } from '../utils/index.js'
+import { readFileSync, convertCssVarFormat } from '../utils/index.js'
 
 const require = createRequire(import.meta.url)
 const __dirname = dirname(fileURLToPath(import.meta.url))
@@ -20,18 +20,6 @@ const filepath = path.join(outPath, fileName)
 const startTag = '<!-- @css-variable -> start -->'
 const endTag = '<!-- @css-variable -> end -->'
 
-/**
- * 转换CSS变量格式：$var($) -> var(--cube-), $var() -> var(--cube-), $ -> --cube-
- * @param origin 原始变量字符串
- * @returns 转换后的CSS变量字符串
- */
-const convertCssVarFormat = (origin: string): string => {
-  return origin
-    .replace(/\$var\(\$(.+)\)/g, 'var(--cube-$1)')
-    .replace(/\$var\((.+)\)/g, 'var(--cube-$1)')
-    .replace(/\$(.+)/g, '--cube-$1')
-}
-
 /**
  * 生成全局CSS变量文档
  * @returns {void}

packages/website-build/src/compiler/compile-components-css-variables-md.ts

@@ -2,27 +2,16 @@ import { Render } from '@mpxjs/vuese-markdown-render'
 import { renderOptions } from '../common/options.js'
 import { CACHE_DIR_NAME } from '../common/constant.js'
 import { createRequire } from 'node:module'
+import { convertCssVarFormat } from '../utils/index.js'
 
 const require = createRequire(import.meta.url)
 
-/**
- * 转换CSS变量格式：$var($) -> var(--cube-), $var() -> var(--cube-), $ -> --cube-
- * @param origin 原始变量字符串
- * @returns 转换后的CSS变量字符串
- */
-const convertCssVarFormat = (origin: string): string => {
-  return origin
-    .replace(/\$var\(\$(.+)\)/g, 'var(--cube-$1)')
-    .replace(/\$var\((.+)\)/g, 'var(--cube-$1)')
-    .replace(/\$(.+)/g, '--cube-$1')
-}
-
 /**
  *  生成组件CSS变量文档
  * @param {string} component
  * @returns {string}
  */
-const genCompnentsCSSVariablesMd = function (component: string) {
+const genComponentsCSSVariablesMd = function (component: string) {
   const themeVarInfo = require(`../../${CACHE_DIR_NAME}/theme-var-info.json`)
   const defaultThemeStyle = require(`../../${CACHE_DIR_NAME}/default-theme-style.json`)
 
@@ -71,7 +60,7 @@ const genCompnentsCSSVariablesMd = function (component: string) {
         // 变量默认值
         const contentList = value.split(/\s/)
         // 正则数组顺序应由具体到抽象，目前为$var($color),$var(color),$color
-        const regexpList = [/\$var\(\$(.+)\)/, /\$var\((.+)\)/, /\$(.+)/, /\$\(,/]
+        const regexpList = [/\$var\(\$(.+)\)/, /\$var\((.+)\)/, /\$(.+)/]
         const handledList = contentList.map(content => {
           // 引用变量则处理文本为跳转链接
           if (content.includes('$')) {
@@ -83,17 +72,13 @@ const genCompnentsCSSVariablesMd = function (component: string) {
                   const varName = matchText.startsWith('$') ? matchText.slice(1) : matchText
                   if (BASE_CSS_VARIABLES_MAP.has(varName)) {
                     // 全局CSS变量
-                    // return `<a href="javascript:;" data-target="/guide/design-tokens.html#${varName}" onclick="var __BASE_URL__=window.location.pathname.slice(0, document.location.pathname.indexOf('/components'));window.location.href=__BASE_URL__+this.dataset.target">${origin}</a>`
                     return `<RouterLink to="/guide/design-tokens.html#${varName}" v-slot="{href}"> <a :href="href">${convertCssVarFormat(origin)}</a> </RouterLink>`
                   } else if (SELF_CSS_VARIABLES_MAP.has(varName)) {
                     // 自身CSS变量
                     return `<a class="css-var-default" href="#${varName}">${convertCssVarFormat(origin)}</a>`
                   } else {
                     // 默认为其他同类组件CSS变量
                     return `<span>${convertCssVarFormat(origin)}</span>`
-                    // const ComponentAlias = varName.split('-')[0]
-                    // return `<a href="javascript:;" data-target="/${ComponentAlias}.html#${varName}" onclick="var __BASE_URL__=window.location.pathname.slice(0, document.location.pathname.lastIndexOf('/'));window.location.href=__BASE_URL__+this.dataset.target">${origin}</a>`
-                    // return `<RouterLink to="/component//${ComponentAlias}.html#${varName}" v-slot="{href}"><a :href="href">${origin}</a></RouterLink>`
                   }
                 })
               }
@@ -114,4 +99,4 @@ const genCompnentsCSSVariablesMd = function (component: string) {
   return code
 }
 
-export default genCompnentsCSSVariablesMd
+export default genComponentsCSSVariablesMd

packages/website-build/src/compiler/compile-doc-md.ts

@@ -5,7 +5,7 @@ import { getMixinsConfig } from '../utils/get-mixins-config.js'
 import { camelize, mkdirSync } from '../utils/index.js'
 import genSrcCodeMd from './compile-src-code-md.js'
 import genExampleMd from './compile-example-md.js'
-import genCompnentsCSSVariablesMd from './compile-components-css-variables-md.js'
+import genComponentsCSSVariablesMd from './compile-components-css-variables-md.js'
 import genBaseCSSVariablesMd from './compile-base-css-variables-md.js'
 
 const reg = /<card>([\s\S]+?)<\/card>/g
@@ -43,7 +43,7 @@ const genDocMd = (
     mkdirSync(path.resolve(mdDistDir, componentGroupName), componentGroupName)
     const exampleDocPath = path.resolve(mdDistDir, componentGroupName, `${example}.md`)
     const srcCodeMd = genSrcCodeMd(srcDir, example, fnMixins)
-    const cssVariablesMdContent = genCompnentsCSSVariablesMd(example)
+    const cssVariablesMdContent = genComponentsCSSVariablesMd(example)
     let srcCodeMdContent = ''
     if (srcCodeMd) {
       srcCodeMdContent = addCardWrap(srcCodeMd.content + cssVariablesMdContent, '##')

packages/website-build/src/utils/index.ts

@@ -89,13 +89,26 @@ const delEmptyContentLineBreaks = function (content) {
   return content
 }
 
+/**
+ * 转换CSS变量格式：$var($) -> var(--cube-), $var() -> var(--cube-), $ -> --cube-
+ * @param origin 原始变量字符串
+ * @returns 转换后的CSS变量字符串
+ */
+const convertCssVarFormat = (origin: string): string => {
+  return origin
+    .replace(/\$var\(\$(.+)\)/g, 'var(--cube-$1)')
+    .replace(/\$var\((.+)\)/g, 'var(--cube-$1)')
+    .replace(/\$(.+)/g, '--cube-$1')
+}
+
 export {
   camelize,
   isMpxFile,
   mkdirSync,
   capitalize,
   readFileSync,
   trimLineBreak,
+  convertCssVarFormat,
   delScriptJsonBlock,
   getExamplesMpxFiles,
   delEmptyContentLineBreaks