修改提示问题

yangyin

2024-10-25 fa1f2d3453128c686d19504796426d9c27b8c0fb

 src/views/project/ch/home/Scenario.vue

@@ -1,4 +1,148 @@
<template>123</template>
<template>
   <!-- 应用场景 -->
   <div class="w100 h100 box-border text-[14px] bg-[#f7f8fa] overflow-auto pr-[32px] pb-[50px] pl-[32px] pt-[42px]">
      <div class="set-body">
         <!-- <div class="productivity recently">
            <p class="mb-[24px] flex items-center">
               <el-icon color="#409eff" :size="20" class="mr-2"><Clock /></el-icon>
               <span>最近使用</span>
            </p>
            <div class="flex flex-wrap items-center">
               <div class="list_app" v-for="item in state.recentlyList" :key="item.ID" >
                  <img :src="item.Icon" alt="" class="w-[20px] h-[20px] mr-[14px]" />
                  <span class="text-[14px] text-[#333f4e]">{{ item.Name }}</span>
               </div>
            </div>
         </div> -->
         <div
            class="productivity"
            v-for="product in state.productivityList"
            :key="product.section_id"
            v-show="state.productivityList && state.productivityList.length > 0"
         >
            <div class="mb-[24px]">
               <span class="productivity-span"><i></i>{{ product.section_name }}</span>
            </div>
            <div class="flex flex-wrap items-center">
               <div class="list_app" @click="changeApp(product.section_id, product)">
                  <img :src="product.Icon" alt="" class="w-[20px] h-[20px] mr-[14px]" />
                  <span class="text-[14px] text-[#333f4e]">{{ product.section_name }}</span>
               </div>
            </div>
         </div>
         <el-empty description="暂无数据" v-show="state.productivityList.length === 0" />
      </div>
   </div>
</template>

<script setup lang="ts"></script>
<style scoped lang="scss"></style>
<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';
import { getSectionByIdList } from '/@/api/ai/chat';
import router from '/@/router';
const route = useRoute();
let state = reactive({
   recentlyList: [
      {
         ID: 1,
         Name: '项目管理',
         Icon: '/static/images/scene/scene_1.png',
      },
      {
         ID: 2,
         Name: '工作内容',
         Icon: '/static/images/scene/scene_2.png',
      },
   ], //最近使用
   productivityList: [], //通用的场景
   scenarioID: null,
});
//切换到应用场景详情的事件
const changeApp = (section_id, item: any) => {
   if (section_id === 'office_summarize') {
      router.push({
         name: 'ScenarioDetails',
         query: {
            ID: section_id,
            Name: item.section_name,
            Title: item.section_title,
         },
      });
   }
};
const getSectionByList = async () => {
   const res = await getSectionByIdList({ section_a_id: state.scenarioID });
   const iconList = ['/static/images/scene/scene_1.png', '/static/images/scene/scene_2.png', '/static/images/scene/scene_3.png'];
   res.sections.forEach((child: any) => {
      child.Icon = iconList[Math.floor(Math.random() * 3)];
   });
   state.productivityList = res.sections;
};
onMounted(() => {
   state.scenarioID = route.query.ID;
   getSectionByList();
});
</script>
<style scoped lang="scss">
.set-body {
   max-width: 1000px;
   min-height: calc(100% - 42px);
   margin: 0 auto;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   border-radius: 8px;
   margin-top: 32px;
   -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.16);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.16);
   .productivity {
      padding: 24px 30px 10px;
      background-color: #fff;
      margin-bottom: 20px;
      border-radius: 12px;
      p {
         span {
            font-size: 14px;
            color: #081735;
            line-height: 20px;
            display: flex;
            align-items: center;
         }
      }
      .list_app {
         width: 180px;
         display: flex;
         align-items: center;
         border-radius: 8px;
         border: 1px solid #ccc;
         padding: 15px;
         margin-right: 14px;
         margin-bottom: 14px;
         cursor: pointer;
         position: relative;
         background-color: #fff;
         &:hover {
            border: 1px solid #1c86ff;
         }
      }
      .productivity-span {
         font-size: 14px;
         color: #081735;
         line-height: 20px;
         display: flex;
         align-items: center;
         i {
            display: block;
            width: 4px;
            height: 14px;
            background: #1c86ff;
            border-radius: 0 100px 100px 0;
            margin-right: 10px;
         }
      }
   }
   .recently {
      border: 1px solid #e5eaf9;
      background-color: #e9eff8;
   }
}
</style>