855 lines
20 KiB
Vue
855 lines
20 KiB
Vue
<template>
|
||
<div>
|
||
<el-dialog
|
||
v-model="visible"
|
||
title="文档分段管理"
|
||
width="1200px"
|
||
:close-on-click-modal="false"
|
||
class="segment-dialog"
|
||
>
|
||
<!-- 顶部操作栏 -->
|
||
<div class="top-actions">
|
||
|
||
<div class="action-buttons">
|
||
<el-button
|
||
type="success"
|
||
@click="showAddSegmentDialog = true"
|
||
size="default"
|
||
:disabled="!props.canWrite"
|
||
:title="props.canWrite ? '添加分段' : '无添加权限'"
|
||
>
|
||
添加分段
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="loadSegments(1)"
|
||
size="default"
|
||
>
|
||
刷新
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分段列表 -->
|
||
<div class="segment-list" v-loading="loading">
|
||
<div
|
||
v-for="segment in segments"
|
||
:key="segment.id"
|
||
class="segment-item"
|
||
>
|
||
<div class="segment-header">
|
||
<span class="segment-index">分段 {{ segment.position }}</span>
|
||
<span class="segment-info">
|
||
{{ segment.word_count }} 字 · {{ segment.tokens }} tokens
|
||
</span>
|
||
<div class="segment-actions">
|
||
<!-- 启用开关 -->
|
||
<el-switch
|
||
:model-value="segment.enabled"
|
||
:active-text="segment.enabled ? '已启用' : '已禁用'"
|
||
:loading="segment._switching"
|
||
:disabled="!props.canWrite"
|
||
@change="handleToggleEnabled(segment, $event)"
|
||
style="--el-switch-on-color: #67C23A; margin-right: 12px;"
|
||
:title="props.canWrite ? '' : '无修改权限'"
|
||
/>
|
||
<el-tag
|
||
:type="getStatusType(segment.status)"
|
||
size="small"
|
||
style="margin-right: 8px;"
|
||
>
|
||
{{ getStatusText(segment.status) }}
|
||
</el-tag>
|
||
<!-- 编辑按钮 -->
|
||
<el-button
|
||
v-if="!editingSegmentIds.has(segment.id)"
|
||
type="primary"
|
||
size="small"
|
||
@click="startEdit(segment)"
|
||
:disabled="!props.canWrite"
|
||
:title="props.canWrite ? '编辑分段' : '无编辑权限'"
|
||
>
|
||
编辑
|
||
</el-button>
|
||
<!-- 删除按钮 -->
|
||
<el-button
|
||
v-if="!editingSegmentIds.has(segment.id)"
|
||
type="danger"
|
||
size="small"
|
||
@click="handleDeleteSegment(segment)"
|
||
:loading="segment._deleting"
|
||
:disabled="!props.canDelete"
|
||
:title="props.canDelete ? '删除分段' : '无删除权限'"
|
||
>
|
||
删除
|
||
</el-button>
|
||
<!-- 保存和取消按钮 -->
|
||
<template v-else>
|
||
<el-button
|
||
type="success"
|
||
size="small"
|
||
@click="saveEdit(segment)"
|
||
:loading="segment._saving"
|
||
>
|
||
保存
|
||
</el-button>
|
||
<el-button
|
||
size="small"
|
||
@click="cancelEdit(segment)"
|
||
>
|
||
取消
|
||
</el-button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分段内容显示或编辑 -->
|
||
<div class="segment-content">
|
||
<!-- 编辑模式 -->
|
||
<template v-if="editingSegmentIds.has(segment.id)">
|
||
<el-input
|
||
v-model="editingContents[segment.id]"
|
||
type="textarea"
|
||
:rows="8"
|
||
placeholder="请输入分段内容"
|
||
/>
|
||
</template>
|
||
<!-- 只读模式 -->
|
||
<template v-else>
|
||
<div class="segment-text">
|
||
{{ segment.content }}
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- 关键词标签 -->
|
||
<div class="segment-keywords" v-if="segment.keywords?.length">
|
||
<el-tag
|
||
v-for="keyword in segment.keywords"
|
||
:key="keyword"
|
||
size="small"
|
||
style="margin-right: 8px;"
|
||
>
|
||
{{ keyword }}
|
||
</el-tag>
|
||
</div>
|
||
|
||
<!-- 分段元数据 -->
|
||
<div class="segment-meta">
|
||
<span class="meta-item">
|
||
<el-icon><Clock /></el-icon>
|
||
创建时间: {{ formatTimestamp(segment.created_at) }}
|
||
</span>
|
||
<span class="meta-item" v-if="segment.completed_at">
|
||
<el-icon><Check /></el-icon>
|
||
完成时间: {{ formatTimestamp(segment.completed_at) }}
|
||
</span>
|
||
<span class="meta-item">
|
||
<el-icon><View /></el-icon>
|
||
命中次数: {{ segment.hit_count }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<div v-if="!loading && segments.length === 0" class="empty-state">
|
||
<p>暂无分段数据</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分页组件 -->
|
||
<div class="pagination-container" v-if="totalCount > 0">
|
||
<el-pagination
|
||
:current-page="currentPage"
|
||
:page-size="pageSize"
|
||
:page-sizes="[10, 15, 20, 50]"
|
||
:total="totalCount"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 添加分段对话框 -->
|
||
<el-dialog
|
||
v-model="showAddSegmentDialog"
|
||
title="添加分段"
|
||
width="700px"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<el-form :model="newSegmentForm" label-width="80px">
|
||
<el-form-item label="分段内容" required>
|
||
<el-input
|
||
v-model="newSegmentForm.content"
|
||
type="textarea"
|
||
:rows="10"
|
||
placeholder="请输入分段内容"
|
||
/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="showAddSegmentDialog = false">取消</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="handleCreateSegment"
|
||
:loading="creatingSegment"
|
||
>
|
||
确定
|
||
</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, nextTick } from 'vue';
|
||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||
import { Clock, Check, View, Loading } from '@element-plus/icons-vue';
|
||
import { documentSegmentApi } from '../../../../../apis/ai';
|
||
|
||
defineOptions({
|
||
name: 'DocumentSegmentDialog'
|
||
});
|
||
|
||
interface Props {
|
||
/** 是否显示对话框 */
|
||
modelValue: boolean;
|
||
/** Dify数据集ID */
|
||
datasetId: string;
|
||
/** Dify文档ID */
|
||
documentId: string;
|
||
/** 是否可写（修改分段） */
|
||
canWrite?: boolean;
|
||
/** 是否可删除（删除分段） */
|
||
canDelete?: boolean;
|
||
}
|
||
|
||
const props = defineProps<Props>();
|
||
const emit = defineEmits(['update:modelValue']);
|
||
|
||
// 对话框显示状态
|
||
const visible = computed({
|
||
get: () => props.modelValue,
|
||
set: (val) => emit('update:modelValue', val)
|
||
});
|
||
|
||
// 数据状态
|
||
const loading = ref(false);
|
||
const segments = ref<any[]>([]);
|
||
const currentPage = ref(1);
|
||
const pageSize = ref(10);
|
||
const totalCount = ref(0); // API 返回的总分段数
|
||
|
||
// 编辑状态
|
||
const editingSegmentIds = ref<Set<string>>(new Set());
|
||
const editingContents = ref<Record<string, string>>({});
|
||
const originalContents = ref<Record<string, string>>({});
|
||
|
||
// 新增分段相关
|
||
const showAddSegmentDialog = ref(false);
|
||
const creatingSegment = ref(false);
|
||
const newSegmentForm = ref({
|
||
content: '',
|
||
keywords: [] as string[]
|
||
});
|
||
const keywordInputVisible = ref(false);
|
||
const keywordInputValue = ref('');
|
||
const keywordInputRef = ref<any>(null);
|
||
|
||
// 统计信息
|
||
const totalSegments = computed(() => totalCount.value); // 使用API返回的总数
|
||
const totalWords = computed(() =>
|
||
segments.value.reduce((sum, seg) => sum + (seg.word_count || 0), 0)
|
||
);
|
||
const totalTokens = computed(() =>
|
||
segments.value.reduce((sum, seg) => sum + (seg.tokens || 0), 0)
|
||
);
|
||
|
||
// 组件挂载时自动加载数据（v-if 确保每次打开都会重新挂载）
|
||
onMounted(() => {
|
||
loadSegments();
|
||
});
|
||
|
||
/**
|
||
* 加载分段数据
|
||
* @param page 页码，默认为当前页
|
||
*/
|
||
async function loadSegments(page = currentPage.value) {
|
||
try {
|
||
loading.value = true;
|
||
|
||
// 调用Dify API获取分段列表（支持分页）
|
||
const result = await documentSegmentApi.getDocumentSegments(
|
||
props.datasetId,
|
||
props.documentId,
|
||
page,
|
||
pageSize.value
|
||
);
|
||
|
||
if (result.success && result.pageDomain) {
|
||
const responseData = result.pageDomain as any;
|
||
|
||
// 重新加载数据
|
||
segments.value = responseData.dataList || [];
|
||
|
||
// 更新分页信息
|
||
currentPage.value = responseData.pageParam?.pageNumber || 1;
|
||
totalCount.value = responseData.pageParam?.totalElements || 0;
|
||
|
||
} else {
|
||
segments.value = [];
|
||
ElMessage.error(result.message || '加载分段失败');
|
||
}
|
||
} catch (error: any) {
|
||
console.error('加载分段失败:', error);
|
||
ElMessage.error(error.message || '加载分段失败');
|
||
} finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 处理每页条数改变
|
||
*/
|
||
function handleSizeChange(size: number) {
|
||
pageSize.value = size;
|
||
loadSegments(1);
|
||
}
|
||
|
||
/**
|
||
* 处理页码改变
|
||
*/
|
||
function handleCurrentChange(page: number) {
|
||
loadSegments(page);
|
||
}
|
||
|
||
/**
|
||
* 切换分段启用状态
|
||
*/
|
||
async function handleToggleEnabled(segment: any, enabled: boolean) {
|
||
if (!props.datasetId || !props.documentId || !segment.id) {
|
||
ElMessage.error('分段信息不完整');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
(segment as any)._switching = true;
|
||
|
||
const result = await documentSegmentApi.updateSegment(
|
||
props.datasetId,
|
||
props.documentId,
|
||
segment.id,
|
||
{ enabled }
|
||
);
|
||
|
||
if (result.success) {
|
||
segment.enabled = enabled;
|
||
ElMessage.success(enabled ? '已启用分段' : '已禁用分段');
|
||
} else {
|
||
ElMessage.error(result.message || '更新失败');
|
||
}
|
||
} catch (error: any) {
|
||
console.error('更新分段状态失败:', error);
|
||
ElMessage.error('更新失败');
|
||
} finally {
|
||
(segment as any)._switching = false;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 开始编辑分段
|
||
*/
|
||
function startEdit(segment: any) {
|
||
editingSegmentIds.value.add(segment.id);
|
||
editingContents.value[segment.id] = segment.content;
|
||
originalContents.value[segment.id] = segment.content;
|
||
}
|
||
|
||
/**
|
||
* 保存编辑
|
||
*/
|
||
async function saveEdit(segment: any) {
|
||
const newContent = editingContents.value[segment.id];
|
||
|
||
if (!newContent || !newContent.trim()) {
|
||
ElMessage.warning('分段内容不能为空');
|
||
return;
|
||
}
|
||
|
||
if (newContent === originalContents.value[segment.id]) {
|
||
ElMessage.info('内容未修改');
|
||
cancelEdit(segment);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
(segment as any)._saving = true;
|
||
|
||
const result = await documentSegmentApi.updateSegment(
|
||
props.datasetId,
|
||
props.documentId,
|
||
segment.id,
|
||
{ content: newContent }
|
||
);
|
||
|
||
if (result.success) {
|
||
segment.content = newContent;
|
||
editingSegmentIds.value.delete(segment.id);
|
||
delete editingContents.value[segment.id];
|
||
delete originalContents.value[segment.id];
|
||
ElMessage.success('保存成功');
|
||
|
||
// 重新加载数据以更新字数和 tokens
|
||
await loadSegments();
|
||
} else {
|
||
ElMessage.error(result.message || '保存失败');
|
||
}
|
||
} catch (error: any) {
|
||
console.error('保存分段失败:', error);
|
||
ElMessage.error('保存失败');
|
||
} finally {
|
||
(segment as any)._saving = false;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 取消编辑
|
||
*/
|
||
function cancelEdit(segment: any) {
|
||
editingSegmentIds.value.delete(segment.id);
|
||
delete editingContents.value[segment.id];
|
||
delete originalContents.value[segment.id];
|
||
}
|
||
|
||
/**
|
||
* 创建新分段
|
||
*/
|
||
async function handleCreateSegment() {
|
||
const content = newSegmentForm.value.content.trim();
|
||
|
||
if (!content) {
|
||
ElMessage.warning('分段内容不能为空');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
creatingSegment.value = true;
|
||
|
||
const result = await documentSegmentApi.createSegment(
|
||
props.datasetId,
|
||
props.documentId,
|
||
[{
|
||
content
|
||
}]
|
||
);
|
||
|
||
if (result.success) {
|
||
ElMessage.success('添加成功');
|
||
showAddSegmentDialog.value = false;
|
||
// 重置表单
|
||
newSegmentForm.value = {
|
||
content: '',
|
||
keywords: []
|
||
};
|
||
// 重新加载数据
|
||
await loadSegments();
|
||
} else {
|
||
ElMessage.error(result.message || '添加失败');
|
||
}
|
||
} catch (error: any) {
|
||
console.error('创建分段失败:', error);
|
||
ElMessage.error('添加失败');
|
||
} finally {
|
||
creatingSegment.value = false;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 显示关键词输入框
|
||
*/
|
||
function showKeywordInput() {
|
||
keywordInputVisible.value = true;
|
||
nextTick(() => {
|
||
keywordInputRef.value?.focus();
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 确认添加关键词
|
||
*/
|
||
function handleKeywordInputConfirm() {
|
||
const value = keywordInputValue.value.trim();
|
||
|
||
if (value && !newSegmentForm.value.keywords.includes(value)) {
|
||
newSegmentForm.value.keywords.push(value);
|
||
}
|
||
|
||
keywordInputVisible.value = false;
|
||
keywordInputValue.value = '';
|
||
}
|
||
|
||
/**
|
||
* 移除关键词
|
||
*/
|
||
function removeKeyword(keyword: string) {
|
||
const index = newSegmentForm.value.keywords.indexOf(keyword);
|
||
if (index > -1) {
|
||
newSegmentForm.value.keywords.splice(index, 1);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 删除分段
|
||
*/
|
||
async function handleDeleteSegment(segment: any) {
|
||
try {
|
||
await ElMessageBox.confirm(
|
||
`确定要删除分段 ${segment.position} 吗？此操作不可恢复。`,
|
||
'确认删除',
|
||
{
|
||
type: 'warning',
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消'
|
||
}
|
||
);
|
||
|
||
(segment as any)._deleting = true;
|
||
|
||
const result = await documentSegmentApi.deleteSegment(
|
||
props.datasetId,
|
||
props.documentId,
|
||
segment.id
|
||
);
|
||
|
||
if (result.success) {
|
||
ElMessage.success('删除成功');
|
||
// 重新加载数据
|
||
await loadSegments();
|
||
} else {
|
||
ElMessage.error(result.message || '删除失败');
|
||
}
|
||
} catch (error: any) {
|
||
if (error !== 'cancel') {
|
||
console.error('删除分段失败:', error);
|
||
ElMessage.error('删除失败');
|
||
}
|
||
} finally {
|
||
(segment as any)._deleting = false;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 获取状态类型
|
||
*/
|
||
function getStatusType(status: string): 'success' | 'info' | 'warning' | 'danger' {
|
||
const typeMap: Record<string, 'success' | 'info' | 'warning' | 'danger'> = {
|
||
'completed': 'success',
|
||
'indexing': 'warning',
|
||
'error': 'danger',
|
||
'paused': 'info'
|
||
};
|
||
return typeMap[status] || 'info';
|
||
}
|
||
|
||
/**
|
||
* 获取状态文本
|
||
*/
|
||
function getStatusText(status: string): string {
|
||
const textMap: Record<string, string> = {
|
||
'completed': '已完成',
|
||
'indexing': '索引中',
|
||
'error': '错误',
|
||
'paused': '已暂停'
|
||
};
|
||
return textMap[status] || status;
|
||
}
|
||
|
||
/**
|
||
* 格式化时间戳
|
||
*/
|
||
function formatTimestamp(timestamp: number): string {
|
||
if (!timestamp) return '-';
|
||
const date = new Date(timestamp * 1000);
|
||
return date.toLocaleString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit'
|
||
});
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.segment-dialog {
|
||
:deep(.el-dialog) {
|
||
border-radius: 14px;
|
||
|
||
.el-dialog__header {
|
||
padding: 24px 24px 16px;
|
||
border-bottom: 1px solid #F3F3F5;
|
||
|
||
.el-dialog__title {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #101828;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
}
|
||
|
||
.el-dialog__body {
|
||
padding: 24px;
|
||
background: #FAFAFA;
|
||
}
|
||
|
||
.el-dialog__footer {
|
||
padding: 16px 24px;
|
||
border-top: 1px solid #F3F3F5;
|
||
}
|
||
}
|
||
}
|
||
|
||
.top-actions {
|
||
display: flex;
|
||
justify-content: end;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
padding: 8px 20px;
|
||
background: #FFFFFF;
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
border-radius: 14px;
|
||
|
||
.stats-summary {
|
||
display: flex;
|
||
gap: 24px;
|
||
align-items: center;
|
||
|
||
.stat-text {
|
||
font-size: 14px;
|
||
color: #6A7282;
|
||
letter-spacing: -0.01em;
|
||
|
||
strong {
|
||
font-size: 16px;
|
||
color: #101828;
|
||
margin-left: 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
}
|
||
|
||
.segment-list {
|
||
max-height: 520px;
|
||
overflow-y: auto;
|
||
padding-right: 4px;
|
||
|
||
/* 自定义滚动条 */
|
||
&::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
background: #D1D5DB;
|
||
border-radius: 3px;
|
||
|
||
&:hover {
|
||
background: #9CA3AF;
|
||
}
|
||
}
|
||
|
||
.segment-item {
|
||
background: #FFFFFF;
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
border-radius: 14px;
|
||
padding: 16px;
|
||
margin-bottom: 12px;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
border-color: #E7000B;
|
||
box-shadow: 0 4px 12px rgba(231, 0, 11, 0.12);
|
||
}
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.segment-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 12px;
|
||
gap: 12px;
|
||
|
||
.segment-index {
|
||
font-weight: 500;
|
||
color: #101828;
|
||
font-size: 14px;
|
||
letter-spacing: -0.01em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.segment-info {
|
||
flex: 1;
|
||
font-size: 12px;
|
||
color: #6A7282;
|
||
letter-spacing: -0.01em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.segment-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
|
||
.segment-content {
|
||
margin-bottom: 12px;
|
||
|
||
.el-textarea {
|
||
textarea {
|
||
font-family: inherit;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
.segment-text {
|
||
padding: 12px;
|
||
background: #F9FAFB;
|
||
border: 1px solid transparent;
|
||
border-radius: 8px;
|
||
line-height: 1.6;
|
||
color: #4A5565;
|
||
font-size: 14px;
|
||
word-break: break-word;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
}
|
||
|
||
.segment-keywords {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
|
||
:deep(.el-tag) {
|
||
background: #EFF6FF;
|
||
border: 1px solid transparent;
|
||
border-radius: 8px;
|
||
color: #1447E6;
|
||
font-size: 12px;
|
||
padding: 2px 8px;
|
||
height: 24px;
|
||
line-height: 20px;
|
||
}
|
||
}
|
||
|
||
.segment-meta {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||
|
||
.meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 13px;
|
||
color: #667085;
|
||
letter-spacing: -0.01em;
|
||
|
||
.el-icon {
|
||
font-size: 14px;
|
||
color: #9CA3AF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 80px 20px;
|
||
background: #FFFFFF;
|
||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||
border-radius: 14px;
|
||
|
||
p {
|
||
font-size: 14px;
|
||
color: #6A7282;
|
||
margin: 0;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
/* 添加分段对话框样式 */
|
||
:deep(.el-dialog__wrapper) {
|
||
.el-dialog {
|
||
border-radius: 14px;
|
||
|
||
.el-form-item__label {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #0A0A0A;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.el-input__wrapper {
|
||
background: #F3F3F5;
|
||
border: 1px solid transparent;
|
||
border-radius: 8px;
|
||
box-shadow: none;
|
||
|
||
&:hover {
|
||
border-color: rgba(231, 0, 11, 0.2);
|
||
}
|
||
|
||
&.is-focus {
|
||
border-color: #E7000B;
|
||
background: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.el-textarea__inner {
|
||
background: #F3F3F5;
|
||
border: 1px solid transparent;
|
||
border-radius: 8px;
|
||
box-shadow: none;
|
||
|
||
&:hover {
|
||
border-color: rgba(231, 0, 11, 0.2);
|
||
}
|
||
|
||
&:focus {
|
||
border-color: #E7000B;
|
||
background: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.el-select {
|
||
.el-input__wrapper {
|
||
background: #F3F3F5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|