build(theme): [theme] Theme package structure optimization (#949)

* build(theme): [theme] Theme package structure optimization

* build(theme): [theme] Fix according to review comments

examples/sites/demos/pc/webdoc/theme-en.md

@@ -10,11 +10,42 @@ Design website: [Administrative side specification design variable] (https://rnd
 
 Basic style variable `npm` Repository path: `@opentiny/vue-theme/theme`
 
-### Using Predefined Topics and Dynamically Switching Topics
+### Using predefined themes and dynamically switching themes
 
-At present, two sets of themes are officially provided: default theme and unlimited theme.
+Currently, the official offers 4 sets of themes:
 
-Topic initialization and dynamic theme switching are described as follows:
+-Default Theme
+-Infinity Theme ` tinyInfinityTheme`
+-Aurora Theme ` tinyAuroraTheme`
+-XDesign Theme ` tinySmbTheme`
+
+#### Using predefined themes through alias [Currently only supported: Eurora theme and XDesign theme]
+
+vue.config.js define
+
+```js
+chainWebpack: (config) => {
+  // XDesign Theme
+  config.resolve.alias.set('@opentiny/vue-theme', '@opentiny/vue-theme/smb-theme')
+  // Aurora Theme : The aurora theme is to replace all the 'smb' characters in the above SMB themes with 'aurora'
+}
+```
+
+vite.config.js define
+
+```js
+resolve: {
+  alias: [
+    // XDesign Theme
+    {
+      find: /\@opentiny\/vue-theme\/(?!(smb))/,
+      replacement: '@opentiny/vue-theme/smb-theme/'
+    }
+  ]
+}
+```
+
+#### The specific usage of theme initialization and dynamic theme switching is shown below, and the following code is added to the main.ts file.
 
 ```js
 import TinyThemeTool from' @opentiny/vue-theme/theme-tool.js'

examples/sites/demos/pc/webdoc/theme.md

@@ -17,7 +17,33 @@
 - 欧若拉主题 `tinyAuroraTheme`
 - XDesign 主题 `tinySmbTheme`
 
-主题初始化和动态切换主题的具体使用方式如下文所示，在 main.ts 文件中增加以下代码。
+#### 通过 alias 使用预定义主题【目前仅支持：欧若拉主题 和 XDesign 主题】
+
+vue.config.js 定义
+
+```js
+chainWebpack: (config) => {
+  // XDesign 主题
+  config.resolve.alias.set('@opentiny/vue-theme', '@opentiny/vue-theme/smb-theme')
+  // aurora 主题 则是将以上smb主题中的'smb'字符全替换成 'aurora'即可
+}
+```
+
+vite.config.js 定义
+
+```js
+resolve: {
+  alias: [
+    // XDesign 主题
+    {
+      find: /\@opentiny\/vue-theme\/(?!(smb))/,
+      replacement: '@opentiny/vue-theme/smb-theme/'
+    }
+  ]
+}
+```
+
+#### 主题初始化和动态切换主题的具体使用方式如下文所示，在 main.ts 文件中增加以下代码。
 
 ```js
 import TinyThemeTool from '@opentiny/vue-theme/theme-tool'

packages/theme/build/edit‐dir‐theme.js

@@ -0,0 +1,281 @@
+const fs = require('fs')
+const fsExtra = require('fs-extra')
+const indexLessPath = 'index.less'
+const indexJsPath = 'index.js'
+const smbThemeName = 'smb-theme'
+const auroraThemeName = 'aurora-theme'
+const originRootPath = '../src/'
+const originThemeRootPath = `${originRootPath}theme/`
+const basePath = '/base/'
+
+const emptyThemeContent = `@import '../../{{}}/index.less';`
+
+const baseContent = `@import '../../base/index.less';
+html:root`
+
+const scopedTitle = `@import '../../custom.less';
+@import '../../{{}}/index.less';
+`
+
+const scopedContent = `
+@{compName}-prefix-cls: ~'@{css-prefix}{compName}';
+
+.@{{compName}-prefix-cls}[class*=tiny] {
+  {var}
+}`
+
+const buildThemePathMap = {
+  [auroraThemeName]: `${originRootPath}${auroraThemeName}${basePath}`,
+  [smbThemeName]: `${originRootPath}${smbThemeName}${basePath}`
+}
+
+const cssScopedMap = {
+  'anchor': 'anchor__wrapper',
+  'badge': 'badge__wrapper',
+  'crop': 'crop__wrapper',
+  'date-panel': 'picker-panel',
+  'date-range': 'date-range-picker',
+  'detail-page': 'grid-modal__box',
+  'dialog-box': 'dialog-box__wrapper',
+  'error-page': 'errortips__box',
+  'floatbar': 'float-bar',
+  'flowchart': 'flow-chart',
+  'grid': 'grid__wrapper',
+  'input': ['input', 'input-group'],
+  'option': 'select-dropdown',
+  'pager': ['pager', 'pager__selector'],
+  'picker': 'date-editor',
+  'pop-upload': ['popupload__modal', 'popupload'],
+  'popconfirm': ['popconfirm', 'popconfirm-popover'],
+  'popeditor': ['dialog-box', 'popeditor'],
+  'scroll-text': 'scroll-text__wrapper',
+  'slider': 'slider-container',
+  'tabs': ['tabs__more-dropdown', 'tabs'],
+  'time-range': 'time-range-picker',
+  'tip': 'tips',
+  'tree': ['tree', 'tree__del-popover'],
+  'upload': 'file-upload',
+  'upload-dragger': 'file-upload',
+  'upload-list': 'file-upload',
+  'user-account': 'user-contact'
+}
+
+const createTheme = (callbackFn) => {
+  const createDir = (path, fn = null) => {
+    fs.mkdir(path, (err) => {
+      if (err) {
+        console.log(path, err)
+      }
+      fn && fn()
+    })
+  }
+
+  let timer = null
+  const readerDirStart = () => {
+    clearTimeout(timer)
+    timer = null
+    timer = setTimeout(() => {
+      readDir(originRootPath, 'less')
+      readDir(originThemeRootPath, 'js')
+    }, 10)
+  }
+
+  const beginCreateDir = () => {
+    for (let k in buildThemePathMap) {
+      createDir(originRootPath + k, readerDirStart)
+    }
+  }
+
+  const readDir = (originPath, type) => {
+    fs.readdir(originPath, (err, data) => {
+      if (err) {
+        console.log('readDir', err)
+        return
+      }
+
+      data.forEach((fileDir) => {
+        mkStat(originPath, fileDir, type)
+      })
+    })
+  }
+
+  let isFinalTimer = null
+
+  const isFinalFn = () => {
+    clearTimeout(isFinalTimer)
+    isFinalTimer = null
+    isFinalTimer = setTimeout(() => {
+      callbackFn()
+    }, 20)
+  }
+
+  const mkStat = (originPath, fileDir, type) => {
+    const statPath = `${originPath}/${fileDir}`
+    fs.stat(statPath, (err, data) => {
+      if (err) {
+        console.log('mkStat', err)
+        return
+      }
+      if (data.isDirectory()) {
+        if (fileDir !== 'base' && fileDir !== 'theme') {
+          if (fileDir === 'images') {
+            fsExtra.copy(statPath, `${originPath}/smb-theme/${fileDir}`, (subErr) => {
+              if (subErr) {
+                console.log(subErr)
+                return
+              }
+            })
+            fsExtra.copy(statPath, `${originPath}/aurora-theme/${fileDir}`, (subErr) => {
+              if (subErr) {
+                console.log(subErr)
+                return
+              }
+            })
+          } else {
+            isFileExist(originPath, fileDir, type)
+          }
+        }
+      }
+    })
+  }
+
+  const isFileExist = (originPath, fileDir, type) => {
+    const parentPath = `${originPath}${fileDir}`
+    const path = `${parentPath}/index.${type}`
+    fs.exists(path, (exist) => {
+      if (exist) {
+        if (type === 'less') {
+          readComponentsFile(fileDir)
+        } else if (type === 'js') {
+          readThemeFile(fileDir)
+        }
+        return
+      }
+    })
+  }
+
+  const writeThemeIndexLess = (path, fileDir, themeName) => {
+    fs.stat(path, (err, data) => {
+      const parentPath = `${originRootPath}${themeName}/${fileDir}`
+      const writeTheme = () => {
+        if (err) {
+          writeFile(parentPath + '/index.less', emptyThemeContent.replace('{{}}', fileDir))
+
+          return
+        }
+
+        if (!data.isDirectory()) {
+          fs.readFile(path, 'utf8', (subErr, dataStr) => {
+            if (subErr) {
+              console.log(subErr)
+              return
+            }
+            const startIndex = dataStr.indexOf('{') + 4
+            const endIndex = dataStr.indexOf('}')
+            const newDataStr =
+              dataStr
+                .slice(startIndex, endIndex)
+                .replace(/\'ti-/g, '--ti-')
+                .replace(/\'/g, '')
+                .replace(/\,\n/g, ';\n')
+                .replace(/\, \/\//g, '; //')
+                .slice(0, -1) + ';'
+
+            let scropedData = scopedTitle.replace('{{}}', fileDir)
+
+            if (cssScopedMap[fileDir]) {
+              if (Array.isArray(cssScopedMap[fileDir])) {
+                cssScopedMap[fileDir].forEach((item) => {
+                  scropedData += scopedContent.replace(/\{compName\}/g, item).replace(/\{var\}/g, newDataStr)
+                })
+              } else {
+                scropedData += scopedContent
+                  .replace(/\{compName\}/g, cssScopedMap[fileDir])
+                  .replace(/\{var\}/g, newDataStr)
+              }
+            } else {
+              scropedData += scopedContent.replace(/\{compName\}/g, fileDir).replace(/\{var\}/g, newDataStr)
+            }
+
+            writeFile(parentPath + '/index.less', scropedData)
+          })
+        }
+      }
+
+      createDir(parentPath, writeTheme)
+    })
+  }
+
+  const readComponentsFile = (fileDir) => {
+    const indexPath = `${originRootPath}/${fileDir}/${indexLessPath}`
+    const smbPath = `${originRootPath}/${fileDir}/${smbThemeName}.js`
+    const auroraPath = `${originRootPath}/${fileDir}/${auroraThemeName}.js`
+    fs.readFile(indexPath, 'utf8', (err, dataStr) => {
+      if (err) {
+        console.log(err)
+      }
+
+      // 写入smb-theme/**/index.less
+      writeThemeIndexLess(smbPath, fileDir, smbThemeName)
+
+      // 写入aurora-theme/**/index.less
+      writeThemeIndexLess(auroraPath, fileDir, auroraThemeName)
+    })
+  }
+
+  const readThemeFile = (fileDir) => {
+    const indexPath = `${originThemeRootPath}/${fileDir}/${indexJsPath}`
+
+    if (!buildThemePathMap[fileDir]) {
+      return
+    }
+
+    fs.readFile(indexPath, 'utf8', (err, dataStr) => {
+      createDir(buildThemePathMap[fileDir])
+
+      if (err) {
+        console.log(err)
+      }
+
+      const startIndex = dataStr.indexOf('{') - 1
+      const endIndex = dataStr.indexOf('}')
+      let newDataStr = dataStr.slice(startIndex, endIndex)
+      const lastIndex = newDataStr.lastIndexOf("'")
+      newDataStr =
+        baseContent +
+        newDataStr
+          .slice(0, lastIndex)
+          .replace(/\'ti-/g, '--ti-')
+          .replace(/\'/g, '')
+          .replace(/\,\n/g, ';\n')
+          .replace(/\, \/\//g, '; //') +
+        ';\n}'
+
+      writeFile(buildThemePathMap[fileDir] + '/index.less', newDataStr)
+    })
+  }
+
+  const writeFile = (filePath, data) => {
+    fs.writeFile(filePath, data, 'utf8', (err) => {
+      if (err) {
+        console.log('writeFile', err)
+      }
+      isFinalFn()
+    })
+  }
+
+  beginCreateDir()
+}
+
+const removeDir = (callbackFn) => {
+  for (let k in buildThemePathMap) {
+    fsExtra.remove(`${originRootPath}${k}`, (err) => {
+      if (err) {
+        console.log('removeDir', err)
+      }
+      callbackFn()
+    })
+  }
+}
+
+module.exports = { createTheme, removeDir }

packages/theme/build/gulp-dist.js

@@ -9,9 +9,12 @@ const svgInline = require('gulp-svg-inline')
 const prefixer = require('gulp-autoprefixer')
 const fg = require('fast-glob')
 const fs = require('node:fs')
+const { createTheme, removeDir } = require('./edit‐dir‐theme.js')
 
 const source = '../src'
 const dist = '../dist'
+const distSmb = '../dist/smb-theme'
+const distAurora = '../dist/aurora-theme'
 const svgInlineOption = {
   maxImageSize: 1 * 1024 * 1024,
   extensions: [/\.svg/gi]
@@ -26,9 +29,16 @@ const importStr = fileList
 const note = fs.readFileSync('../src/index.less', { encoding: 'utf-8' }).match(/(^\/\*\*.+?\*\/)/s)[0]
 fs.writeFileSync('../src/index.less', `${note}\n\n${importStr}`)
 
+gulp.task('build-dir', createTheme)
+
 gulp.task('compile', () => {
   return gulp
-    .src([`${source}/**/index.less`, `${source}/index.less`])
+    .src([
+      `${source}/**/index.less`,
+      `${source}/aurora-theme/**/index.less`,
+      `${source}/smb-theme/**/index.less`,
+      `${source}/index.less`
+    ])
     .pipe(svgInline(svgInlineOption))
     .pipe(less())
     .pipe(
@@ -57,4 +67,26 @@ gulp.task('copyimage', () => {
   return gulp.src([`${source}/images/**`]).pipe(gulp.dest(`${dist}/images`))
 })
 
-gulp.task('build', gulp.series('compile', 'copycssvar', 'copysvgs', 'copyimage'))
+gulp.task('copyimage-aurora', () => {
+  return gulp.src([`${source}/aurora-theme/images/**`]).pipe(gulp.dest(`${distAurora}/images`))
+})
+
+gulp.task('copyimage-smb', () => {
+  return gulp.src([`${source}/smb-theme/images/**`]).pipe(gulp.dest(`${distSmb}/images`))
+})
+
+gulp.task('remove-dir', removeDir)
+
+gulp.task(
+  'build',
+  gulp.series(
+    'build-dir',
+    'compile',
+    'copycssvar',
+    'copysvgs',
+    'copyimage',
+    'copyimage-aurora',
+    'copyimage-smb',
+    'remove-dir'
+  )
+)

packages/theme/src/theme/infinity-theme/index.js

@@ -307,7 +307,7 @@ export const infinityTheme = {
   'ti-notify-close-icon-color': 'var(--ti-base-color-common-1)',
   'ti-notify-title-text-color': 'var(--ti-base-color-common-1)',
   'ti-notify-title-margin-top': '0',
-  'ti-notify-title-margin-horizontal': '',
+  'ti-notify-title-margin-horizontal': '0',
   'ti-notify-title-margin-bottom': '8px',
   'ti-notify-title-height': '25px',
   'ti-notify-title-line-height': '25px',