DevCloudFE · kagol · Apr 12, 2022 · Apr 12, 2022
diff --git a/packages/devui-vue/devui-cli/commands/create.js b/packages/devui-vue/devui-cli/commands/create.js
@@ -92,7 +92,7 @@ async function createComponent(params = {}) {
 
     const writeFiles = [
       fs.writeFile(resolve(componentDir, INDEX_FILE_NAME), indexTemplate),
-      fs.writeFile(resolve(testsDir, `${testName}.ts`), testsTemplate)
+      fs.writeFile(resolve(testsDir, `${testName}.tsx`), testsTemplate)
     ];
 
     if (!fs.existsSync(docsDir)) {

diff --git a/packages/devui-vue/devui-cli/templates/component.js b/packages/devui-vue/devui-cli/templates/component.js
@@ -4,37 +4,45 @@ const { bigCamelCase } = require('../shared/utils');
 
 // 创建组件模板
 exports.createComponentTemplate = ({ styleName, componentName, typesName }) => `\
-import { defineComponent } from 'vue'
+import { defineComponent, toRefs } from 'vue';
+import type { SetupContext } from 'vue';
 import { ${camelCase(componentName)}Props, ${bigCamelCase(
   componentName
-)}Props } from './${typesName}'
-import './${styleName}.scss'
+)}Props } from './${typesName}';
+import './${styleName}.scss';
 
 export default defineComponent({
   name: '${bigCamelCase(DEVUI_NAMESPACE)}${bigCamelCase(componentName)}',
   props: ${camelCase(componentName)}Props,
   emits: [],
-  setup(props: ${bigCamelCase(componentName)}Props, ctx) {
+  setup(props: ${bigCamelCase(componentName)}Props, ctx: SetupContext) {
+    // 直接解构 props 会导致响应式失效，需要使用 toRefs 进行包裹
+    // const { data } = toRefs(props);
+    // console.log(data.value);
+
     return () => {
-      return (<div class="${CSS_CLASS_PREFIX}-${componentName}"></div>)
-    }
+      return (
+        <div class="${CSS_CLASS_PREFIX}-${componentName}"></div>
+      );
+    };
   }
-})
+});
 `;
 
 // 创建类型声明模板
 exports.createTypesTemplate = ({ componentName }) => `\
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { PropType, ExtractPropTypes } from 'vue';
 
 export const ${camelCase(componentName)}Props = {
-  /* test: {
-    type: Object as PropType<{ xxx: xxx }>
-  } */
-} as const
+  // data: {
+  //   type: type,
+  //   default: defaultValue
+  // },
+} as const;
 
 export type ${bigCamelCase(componentName)}Props = ExtractPropTypes<typeof ${camelCase(
   componentName
-)}Props>
+)}Props>;
 `;
 
 // 创建指令模板
@@ -48,21 +56,24 @@ export default {
   updated() { },
   beforeUnmount() { },
   unmounted() { }
-}
+};
 `;
-// 创建server模板
+// 创建 service 模板
 exports.createServiceTemplate = ({ componentName, typesName, serviceName }) => `\
-import { ${bigCamelCase(componentName)}Props } from './${typesName}'
+import { ${bigCamelCase(componentName)}Props } from './${typesName}';
 
 const ${bigCamelCase(serviceName)} = {
   // open(props: ${bigCamelCase(componentName)}Props) { }
-}
+};
 
-export default ${bigCamelCase(serviceName)}
+export default ${bigCamelCase(serviceName)};
 `;
 
 // 创建scss模板
 exports.createStyleTemplate = ({ componentName }) => `\
+// 引入主题变量
+// @import '../../styles-var/devui-var.scss';
+
 .${CSS_CLASS_PREFIX}-${componentName} {
   //
 }
