提交 63903a99 编写于 作者: View Design's avatar View Design

add

上级 861231bb
<template> <template>
<div class="flex h-screen"> <div class="flex min-h-screen">
<div class="fixed top-0 bg-gray-100 dark:bg-gray-800 w-64 flex flex-col min-h-screen"> <div class="fixed top-0 bg-gray-100 dark:bg-gray-800 w-64 flex flex-col min-h-screen">
<div class="flex-grow"> <div class="flex-grow">
<h1>GitBot</h1> <h1>GitBot</h1>
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
/> />
</div> </div>
</div> </div>
<div class="ml-64 flex-grow bg-white dark:bg-gray-900 flex-grow p-6"> <div class="ml-64 bg-white dark:bg-gray-900 flex flex-grow p-6">
<slot /> <slot />
</div> </div>
</div> </div>
......
<template> <template>
<div class="flex items-center justify-center h-full max-w-full"> <div class="flex items-center justify-center h-full w-full">
<div class="max-w-screen-sm w-full flex flex-col space-y-4"> <div class="max-w-screen-sm w-full flex flex-col space-y-4">
<UTextarea <UTextarea
v-model="query" v-model="query"
......
<template> <template>
<div class="flex h-full justify-center max-w-full"> <div class="flex justify-center w-full">
<div class="max-w-screen-lg w-full flex flex-col space-y-4"> <div class="max-w-screen-lg flex flex-col space-y-4 mb-4">
<h1 class="whitespace-pre-line break-words [word-break:break-word] default font-display text-3xl font-regular text-textMain dark:text-textMainDark selection:bg-super/50 selection:text-textMain dark:selection:bg-superDuper/10 dark:selection:text-superDark" <h1 class="text-3xl truncate">{{ state.query }}</h1>
>{{ state.query }}</h1>
<section>{{ state.repo }}</section> <section>{{ state.repo }}</section>
<UProgress :value="currentStep" :max="steps" :color="stepColor" indicator>
<template #step-1="{ step }"> <template v-for="(item, index) in data" :key="index">
<h1 class="text-3xl truncate" v-if="index !== 0">{{ item.question }}</h1>
<UProgress :value="item.step" :max="steps" :color="stepColor(item.step)" indicator>
<template #step-1="{ step }">
<span class="text-blue-500 items-center justify-end flex space-x-1"> <span class="text-blue-500 items-center justify-end flex space-x-1">
<UIcon name="i-heroicons-document-chart-bar-20-solid" class="text-base" /> <UIcon name="i-heroicons-document-chart-bar-20-solid" class="text-base" />
<span>{{ step }}</span> <span>{{ step }}</span>
</span> </span>
</template> </template>
<template #step-2="{ step }"> <template #step-2="{ step }">
<span class="text-blue-500 items-center justify-end flex space-x-1"> <span class="text-blue-500 items-center justify-end flex space-x-1">
<UIcon name="i-heroicons-code-bracket-square-20-solid" class="text-base" /> <UIcon name="i-heroicons-code-bracket-square-20-solid" class="text-base" />
<span>{{ step }}</span> <span>{{ step }}</span>
</span> </span>
</template> </template>
<template #step-3="{ step }"> <template #step-3="{ step }">
<span class="text-blue-500 items-center justify-end flex space-x-1"> <span class="text-blue-500 items-center justify-end flex space-x-1">
<UIcon name="i-heroicons-document-20-solid" class="text-base" /> <UIcon name="i-heroicons-document-20-solid" class="text-base" />
<span>{{ step }}</span> <span>{{ step }}</span>
</span> </span>
</template> </template>
<template #step-4="{ step }"> <template #step-4="{ step }">
<span class="text-green-500 items-center justify-end flex space-x-1"> <span class="text-green-500 items-center justify-end flex space-x-1">
<UIcon name="i-heroicons-document-check-20-solid" class="text-base" /> <UIcon name="i-heroicons-document-check-20-solid" class="text-base" />
<span>{{ step }}</span> <span>{{ step }}</span>
</span> </span>
</template> </template>
</UProgress> </UProgress>
<div class="text-xl flex items-center space-x-1"> <div class="text-xl flex items-center space-x-1">
<UIcon name="i-heroicons-chat-bubble-left-right-20-solid" /> <UIcon name="i-heroicons-chat-bubble-left-right-20-solid" />
<span>回答中...</span> <span>答案</span>
</div> </div>
<article> <article>
{{article}} {{ item.article }}
</article> </article>
<div class="text-xl flex items-center space-x-1"> <div class="text-xl flex items-center space-x-1">
<UIcon name="i-heroicons-link-20-solid" /> <UIcon name="i-heroicons-link-20-solid" />
<span>来源...</span> <span>来源</span>
</div> </div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<ULink v-for="(item, index) in 4" to="http://github.com/view-design/ViewUIPlus" target="_blank"> <ULink v-for="(source, sourceIndex) in item.source" :to="source.link" target="_blank">
<UCard :ui="{ body: { padding: 'sm:p-3 p-3' } }"> <UCard :ui="{ body: { padding: 'sm:p-3 p-3' } }">
<div class="flex flex-col space-y-1"> <div class="flex flex-col space-y-1">
<div class="justify-between flex space-x-1"> <div class="justify-between flex space-x-1">
<span class="truncate">ViewDesign/ViewUIPlus</span> <span class="truncate">{{ source.repo }}</span>
<span class="text-gray-200">{{ index + 1 }}</span> <span class="text-gray-200">{{ sourceIndex + 1 }}</span>
</div>
<div class="text-blue-500 truncate">{{ source.label }}</div>
</div> </div>
<div class="text-blue-500 truncate">view-design/ViewUIPlus/tree/master/src/select/index.vue</div> </UCard>
</div> </ULink>
</UCard> </div>
</ULink> <UDivider v-if="index !== data.length - 1" class="pt-2 pb-2" />
</div> </template>
<div class="text-xl flex items-center space-x-1"> <div class="text-xl flex items-center space-x-1">
<UIcon name="i-heroicons-rectangle-group-20-solid" /> <UIcon name="i-heroicons-rectangle-group-20-solid" />
<span>相关问题...</span> <span>相关问题</span>
</div> </div>
<UButton <UButton
v-for="item in 3" v-for="item in recommendQuestions"
color="gray" color="gray"
size="md" size="md"
@click="handleContinueAsk(item.title)"
> >
<div class="justify-between w-full flex items-center"> <div class="justify-between w-full flex items-center">
<div class="truncate">ViewUIPlus Select 组件如何按需加载</div> <div class="truncate">{{ item.title }}</div>
<UIcon name="i-heroicons-plus-20-solid" class="text-base" /> <UIcon name="i-heroicons-plus-20-solid" class="text-base" />
</div> </div>
</UButton> </UButton>
<div class="sticky bottom-4 flex">
<div class="justify-between flex w-full space-x-2">
<UInput
class="w-full"
v-model="continueQuestion"
placeholder="提出后续问题"
size="xl"
/>
<UButton
size="xl"
square
trailing-icon="i-heroicons-chevron-right-20-solid"
:disabled="!continueQuestion"
/>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -77,13 +100,87 @@ const state = reactive({ ...@@ -77,13 +100,87 @@ const state = reactive({
query: route.query.query || '', query: route.query.query || '',
repo: route.query.repo || '' repo: route.query.repo || ''
}) })
const currentStep = ref(1)
const steps = ['', '问题分析', '代码搜索', '整理答案', '完成!'] const steps = ['', '问题分析', '代码搜索', '整理答案', '完成!']
const stepColor = computed(() => { const stepColor = (step) => {
switch (true) { switch (true) {
case currentStep.value >= steps.length - 1: return 'green' case step.value >= steps.length - 1: return 'green'
default: return 'blue' default: return 'blue'
} }
}) }
const article = ref('ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:')
const data = ref([])
data.value = [
{
step: 1,
question: 'Select组件怎样远程搜索',
article: 'ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:',
source: [
{
repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
},
{
repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
},
{
repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
},
{
repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
}
]
},
{
step: 1,
question: 'Select组件怎样远程搜索',
article: 'ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:ViewUIPlus 的 Table 组件是一个功能强大的组件,支持多种数据渲染和查看方式。以下是使用 ViewUIPlus Table 组件的一些基本步骤和特性:\n引入Table组件:首先,你需要从 ViewUIPlus 中引入 Table 组件。这可以通过在你的 Vue 3 项目中添加相应的导入语句来完成。例如:',
source: [
{
repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
},
{
repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
},
{
repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
},
{
repo: 'ViewDesign/ViewUIPlus',
label: 'view-design/ViewUIPlus/tree/master/src/select/index.vue',
link: 'http://github.com/view-design/ViewUIPlus/tree/master/src/select/index.vue'
}
]
}
]
const recommendQuestions = [
{
title: 'ViewUIPlus Select 组件如何按需加载'
},
{
title: 'ViewUIPlus Select 组件如何按需加载'
},
{
title: 'ViewUIPlus Select 组件如何按需加载'
}
]
const continueQuestion = ref(null)
const handleContinueAsk = (question) => {
}
</script> </script>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册