feat: 发布yi.abp.tool前端

Yi.Bbs.Vue3/src/layout/Index.vue

@@ -8,7 +8,7 @@
       >
         <AppHeader />
       </el-header>
-      <el-main class="common-main">
+      <el-main id="main-box" class="common-main">
         <AppBody />
       </el-main>
     </el-container>

Yi.Bbs.Vue3/src/views/start/Index.vue

@@ -1,14 +1,71 @@
 <script setup>
-import { reactive } from "vue";
+import { computed, onMounted, onUnmounted, reactive, ref } from "vue";
 import CodeBox from "./components/CodeBox.vue"
 import LableInput from "./components/LableInput.vue"
-const form = reactive({
+import SlectBox from "./components/SlectBox.vue"
-    name: "222"
+import LableCheck from "./components/LableCheck.vue"
-});
-const text1 = "> dotnet tool install -g Yi.Abp.Tool";
-const text2 = "> yi-abp new Acme.BookStore -t module -csf";
 
 
+const isFixed = ref(false);
+const form = reactive({
+    name: "Acme.BookStore",
+    isCsf: true,
+    dbType: 'sqlite'
+});
+const installText = "> dotnet tool install -g Yi.Abp.Tool";
+const commandTest = "> yi-abp new Acme.BookStore -t module -csf";
+const cloneText = "> git clone https://gitee.com/ccnetcore/Yi ";
+const onDbTypeSelected = (data) => {
+    form.dbType = data.value;
+}
+const dbData = [
+    { name: 'Sqlite', key: 'sqlite', value: 'sqlite' },
+    { name: 'Mysql', key: 'mysql', value: 'mysql' },
+    { name: 'SqlServer', key: 'sqlserver', value: 'sqlserver' },
+    { name: 'Oracle', key: 'oracle', value: 'oracle' },
+    { name: 'PostgreSql', key: 'postgresql', value: 'postgresql' },
+
+];
+
+
+const typeData = [{ name: '模块', key: 'module', value: 'module' },
+{ name: '项目', key: 'project', value: 'project' }]
+const commandComputed=computed(()=>{
+return `yi-abp new ${form.name} -t module ${form.isCsf==true?'-csf':''}`
+});
+
+onMounted(() => {
+
+    // 监听页面滚动事件
+    window.addEventListener("scroll", scrolling, true);
+
+})
+const scrolling = () => {
+
+    // 滚动条距文档顶部的距离
+    let scrollTop = document.getElementById('main-box').scrollTop;
+    // 滚动条滚动的距离
+    let commandBoxTop = document.getElementById('command').offsetTop;
+
+    var width = document.getElementById('command').getBoundingClientRect().width;
+
+    document.getElementById('command').style.width = width + 'px';
+
+    if (scrollTop > commandBoxTop) {
+
+        isFixed.value = true;
+    }
+    else {
+        isFixed.value = false;
+    }
+
+}
+
+
+onUnmounted(() => {
+    window.removeEventListener("scroll", scrolling, true);
+})
+
 </script>
 <template>
     <div class="start-body">
@@ -17,21 +74,38 @@ const text2 = "> yi-abp new Acme.BookStore -t module -csf";
             <div class="content-title"><span>开始</span></div>
             <div class="content-body">
                 <div class="content-body-left">
-
                     <h4>安装 Yi.Abp.Tool</h4>
                     <p>如果之前未安装 Yi.Abp.Tool，请在命令行终端中安装：</p>
+                    <CodeBox  v-model="installText" />
+
+                    <h4>克隆源代码，yi框架非打包，便于大家调试二开</h4>
+                    <p>需安装git，执行命令：</p>
+                    <CodeBox  v-model="cloneText" />
+
+
+                    <h4>创建你的模块</h4>
+                    <p>在module文件夹内，命令行终端运行以下命令：</p>
+                    <CodeBox id="command" :class="{ command: isFixed }" v-model="commandComputed" />
 
-                    <CodeBox :text="text1" />
-                    <h4>创建你的解决方案</h4>
-                    <p>在命令行终端运行以下命令：</p>
-                    <CodeBox :text="text2" />
 
                     <h4>配置</h4>
                     <p>您可以更改下面的解决方案配置。</p>
 
+
                     <h5>为项目命名</h5>
                     <LableInput v-model="form.name" />
                     <p>您可以使用不同级别的命名空间；例如，BookStore、Acme.BookStore 或 Acme.Retail.BookStore。</p>
+
+
+                    <h5>选择创建类型</h5>
+                    <SlectBox :data="typeData" width="25%" @onSelected="onDbTypeSelected" />
+
+
+                    <h5>选择数据库管理系统</h5>
+                    <SlectBox :data="dbData" width="20%" @onSelected="onDbTypeSelected" />
+
+
+                    <LableCheck v-model="form.isCsf" title="创建解决方案文件夹" text="指定项目是放在输出文件夹中的新文件夹中，还是直接放在输出文件夹中。" />
                 </div>
                 <div class="content-body-right">
 
@@ -44,16 +118,24 @@ const text2 = "> yi-abp new Acme.BookStore -t module -csf";
     </div>
 </template>
 <style lang="scss" scoped>
