chore: 重构组件

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>;
       }