feat(cli): create page command support customize page directory

NervJS#7598 NervJS#13428

crates/native_binding/binding.d.ts

@@ -25,6 +25,7 @@ export interface CreateOptions {
   typescript?: boolean
   template: string
   pageName?: string
+  pageDir?: string
   compiler?: CompilerType
   setPageName?: string
   changeExt?: boolean
@@ -66,6 +67,7 @@ export interface Page {
   templateRoot: string
   description?: string
   pageName: string
+  pageDir: string
   date?: string
   framework: FrameworkType
   css: CSSType

crates/native_binding/src/lib.rs

@@ -52,6 +52,7 @@ pub async fn create_page(
     conf.template_root,
     conf.description,
     conf.page_name,
+    conf.page_dir,
     conf.date,
     conf.framework,
     conf.css,

crates/taro_init/src/creator.rs

@@ -32,6 +32,7 @@ pub struct CreateOptions {
   pub typescript: Option<bool>,
   pub template: String,
   pub page_name: Option<String>,
+  pub page_dir: Option<String>,
   pub compiler: Option<CompilerType>,
   pub set_page_name: Option<String>,
   pub change_ext: Option<bool>,

crates/taro_init/src/page.rs

@@ -19,6 +19,7 @@ pub struct Page {
   pub template_root: String,
   pub description: Option<String>,
   pub page_name: String,
+  pub page_dir: String,
   pub date: Option<String>,
   pub framework: FrameworkType,
   pub css: CSSType,
@@ -39,6 +40,7 @@ impl Page {
     template_root: String,
     description: Option<String>,
     page_name: String,
+    page_dir: String,
     date: Option<String>,
     framework: FrameworkType,
     css: CSSType,
@@ -57,6 +59,7 @@ impl Page {
       template_root,
       description,
       page_name,
+      page_dir,
       date,
       framework,
       css,
@@ -101,6 +104,7 @@ impl Page {
       typescript: self.typescript.clone(),
       template: self.template.clone(),
       page_name: Some(self.page_name.clone()),
+      page_dir: Some(self.page_dir.clone()),
       compiler: self.compiler.clone(),
       set_page_name: None,
       change_ext: None,

crates/taro_init/src/plugin.rs

@@ -58,6 +58,7 @@ impl Plugin {
       typescript: None,
       template: self.template.clone(),
       page_name: None,
+      page_dir: None,
       compiler: None,
       set_page_name: None,
       change_ext: None,

crates/taro_init/src/project.rs

@@ -105,6 +105,7 @@ impl Project {
       typescript: self.typescript.clone(),
       template: self.template.clone(),
       page_name: Some("index".to_string()),
+      page_dir: None,
       compiler: self.compiler.clone(),
       set_page_name: None,
       change_ext: None,

packages/taro-cli/src/create/page.ts

@@ -1,4 +1,4 @@
-import { CompilerType, createPage as createPageBinding,CSSType, FrameworkType, NpmType, PeriodType } from '@tarojs/binding'
+import { CompilerType, createPage as createPageBinding, CSSType, FrameworkType, NpmType, PeriodType } from '@tarojs/binding'
 import { chalk, DEFAULT_TEMPLATE_SRC, fs, getUserHomeDir, TARO_BASE_CONFIG, TARO_CONFIG_FOLDER } from '@tarojs/helper'
 import { isNil } from 'lodash'
 import * as path from 'path'
@@ -15,6 +15,7 @@ export interface IPageConf {
   template: string
   description?: string
   pageName: string
+  pageDir: string
   date?: string
   framework: FrameworkType
   css: CSSType
@@ -24,7 +25,7 @@ export interface IPageConf {
   customTemplatePath?: string
 }
 interface IPageArgs extends IPageConf {
-  modifyCustomTemplateConfig : TGetCustomTemplate
+  modifyCustomTemplateConfig: TGetCustomTemplate
 }
 interface ITemplateInfo {
   css: CSSType
@@ -40,7 +41,7 @@ type TCustomTemplateInfo = Omit<ITemplateInfo & {
 
 export type TSetCustomTemplateConfig = (customTemplateConfig: TCustomTemplateInfo) => void
 
-type TGetCustomTemplate = (cb: TSetCustomTemplateConfig ) => Promise<void>
+type TGetCustomTemplate = (cb: TSetCustomTemplateConfig) => Promise<void>
 
 const DEFAULT_TEMPLATE_INFO = {
   name: 'default',
@@ -137,7 +138,7 @@ export default class Page extends Creator {
     this.conf.date = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
     // apply 插件，由插件设置自定义模版 config
     await this.modifyCustomTemplateConfig(this.setCustomTemplateConfig.bind(this))
-    if(!this.conf.isCustomTemplate){
+    if (!this.conf.isCustomTemplate) {
       const pkgTemplateInfo = this.getPkgTemplateInfo()
       this.setTemplateConfig(pkgTemplateInfo)
       if (!fs.existsSync(this.templatePath(this.conf.template))) {
@@ -178,6 +179,7 @@ export default class Page extends Creator {
       date: this.conf.date,
       description: this.conf.description,
       pageName,
+      pageDir: this.conf.pageDir,
       isCustomTemplate,
       customTemplatePath,
       basePageFiles: files,

packages/taro-cli/src/presets/commands/create.ts

@@ -1,3 +1,6 @@
+import { existsSync } from 'node:fs'
+import * as path from 'node:path'
+
 import * as hooks from '../constant'
 
 import type { IPluginContext } from '@tarojs/service'
@@ -27,8 +30,9 @@ export default (ctx: IPluginContext) => {
     name: 'create',
     optionsMap: {
       '--name [name]': '名称',
+      '--dir [dir]': '页面目录（创建页面时有效，默认src/pages）',
       '--description [description]': '介绍',
-      '--type [type]': '模版类型(page(默认)|plugin-command|plugin-build|plugin-template)'
+      '--type [type]': '模版类型(page(默认)|plugin-command|plugin-build|plugin-template)',
     },
     synopsisList: [
       'taro create page',
@@ -47,12 +51,24 @@ export default (ctx: IPluginContext) => {
           if (typeof name !== 'string') {
             return console.log(chalk.red('请输入需要创建的页面名称'))
           }
+          const firstCharCode = name.charCodeAt(0)
+          if (
+            encodeURIComponent(name) !== name ||
+            !((firstCharCode >= 65 && firstCharCode <= 90) || (firstCharCode >= 97 && firstCharCode <= 122))
+          ) {
+            return console.log(chalk.red('页面名称不合法'))
+          }
+          const pageDir = options.dir || 'src/pages'
+          if (existsSync(path.join(appPath, pageDir, name))) {
+            return console.log(chalk.red('页面已存在'))
+          }
 
           const Page = require('../../create/page').default
           const page = new Page({
             pageName: name,
             projectDir: appPath,
             description,
+            pageDir,
             async modifyCustomTemplateConfig (cb: TSetCustomTemplateConfig) {
               await ctx.applyPlugins({ name: hooks.MODIFY_CREATE_TEMPLATE, opts: cb })
             }

packages/taro-cli/templates/default/template_creator.js

@@ -8,17 +8,17 @@ const handler = {
   '/types/vue.d.ts' (err, { framework, typescript }) {
     return ['Vue', 'Vue3'].includes(framework) && !!typescript
   },
-  '/src/pages/index/index.jsx' (err, { pageName }) {
-    return { setPageName: `/src/pages/${pageName}/index.jsx` }
+  '/src/pages/index/index.jsx' (err, { pageName, pageDir }) {
+    return { setPageName: `${pageDir || '/src/pages'}/${pageName}/index.jsx` }
   },
-  '/src/pages/index/index.css' (err, { pageName }) {
-    return { setPageName: `/src/pages/${pageName}/index.css` }
+  '/src/pages/index/index.css' (err, { pageName, pageDir }) {
+    return { setPageName: `${pageDir || '/src/pages'}/${pageName}/index.css` }
   },
-  '/src/pages/index/index.vue' (err, { pageName }) {
-    return { setPageName: `/src/pages/${pageName}/index.vue` }
+  '/src/pages/index/index.vue' (err, { pageName, pageDir }) {
+    return { setPageName: `${pageDir || '/src/pages'}/${pageName}/index.vue` }
   },
-  '/src/pages/index/index.config.js' (err, { pageName }) {
-    return { setPageName: `/src/pages/${pageName}/index.config.js` }
+  '/src/pages/index/index.config.js' (err, { pageName, pageDir }) {
+    return { setPageName: `${pageDir || '/src/pages'}/${pageName}/index.config.js` }
   },
   '/_editorconfig' () {
     return { setPageName: `/.editorconfig` }