+.command {
+    position: fixed !important;
+    z-index: 99;
+    top: 100px;
+    width: 1000px;
+}
+
 .start-body {
     height: 100%;
     width: 100%;
     background-color: #FCFCFC;
 
+
 }
 
 .content {
     width: 80%;
-    margin: 0 auto;
+    margin: 0 auto 50px auto;
 
     &-title {
         background-color: #FCFCFC;
@@ -69,7 +151,7 @@ const text2 = "> yi-abp new Acme.BookStore -t module -csf";
     }
 
     &-body {
-        height: 2000px;
+        height: 1200px;
         padding: 48px;
         background-color: #fff;
         border-radius: 12px;
@@ -94,7 +176,9 @@ const text2 = "> yi-abp new Acme.BookStore -t module -csf";
             font-family: "Poppins";
             font-size: 14px;
             font-weight: 300;
+            color: rgba(11, 22, 33, .6) !important;
         }
+
         h4 {
             font-size: 20px;
             font-weight: 500;
@@ -103,11 +187,12 @@ const text2 = "> yi-abp new Acme.BookStore -t module -csf";
             margin-top: 0;
 
         }
+
         h5 {
             color: #292d33;
             font-size: 16px !important;
             font-weight: 500 !important;
-            margin: 5px;
+            margin: 20px 0 10px 0;
         }
     }
 }

Yi.Bbs.Vue3/src/views/start/components/Box.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { ref,watch } from 'vue';
+
+const props = defineProps(["text", "isSelect", "boxKey"]);
+const emit = defineEmits(['onSelected']);
+const isSelectRef=ref(false);
+const clickBox = () => {
+    isSelectRef.value=true;
+    emit('onSelected',props.boxKey)
+}
+watch(()=>props.isSelect,(n,o)=>{
+    isSelectRef.value=n;
+},{immediate:true})
+
+
+</script>
+<template>
+    <div class="box" 
+    :class="{ selected: isSelectRef }" 
+    @click="clickBox">
+        {{ props.text ?? "-" }}
+    </div>
+</template>
+<style lang="scss" scoped>
+.selected {
+    border: 2px solid #409EFF !important;
+    background-color: #FFFFFF !important;
+}
+
+.box {
+    color: #292d33;
+    background-color: #fafafa;
+    padding: 18px !important;
+    font-size: 13px !important;
+    border: 2px solid transparent;
+    font-weight: 500 !important;
+    box-shadow: 1px 1px 2px rgba(11, 15, 33, .2) !important;
+    border-radius: 8px;
+    display: flex;
+    justify-content: center;
+}
+
+.box:hover {
+    border: 2px solid #409EFF;
+
+}
+</style>

Yi.Bbs.Vue3/src/views/start/components/CodeBox.vue

@@ -1,5 +1,15 @@
 <script setup>
-const props = defineProps(["text"]);
+const model = defineModel()
+const copyText=async ()=>{
+    var oldText=model.value;
+    var newText=oldText.replace(">", "").trim();
+    await navigator.clipboard.writeText(newText);
+    ElMessage({
+          message: "命令复制成功",
+          type: "success",
+          duration: 2000,
+        });
+}
 </script>
 <template>
     <div class="box">
@@ -11,10 +21,10 @@ const props = defineProps(["text"]);
             <span class="dot"></span>
             </div>
             <div class="header-right">
-<button>复制</button>
+<button @click="copyText">复制</button>
             </div>
         </div>
-        <div class="body"> {{ props.text }}</div>
+        <div class="body"> {{ model }}</div>
     </div>
 </template>
 <style scoped lang="scss">

Yi.Bbs.Vue3/src/views/start/components/LableCheck.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { ref } from 'vue';
+const model = defineModel()
+const props = defineProps(["title", "text"]);
+
+
+</script>
+<template>
+    <div class="body">
+        <input class="check" type="checkbox" v-model="model" />
+        <div class="right-box">
+            <h4>{{ props.title }}</h4>
+            <p>{{ props.text }}</p>
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.body {
+    display: flex;
+    margin-top: 30px;
+}
+
+.right-box {
+    margin-left: 10px;
+}
+
+h4 {
+    color: #292d33;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+    margin: 0 0;
+
+}
+
+p {
+    margin-top: 5px;
+    color: rgba(11, 22, 33, .6) !important;
+    font-size: .875em;
+}
+
+input[type=checkbox] {
+    cursor: pointer;
+    position: relative;
+    width: 25px;
+    height: 25px;
+    font-size: 12px;
+}
+
+input[type=checkbox]::after {
+    position: absolute;
+    top: 0;
+    color: #000;
+    width: 25px;
+    height: 25px;
+    display: inline-block;
+    visibility: visible;
+    padding-left: 0px;
+    text-align: center;
+    content: ' ';
+    border-radius: 3px
+}
+
+input[type=checkbox]:checked::after {
+    content: "✓";
+    color: #fff;
+    font-size: 16px;
+    font-weight: bold;
+    background-color: #409EFF;
+}
+</style>

Yi.Bbs.Vue3/src/views/start/components/SlectBox.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { onMounted, ref } from "vue";
+import Box from "./Box.vue"
+const props = defineProps(["data", "width"]);
+const emit = defineEmits(['onSelected','onSelectedValue']);
+const selectData=ref(props.data.map(obj => ({ ...obj, isSelect: false })));
+onMounted(()=>{
+    selectData.value[0].isSelect=true;
+})
+
+const onSelected=(boxKey)=>{
+    selectData.value.map(obj => {
+  if (obj['key'] === boxKey) {
+    emit('onSelected',obj);
+    return obj.isSelect=true;
+  } else {
+    return obj.isSelect=false;
+  }
+});
+
+}
+/*
+* [{name:"",key:"",value:""}]
+*
+*/
+</script>
+<template>
+    <div class="select-box">
+        <Box class="box" 
+        :isSelect="item.isSelect" 
+        :style="{ width: props.width }" 
+        v-for="(item, index) in selectData"
+        :key="item.key" :text="item.name"
+        :boxKey="item.key"
+        @onSelected="onSelected"
+        />
+    </div>
+</template>
+<style lang="scss" scoped>
+.select-box {
+    display: flex;
+
+    .box {
+        margin-right: 10px;
+    }
+}
+</style>