更新

Author: chunshand

.gitignore

@@ -1,24 +1 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+/node_modules

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}

App.vue

@@ -0,0 +1,134 @@
+
+
+<template>
+    <div class="main">
+        <ElRow :gutter="0">
+            <ElCol :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+                <ElForm
+                    label-position="top"
+                    label-width="100px"
+                    style="max-width: 460px"
+                >
+                    <ElFormItem label="类型" :hide-required-asterisk="true">
+                        <ElSelect
+                            v-model="type"
+                            class="m-2"
+                            placeholder="Select"
+                            size="large"
+                        >
+                            <ElOption
+                                v-for="item in typeOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            >
+                            </ElOption>
+                        </ElSelect>
+                    </ElFormItem>
+
+                    <ElFormItem label="范围">
+                        <ElInput v-model="scope"></ElInput>
+                    </ElFormItem>
+
+                    <ElFormItem label="简短描述" :hide-required-asterisk="true">
+                        <ElInput v-model="subject"></ElInput>
+                    </ElFormItem>
+
+                    <ElFormItem label="内容">
+                        <ElInput v-model="body" type="textarea"></ElInput>
+                    </ElFormItem>
+
+                    <!-- <ElFormItem label="最后">
+                        <ElInput v-model="footer" type="textarea"></ElInput>
+                    </ElFormItem> -->
+                </ElForm>
+                <ElButton type="primary">生成</ElButton>
+                <div></div>
+            </ElCol>
+        </ElRow>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import {
+    ElRow,
+    ElCol,
+    ElForm,
+    ElFormItem,
+    ElSelect,
+    ElOption,
+    ElButton,
+    ElInput,
+} from "element-plus";
+
+const typeOptions = ref([
+    {
+        value: "feat",
+        label: "新功能",
+    },
+    {
+        value: "fix",
+        label: "修补bug",
+    },
+    {
+        value: "docs",
+        label: "文档",
+    },
+    {
+        value: "style",
+        label: "格式",
+    },
+    {
+        value: "refactor",
+        label: "重构",
+    },
+    {
+        value: "perf",
+        label: "性能 体验优化",
+    },
+    {
+        value: "test",
+        label: "增加 更新测试",
+    },
+    {
+        value: "build",
+        label: "构建变动",
+    },
+    {
+        value: "ci",
+        label: "继承变动",
+    },
+    {
+        value: "revert",
+        label: "回滚提交",
+    },
+]);
+// 类型
+const type = ref("feat");
+// 范围
+const scope = ref("");
+// 简短描述
+const subject = ref("");
+
+// body
+const body = ref("");
+
+// 最后
+const footer = ref("");
+</script>
+<style lang="less" scoped>
+*,
+html,
+body {
+    padding: 0;
+    margin: 0;
+}
+.main {
+}
+</style>
+<style>
+#app {
+    padding: 0;
+    margin: 0;
+}
+</style>

README.md

@@ -0,0 +1,7 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)