remilia/jinshen-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 将/support/documents路由的数据获取由Strapi转为Directus

Browse Source 
- 修改/support/documents.vue，将相关数据获取迁移到Directus
- 增添相应的视图模型与映射方法
This commit is contained in:
R2m1liA
2025-10-20 12:30:24 +08:00
parent bc625239cd
commit 440a46850a
7 changed files with 213 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/composables/directus/index.ts
View File

@ -5,3 +5,4 @@ export * from './useProduct';
export * from './useSolutionList';
export * from './useSolution';
export * from './useQuestionList';
export * from './useDocumentList';

67
app/composables/directus/useDocumentList.ts Normal file
View File

@ -0,0 +1,67 @@
import { readItems } from '@directus/sdk';
export const useDocumentList = () => {
const { $directus } = useNuxtApp();
const { getDirectusLocale } = useLocalizations();
const locale = getDirectusLocale();
return useAsyncData(`document-list-${locale}`, async () => {
return await $directus.request(
readItems('product_documents', {
fields: [
'id',
{
file: ['id', 'filesize', 'filename_download'],
},
{
translations: ['id', 'title'],
},
{
products: [
'id',
{
products_id: [
'id',
{
translations: ['id', 'name'],
},
{
product_type: [
'id',
{
translations: ['id', 'name'],
},
],
},
],
},
],
},
],
deep: {
translations: {
_filter: {
languages_code: { _eq: locale },
},
},
products: {
products_id: {
translations: {
_filter: {
languages_code: { _eq: locale },
},
},
product_type: {
translations: {
_filter: {
languages_code: { _eq: locale },
},
},
},
},
},
},
})
);
});
};

56
app/models/mappers/documentMapper.ts
View File

