feat: 发布yi.abp.tool前端

2024-06-08 00:13:29 +08:00
parent 1ddcde1684
commit b69267d94f
6 changed files with 277 additions and 18 deletions
--- a/Yi.Bbs.Vue3/src/layout/Index.vue
+++ b/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>
--- a/Yi.Bbs.Vue3/src/views/start/Index.vue
+++ b/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({
-    name: "222"
-});
-const text1 = "> dotnet tool install -g Yi.Abp.Tool";
-const text2 = "> yi-abp new Acme.BookStore -t module -csf";
+import SlectBox from "./components/SlectBox.vue"
+import LableCheck from "./components/LableCheck.vue"


+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;
        }
    }
 }
--- a/Yi.Bbs.Vue3/src/views/start/components/Box.vue
+++ b/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>
--- a/Yi.Bbs.Vue3/src/views/start/components/CodeBox.vue
+++ b/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">
--- a/Yi.Bbs.Vue3/src/views/start/components/LableCheck.vue
+++ b/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>
--- a/Yi.Bbs.Vue3/src/views/start/components/SlectBox.vue
+++ b/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>