feat: 新增高级示例

yangyin

2024-06-26 cde5a1722df2797ac33ce4fac27280a05ddb2fc0

feat: 新增高级示例

 customer_list/ch/static/config/route.js

@@ -8,5 +8,13 @@
        component: '/project/ch/home/Home.vue',
        redirect: null,
    },
	
    {
        name: 'Scenario',
        isKeepAlive: true,
        isAffix: false,
        path: '/Scenario',
        component: '/project/ch/home/Scenario.vue',
        redirect: null,
    }

];

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

@@ -10,7 +10,9 @@
                        </div>
                    </div>
                </div>
                <div class="aside_center"></div>
                <div class="aside_center">
                    <asideNew />
                </div>
                <div class="aside_bottom">
                    <asideTitle />
                </div>
@@ -39,6 +41,7 @@
</template>

<script setup lang="ts">
import asideNew from './component/waterLeftAside/asideNew.vue';
import asideTitle from './component/waterLeftAside/asideTitle.vue';
import waterBottom from './component/waterRight/bottom.vue';
import waterCenter from './component/waterRight/center.vue';

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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,4 @@
<template>123</template>

<script setup lang="ts"></script>
<style scoped lang="scss"></style>

 src/views/project/ch/home/component/waterLeftAside/asideNew.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,81 @@
