feat: 添加前端配套工具

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

@@ -1,3 +1,15 @@
+<script setup>
+import { reactive } 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";
+
+
+</script>
 <template>
     <div class="start-body">
 
@@ -7,11 +19,23 @@
                 <div class="content-body-left">
 
                     <h4>安装 Yi.Abp.Tool</h4>
-                <p>如果之前未安装 Yi.Abp.Tool，请在命令行终端中安装：</p>
-                </div>
-            <div class="content-body-right">
+                    <p>如果之前未安装 Yi.Abp.Tool，请在命令行终端中安装：</p>
 
-            </div>
+                    <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>
+                </div>
+                <div class="content-body-right">
+
+                </div>
 
 
             </div>
@@ -52,26 +76,38 @@
         border: 0;
         box-shadow: 0 0 1rem rgba(0, 0, 0, .08);
         display: flex;
-        &-left{
-            width: 75%;
+
+        &-left {
+            width: 100%;
         }
-        &-right{
-            width: 25%;
-            background-color: #b84297;
-            height: 1000px;
-        }
-        h4 {
-            font-size: 20px;
-            font-weight: 500;
-            color: #b84297;
-            margin-bottom: .25rem;
-            margin-top: 0;
-        
+
+        &-right {
+            width: 0%;
+            background-color: #409EFF;
         }
 
+
+
         p {
             margin-top: 0;
             margin-bottom: 1rem;
+            font-family: "Poppins";
+            font-size: 14px;
+            font-weight: 300;
+        }
+        h4 {
+            font-size: 20px;
+            font-weight: 500;
+            color: #409EFF;
+            margin-bottom: .25rem;
+            margin-top: 0;
+
+        }
+        h5 {
+            color: #292d33;
+            font-size: 16px !important;
+            font-weight: 500 !important;
+            margin: 5px;
         }
     }
 }

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

@@ -0,0 +1,71 @@
+<script setup>
+const props = defineProps(["text"]);
+</script>
+<template>
+    <div class="box">
+        <div class="header">
+            <div class="header-left">
+
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+            </div>
+            <div class="header-right">
+<button>复制</button>
+            </div>
+        </div>
+        <div class="body"> {{ props.text }}</div>
+    </div>
+</template>
+<style scoped lang="scss">
+.box {
+    background-color: #292D33;
+
+    width: 100%;
+    border-radius: 12px;
+    border: 4px solid #0c0e12;
+    color: #fff;
+    padding: 18px 18px 12px !important;
+    font-size: 15px;
+    line-height: 25px;
+    margin: 15px 0;
+}
+
+.dot {
+    display: flex;
+    margin-right: 8px;
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+}
+
+.dot:nth-child(1) {
+    background-color: #f24e1e;
+}
+
+.dot:nth-child(2) {
+    background-color: #ffc700;
+}
+
+.dot:nth-child(3) {
+    background-color: #0fa958;
+}
+
+.header {
+    display: flex;
+
+    height: 30px;
+    &-left{
+        display: flex;
+    }
+    &-right{
+        button{
+            background-color:#409EFF;
+            color: #fff !important;
+            height: 25px;
+            width: 50px;
+        }
+    }
+    justify-content: space-between;
+}
+</style>

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

@@ -0,0 +1,41 @@
+<script setup>
+import { ref } from 'vue';
+
+
+const model = defineModel()
+
+</script>
+<template>
+    <div>
+      
+        <input type="text" v-model="model"  />
+        <label>项目名称</label>
+  </div>
+</template>
+<style lang="scss" scoped>
+label {
+    position: relative;
+    top: -69px;
+    left: 20px;
+    display: inline;
+    background-color: #fff;
+    color: rgb(33, 37, 40);
+}
+
+input {
+    border: 2px solid #eee;
+    height: 80px;
+    background-color: #FAFAFA;
+    color: #3b3a57;
+    font-size: 1.3rem !important;
+    font-weight: 400;
+    padding: 26px 30px 0 30px;
+    font-size: x-large;
+    border-radius: 8px;
+    width: 100%;
+}
+input:hover {
+    border: 2px solid #409EFF;
+ background-color:#FFFFFF; /* 鼠标悬停时的边框颜色 */
+}
+</style>