chore: update generate dialog tips (#348)

* chore: update generate dialog tips * chore: update generate dialog tips * chore: update generate dialog tips
TDesignOteam · Aug 5, 2024 · 933624f · 933624f
1 parent dc88f64
commit 933624f
Show file tree

Hide file tree

Showing 10 changed files with 1,153 additions and 1,134 deletions.
diff --git a/packages/frontend/_site/assets/index.48850309.css b/packages/frontend/_site/assets/index.48850309.css
diff --git a/packages/frontend/_site/assets/index.c1e17ccf.css b/packages/frontend/_site/assets/index.c1e17ccf.css
diff --git a/.../frontend/_site/assets/index.64503f19.css → .../frontend/_site/assets/index.d2ef5ea3.css b/.../frontend/_site/assets/index.64503f19.css → .../frontend/_site/assets/index.d2ef5ea3.css
diff --git a/...s/frontend/_site/assets/index.c1ff2b02.js → ...s/frontend/_site/assets/index.e0748d3e.js b/...s/frontend/_site/assets/index.c1ff2b02.js → ...s/frontend/_site/assets/index.e0748d3e.js
diff --git a/...s/frontend/_site/assets/index.eb0930d4.js → ...s/frontend/_site/assets/index.fd72e07e.js b/...s/frontend/_site/assets/index.eb0930d4.js → ...s/frontend/_site/assets/index.fd72e07e.js
diff --git a/...frontend/_site/assets/preview.1f695c9c.js → ...frontend/_site/assets/preview.ffa2cb99.js b/...frontend/_site/assets/preview.1f695c9c.js → ...frontend/_site/assets/preview.ffa2cb99.js
diff --git a/packages/frontend/_site/index.html b/packages/frontend/_site/index.html
@@ -15,8 +15,8 @@
         }
       </style>
     <![endif]-->
-    <script type="module" crossorigin src="/assets/index.eb0930d4.js"></script>
-    <link rel="stylesheet" href="/assets/index.48850309.css">
+    <script type="module" crossorigin src="/assets/index.fd72e07e.js"></script>
+    <link rel="stylesheet" href="/assets/index.c1e17ccf.css">
   </head>
 
   <body>

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@vue/composition-api": "^1.4.1",
     "axios": "^0.20.0",
+    "codemirror": "^5.41.0",
     "lodash": "^4.17.21",
     "tdesign-icons-vue": "^0.1.6",
     "tdesign-vue": "^1.9.0",

diff --git a/packages/frontend/src/pages/api/operation.vue b/packages/frontend/src/pages/api/operation.vue
@@ -3,16 +3,9 @@
     <t-button theme="primary" @click.native="onCreateApi">New API</t-button>
     <t-button theme="primary" @click.native="onGenerateDialogShow">Generate API Files</t-button>
     <a href="https://github.com/Tencent/tdesign/wiki/Component-API-Guide" target="_blank" class="link">
-      <t-button variant="text" style="color: #99999;">
-        API Design
-      </t-button>
+      <t-button variant="text" style="color: #99999"> API Design </t-button>
     </a>
-    <t-dialog
-      header="生成"
-      width="830"
-      :visible.sync="generateFilesVisible"
-      @confirm="onGenerateConfirm"
-    >
+    <t-dialog header="生成" width="830" :visible.sync="generateFilesVisible" @confirm="onGenerateConfirm">
       <div slot="body">
         <!-- <import ref="api-form" :map="map" :info="apiInfo"></import> -->
         <form class="t-form api-edit-form" onsubmit="return false">
@@ -36,17 +29,22 @@
             </div>
           </div>
           <div class="t-form-item">
-            <label style='vertical-align: top;'>框架平台：</label>
+            <label style="vertical-align: top">框架平台：</label>
             <div class="t-form-content platform">
-              <site-checkbox v-model="formData.platform" :options="frameworkOptions" ></site-checkbox>
+              <site-checkbox v-model="formData.platform" :options="frameworkOptions"></site-checkbox>
             </div>
           </div>
           <div class="t-form-item">
-            <label style='vertical-align: top;'>参数：</label>
+            <label style="vertical-align: top">参数：</label>
             <div class="t-form-content">
-              <t-checkbox v-model="formData.finalProject">输出文件到各框架仓库</t-checkbox>&nbsp;&nbsp;
-              <t-checkbox v-model="formData.onlyDocs">仅输出 API 文档</t-checkbox>&nbsp;&nbsp;
-              <t-checkbox v-model="formData.useDefault">输出 useDefault/useVModel 文件(Vue2)</t-checkbox>&nbsp;&nbsp;
+              <t-checkbox v-model="formData.finalProject">输出文件到各框架仓库</t-checkbox>
+              <t-tooltip :content="paramsTips[0]">
+                <div class="help-icon">?</div>
+              </t-tooltip>
+              <t-checkbox v-model="formData.onlyDocs">仅输出 md文件</t-checkbox>
+              <t-checkbox v-model="formData.useDefault" style="margin-right: 20px"
+                >输出 useDefault/useVModel 文件(Vue2)</t-checkbox
+              >
               <t-checkbox v-model="formData.vitest">输出单测用例</t-checkbox>
             </div>
           </div>