<template>
    <div class="w100 h100 flex items-center flex-column box-border pr-1">
        <div class="w100 box-border px-[18px] py-0">
            <el-button
                icon="ele-Plus"
                color="#1c86ff"
                class="flex items-center box-border mb-3 justify-center add_room cursor-pointer w-[124px] h-[32.88px] rounded-s-md text-white opacity-100"
            >
                æ–°å»ºèŠå¤©å®¤
            </el-button>
        </div>
        <div
            class="w-[210.98px] h-[34px] rounded-t-lg bg-[#2b2c30] box-border mb-3 relative opacity-100 shadow-lg shadow-[[#0e0e0f]-500/50"
        >
            <div class="relative w100 h100">
                <el-input v-model="state.searchInput" placeholder="搜索" class="set-input">
                    <template #prefix>
                        <el-icon @click="selectDateChange"><search /></el-icon>
                    </template>
                </el-input>
            </div>
            <div class="absolute top-[100%] w-[84px] z-[1001] left-0" v-show="state.isShowDate">
                <div class="w100 bg-[#fff] px-[0px] py-[5px]" v-for="item in state.selectDateOption" :key="item.value">
                    <div class="w100 relative h-[28px] flex items-center justify-center cursor-pointer">{{ item.label }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { reactive } from 'vue';
let state = reactive({
    searchInput: '',
    selectDateOption: [
        {
            label: '全部',
            value: 0,
        },
        {
            label: '一周内',
            value: 1,
        },
        {
            label: '一月内',
            value: 2,
        },
        {
            label: '一月前',
            value: 3,
        },
    ],
    isShowDate: false,
});
const selectDateChange = () => {
    state.isShowDate = !state.isShowDate;
};
</script>
<style scoped lang="scss">
.set-input {
    :deep(.el-input__wrapper) {
        width: 100%;
        height: 100%;
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0;
        color: #e5e5e5;
        border-radius: 6px;
        border: 1px solid transparent;
        box-sizing: border-box;
        line-height: 34px;
        // padding-left: 31px;
        padding-right: 10px;
        background-color: transparent;
        cursor: pointer;
        transition: color 0.2s ease-in-out;
        box-shadow: unset;
    }
}
</style>

 src/views/project/ch/home/component/waterLeftAside/asideTitle.vue

@@ -1,7 +1,13 @@
<template>
    <div class="w100 h100">
        <div class="aisde-title">
            <div class="flex items-center set-li" v-for="(item, index) in state.asideTitleList" :key="index">
            <div
                class="flex items-center set-li"
                v-for="(item, index) in state.asideTitleList"
                :key="index"
                @click="handleClick(item.id)"
                :class="{ 'set-li-active': state.currentActive === item.id }"
            >
                <img :src="item.icon" alt="" class="pl-2.5 pr-2.5 w-4 h-4" style="box-sizing: content-box" />
                <span class="font-medium text-sm text-white tracking-wide">{{ item.title }}</span>
            </div>
@@ -23,30 +29,38 @@

<script setup lang="ts">
import { reactive } from 'vue';
import { gotoRoute } from '/@/utils/route';
let state = reactive({
    asideTitleList: [
        {
            id: '1',
            id: 1,
            icon: '/static/images/wave/AsideIcon.png',
            title: '应用场景',
        },
        {
            id: '2',
            id: 2,
            icon: '/static/images/wave/AsideIcon.png',
            title: '帮助中心',
        },
        {
            id: '3',
            id: 3,
            icon: '/static/images/wave/AsideIcon.png',
            title: '个人设置',
        },
        {
            id: '4',
            id: 4,
            icon: '/static/images/wave/AsideIcon.png',
            title: '关于水务AI',
        },
    ],
    currentActive: 0,
});
const handleClick = (id) => {
    state.currentActive = id;
    if (id == 1) {
        gotoRoute({ name: 'Scenario' });
    }
};
</script>
<style scoped lang="scss">
.aisde-title {
@@ -64,11 +78,18 @@
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    &:hover {
        width: 214px;
        height: 30px;
        background-color: #3b3d40;
        border-radius: 6px;
}
.set-li-active {
    width: 214px;
    height: 30px;
    background-color: #3b3d40;

    border-radius: 6px;
    span {
        background: linear-gradient(90deg, #84fdd4 0, #2a82e4);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
.user_login {

 src/views/project/ch/home/component/waterRight/bottom.vue

@@ -40,25 +40,25 @@
        {
            ID: 1,
            Icon: 'biaodan',
            Title: '解读李四的反应',
            Title: '行业知识库',
            Content: '张三打了李四一巴掌,李四对张三说:"你是不是没吃饭",李四说这句话含义是?',
        },
        {
            ID: 2,
            Icon: 'putong',
            Title: '解释努力与内卷的区别',
            Title: '生产调度',
            Content: '怎么解释努力和内卷的区别?',
        },
        {
            ID: 3,
            Icon: 'zhongduancanshuchaxun',
            Title: '其他问题',
            Title: '水产生产',
            Content: '请搜索你想知道的问题',
        },
        {
            ID: 4,
            Icon: 'tuichuquanping',
            Title: '给宝宝取有文化内涵的名字',
            Title: '管网运行',
            Content: '请以诗经中的典故给男宝宝取名，姓顾，名字要求3个字，给5个名字供我选择。',
        },
    ],

 src/views/project/ch/home/component/waterRight/center.vue

@@ -4,7 +4,7 @@
            <div class="flex item-center">
                <span>提问示例</span>
                <span class="split"></span>
                <span class="change cursor-pointer">高级示例 ></span>
                <span class="change cursor-pointer" @click="advanceExampleClick">高级示例 ></span>
            </div>
            <div class="cursor-pointer">
                <span class="mr-1 changeBatch">换一批</span>
@@ -29,6 +29,29 @@
                </div>
            </div>
        </div>
        <el-drawer v-model="state.isShowAdvanceExample" direction="rtl" size="30%">
            <div class="box-border w100 bg-[#e0e7fb] relative flex items-center justify-center" style="padding: 30px 20px 26px">
                <!-- <el-tabs v-model="state.activeName" type="card" @tab-click="handleClick" class="set-tabs">
                    <el-tab-pane label="提问示例" name="questionExample">提问示例</el-tab-pane>
                    <el-tab-pane label="指令模板" name="instructionTemplate">指令模板</el-tab-pane>
                </el-tabs> -->
                <div
                    class="box-border flex w-[203px] h-[32px] rounded-md items-center justify-between cursor-pointer relative border border-solid border-[#2c2d33]"
                >
                    <!-- <div class="w-[108px] h100 rounded-[5px] bg-transparent absolute left-0 transition-all"></div> -->

                    <div
                        class="tabbar-item"
                        :class="state.activeName === item.ID ? 'set-tabbar-active' : ''"
                        @click="handleTabClick(item)"
                        v-for="item in state.tabNameList"
                        :key="item.ID"
                    >
                        {{ item.Name }}
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

@@ -61,10 +84,24 @@
            Content: '请以诗经中的典故给男宝宝取名，姓顾，名字要求3个字，给5个名字供我选择。',
        },
    ],
    tabNameList: [
        { ID: 1, Name: '提问示例' },
        { ID: 2, Name: '指令模板' },
    ],
    exampleIndex: 0,
    isShowAdvanceExample: false,
    activeName: 1,
});
const changeExample = (item) => {
    state.exampleIndex = item.ID;
};
//高级示例
const advanceExampleClick = () => {
    state.isShowAdvanceExample = true;
};
const handleTabClick = (item) => {
    console.log(item.ID);
    state.activeName = item.ID;
};
</script>
<style scoped lang="scss">
@@ -168,4 +205,28 @@
        }
    }
}
.tabbar-item {
    width: 108px;
    height: 30px;
    font-size: 13px;
    font-weight: 400;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    // position: absolute;
    -o-transition: color 0.2s;
    transition: color 0.2s;
    &:nth-child(3) {
        top: 0;
        left: 0;
    }
}
.tabbar-item-active {
    color: #fff;
}
.set-tabbar-active {
    left: 95px;
    color: #fff;
    background-color: #000;
}
</style>

 src/views/project/ch/home/component/waterRight/top.vue

@@ -1,7 +1,7 @@
<template>
    <div class="flex items-center">
        <img src="/static/images/logo/logo-mini.svg" alt="logo" class="layout-logo-medium-img" />
        <p class="set-waterTitle"><strong>水务 AI</strong>汇聚全球 AI ç²¾é«“</p>
        <p class="set-waterTitle"><strong>WI æ°´åŠ¡æ™ºèƒ½ä¸“家</strong>智慧水务助手</p>
    </div>
    <div class="flex items-center pc-roleList">
        <div v-for="(item, index) in state.roleList" :key="index" class="flex items-center pl-6" @click="handleClick(item)">
@@ -29,7 +29,7 @@
            <el-input v-model="state.inputAnswer" placeholder="在这里输入您的问题开始和AI对话" class="set-inputAnswer" />
        </div>
        <div class="h100 flex items-center">
            <div class="upload_img">
            <div class="upload_img space-y">
                <div class="imgbox cursor-pointer flex items-center">
                    <el-button title="AI看图" class="cursor-pointer" link style="margin-left: unset">
                        <img src="/static/images/wave/LookImg.png" class="set-img-icon box-border" />