chore: 重构组件

src/components/custom/file-upload.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useAttrs } from 'vue';
+import { ref, useAttrs } from 'vue';
 import type { UploadFileInfo, UploadProps } from 'naive-ui';
 import { fetchBatchDeleteOss } from '@/service/api/system/oss';
 import { getToken } from '@/store/modules/auth/shared';
@@ -29,6 +29,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 const attrs: UploadProps = useAttrs();
 
+let fileNum = 0;
+const fileList = ref<UploadFileInfo[]>([]);
+
 const isHttpProxy = import.meta.env.DEV && import.meta.env.VITE_HTTP_PROXY === 'Y';
 const { baseURL } = getServiceBaseURL(import.meta.env, isHttpProxy);
 
@@ -38,6 +41,7 @@ const headers: Record<string, string> = {
 };
 
 function beforeUpload(options: { file: UploadFileInfo; fileList: UploadFileInfo[] }) {
+  fileNum += 1;
   const { file } = options;
 
   // 校检文件类型
@@ -73,15 +77,19 @@ function isErrorState(xhr: XMLHttpRequest) {
 }
 
 function handleFinish(options: { file: UploadFileInfo; event?: ProgressEvent }) {
+  fileNum -= 1;
   const { file, event } = options;
   // @ts-expect-error Ignore type errors
   const responseText = event?.target?.responseText;
   const response = JSON.parse(responseText);
   const oss: Api.System.Oss = response.data;
+  fileList.value.find(item => item.id === file.id)!.id = String(oss.ossId);
   file.id = String(oss.ossId);
   file.url = oss.url;
   file.name = oss.fileName;
-  window.$message?.success('上传成功');
+  if (fileNum === 0) {
+    window.$message?.success('上传成功');
+  }
   return file;
 }
 
@@ -106,6 +114,7 @@ async function handleRemove(file: UploadFileInfo) {
 <template>
   <NUpload
     v-bind="attrs"
+    v-model:file-list="fileList"
     :action="`${baseURL}${action}`"
     :headers="headers"
     :max="max"

src/constants/business.ts

@@ -2,12 +2,20 @@ import { transformRecordToOption } from '@/utils/common';
 
 /** enable status */
 export const enableStatusRecord: Record<Api.Common.EnableStatus, string> = {
-  '0': '启用',
-  '1': '禁用'
+  '0': '正常',
+  '1': '停用'
 };
 
 export const enableStatusOptions = transformRecordToOption(enableStatusRecord);
 
+/** yes or no status */
+export const yesOrNoStatusRecord: Record<Api.Common.YesOrNoStatus, string> = {
+  Y: '是',
+  N: '否'
+};
+
+export const yesOrNoStatusOptions = transformRecordToOption(yesOrNoStatusRecord);
+
 /** menu type */
 export const menuTypeRecord: Record<Api.System.MenuType, string> = {
   M: '目录',
@@ -91,3 +99,20 @@ export const genTplCategoryRecord: Record<Api.Tool.TplCategory, string> = {
 };
 
 export const genTplCategoryOptions = transformRecordToOption(genTplCategoryRecord);
+
+/** oss config is https */
+export const ossConfigIsHttpsRecord: Record<Api.Common.YesOrNoStatus, string> = {
+  Y: 'https://',
+  N: 'http://'
+};
+
+export const ossConfigIsHttpsOptions = transformRecordToOption(ossConfigIsHttpsRecord);
+
+/** oss access policy */
+export const ossAccessPolicyRecord: Record<Api.System.OssAccessPolicy, string> = {
+  '0': '私有',
+  '1': '公有',
+  '2': '自定义'
+};
+
+export const ossAccessPolicyOptions = transformRecordToOption(ossAccessPolicyRecord);

src/layouts/modules/global-header/index.vue

@@ -48,7 +48,7 @@ watch(tenantId, async () => {
       <GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
     </div>
     <div class="h-full flex-y-center justify-end">
-      <TenantSelect class="mr-12px w-150px" :clearable="true" />
+      <TenantSelect v-model:value="tenantId" class="mr-12px w-150px" />
       <GlobalSearch />
       <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
       <LangSwitch

src/router/elegant/routes.ts

@@ -213,13 +213,14 @@ export const generatedRoutes: GeneratedRoute[] = [
       },
       {
         name: 'system_oss-config',
-        path: '/oss-config',
+        path: '/system/oss-config',
         component: 'view.system_oss-config',
         meta: {
           title: 'system_oss-config',
           i18nKey: 'route.system_oss-config',
           constant: true,
-          hideInMenu: true
+          hideInMenu: true,
+          icon: 'hugeicons:configuration-01'
         }
       },
       {

src/router/elegant/transform.ts

@@ -183,7 +183,7 @@ const routeMap: RouteMap = {
   "system_menu": "/system/menu",
   "system_notice": "/system/notice",
   "system_oss": "/system/oss",
-  "system_oss-config": "/oss-config",
+  "system_oss-config": "/system/oss-config",
   "system_post": "/system/post",
   "system_tenant": "/system/tenant",
   "system_user": "/system/user",

src/router/routes/index.ts

@@ -126,7 +126,7 @@ const dynamicConstantRoutes: ElegantRoute[] = [
     children: [
       {
         name: 'system_oss-config',
-        path: '/oss-config',
+        path: '/system/oss-config',
         component: 'view.system_oss-config',
         meta: {
           title: 'system_oss-config',

src/typings/api/api.d.ts

@@ -47,10 +47,10 @@ declare namespace Api {
     /**
      * 是否状态
      *
-     * - "0": 是
-     * - "1": 否
+     * - "Y": 是
+     * - "N": 否
      */
-    type YesOrNoStatus = '0' | '1';
+    type YesOrNoStatus = 'Y' | 'N';
 
     /** common record */
     type CommonRecord<T = any> = {

src/typings/api/system.api.d.ts

@@ -182,7 +182,7 @@ declare namespace Api {
       /** 是否为外链（0是 1否 2iframe） */
       isFrame: IsMenuFrame;
       /** 是否缓存（0缓存 1不缓存） */
-      isCache: Common.YesOrNoStatus;
+      isCache: Common.EnableStatus;
       /** 菜单类型（M目录 C菜单 F按钮） */
       menuType: MenuType;
       /** 显示状态（0显示 1隐藏） */
@@ -643,6 +643,9 @@ declare namespace Api {
     /** oss list */
     type OssList = Api.Common.PaginatingQueryRecord<Oss>;
 
+    /** oss access policy */
+    type OssAccessPolicy = '0' | '1' | '2';
+
     /** oss config */
     type OssConfig = Common.CommonRecord<{
       /** 主键 */
@@ -664,13 +667,13 @@ declare namespace Api {
       /** 自定义域名 */
       domain: string;
       /** 是否https（Y=是,N=否） */
-      isHttps: string;
+      isHttps: Api.Common.YesOrNoStatus;
       /** 域 */
       region: string;
       /** 桶权限类型 */
-      accessPolicy: string;
+      accessPolicy: Api.System.OssAccessPolicy;
       /** 是否默认（0=是,1=否） */
-      status: string;
+      status: Api.Common.EnableStatus;
       /** 扩展字段 */
       ext1: string;
       /** 备注 */

src/typings/elegant-router.d.ts

@@ -37,7 +37,7 @@ declare module "@elegant-router/types" {
     "system_menu": "/system/menu";
     "system_notice": "/system/notice";
     "system_oss": "/system/oss";
-    "system_oss-config": "/oss-config";
+    "system_oss-config": "/system/oss-config";
     "system_post": "/system/post";
     "system_tenant": "/system/tenant";
     "system_user": "/system/user";
@@ -117,8 +117,8 @@ declare module "@elegant-router/types" {
     | "system_dict_type"
     | "system_menu"
     | "system_notice"
-    | "system_oss"
     | "system_oss-config"
+    | "system_oss"
     | "system_post"
     | "system_tenant"
     | "system_user"
@@ -194,7 +194,7 @@ declare module "@elegant-router/types" {
         component: `view.${K}`;
       }
     : never;
-
+  
   /**
    * the center level route
    */
@@ -217,7 +217,7 @@ declare module "@elegant-router/types" {
         children: (CenterLevelRoute<GetChildRouteKey<K>> | LastLevelRoute<GetChildRouteKey<K>>)[];
       }
     : never;
-
+  
   /**
    * the custom first level route
    */

src/utils/copy.ts

@@ -0,0 +1,26 @@
+import { useClipboard } from '@vueuse/core';
+
+const { copy, isSupported } = useClipboard();
+
+export async function handleCopy(source?: string) {
+  if (!isSupported) {
+    window.$message?.error('您的浏览器不支持 Clipboard API');
+    return;
+  }
+
+  if (!source) {
+    return;
+  }
+
+  if (navigator.clipboard && window.isSecureContext) {
+    await copy(source);
+  } else {
+    const range = document.createRange();
+    range.selectNode(document.getElementById('tokenDetailInput')!);
+    const selection = window.getSelection();
+    if (selection?.rangeCount) selection.removeAllRanges();
+    selection?.addRange(range);
+    document.execCommand('copy');
+  }
+  window.$message?.success('复制成功');
+}

src/views/system/oss-config/modules/oss-config-operate-drawer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, reactive, watch } from 'vue';
+import { ossAccessPolicyOptions, ossConfigIsHttpsOptions } from '@/constants/business';
 import { fetchCreateOssConfig, fetchUpdateOssConfig } from '@/service/api/system/oss-config';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import { $t } from '@/locales';
@@ -51,9 +52,9 @@ function createDefaultModel(): Model {
     prefix: '',
     endpoint: '',
     domain: '',
-    isHttps: '0',
+    isHttps: 'N',
     region: '',
-    accessPolicy: '0',
+    accessPolicy: '1',
     remark: ''
   };
 }
@@ -73,12 +74,6 @@ const rules: Record<RuleKey, App.Global.FormRule> = {
   accessPolicy: createRequiredRule('桶权限类型不能为空')
 };
 
-const accessPolicyOptions = ref<CommonType.Option[]>([
-  { label: '私有', value: '0' },
-  { label: '公有', value: '1' },
-  { label: '自定义', value: '2' }
-]);
-
 function handleUpdateModelWhenEdit() {
   if (props.operateType === 'add') {
     Object.assign(model, createDefaultModel());
@@ -183,7 +178,12 @@ watch(visible, () => {
         </NFormItem>
         <NFormItem label="访问站点" path="endpoint">
           <NInputGroup>
-            <NInputGroupLabel>http://</NInputGroupLabel>
+            <NSelect
+              v-model:value="model.isHttps"
+              class="w-110px"
+              :options="ossConfigIsHttpsOptions"
+              placeholder="请选择访问协议"
+            />
             <NInput v-model:value="model.endpoint" placeholder="请输入访问站点" />
           </NInputGroup>
         </NFormItem>
@@ -192,10 +192,10 @@ watch(visible, () => {
         </NFormItem>
         <NDivider>认证信息</NDivider>
         <NFormItem label="accessKey" path="accessKey">
-          <NInput v-model:value="model.accessKey" placeholder="请输入accessKey" />
+          <NInput v-model:value="model.accessKey" placeholder="请输入 AccessKey" />
         </NFormItem>
         <NFormItem label="secretKey" path="secretKey">
-          <NInput v-model:value="model.secretKey" placeholder="请输入秘钥secretKey" />
+          <NInput v-model:value="model.secretKey" placeholder="请输入秘钥 SecretKey" />
         </NFormItem>
         <NDivider>桶信息</NDivider>
         <NFormItem label="桶名称" path="bucketName">
@@ -205,17 +205,12 @@ watch(visible, () => {
           <NInput v-model:value="model.prefix" placeholder="请输入前缀" />
         </NFormItem>
         <NGrid :cols="2" :x-gap="24">
-          <NGridItem>
-            <NFormItem label="是否https" path="isHttps">
-              <DictRadio v-model:value="model.isHttps" dict-code="sys_yes_no" />
-            </NFormItem>
-          </NGridItem>
           <NGridItem>
             <NFormItem label="桶权限类型" path="accessPolicy">
               <NRadioGroup v-model:value="model.accessPolicy">
                 <NSpace>
                   <NRadio
-                    v-for="option in accessPolicyOptions"
+                    v-for="option in ossAccessPolicyOptions"
                     :key="option.value"
                     :value="option.value"
                     :label="option.label"

src/views/system/oss/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="tsx">
 import { onMounted, ref } from 'vue';
-import { NImage, NTag } from 'naive-ui';
+import { NButton, NEllipsis, NImage, NTag, NTooltip } from 'naive-ui';
 import { useBoolean, useLoading } from '@sa/hooks';
 import { fetchBatchDeleteOss, fetchGetOssList } from '@/service/api/system/oss';
 import { fetchGetConfigByKey, fetchUpdateConfigByKey } from '@/service/api/system/config';
@@ -10,6 +10,7 @@ import { useAuth } from '@/hooks/business/auth';
 import { useDownload } from '@/hooks/business/download';
 import { useRouterPush } from '@/hooks/common/router';
 import { isImage } from '@/utils/common';
+import { handleCopy } from '@/utils/copy';
 import { $t } from '@/locales';
 import ButtonIcon from '@/components/custom/button-icon.vue';
 import OssSearch from './modules/oss-search.vue';
@@ -71,19 +72,27 @@ const {
       key: 'fileName',
       title: '文件名',
       align: 'center',
+      ellipsis: {
+        tooltip: true,
+        lineClamp: 3
+      },
       minWidth: 120
     },
     {
       key: 'originalName',
       title: '原名',
       align: 'center',
+      ellipsis: {
+        tooltip: true,
+        lineClamp: 3
+      },
       minWidth: 120
     },
     {
       key: 'fileSuffix',
       title: '文件后缀名',
       align: 'center',
-      minWidth: 120
+      minWidth: 100
     },
     {
       key: 'url',
@@ -94,7 +103,20 @@ const {
         if (preview.value && isImage(row.fileSuffix)) {
           return <NImage class="h-40px w-40px object-contain" src={row.url} />;
         }
-        return <span>{row.url}</span>;
+        return (
+          <NTooltip>
+            {{
+              default: () => <span>点击复制</span>,
+              trigger: () => (
+                <div class="cursor-pointer" onClick={async () => await handleCopy(row.url)}>
+                  <NEllipsis line-clamp={3} tooltip={false}>
+                    {row.url}
+                  </NEllipsis>
+                </div>
+              )
+            }}
+          </NTooltip>
+        );
       }
     },
     {
@@ -113,7 +135,7 @@ const {
       key: 'service',
       title: '服务商',
       align: 'center',
-      minWidth: 120,
+      minWidth: 100,
       render: row => {
         return <NTag type="primary">{row.service}</NTag>;
       }