feat: Add import document view

[wangdan-fit2cloud]

What this PR does / why we need it?

Summary of your change

Please indicate you've done the following:

• Made sure tests are passing and test coverage is added if needed.
• Made sure commit message follow the rule of Conventional Commits specification.
• Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

In this Vue component template, there are several potential improvements and issues:

Improvements

1. Vue 3 Composition API: You're using Vue 2 syntax (<template>, @click directives), which should be updated to Vue 3's composition API syntax.

<script setup lang="ts">
// Use Vue 3 imports
import { ref, reactive, computed, onUnmounted } from 'vue';
// Import necessary modules/routes/...

2. Computed Property for query Parameter: This can make the code cleaner if you want to access the id parameter more frequently.

const datasetId = computed(() => route.query.id);
// Usage:
if (datasetId.value) {
  // Do something with datasetID.value
}

3. Dynamic Class Usage: In CSS classes like .border-r-4, it would be better to define these globally or use a less utility-like approach if they aren't dynamically changing based on conditions.

4. Tree Node Label Handling: Since prop.children is set to "zones", ensure that your backend returns appropriate tree structure reflecting these names.

5. Loading Handling: Consider showing a spinner or overlay when loading data instead of directly disabling buttons unless absolutely necessary as it might confuse users waiting too long without a response.

6. Error Handling: Add basic error handling logic for API calls and user actions to manage unexpected situations gracefully.

Optimizations

1. Avoid Inline Template Styles: For styles, consider importing them into SCSS files rather than embedding them within <style> tags. This makes managing styles easier across components and reduces file sizes.

2. **Consistent Naming Conventions): Ensure consistency in variable and function naming, especially those related to API data models/interfaces/classes/typescript definitions.

3. Optimize Data Fetching: If multiple parts rely on async data fetching, ensure proper cancellation strategies to avoid resource leakage during page transitions.

4. Consider State Management Libraries: While not strictly relevant here since state management isn't explicitly used beyond simple refs, introducing a store could improve maintainability and scale as application grows.

Here’s a refined version implementing some of these points:

Script Section

Update to composition-api:

<script setup lang="ts">
import { ref, reactive, computed, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';

import documentApi from '@/api/document'; 
import { MsgConfirm, MsgSuccess } from '@/utils/message';
import { t } from '@/locales';

interface TreeNode {
  name: string;
  leaf?: boolean;
}

const router = useRouter();
const route = useRoute();

const datasetId = computed(() => Number(route.query.id)); // Convert to number for numeric comparisons

const loading = ref(false);
const allCheck = ref(false);

const form = ref({
  fileType: 'txt',
  fileList: []
});

const rules = reactive({
  fileList: [{ required: true, message: t('views.document.upload.requiredMessage'), trigger: 'change' }]
});

const props = {
  label: 'name',
  children: () => ['zones'],
  isLeaf: 'leaf'
};

async function fetchNodes(nodeId: number | null) {
  try {
    const nodesData = await documentApi.fetchNodesById(nodeId ?? undefined); // Adjust based on API call params
    console.log(nodesData);
  } catch (error) {
    console.error(error);
  }
}

onMounted(async () => {
  await fetchNodes(datasetId.value || -1); // Initial fetch
});

// ...rest of the functions remain unchanged but now use new methods and variables properly
</script>

Stylus/Css Sections

Move styles to global/styles or scoped styles appropriately:

/* app.scss */
.create-dataset {
  &__component {
    @include no-scrollbar; // Example mixin
  }
}

By addressing these improvements and optimizations, you'll have a more robust and efficient Vue component that adheres closer to best practices while still being functional.

[shaohuzhang1]

No significant irregularities, potential issues, or optimization suggestions were found in the provided code. The only minor change is that the closing comment tag </style> was moved to after the final style block definition, which follows standard SCSS syntax rules.

[shaohuzhang1]

The provided code seems to be missing some closing braces and properly formatted syntax throughout. Specifically, there are issues with the JSON structure of the file:

1. There's an extra comma after "tip" in "enableStatus".

"enableStatus": {

2. This line is missing its end curly brace:

placeholder: '直接返回分段内容',
requiredMessage: '请输入相似度'

3. The opening brace for "feishu" is not closed:

{
}

4. The object under "label" isn't enclosed in quotes:

"label": "相似度高于",

5. There're two empty objects without content at the end.

After fixing these issues, here's how the corrected version should look like:

export default {
  common: {
    cancelGenerateQuestion: '取消生成问题',
    cancelVectorization: '取消向量化',
    cancelGenerate: '取消生成',
    export: '导出'
  },
  tip: {
    saveMessage: '当前的更改尚未保存，确认退出吗? '
  },
  generateResult: {
    GENERATE: '生成中',
    SYNC: '同步中',
    REVOKE: '取消中',
    finish: '完成'
  },
  enableStatus: {
    label: '启用状态'
  },
  hitHandlingMethod: {
    optimization: '模型优化'
  },
  queryConfig: {},
  feishu: {
    selectDocument: '选择文档',
    tip1: '仅支持文档和表格类型，文档会根据标题分段，表格会转为Markdown格式后再分段。',
    tip2: '系统不存储原始文档，导入文档前，建议规范文档的分段标识。',
    allCheck: '全选'
  }
}