@ -1,13 +1,15 @@
/**
* 将 Directus 返回的 Document 数据转换为 DocumentView 视图模型
* 将 Directus 返回的 Document 数据转换为 ProductDocumentView 视图模型
*
* @param raw: 原始的 Document 数据
* @returns 转换后的 DocumentView 对象
* @returns 转换后的 ProductDocumentView 对象
*
* @example
* const view = toDocumentView(rawDocument);
* const view = toProductDocumentView(rawDocument);
*/
export function toDocumentView(raw: ProductDocument): ProductDocumentView {
export function toProductDocumentView(
raw: ProductDocument
): ProductDocumentView {
const trans = raw.translations?.[0] ?? {
title: '',
};
@ -27,3 +29,49 @@ export function toDocumentView(raw: ProductDocument): ProductDocumentView {
size: file.filesize,
};
}
/**
* 将 Directus 返回的 Document 数据转换为 DocumentListView 视图模型
*
* @param raw: 原始的 Document 数据
* @returns 转换后的 DocumentListView 对象
*
* @example
* const view = toDocumentListView(rawDocument);
*/
export function toDocumentListView(raw: ProductDocument): DocumentListView {
const trans = raw.translations?.[0] ?? { title: '' };
const fileId = typeof raw.file === 'string' ? raw.file : raw.file?.id;
const file = raw.file as DirectusFile;
const { getFileUrl } = useDirectusFiles();
const url = getFileUrl(fileId);
const related_products: DocumentListProduct[] = raw.products
?.filter(isObject<ProductsProductDocument>)
.map((item) => item.products_id)
.filter(isObject<Product>)
.map((item) => {
const productType =
isObject<ProductType>(item.product_type) &&
({
id: item.product_type.id,
name: item.product_type.translations?.[0]?.name,
} satisfies DocumentListProductType);
return {
id: item.id,
name: item.translations?.[0]?.name,
type: productType,
};
});
return {
id: raw.id,
filename: file.filename_download,
title: trans.title,
url: url,
size: file.filesize,
products: related_products,
};
}

4
app/models/mappers/productMapper.ts
View File

@ -106,13 +106,13 @@ export function toProductView(raw: Product): ProductView {
.filter(isObject<ProductsQuestion>)
.map((item) => item.questions_id)
.filter(isObject<Question>)
.map((item) => toQuestionView(item));
.map((item) => toProductQuestionView(item));
const documents = (raw.documents ?? [])
.filter(isObject<ProductsProductDocument>)
.map((item) => item.product_documents_id)
.filter(isObject<ProductDocument>)
.map((item) => toDocumentView(item));
.map((item) => toProductDocumentView(item));
return {
id: raw.id,

42
app/models/views/DocumentListView.ts Normal file
View File

@ -0,0 +1,42 @@
/**
* 文档关联产品类型模型
* 用于在文档库中提供产品筛选功能
*/
export interface DocumentListProductType {
id: number;
name: string;
}
/**
* 文档关联产品模型
* 用于在文档库中提供产品筛选功能
*/
export interface DocumentListProduct {
id: number;
name: string;
type: DocumentListProductType;
}
/**
* 文档列表模型
* 用于文档库(/support/documents)页面渲染的数据结构
*/
export interface DocumentListView {
/** 唯一标识符 **/
id: number;
/** 文件名 **/
filename: string;
/** 文档标题 **/
title: string;
/** 文档大小 **/
size: number;
/** 文档链接 **/
url: string;
/** 相关产品 **/
products: DocumentListProduct[];
}

2
app/models/views/ProductDocumentView.ts
View File

@ -1,6 +1,6 @@
/**
* 文档视图模型
* 用于文档页(/support/documents)渲染的数据结构
* 用于文档列表渲染的数据结构
*/
export interface ProductDocumentView {
/** 唯一标识符 **/

112
app/pages/support/documents.vue
View File

@ -28,22 +28,22 @@
<div class="document-category">
<el-select v-model="selectedType" placeholder="选择产品类型" clearable>
<el-option
v-for="type in productionTypeOptions"
:key="type.documentId"
:label="type.type"
:value="type.documentId"
v-for="type in productTypeOptions"
:key="type.id"
:label="type.name"
:value="type.id"
/>
</el-select>
<el-select
v-model="selectedProduction"
v-model="selectedProduct"
placeholder="选择系列产品"
clearable
>
<el-option
v-for="production in productionOptions"
:key="production.documentId"
:label="production.title"
:value="production.documentId"
v-for="product in productOptions"
:key="product.id"
:label="product.name"
:value="product.id"
/>
</el-select>
<el-input
@ -63,37 +63,24 @@
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
const { find } = useStrapi();
const { getStrapiLocale } = useLocalizations();
const strapiLocale = getStrapiLocale();
const { data, pending, error } = await useDocumentList();
const { data, pending, error } = useAsyncData('documents', () =>
find<ProductionDocument>('production-documents', {
populate: ['document', 'related_productions.production_type'],
locale: strapiLocale,
})
const documents = computed(
() => data?.value.map((item) => toDocumentListView(item)) ?? []
);
// const documents = computed(
// () =>
// data.value?.data.map((item) => ({
// ...item.document,
// })) || []
// );
const documents = computed(() => data.value?.data ?? []);
const keyword = ref('');
const selectedType = ref<string | null>(null);
const selectedProduction = ref<string | null>(null);
const selectedType = ref<number | null>(null);
const selectedProduct = ref<number | null>(null);
const productionTypeOptions = computed(() => {
const types: ProductionType[] = [];
documents.value.forEach((document: ProductionDocument) => {
document.related_productions?.forEach((production: Production) => {
const productionType = production?.production_type;
if (!types.some((p) => p.documentId === productionType.documentId)) {
types.push(productionType);
const productTypeOptions = computed(() => {
const types: DocumentListProductType[] = [];
documents.value.forEach((doc: DocumentListView) => {
doc.products?.forEach((product: DocumentListProduct) => {
const productType = product.type;
if (!types.some((item) => item.id === productType.id)) {
types.push(productType);
}
});
});
@ -101,51 +88,48 @@
return types;
});
const productionOptions = computed(() => {
const productOptions = computed(() => {
if (!selectedType.value) return [];
const productions: Production[] = [];
documents.value.forEach((document: ProductionDocument) => {
document.related_productions.forEach((production: Production) => {
const products: DocumentListProduct[] = [];
documents.value.forEach((doc: DocumentListView) => {
doc.products?.forEach((product: DocumentListProduct) => {
if (
production.production_type?.documentId === selectedType.value &&
!productions.some((p) => p.documentId === production.documentId)
product.type.id === selectedType.value &&
!products.some((item) => item.id === product.id)
) {
productions.push(production);
products.push(product);
}
});
});
return productions;
return products;
});
const filteredDocuments = computed(() =>
documents.value
.filter((document: ProductionDocument) => {
const matchProduction = selectedProduction.value
? document.related_productions?.some(
(production: Production) =>
production.documentId === selectedProduction.value
documents.value.filter((doc: DocumentListView) => {
const matchProduction = selectedProduct.value
? doc.products?.some(
(product: DocumentListProduct) =>
product.id === selectedProduct.value
)
: selectedType.value
? doc.products?.some(
(product: DocumentListProduct) =>
product.type?.id === selectedType.value
)
: selectedType.value
? document.related_productions?.some(
(production: Production) =>
production.production_type?.documentId === selectedType.value
)
: true;
const matchKeyword = keyword.value
? document.document.caption &&
document.document.caption.includes(keyword.value)
: true;
return matchProduction && matchKeyword;
})
.map((item) => ({
...item.document,
}))
const matchKeyword = keyword.value
? doc.title && doc.title.includes(keyword.value)
: true;
return matchProduction && matchKeyword;
})
);
watch(selectedType, () => {
selectedProduction.value = null;
selectedProduct.value = null;
});
watch(documents, (value) => {