oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: style

Browse Source
This commit is contained in:
xingyu4j
2025-06-17 20:22:24 +08:00
parent 7276d0a909
commit a4f4c0d6f6
162 changed files with 689 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/web-antd/src/views/ai/knowledge/document/form/ProcessStep.vue
View File

@@ -114,16 +114,16 @@ onBeforeUnmount(() => {
<template>
<div>
<!-- 文件处理列表 -->
<div class="mt-[15px] grid grid-cols-1 gap-2">
<div class="mt-4 grid grid-cols-1 gap-2">
<div
v-for="(file, index) in modelValue.list"
:key="index"
class="flex items-center rounded-sm border-l-4 border-l-[#409eff] px-[12px] py-[4px] shadow-sm transition-all duration-300 hover:bg-[#ecf5ff]"
class="flex items-center rounded-sm border-l-4 border-l-blue-500 px-3 py-1 shadow-sm transition-all duration-300 hover:bg-blue-50"
>
<!-- 文件图标和名称 -->
<div class="mr-[10px] flex min-w-[200px] items-center">
<IconifyIcon icon="lucide:file-text" class="mr-8px text-[#409eff]" />
<span class="break-all text-[13px] text-[#303133]">
<div class="mr-2 flex min-w-48 items-center">
<IconifyIcon icon="lucide:file-text" class="mr-2 text-blue-500" />
<span class="break-all text-sm text-gray-600">
{{ file.name }}
</span>
</div>
@@ -138,14 +138,14 @@ onBeforeUnmount(() => {
</div>
<!-- 分段数量 -->
<div class="ml-[10px] text-[13px] text-[#606266]">
<div class="ml-2 text-sm text-gray-400">
分段数量：{{ file.count ? file.count : '-' }}
</div>
</div>
</div>
<!-- 底部完成按钮 -->
<div class="mt-[20px] flex justify-end">
<div class="mt-5 flex justify-end">
<Button
:type="allProcessComplete ? 'primary' : 'default'"
:disabled="!allProcessComplete"

46
apps/web-antd/src/views/ai/knowledge/document/form/SplitStep.vue
View File

@@ -168,9 +168,9 @@ onMounted(async () => {
<template>
<div>
<!-- 上部分段设置部分 -->
<div class="mb-[20px]">
<div class="mb-[20px] flex items-center justify-between">
<div class="flex items-center text-[16px] font-bold">
<div class="mb-5">
<div class="mb-5 flex items-center justify-between">
<div class="flex items-center text-base font-bold">
分段设置
<Tooltip placement="top">
<template #title>
@@ -178,7 +178,7 @@ onMounted(async () => {
</template>
<IconifyIcon
icon="lucide:circle-alert"
class="ml-[5px] text-gray-400"
class="ml-1 text-gray-400"
/>
</Tooltip>
</div>
@@ -188,7 +188,7 @@ onMounted(async () => {
</Button>
</div>
</div>
<div class="segment-settings mb-[20px]">
<div class="mb-5">
<Form :label-col="{ span: 5 }">
<Form.Item label="最大 Token 数">
<InputNumber
@@ -200,24 +200,24 @@ onMounted(async () => {
</Form>
</div>
</div>
<div class="mb-[10px]">
<div class="mb-[10px] text-[16px] font-bold">分段预览</div>
<div class="mb-2.5">
<div class="mb-2.5 text-base font-bold">分段预览</div>
<!-- 文件选择器 -->
<div class="file-selector mb-[10px]">
<div class="mb-2.5">
<Dropdown
v-if="modelData.list && modelData.list.length > 0"
trigger="click"
>
<div class="flex cursor-pointer items-center">
<IconifyIcon icon="lucide:file-text" class="text-danger mr-[5px]" />
<IconifyIcon icon="lucide:file-text" class="mr-1" />
<span>{{ currentFile?.name || '请选择文件' }}</span>
<span
v-if="currentFile?.segments"
class="ml-5px text-[12px] text-gray-500"
class="ml-1 text-sm text-gray-500"
>
({{ currentFile.segments.length }}个分片)
</span>
<IconifyIcon icon="lucide:chevron-down" class="ml-[5px]" />
<IconifyIcon icon="lucide:chevron-down" class="ml-1" />
</div>
<template #overlay>
<Menu>
@@ -227,10 +227,7 @@ onMounted(async () => {
@click="selectFile(index)"
>
{{ file.name }}
<span
v-if="file.segments"
class="ml-[5px] text-[12px] text-gray-500"
>
<span v-if="file.segments" class="ml-1 text-sm text-gray-500">
({{ file.segments.length }}个分片)
</span>
</Menu.Item>
@@ -240,15 +237,10 @@ onMounted(async () => {
<div v-else class="text-gray-400">暂无上传文件</div>
</div>
<!-- 文件内容预览 -->
<div
class="file-preview max-h-[600px] overflow-y-auto rounded-md bg-gray-50 p-[15px]"
>
<div
v-if="splitLoading"
class="flex items-center justify-center py-[20px]"
>
<div class="max-h-[600px] overflow-y-auto rounded-md bg-gray-50 p-4">
<div v-if="splitLoading" class="flex items-center justify-center py-5">
<IconifyIcon icon="lucide:loader" class="is-loading" />
<span class="ml-[10px]">正在加载分段内容...</span>
<span class="ml-2.5">正在加载分段内容...</span>
</div>
<template
v-else-if="
@@ -260,13 +252,13 @@ onMounted(async () => {
<div
v-for="(segment, index) in currentFile.segments"
:key="index"
class="mb-[10px]"
class="mb-2.5"
>
<div class="mb-[5px] text-[12px] text-gray-500">
<div class="mb-1 text-sm text-gray-500">
分片-{{ index + 1 }} · {{ segment.contentLength || 0 }} 字符数 ·
{{ segment.tokens || 0 }} Token
</div>
<div class="rounded-md bg-white p-[10px]">
<div class="rounded-md bg-white p-2">
{{ segment.content }}
</div>
</div>
@@ -275,7 +267,7 @@ onMounted(async () => {
</div>
</div>
<!-- 添加底部按钮 -->
<div class="mt-[20px] flex justify-between">
<div class="mt-5 flex justify-between">
<div>
<Button v-if="!modelData.id" @click="handlePrevStep">上一步</Button>
</div>

29
apps/web-antd/src/views/ai/knowledge/document/form/UploadStep.vue
View File

@@ -186,11 +186,11 @@ onMounted(() => {
</script>
<template>
<Form ref="formRef" :model="modelData" label-width="0" class="mt-[20px]">
<Form.Item class="mb-[20px]">
<Form ref="formRef" :model="modelData" label-width="0" class="mt-5">
<Form.Item class="mb-5">
<div class="w-full">
<div
class="w-full rounded-md border-2 border-dashed border-[#dcdfe6] p-[20px] text-center hover:border-[#409eff]"
class="w-full rounded-md border-2 border-dashed border-gray-200 p-5 text-center hover:border-blue-500"
>
<UploadDragger
ref="uploadRef"
@@ -203,18 +203,18 @@ onMounted(() => {
:custom-request="customRequest"
:multiple="true"
>
<div class="flex flex-col items-center justify-center py-[20px]">
<div class="flex flex-col items-center justify-center py-5">
<IconifyIcon
icon="ep:upload-filled"
class="mb-[10px] text-[48px] text-[#c0c4cc]"
class="mb-2.5 text-xs text-gray-400"
/>
<div class="ant-upload-text text-[16px] text-[#606266]">
<div class="ant-upload-text text-base text-gray-400">
拖拽文件至此，或者
<em class="cursor-pointer not-italic text-[#409eff]">
<em class="cursor-pointer not-italic text-blue-500">
选择文件
</em>
</div>
<div class="ant-upload-tip mt-10px text-[12px] text-[#909399]">
<div class="mt-2.5 text-sm text-gray-400">
已支持 {{ supportedFileTypes.join('、') }}，每个文件不超过
{{ maxFileSize }} MB。
</div>
@@ -223,19 +223,16 @@ onMounted(() => {
</div>
<div
v-if="modelData.list && modelData.list.length > 0"
class="mt-[15px] grid grid-cols-1 gap-2"
class="mt-4 grid grid-cols-1 gap-2"
>
<div
v-for="(file, index) in modelData.list"
:key="index"
class="flex items-center justify-between rounded-sm border-l-4 border-l-[#409eff] px-[12px] py-[4px] shadow-sm transition-all duration-300 hover:bg-[#ecf5ff]"
class="flex items-center justify-between rounded-sm border-l-4 border-l-blue-500 px-3 py-1 shadow-sm transition-all duration-300 hover:bg-blue-50"
>
<div class="flex items-center">
<IconifyIcon
icon="lucide:file-text"
class="mr-[8px] text-[#409eff]"
/>
<span class="break-all text-[13px] text-[#303133]">{{
<IconifyIcon icon="lucide:file-text" class="mr-2 text-blue-500" />
<span class="break-all text-sm text-gray-600">{{
file.name
}}</span>
</div>
@@ -246,7 +243,7 @@ onMounted(() => {
@click="removeFile(index)"
class="ml-2"
>
<IconifyIcon icon="lucide:trash" />
<IconifyIcon icon="lucide:trash-2" />
</Button>
</div>
</div>

14
apps/web-antd/src/views/ai/knowledge/document/form/index.vue
View File

@@ -131,26 +131,26 @@ defineExpose({
<div class="mx-auto">
<!-- 头部导航栏 -->
<div
class="border-bottom absolute left-0 right-0 top-0 z-10 flex h-[50px] items-center bg-white px-[20px]"
class="absolute left-0 right-0 top-0 z-10 flex h-12 items-center border-b bg-white px-4"
>
<!-- 左侧标题 -->
<div class="flex w-[200px] items-center overflow-hidden">
<div class="flex w-48 items-center overflow-hidden">
<ArrowLeft
class="size-5 flex-shrink-0 cursor-pointer"
@click="handleBack"
/>
<span class="ml-10px text-16px truncate">
<span class="ml-2.5 truncate text-base">
{{ formData.id ? '编辑知识库文档' : '创建知识库文档' }}
</span>
</div>
<!-- 步骤条 -->
<div class="flex h-full flex-1 items-center justify-center">
<div class="flex h-full w-[400px] items-center justify-between">
<div class="flex h-full w-96 items-center justify-between">
<div
v-for="(step, index) in steps"
:key="index"
class="relative mx-[15px] flex h-full cursor-pointer items-center"
class="relative mx-4 flex h-full cursor-pointer items-center"
:class="[
currentStep === index
? 'border-b-2 border-solid border-blue-500 text-blue-500'
@@ -158,7 +158,7 @@ defineExpose({
]"
>
<div
class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-[15px]"
class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-base"
:class="[
currentStep === index
? 'border-blue-500 bg-blue-500 text-white'
@@ -176,7 +176,7 @@ defineExpose({
</div>
<!-- 主体内容 -->
<Card :body-style="{ padding: '10px' }" class="mb-4">
<div class="mt-[50px]">
<div class="mt-12">
<!-- 第一步：上传文档 -->
<div v-if="currentStep === 0" class="mx-auto w-[560px]">
<UploadStep v-model="formData" ref="uploadDocumentRef" />

2
apps/web-antd/src/views/ai/knowledge/knowledge/modules/form.vue
View File

@@ -83,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-[600px]" :title="getTitle">
<Modal class="w-2/5" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

19
apps/web-antd/src/views/ai/knowledge/knowledge/retrieval/index.vue
View File

@@ -94,12 +94,11 @@ onMounted(() => {
<Card class="min-w-300 flex-1">
<div class="mb-15">
<h3
class="m-0 mb-2 font-semibold leading-none tracking-tight"
style="font-size: 18px"
class="m-0 mb-2 text-lg font-semibold leading-none tracking-tight"
>
召回测试
</h3>
<div class="text-14 text-gray-500">
<div class="text-sm text-gray-500">
根据给定的查询文本测试召回效果。
</div>
</div>
@@ -110,7 +109,7 @@ onMounted(() => {
:rows="8"
placeholder="请输入文本"
/>
<div class="text-12 absolute bottom-2 right-2 text-gray-400">
<div class="absolute bottom-2 right-2 text-sm text-gray-400">
{{ queryParams.content?.length }} / 200
</div>
</div>
@@ -148,7 +147,7 @@ onMounted(() => {
<Card class="min-w-300 flex-1">
<!-- 加载中状态 -->
<template v-if="loading">
<div class="flex h-[300px] items-center justify-center">
<div class="flex h-72 items-center justify-center">
<Empty description="正在检索中..." />
</div>
</template>
@@ -162,19 +161,19 @@ onMounted(() => {
:key="index"
class="p-15 mb-20 rounded border border-solid border-gray-200"
>
<div class="text-12 mb-5 flex justify-between text-gray-500">
<div class="mb-5 flex justify-between text-sm text-gray-500">
<span>
分段({{ segment.id }}) · {{ segment.contentLength }} 字符数 ·
{{ segment.tokens }} Token
</span>
<span
class="-8 text-12 rounded-full bg-blue-50 py-4 font-bold text-blue-500"
class="rounded-full bg-blue-50 py-4 text-sm font-bold text-blue-500"
>
score: {{ segment.score }}
</span>
</div>
<div
class="text-13 mb-10 overflow-hidden whitespace-pre-wrap rounded bg-gray-50 p-10 transition-all duration-100"
class="mb-10 overflow-hidden whitespace-pre-wrap rounded bg-gray-50 p-10 text-sm transition-all duration-100"
:class="{
'max-h-50 line-clamp-2': !segment.expanded,
'max-h-500': segment.expanded,
@@ -183,7 +182,7 @@ onMounted(() => {
{{ segment.content }}
</div>
<div class="flex items-center justify-between">
<div class="text-13 flex items-center text-gray-500">
<div class="flex items-center text-sm text-gray-500">
<IconifyIcon icon="lucide:file-text" class="mr-5" />
<span>{{ segment.documentName || '未知文档' }}</span>
</div>
@@ -205,7 +204,7 @@ onMounted(() => {
<!-- 无召回结果 -->
<template v-else>
<div class="flex h-[300px] items-center justify-center">
<div class="flex h-72 items-center justify-center">
<Empty description="暂无召回结果" />
</div>
</template>

22
apps/web-antd/src/views/ai/knowledge/segment/index.vue
View File

@@ -147,27 +147,9 @@ onMounted(() => {
</template>
<template #expand_content="{ row }">
<div
class="content-expand"
style="
padding: 10px 20px;
line-height: 1.5;
white-space: pre-wrap;
background-color: #f9f9f9;
border-left: 3px solid #409eff;
border-radius: 4px;
"
class="whitespace-pre-wrap border-l-4 border-blue-500 bg-gray-100 px-2.5 py-5 leading-5"
>
<div
class="content-title"
style="
margin-bottom: 8px;
font-size: 14px;
font-weight: bold;
color: #606266;
"
>
完整内容：
</div>
<div class="mb-2 text-sm font-bold text-gray-600">完整内容：</div>
{{ row.content }}
</div>
</template>

2
apps/web-antd/src/views/ai/knowledge/segment/modules/form.vue
View File

@@ -84,7 +84,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-[600px]" :title="getTitle">
<Modal class="w-2/5" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>