@@ -79,11 +90,11 @@ exports.createIndexTemplate = ({
   directiveName,
   serviceName
 }) => {
-  const importComponentStr = `\nimport ${bigCamelCase(componentName)} from './src/${componentName}'`;
-  const importDirectiveStr = `\nimport ${bigCamelCase(directiveName)} from './src/${directiveName}'`;
-  const importServiceStr = `\nimport ${bigCamelCase(serviceName)} from './src/${serviceName}'`;
+  const importComponentStr = `\nimport ${bigCamelCase(componentName)} from './src/${componentName}';`;
+  const importDirectiveStr = `\nimport ${bigCamelCase(directiveName)} from './src/${directiveName}';`;
+  const importServiceStr = `\nimport ${bigCamelCase(serviceName)} from './src/${serviceName}';`;
 
-  const installComponentStr = `    app.use(${bigCamelCase(componentName)} as any)`;
+  const installComponentStr = `app.component(${bigCamelCase(componentName)}.name, ${bigCamelCase(componentName)});`;
   const installDirectiveStr = `\n    app.directive('${bigCamelCase(componentName)}', ${bigCamelCase(
     directiveName
   )})`;
@@ -104,15 +115,11 @@ exports.createIndexTemplate = ({
     getPartStr(hasService, installServiceStr);
 
   return `\
-import type { App } from 'vue'\
+import type { App } from 'vue';\
 ${importStr}
-${
-  hasComponent
-    ? `\n${bigCamelCase(componentName)}.install = function(app: App): void {
-  app.component(${bigCamelCase(componentName)}.name, ${bigCamelCase(componentName)})
-}\n`
-    : ''
-}
+
+export * from './src/${componentName}-types.ts';
+
 export { ${[
     hasComponent ? bigCamelCase(componentName) : null,
     hasDirective ? bigCamelCase(directiveName) : null,
@@ -124,7 +131,7 @@ export { ${[
 export default {
   title: '${bigCamelCase(componentName)} ${title}',
   category: '${category}',
-  status: undefined, // TODO: 组件若开发完成则填入"100%"，并删除该注释
+  status: '0%', // TODO 组件完成状态，开发完组件新特性请及时更新该状态值；若组件开发完成则填入'100%'，并删除该注释
   install(app: App): void {
     ${installStr}
   }
@@ -141,17 +148,28 @@ exports.createTestsTemplate = ({
   hasDirective,
   hasService
 }) => `\
-import { mount } from '@vue/test-utils';
+import { ComponentPublicInstance } from 'vue';
+import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils';
 import { ${[
     hasComponent ? bigCamelCase(componentName) : null,
     hasDirective ? bigCamelCase(directiveName) : null,
     hasService ? bigCamelCase(serviceName) : null
   ]
     .filter((p) => p !== null)
-    .join(', ')} } from '../index';
+    .join(', ')} } from '..';
+
+describe('${componentName}', () => {
+  let wrapper: VueWrapper<ComponentPublicInstance>;
 
-describe('${componentName} test', () => {
   it('${componentName} init render', async () => {
+    wrapper = mount({
+      setup() {
+        return () => {
+          return <${bigCamelCase(componentName)} />;
+        };
+      },
+    });
+
     // todo
   })
 })
@@ -163,55 +181,75 @@ exports.createDocumentTemplate = ({ componentName, title }) => `\
 
 // todo 组件描述
 
-### 何时使用
-
-// todo 使用时机描述
+#### 何时使用
 
+// todo 使用场景描述
 
 ### 基本用法
-// todo 用法描述
-:::demo // todo 展开代码的内部描述
+
+:::demo // todo 基本用法描述
 
 \`\`\`vue
 <template>
-  <div>{{ msg }}</div>
+  <d-${componentName}>{{ data }}</d-${componentName}>
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   setup() {
+    const data = ref(${title});
+
     return {
-      msg: '${bigCamelCase(componentName)} ${title} 组件文档示例'
+      data
     }
   }
 })
 </script>
 
-<style>
-
+<style lang="scss">
+// demo中的样式不支持 scoped，需要使用约定的class名称包裹，格式：demo-componentname-demoname
+.demo-${componentName}-basic {
+  // css
+}
 </style>
 \`\`\`
 
 :::
 
-### d-${componentName}
-
-d-${componentName} 参数
+### ${bigCamelCase(componentName)} 参数
 
-| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 |
-| ---- | ---- | ---- | ---- | --------- | --------- |
-|      |      |      |      |           |           |
-|      |      |      |      |           |           |
-|      |      |      |      |           |           |
+| 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |
+| :---- | :---- | :---- | :---- | :--------- |
+|      |   \`string\`   |      |      |     [基本用法](#基本用法)      |
+|      |   [IXxx](#ixxx)   |      |      |           |
+|      |      |      |      |           |
 
-d-${componentName} 事件
+### ${bigCamelCase(componentName)} 事件
 
-| 事件 | 类型 | 说明 | 跳转 Demo |
-| ---- | ---- | ---- | --------- |
+| 事件名 | 回调参数 | 说明 | 跳转 Demo |
+| :---- | :---- | :---- | :--------- |
 |      |      |      |           |
 |      |      |      |           |
 |      |      |      |           |
 
+### ${bigCamelCase(componentName)} 插槽
+
+| 插槽名 | 说明 | 跳转 Demo |
+| :---- | :---- | :--------- |
+|   default   |      |           |
+|      |      |           |
+|      |      |           |
+
+### 类型
+
+#### IXxx
+
+\`\`\`ts
+interface IXxx {
+  xxx: string;
+}
+\`\`\`
+
 `;
diff --git a/packages/devui-vue/docs/components/cascader/index.md b/packages/devui-vue/docs/components/cascader/index.md
@@ -368,15 +368,6 @@ export default defineComponent({
 
 :::
 
-<style>
-  h4 {
-    font-weight: 700;
-    color: #575d6c;
-    font-size: 12px;
-    margin: 15px 0;
-  }
-</style>
-
 ### API
 
 |    参数     |   类型   |   默认    | 说明                     | 跳转 Demo                         |  全局配置项 |