feat: 文件管理OK

src/App.vue

@@ -6,7 +6,7 @@ import Setting from '@/components/SettingConf.vue'
 import router from './router';
 import type { MenuItem } from '@/types/common'
 import { setPageSetting, getPageSetting } from '@/api/system'
-import JSON5 from 'json5'
+import { useI18n } from 'vue-i18n';
 import { ElMessage } from 'element-plus';
 import { getRequestFormConf } from '@/utils/tools'
 import { useGlobalStore } from './store';
@@ -15,6 +15,8 @@ import zhCn from 'element-plus/dist/locale/zh-cn.js'
 // @ts-ignore
 import en from 'element-plus/dist/locale/en.js'
 
+const { t } = useI18n();
+
 const store = useGlobalStore();
 
 const needSettingPages = ['mock', 'assets'];
@@ -149,9 +151,9 @@ const handleLogin = async () => {
     password: info.password,
   });
   if(res.code === 200) {
-    ElMessage.success('登录成功');
+    ElMessage.success(`${t('global.login')}:${t('global.success')}`);
   } else {
-    ElMessage.error('登录失败');
+    ElMessage.error(`${t('global.login')}:${t('global.failed')}`);
   }
 }
 
@@ -168,10 +170,10 @@ const handleSaveSetting = async (isLogin: boolean = false) => {
 
     if(isLogin !== true) {
       if(res.code === 200) {
-        ElMessage.success('保存成功');
+        ElMessage.success(`${t('global.save')}:${t('global.success')}`);
         return true;
       } else {
-        ElMessage.error('保存失败');
+        ElMessage.error(`${t('global.save')}:${t('global.failed')}`);
         return false;
       }
     }

src/components/ImageItem.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class=" bg-blue-300 rounded-md overflow-hidden">
-    <div class="w-48 border-blue-400 box-border p-1">
-      <input v-model="model.name" class="outline-none text-white bg-blue-300 pl-4" @change="$emit('action', 'nameChange', model, index)" />
+  <div class="bg-white shadow-md shadow-gray-300 rounded-md">
+    <div class="box-border p-1">
+      <input v-model="model.name" class="outline-none text-center text-gray-600 pl-4" @change="$emit('action', 'nameChange', model, index)" />
     </div>
     <div class="w-48 h-36 group/img relative rounded-md overflow-hidden">
       <div class="hidden absolute left-0 top-0 group-hover/img:block bg-black bg-opacity-60 w-full h-full box-border">
@@ -14,17 +14,19 @@
       </div>
 
       <img 
-        :src="model.url" 
+        :src="icon === 'image' ? model.url : icon" 
         :alt="model.name"
-        class="w-full h-full object-cover border-none block"
+        :class="{'w-full h-full border-none block': true, 'object-cover': icon === 'image', 'object-contain': icon !== 'image'}"
         style="object-position: center top" 
       />
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import { computed } from 'vue';
 import { ElMessage } from 'element-plus';
 import SvgIcon from './SvgIcon.vue';
+import { getAssetsIcon } from '@/utils/tools'
 const actionTypeList = ['favorite', 'unfavorite', 'delete', 'addToSet', 'nameChange', 'outOfSet']  as const;
 type ActionType = typeof actionTypeList[number];
 interface ImageItemModelProps {
@@ -38,6 +40,8 @@ interface ImageItemProps {
   actions?: Array<ActionType>;
 }
 
+defineEmits(['action']);
+
 withDefaults(defineProps<ImageItemProps>(), {
   index: 0,
   actions: () => ['favorite', 'unfavorite', 'delete', 'addToSet', 'nameChange'],
@@ -49,7 +53,8 @@ const model = defineModel<ImageItemModelProps>({required: true, default: () => (
   extension: '',
   isFavorited: false,
 })});
-defineEmits(['action']);
+
+const icon = computed(() => getAssetsIcon(model.value.extension));
 
 const handleCopyFileUrl = () => {
   navigator.clipboard.writeText(model.value.url).then(() => {

src/components/SettingConf.vue

@@ -3,16 +3,16 @@
       <el-form label-width="72px" class="pt-6 px-4">
         <el-form-item >
           <div class="flex flex-row-reverse w-full gap-4">
-            <el-button :disabled="!!confData.token" type="primary" @click="$emit('login', confData)">登录</el-button>
-            <el-button type="primary" @click="$emit('save', confData)">保存</el-button>
+            <el-button :disabled="!!confData.token" type="primary" @click="$emit('login', confData)">{{ t('global.login') }}</el-button>
+            <el-button type="primary" @click="$emit('save', confData)">{{ t('global.save') }}</el-button>
           </div>
         </el-form-item>
         <div class="grid grid-cols-2">
-          <el-form-item label="用户名">
+          <el-form-item :label="t('global.username')">
             <el-input v-model="confData.username" />
           </el-form-item>
 
-          <el-form-item label="密码">
+          <el-form-item :label="t('global.password')">
             <el-input v-model="confData.password">
               <template #append>
                 <div class="flex gap-6">
@@ -30,7 +30,7 @@
           </el-form-item>
 
           <div class="col-span-2">
-            <el-form-item label="登录地址">
+            <el-form-item :label="t('global.loginApi')">
               <div class="flex w-full">
                 <el-input class="flex-1" v-model="confData.apiPath">
                   <template #append>
@@ -65,7 +65,7 @@
         </div>
 
 
-        <el-form-item label="授权设置">
+        <el-form-item :label="t('global.authConf')">
           <RequestResponseConf v-model="confData.conf" />
         </el-form-item>
 

src/i18n/en.ts

@@ -81,7 +81,20 @@ export default {
   global: {
     confirm: 'Confirm',
     cancel: 'Cancel',
+    login: 'Login',
+    list: 'List',
+    get: 'Get',
+    config: 'Config',
+    scene: 'Scene',
     save: 'Save',
+    update: 'Update',
+    delete: 'Delete',
+    success: 'Success',
+    fail: 'Fail',
+    username: 'Username',
+    password: 'Password',
+    authConf: 'Auth Conf',
+    loginApi: 'Login Api',
     param: 'param',
     responseConfig: 'responseConfig',
     sceneName: 'scene name',

src/i18n/zh.ts

@@ -82,6 +82,19 @@ export default {
     confirm: '确认',
     cancel: '取消',
     save: '保存',
+    login: '登录',
+    list: '列表',
+    get: '获取',
+    config: '配置',
+    scene: '场景',
+    update: '更新',
+    delete: '删除',
+    success: '成功',
+    fail: '失败',
+    username: '用户名',
+    password: '密码',
+    authConf: '认证配置',
+    loginApi: '登录接口',
     param: '参数',
     responseConfig: '返回值配置',
     sceneName: '场景名',

src/utils/constants.ts

@@ -1,4 +1,14 @@
 import type { MenuItem } from '@/types/common.d.ts'
+import docIcon from '@/assets/pngIcons/doc.png';
+import fileIcon from '@/assets/pngIcons/file.png';
+import imageIcon from '@/assets/pngIcons/image.png';
+import mp3Icon from '@/assets/pngIcons/mp3.png';
+import pdfIcon from '@/assets/pngIcons/pdf.png';
+import pptIcon from '@/assets/pngIcons/ppt.png';
+import textIcon from '@/assets/pngIcons/txt.png';
+import videoIcon from '@/assets/pngIcons/video.png';
+import xlsIcon from '@/assets/pngIcons/xls.png';
+import zipIcon from '@/assets/pngIcons/zip.png';
 
 // 菜单项
 export const menuItems: MenuItem[] = [
@@ -25,4 +35,17 @@ export const requestMethodList = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH'] as co
 // 接口类型
 export const apiTypeList = ['HTTP', 'JSON-RPC'] as const;
 
-export const wsMessageTypeList = ['param', 'refresh:mockList'] as const;
+export const wsMessageTypeList = ['param', 'refresh:mockList'] as const;
+
+export {
+  docIcon,
+  fileIcon,
+  imageIcon,
+  mp3Icon,
+  pdfIcon,
+  pptIcon,
+  textIcon,
+  videoIcon,
+  xlsIcon,
+  zipIcon,
+}

src/utils/tools.ts

@@ -4,6 +4,19 @@ import get from 'lodash/get';
 import set from 'lodash/set';
 import crypto from 'crypto-js';
 
+import {
+  docIcon,
+  fileIcon,
+  mp3Icon,
+  pdfIcon,
+  pptIcon,
+  textIcon,
+  videoIcon,
+  xlsIcon,
+  zipIcon,
+} from '@/utils/constants';
+
+
 export const getRequestFormConf = (conf: { 
   api: string, 
   passwordEncryptType?: string,
@@ -13,6 +26,8 @@ export const getRequestFormConf = (conf: {
   authType?: string 
 }, isLogin: boolean = false) => async (param: any) => {
   const confObj = JSON5.parse(conf.conf);
+  const pathParamKey =  conf.api.match(/\$\{(\S+)\}/)?.[1] ?? '';
+  const formattedApi = conf.api.replace((/\$\{\w+\}/g), get(param, pathParamKey, ''))
   if(isLogin) {
     const { logInfoMap } = confObj;
     const requestData = {} as any;
@@ -30,7 +45,7 @@ export const getRequestFormConf = (conf: {
       });
     }
 
-    const res = await defineRequest(conf.api, conf.method)(requestData);
+    const res = await defineRequest(formattedApi, conf.method)(requestData);
 
     const resultData = {} as any;
     if(Object.keys(resultMap).length) {
@@ -57,4 +72,21 @@ export const getRequestFormConf = (conf: {
 
     return resultData;
   }
-}
+}
+
+
+export const extension2IconMap = {
+  'png,jpg,jpeg,gif': 'image',
+  'doc,docx': docIcon,
+  'xls,xlsx': xlsIcon,
+  'ppt,pptx': pptIcon,
+  'pdf': pdfIcon,
+  'zip,rar': zipIcon,
+  'txt,text': textIcon,
+  'mp3': mp3Icon,
+  'mp4, rmvb, avi, wmv, 3gp, mkv': videoIcon,
+};
+export const getAssetsIcon = (extension: string) => {
+  const entry = Object.entries(extension2IconMap).find(([key]) => key.includes(extension));
+  return entry ? entry[1] : fileIcon;
+};