feat: use env

.env.example

@@ -1,3 +1,5 @@
 VITE_AWS_S3_ACCESS_KEY_ID=
 VITE_AWS_S3_SECRET_ACCESS_KEY=
-VITE_AWS_S3_REGION=
+VITE_AWS_S3_REGION=
+VITE_DOCS_LIST_BUCKET=
+VITE_DOCS_MEDIA_BUCKET=

.vitepress/config.mts

@@ -1,19 +1,34 @@
+import "dotenv/config";
 import { fileURLToPath, URL } from "node:url";
 import { defineConfig } from "vitepress";
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
 import Icons from "unplugin-icons/vite";
-// import Components from 'unplugin-vue-components/vite'
 import { FileSystemIconLoader } from "unplugin-icons/loaders";
+import { SVG, cleanupSVG, parseColors, runSVGO } from "@iconify/tools";
+
 import {
-  SVG,
-  cleanupSVG,
-  parseColors,
-  runSVGO,
-  deOptimisePaths,
-  importDirectory,
-} from "@iconify/tools";
-import { compareColors, stringToColor } from "@iconify/utils/lib/colors";
+  S3Client,
+  PutObjectCommand,
+  ListObjectsCommand,
+  GetObjectCommand,
+  DeleteObjectsCommand,
+} from "@aws-sdk/client-s3";
+import { pathsToTree } from "../utils/s3Helper";
 
