Merge pull request #1034 from aylvn/desktop

Desktop: Improve home page and task page

desktop/frontend/src/assets/css/main.css

@@ -451,6 +451,10 @@ div.el-divider {
   align-items: center;
 }
 
+.fr {
+  display: flex;
+}
+
 .fc {
   display: flex;
   flex-direction: column;
@@ -1547,6 +1551,10 @@ h6.el-text {
   margin-left: 12px !important;
 }
 
+.mb-0 {
+  margin-bottom: 0px !important;
+}
+
 .mb-5 {
   margin-bottom: 5px !important;
 }

desktop/frontend/src/components/TopHeader.vue

@@ -30,7 +30,7 @@
     <!-- 右侧 -->
     <div class="fxc">
       <div class="mlr-8">
-        <el-switch v-model="isDark" :active-action-icon="Moon" :inactive-action-icon="Sunny" width="40"
+        <el-switch v-model="isDark" :active-action-icon="Moon" :inactive-action-icon="Sunny" width="32"
           style="--el-switch-on-color: #4c4d4f; --el-switch-off-color: #f2f2f2;" />
       </div>
 
@@ -189,4 +189,9 @@ function refresh() {
   height: 30px;
   padding: 0 5px;
 }
+
+:deep(.el-switch span.el-switch__core) {
+  width: 32px !important;
+  min-width: 32px!important;
+}
 </style>

desktop/frontend/src/locales/en.js

@@ -80,4 +80,5 @@ export default {
   startOpenManusService: "Start OpenManus Service, Please Wait...",
   initConfigFirst: "Please init config first",
   openManusIsStarting: "OpenManus is starting, please wait...",
+  homePage: "HomePage",
 }

desktop/frontend/src/locales/zh-cn.js

@@ -79,4 +79,5 @@ export default {
   startOpenManusService: "启动OpenManus服务, 请稍候...",
   initConfigFirst: "请先完成初始化配置",
   openManusIsStarting: "OpenManus正在启动中, 请稍候...",
+  homePage: "首页",
 }

desktop/frontend/src/views/Home.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="main-content">
-
-    <el-card class="index" v-show="view == 'index'">
-      <div class="fxe mr-10">
+  <div>
+    <el-card class="index" body-style="height: 100%;" v-show="view == 'index'">
+      <div class="fc hp-100">
+      <div class="fxe mr-10 wp-100">
         <el-link type="primary" @click="toDocs" size="large"> {{ t('docs') }} </el-link>
       </div>
 
+
+      <div class="body-content">
       <div class="welcome">
         <el-text tag="h1">{{ t('welcomeUseOpenManus') }}</el-text>
       </div>
@@ -22,30 +24,30 @@
       <div class="fxc mtb-20">
         <el-button type="primary" @click="getStarted" size="large"> {{ t('getStarted') }} </el-button>
       </div>
-
+    </div>
+    </div>
     </el-card>
 
-    <el-card v-show="view == 'docs'">
-      <div class="fxe mr-10">
-        <el-link type="primary" @click="toIndex" size="large"> {{ t('docs') }} </el-link>
-      </div>
-
-      <div class="mt-20" v-html="readme"> </div>
+    <el-card class="mb-0" v-show="view == 'docs'">
+      <el-scrollbar>
+        <div class="fxe mr-10">
+          <el-link type="primary" @click="toIndex" size="large"> {{ t('homePage') }} </el-link>
+        </div>
+        <div class="mt-20" v-html="readme"> </div>
+      </el-scrollbar>
     </el-card>
   </div>
 
 </template>
 
 <script setup>
-import { ref, inject, onMounted } from 'vue'
-import { useRoute, useRouter } from "vue-router"
+import { ref, onMounted } from 'vue'
+import { useRouter } from "vue-router"
 import { useConfig } from '@/store/config'
 import { useI18n } from 'vue-i18n'
 import { marked } from 'marked'
 import { useDark } from '@vueuse/core'
 
-const utils = inject('utils')
-const route = useRoute()
 const router = useRouter()
 const config = useConfig()
 const { t } = useI18n()
@@ -83,7 +85,16 @@ function getStarted() {
 <style scoped>
 .index {
   min-height: 540px;
-  height: calc(100vh - 32px);
+  height: 100vh;
+  margin-bottom: 0px;
+}
+
+.body-content {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
 }
 
 .welcome {

desktop/frontend/src/views/config/Init.vue

@@ -32,6 +32,7 @@
                   :striped-flow="envLibDownloadProgress.status != 'success'" :duration="10" class="mtb-10" />
                 <div class="wp-100">
                   <el-text class="download-progress-tips">{{ t('envLibDownloadTips') }}</el-text>
+                  <br />
                   <el-text class="download-progress-tips" truncated>
                     {{ envLibDownloadProgress.text }}
                   </el-text>

desktop/frontend/src/views/task/TaskIndex.vue

@@ -66,7 +66,8 @@
     </el-scrollbar>
 
     <div class="ctrl-area">
-      <div class="task-area wp-100" v-show="!newTaskFlag">
+      <!-- 暂时隐藏该区域 v-show="!newTaskFlag" -->
+      <div class="task-area wp-100" v-show="false">
         <div class="generated fxc">
           <div class="generated-label">{{ t('generatedContent') }}</div>
           <div class="generated-folder">You Can Check Generated Files Here, This Function Is In Developing.</div>
@@ -75,7 +76,6 @@
 
       <div class="input-area">
         <div class="progress-area w-80">
-          <!-- progress-wrap是flex-column布局,器元素高度不会撑开父元素高度 -->
           <div class="progress-wrap">
             <el-progress type="dashboard" class="mt-10" :percentage="taskInfo.percentage"
               :status="taskInfo.progressStatus" :stroke-width="6" :width="60" v-show="taskInfo.status != null">