feat: 样式交互调整

AntmJS · May 22, 2023 · f19d3e4 · f19d3e4
1 parent 42287c6
commit f19d3e4
Show file tree

Hide file tree

Showing 11 changed files with 260 additions and 86 deletions.
diff --git a/packages/doc/config/base.ts b/packages/doc/config/base.ts
@@ -42,7 +42,7 @@ export default async function base() {
         {
           test: /.ts|.tsx$/,
           loader: 'swc-loader',
-          exclude: /node_modules\/(?!@antmjs\/doc)/,
+          exclude: /node_modules\/(?!antmjs\-doc)/,
           options: {
             jsc: {
               parser: {

diff --git a/packages/doc/config/utils/create-base.ts b/packages/doc/config/utils/create-base.ts
@@ -1,5 +1,5 @@
 import { readFileSync, existsSync, mkdirSync, writeFileSync } from 'fs'
-import { basename, join, relative, sep } from 'path'
+import { basename, join, relative, sep, extname } from 'path'
 import MarkdownIt from 'markdown-it'
 import hljs from 'highlight.js'
 import { watch } from 'chokidar'
@@ -49,8 +49,13 @@ export async function createBase(config: IDocsConfig) {
   let MD_PATHS: string[] = []
 
   for (let i = 0; i < _src.length; i++) {
-    const filepath = resolveWindowsPath(_src[i] || '')
-    MD_PATHS = MD_PATHS.concat([`${filepath}/**/*.md`, `${filepath}/*.md`])
+    const _srcItem = _src[i] || ''
+    if (!extname(_srcItem)) {
+      const filepath = resolveWindowsPath(_srcItem || '')
+      MD_PATHS = MD_PATHS.concat([`${filepath}/**/*.md`, `${filepath}/*.md`])
+    } else {
+      MD_PATHS.push(_srcItem)
+    }
   }
 
   const mdPaths = await glob(MD_PATHS, {

diff --git a/packages/doc/config/utils/markdown-code.ts b/packages/doc/config/utils/markdown-code.ts
@@ -87,7 +87,7 @@ ${cItem.code}
           `
         }
       }
-      tabsStr += '</div>'
+      tabsStr += '\n<div class="copy-code-btn"></div></div>'
 
       if (demos[index]) {
         if (!noNeedRenders.includes(item)) {
@@ -210,7 +210,7 @@ function getImportCodes(codes: string, path: string, demoDir?: string) {
         }
       } else {
         // 样式文件的引入获取
-        const name = importItem.split(' ')[1]?.replace(/\'|\"/g, '') || ''
+        const name = importItem.split(' ')[1]?.replace(/\'|\"|\;/g, '') || ''
         const np = resolve(dir, demoDir || '', name)
         const cc = fs.readFileSync(np, 'utf-8')
         if (name) {
@@ -229,7 +229,7 @@ function getImportCodes(codes: string, path: string, demoDir?: string) {
 function createPreContainer(str) {
   str = str.replace(
     /(```[\w-]*\n[\s\S]*?\n```)/gm,
-    '\n<div class="code-box-max">\n\n$1\n\n</div>\n',
+    '\n<div class="code-box-max">\n<div class="copy-code-btn"></div>\n\n$1\n\n</div>\n',
   )
 
   return str

diff --git a/packages/doc/docs/base/components.md b/packages/doc/docs/base/components.md
@@ -106,6 +106,8 @@ export default function Index({ children }) {
 
 ### 移动端组件库
 
+一种方式是通过`simulator`配置，以 iframe 的方式展示
+
 主要配置如下
 
 - `url`: 分为开发环境和生产环境
@@ -140,4 +142,35 @@ export default defineConfig({
 })
 ```
 
-移动端案例[vantui](https://antmjs.github.io/vantui/main/)
+移动端 iframe 案例[vantui](https://antmjs.github.io/vantui/main/)
+
+还一种方式是通过 css 改变 PC 端组件展示的样式
+
+```less
+.demo-code-wrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  .code-box {
+    height: auto;
+    margin-top: 0;
+    flex: 1;
+
+    .code-item pre {
+      max-height: 624px;
+      height: 624px;
+    }
+  }
+
+  .demo-code-box {
+    width: 375px;
+    height: 667px;
+    overflow: scroll;
+    border: 2px solid #758479;
+    margin-left: 4px;
+  }
+
+  .show-code-btn {
+    display: none;
+  }
+}
+```
diff --git a/packages/doc/docs/base/components__EN.md b/packages/doc/docs/base/components__EN.md
@@ -1,74 +1,191 @@
-# Build Component Library Document
+# Building Component Library Documentation
 
 ### Introduction
 
-Antmjs Doc can support both mobile and PC component libraries, with different operations required for both methods
+antmjs Doc supports both mobile and PC component libraries, which require different operations.
 
-### PC component library
+### PC Component Library
 
-#### Case code file
+#### Example Code Files
 
--Path: The case code and document MD file need to be at the same level as the file
--Naming: The file must start with 'demo' as the prefix, followed by '[a-z -]`
-Avoid naming conflicts within the same MD document
--Type: Supports three file types: '. tsx' and '. jsx'. Currently, only 'react' is supported`
--Code: The case code must have a default exported component, which is' export default '`
-The 'import' local file in the code will also be displayed, except for the file path containing 'index'
-The folder where the case code is located is configured under 'antm. config',
+- Path: The example code and documentation MD files should be in the same directory.
+- Naming: The file must start with the prefix "demo" followed by lowercase letters and hyphens (`[a-z\-]`).
+  Avoid naming conflicts within the same MD file.
+- Type: Supports `.tsx` and `.jsx` file types. Currently, only supports React.
+- Code: The example code must have a default exported component (`export default`).
+
+```markdown
+├── docs
+├── components.md
+├── demo-button.tsx
+```
+
+#### Referencing Example Code in MD Files
+
+To use the code in the file `components.md`, make sure to include empty lines and line breaks.
+
+```markdown
+::: demo-button :::
+```
+
+Here is a simple example of a "toast" component:
+
+::: demo-button :::
+
+### Mobile Component Library
+
+The main configuration is as follows:
+
+- `url`: Divided into development and production environments.
+- `noMate`: Redirects when there is no mapping relationship for the URL.
+- `transform`: Defines the mapping rules.
+
+```ts
+export default defineConfig({
+  docs: {
+    simulator: {
+      url: {
+        development: 'http://10.254.9.214:10086',
+        production: '/vantui/main/mobile.html',
+      },
+      transform: (url) => `#/pages/${url}/index`,
+      noMate: {
+        urls: [
+          'quickstart',
+          'custom-style',
+          'home',
+          'theme',
+          'use-in-react',
+          'contributing',
+          'v2-to-v3',
+          'comments',
+          'premium',
+        ],
+        redirect: '#/pages/dashboard/index',
+      },
+    },
+  },
+})
+```
+
+Mobile iframe example: [vantui](https://antmjs.github.io/vantui/main/)
+
+Another approach is to change the PC component display style using CSS.
+
+```less
+.demo-code-wrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  .code-box {
+    height: auto;
+    margin-top: 0;
+    flex: 1;
+
+    .code-item pre {
+      max-height: 624px;
+      height: 624px;
+    }
+  }
+
+  .demo-code-box {
+    width: 375px;
+    height: 667px;
+    overflow: scroll;
+    border: 2px solid #758479;
+    margin-left: 4px;
+  }
+
+  .show-code-btn {
+    display: none;
+  }
+}
+```
+
+### Translation of Markdown Document
+
+Here is the translation of the provided Markdown document:
+
+# Building Component Library Documentation
+
+### Introduction
+
+antmjs Doc supports both mobile and PC component libraries, which require different operations.
+
+### PC Component Library
+
+#### Example Code Files
+
+- Path: The example code and documentation MD files should be in the same directory.
+- Naming: The file must start with the prefix "demo" followed by lowercase letters and hyphens (`[a-z\-]`).
+  Avoid naming conflicts within the same MD file.
+- Type: Supports `.tsx` and `.jsx` file types. Currently, only supports React.
+- Code: The example code must have a default exported component (`export default`).
+  The code can also include local file imports, except for files with "index" in their path.
+
+The folder containing the example code is configured in `antm.config` as follows:
 
 ```ts
 export default {
   docs: {
     demoCode: {
-      dir: 'example',
+      dir: 'example
+
+',
     },
   },
 }
 ```
 
-> If not set, the case code and markup file are at the same level
-> Directory structure, for example:
+> If not set, the example code and markdown files should be in the same directory.
+
+Directory structure example:
 
 ```markdown
 ├── docs
 ├── example/demo-button.tsx
 ├── components.md
 ```
 
-#### Referencing Case Codes in MD Files
+#### Referencing Example Code in MD Files
 
-Used in the above file components.md, empty lines and line breaks must be included in actual use
+To use the code in the `components.md` file, make sure to include empty lines and line breaks.
 
 ```markdown
 ::: demo-buttona :::
-//Only reference code display, no rendering
+// Only display the code, without rendering
 ::: $demo-buttona :::
 ```
 
-> It should be noted that the case code file needs to be created first, and then the introduction identifier needs to be set
-> Below is a simple 'toast' component case study of React
-> ::: demo-button :::
-> The following is a simple Vue 'toast' component case display
-> ::: demo-buttona :::
+> Note: Create the example code file before setting the import tag.
+
+Here is a simple example of a "toast" component in React:
+
+::: demo-button :::
+
+And here is a simple example of a "toast" component in Vue:
+
+::: demo-buttona :::
 
-### I8n of component library
+Example: [antd-max](https://antmjs.github.io/antd-max)
+
+### Component Library Internationalization (i18n)
 
 ```ts
 export default {
   docs: {
     // ......
     demoCode: {
       container: {
-        react: path.join(process.cwd(), './ docs/demo-i18n.tsx'),
-        vue: path.join(process.cwd(), './ docs/demo-i18n.tsx'),
+        react: path.join(process.cwd(), './docs/demo-i18n.tsx'),
+        vue: path.join(process.cwd(), './docs/demo-i18n.tsx'),
       },
     },
   },
 }
 ```
 
-Configure 'doc. demoCode. container. read' under the configuration file 'antm. config', which is a container component that is common to component cases
-The following is a simple implementation of simulating i18n components, with global variables`__ LANGE__` Language for switching the current document
+In the `antm.config` file, configure `doc.demoCode.container.react` for the shared container component of the component examples.
+Here is a simple implementation of a mock i18n component that uses the global variable `__LANGE__` to determine the current language:
 
 ```typescript
 import React from 'react'
@@ -96,19 +213,22 @@ export default function Index({ children }) {
 }
 ```
 
-### Mobile component library
+### Mobile Component Library
+
+One way to display mobile components is through the `simulator` configuration using an iframe.
+
+The main configuration is as follows:
 
-The main configurations are as follows
--URL: divided into development environment and production environment
--'noMate': Set redirection when there is no mapping relationship between urls
--'transform ': Define mapping rules
+- `url`: Divided into development and production environments.
+- `noMate`: Redirects when there is no mapping relationship for the URL.
+- `transform`: Defines the mapping rules.
 
 ```ts
 export default defineConfig({
   docs: {
     simulator: {
       url: {
-        development: ' http://10.254.9.214:10086 ',
+        development: 'http://10.254.9.214:10086',
         production: '/vantui/main/mobile.html',
       },
       transform: (url) => `#/pages/${url}/index`,
@@ -130,3 +250,36 @@ export default defineConfig({
   },
 })
 ```
+
+Mobile iframe example: [vantui](https://antmjs.github.io/vantui/main/)
+
+Another approach is to change the display style of PC components using CSS.
+
+```less
+.demo-code-wrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  .code-box {
+    height: auto;
+    margin-top: 0;
+    flex: 1;
+
+    .code-item pre {
+      max-height: 624px;
+      height: 624px;
+    }
+  }
+
+  .demo-code-box {
+    width: 375px;
+    height: 667px;
+    overflow: scroll;
+    border: 2px solid #758479;
+    margin-left: 4px;
+  }
+
+  .show-code-btn {
+    display: none;
+  }
+}
+```
diff --git a/packages/doc/package.json b/packages/doc/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@antmjs/doc",
-  "version": "2.3.6",
+  "name": "antmjs-doc",
+  "version": "0.0.5-alpha.9",
   "description": "PC端在线文档构建工具",
   "main": "index.js",
   "types": "./types/index.d.ts",