+const s3 = new S3Client({
+  credentials: {
+    accessKeyId: process.env.VITE_AWS_S3_ACCESS_KEY_ID!,
+    secretAccessKey: process.env.VITE_AWS_S3_SECRET_ACCESS_KEY!,
+  },
+  region: process.env.VITE_AWS_S3_REGION!,
+});
+const command = new ListObjectsCommand({
+  Bucket: process.env.VITE_DOCS_LIST_BUCKET,
+});
+const { Contents: contents } = await s3.send(command);
+const docsTree = pathsToTree(contents!.map((f) => f.Key!));
+console.log(docsTree)
+process.exit();
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -29,7 +44,7 @@ export default defineConfig({
 
   vite: {
     publicDir: "../public",
-    envDir: '../',
+    envDir: "../",
     // optimizeDeps: {
     //   include: ["vue-i18n"],
     // },
@@ -52,7 +67,6 @@ export default defineConfig({
               const svg = new SVG(svgStr);
               cleanupSVG(svg);
 
-
               parseColors(svg, {
                 defaultColor: "currentColor",
                 callback: (attr, colorStr, color) => {
@@ -90,7 +104,6 @@ export default defineConfig({
               const svg = new SVG(svgStr);
               cleanupSVG(svg);
 
-
               // Optimise, but do not change shapes because they are animated
               runSVGO(svg, {
                 keepShapes: true,

components/Edit/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, toRaw, provide, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import {v4 as uuid4} from 'uuid'
 import {
   S3Client,
@@ -20,9 +20,6 @@ import { MdEditor } from "md-editor-v3";
 import { pathsToTree, getTreeLeafs } from "@/utils/s3Helper";
 import "md-editor-v3/lib/style.css";
 
-const DOCS_LIST_BUCKET = "cococlass-help-docs";
-const DOCS_MEDIA_BUCKET = "cococlass-help-docs-medias";
-
 const s3 = new S3Client({
   credentials: {
     accessKeyId: import.meta.env.VITE_AWS_S3_ACCESS_KEY_ID,
@@ -30,15 +27,13 @@ const s3 = new S3Client({
   },
   region: import.meta.env.VITE_AWS_S3_REGION,
 });
-provide("s3", s3);
-provide("DOCS_LIST_BUCKET", DOCS_LIST_BUCKET);
 
 const tree$ = ref<InstanceType<typeof ElTree>>();
 
 const dataSource = ref<TreeData[]>([]);
 const sideLoading = ref(false);
 const loadS3DocsListObjects = async () => {
-  const command = new ListObjectsCommand({ Bucket: DOCS_LIST_BUCKET });
+  const command = new ListObjectsCommand({ Bucket: import.meta.env.VITE_DOCS_LIST_BUCKET });
   const result = await s3.send(command);
   return result.Contents!.map((item) => item.Key!).slice(0, 200);
 };
@@ -59,7 +54,7 @@ const onNodeClick = async (data: TreeData, node) => {
   }
   textLoading.value = true;
   const command = new GetObjectCommand({
-    Bucket: DOCS_LIST_BUCKET,
+    Bucket: import.meta.env.VITE_DOCS_LIST_BUCKET,
     Key: data.key,
     ResponseCacheControl: "no-cache",
   });
@@ -74,25 +69,24 @@ const text = ref("");
 const textLoading = ref(false);
 
 const onUploadImg = async (files: File[], callback: (urls: string[] | { url: string; alt: string; title: string }[]) => void) => {
-  console.log(files)
   let result = []
   for (const file of files) {
     try {
       const key = `${uuid4()}::${file.name}`
       const command = new PutObjectCommand({
-        Bucket: DOCS_MEDIA_BUCKET,
+        Bucket: import.meta.env.DOCS_MEDIA_BUCKET,
         Key: key,
         Body: file,
         ACL: 'public-read',
       });
       const res = await s3.send(command);
-      result.push({url: `https://${DOCS_MEDIA_BUCKET}.s3.amazonaws.com/${key}`, alt: file.name, title: file.name})
+      result.push({url: `https://${import.meta.env.DOCS_MEDIA_BUCKET}.s3.amazonaws.com/${key}`, alt: file.name, title: file.name})
     } catch (e) {
       console.error(e)
       ElNotification.error(`${file.name} 上传失败`)
     }
   }
-    callback(result)
+  callback(result)
 };
 const onSave = async () => {
   if (!currentOpenData.value) {
@@ -102,7 +96,7 @@ const onSave = async () => {
   textLoading.value = true
   try {
     const command = new PutObjectCommand({
-      Bucket: DOCS_LIST_BUCKET,
+      Bucket: import.meta.env.VITE_DOCS_LIST_BUCKET,
       Key: currentOpenData.value?.key,
       Body: text.value,
     });
@@ -139,7 +133,7 @@ const onAppend = async (data: TreeData) => {
     const key = `${data.key ? `${data.key}/` : ''}${filename}`
     if (!isDir) {
       const command = new PutObjectCommand({
-        Bucket: DOCS_LIST_BUCKET,
+        Bucket: import.meta.env.VITE_DOCS_LIST_BUCKET,
         Key: key,
         Body: "",
       });
@@ -172,7 +166,7 @@ const onRemove = async (node: Node, data: TreeData) => {
   try {
     const leafDatas = getTreeLeafs(data)
     const command = new DeleteObjectsCommand({
-      Bucket: DOCS_LIST_BUCKET,
+      Bucket: import.meta.env.VITE_DOCS_LIST_BUCKET,
       Delete: {
         Objects: leafDatas.map(d => ({Key: d.key})),
         Quiet: false,

package-lock.json

@@ -18,6 +18,7 @@
         "@intlify/unplugin-vue-i18n": "^4.0.0",
         "@types/node": "^20.14.2",
         "@vue/compiler-sfc": "^3.4.29",
+        "dotenv": "^16.4.5",
         "sass": "^1.77.5",
         "unplugin-icons": "^0.19.0",
         "vitepress": "^1.2.3"
@@ -4002,6 +4003,18 @@
         "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmmirror.com/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/element-plus": {
       "version": "2.7.5",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.7.5.tgz",

package.json

@@ -8,6 +8,7 @@
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@types/node": "^20.14.2",
     "@vue/compiler-sfc": "^3.4.29",
+    "dotenv": "^16.4.5",
     "sass": "^1.77.5",
     "unplugin-icons": "^0.19.0",
     "vitepress": "^1.2.3"

vite-env.d.ts

@@ -4,6 +4,8 @@ interface ImportMetaEnv {
   readonly VITE_AWS_S3_ACCESS_KEY_ID: string
   readonly VITE_AWS_S3_SECRET_ACCESS_KEY: string
   readonly VITE_AWS_S3_REGION: string
+  readonly VITE_DOCS_LIST_BUCKET: string
+  readonly VITE_DOCS_MEDIA_BUCKET: string
   // more env variables...
 }