@@ -59,8 +57,8 @@
           </div> -->
           <div class="t-form-item" v-if="commandLine && commandLine.length">
             <label>最终命令行：</label>
-            <div class="t-form-content" style="vertical-align: top;">
-              <code v-for="item in commandLine" :key="item">{{ item }}<br/></code>
+            <div class="t-form-content" style="vertical-align: top">
+              <code v-for="item in commandLine" :key="item">{{ item }}<br /></code>
             </div>
           </div>
         </form>
@@ -70,13 +68,9 @@
 </template>
 
 <script>
-import {
-  Button as TButton,
-  Select as TSelect,
-  Option as TOption
-} from 'tdesign-vue'
-import SiteCheckbox from './checkbox.vue'
-import { cmpApiInstance } from '../../services/api-server'
+import { Button as TButton, Select as TSelect, Option as TOption } from 'tdesign-vue';
+import SiteCheckbox from './checkbox.vue';
+import { cmpApiInstance } from '../../services/api-server';
 
 export default {
   name: 'ApiToolOperation',
@@ -85,14 +79,14 @@ export default {
     TButton,
     TSelect,
     TOption,
-    SiteCheckbox
+    SiteCheckbox,
   },
 
   props: {
-    map: Object
+    map: Object,
   },
 
-  data () {
+  data() {
     return {
       codeType: '',
       generateFilesVisible: false,
@@ -102,59 +96,65 @@ export default {
         platform: [],
         component: 'ALL',
         finalProject: false,
-      }
-    }
+      },
+      paramsTips: [
+        '包括： props.ts、type.ts、md文件 ，默认各端框架与当前项目在同一目录，路径调整请在本地修改 BASE_PATH_URL',
+      ],
+    };
   },
 
   computed: {
-    frameworkOptions () {
-      if (!this.map.platform_framework) return []
-      return [{ label: 'VueNext(PC)', value: 1000 }].concat(this.map.platform_framework)
+    frameworkOptions() {
+      if (!this.map.platform_framework) return [];
+      return [{ label: 'VueNext(PC)', value: 1000 }].concat(this.map.platform_framework);
     },
-    componentList () {
-      return [{ label: '全部', value: 'ALL' }].concat(this.map.components)
-        .filter(v => (v && !v.type) || ['Table'].includes(v?.value))
+    componentList() {
+      return [{ label: '全部', value: 'ALL' }]
+        .concat(this.map.components)
+        .filter((v) => (v && !v.type) || ['Table'].includes(v?.value));
     },
-    commandLine () {
-      if (!this.map || !this.map.platform_framework) return
-      const component = this.formData.component
+    commandLine() {
+      if (!this.map || !this.map.platform_framework) return;
+      const component = this.formData.component;
       const params = {
         finalProject: this.formData.finalProject,
         onlyDocs: this.formData.onlyDocs,
         useDefault: this.formData.useDefault,
         vitest: this.formData.vitest,
-        isUseUnitTest: this.formData.isUseUnitTest
-      }
+        isUseUnitTest: this.formData.isUseUnitTest,
+      };
       // 组件全选的情况下，只能输出全部 API 文档
       if (component.toLocaleLowerCase() === 'all') {
-        params.onlyDocs = true
+        params.onlyDocs = true;
       }
-      const commandParams = Object.keys(params).filter(key => params[key]).join()
-      const frameworks = this.frameworkOptions.filter(t => this.formData.platform.includes(t.value))
-      return frameworks.map(framework => `npm run api:docs ${component} "${framework.label}" ${commandParams}`)
-    }
+      const commandParams = Object.keys(params)
+        .filter((key) => params[key])
+        .join();
+      const frameworks = this.frameworkOptions.filter((t) => this.formData.platform.includes(t.value));
+      return frameworks.map((framework) => `npm run api:docs ${component} "${framework.label}" ${commandParams}`);
+    },
   },
 
   methods: {
-    onCreateApi () {
-      this.$emit('create-dialog-show')
+    onCreateApi() {
+      this.$emit('create-dialog-show');
     },
-    onGenerateDialogShow () {
-      this.generateFilesVisible = true
+    onGenerateDialogShow() {
+      this.generateFilesVisible = true;
     },
-    onGenerateConfirm () {
+    onGenerateConfirm() {
       cmpApiInstance({
         method: 'post',
         url: '/cmp/generate-api',
         data: {
-          commandLines: this.commandLine.map(command => command.replace('npm run api:docs', ''))
-        }
+          commandLines: this.commandLine.map((command) => command.replace('npm run api:docs', '')),
+        },
       }).then(() => {
-        this.generateFilesVisible = false
-      })
-    }
-  }
-}
+        this.generateFilesVisible = false;
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less">
@@ -171,4 +171,19 @@ export default {
     text-decoration: underline;
   }
 }
+.help-icon {
+  width: 14px;
+  height: 14px;
+  background-color: #007bff;
+  color: #fff;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  cursor: pointer;
+  vertical-align: text-top;
+  margin-left: 2px;
+  margin-right: 20px;
+}
 </style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml