feat: directus插件与组合式函数编写

- plugins：Directus插件
- composable：Directus图片/文件的相关组合式函数

app/composables/useDirectusFiles.ts

@@ -0,0 +1,22 @@
+export const useDirectusFiles = () => {
+  const config = useRuntimeConfig();
+  const baseUrl = config.public.directus.url;
+
+  const getFileUrl = (
+    id?: string | null,
+    options?: Record<string, string | number | boolean>
+  ): string => {
+    if (!id) return '';
+    const query = options
+      ? '?' +
+        new URLSearchParams(
+          Object.entries(options).map(([key, value]) => [key, String(value)])
+        ).toString()
+      : '';
+    return `${baseUrl}/assets/${id}${query}`;
+  };
+
+  return {
+    getFileUrl,
+  };
+};

app/composables/useDirectusImage.ts

@@ -0,0 +1,32 @@
+export const useDirectusImage = () => {
+  const config = useRuntimeConfig();
+  const baseUrl = config.public.directus.url;
+  const token = config.public.directus.token;
+
+  type DirectusAssetParams = {
+    width?: number;
+    height?: number;
+    fit?: 'cover' | 'contain' | 'inside' | 'outside';
+    quality?: number;
+    format?: 'webp' | 'jpg' | 'png' | 'auto';
+  } & Record<string, string | number | boolean>;
+
+  const getImageUrl = (id?: string | null, options?: DirectusAssetParams) => {
+    if (!id) return '';
+    const queryToken = token ? 'access_token=' + token : '';
+    const queryOptions = options
+      ? new URLSearchParams(
+          Object.fromEntries(
+            Object.entries(options).map(([key, value]) => [key, String(value)])
+          )
+        ).toString
+      : '';
+    const query =
+      queryToken || queryOptions
+        ? `?${[queryToken, queryOptions].filter(Boolean).join('&')}`
+        : '';
+    return `${baseUrl}/assets/${id}${query}`;
+  };
+
+  return { getImageUrl };
+};

app/plugins/directus.ts

@@ -0,0 +1,12 @@
+import { createDirectus, rest, staticToken } from '@directus/sdk';
+
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig();
+
+  const directus = createDirectus<Schema>(config.public.directus.url)
+    .with(rest())
+    .with(staticToken(config.public.directus.token || ''));
+  return {
+    provide: { directus },
+  };
+});

nuxt.config.ts

@@ -118,7 +118,7 @@ export default defineNuxtConfig({
   },
 
   imports: {
-    dirs: ['types/**'],
+    dirs: ['types/**', 'models/**'],
   },
 
   modules: [
@@ -133,6 +133,5 @@ export default defineNuxtConfig({
     '@element-plus/nuxt',
     '@nuxtjs/i18n',
     '@nuxtjs/strapi',
-    'nuxt-directus',
   ],
 });