Skip to content

Commit

Permalink
支持通过环境变量自定义全局默认链接前缀；管理端支持自定义链接前缀；管理端部分页面展示效果优化；上传API支持返回完整链接；优化上传页面显示效果
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarSeventh
MarSeventh committed Dec 27, 2024
1 parent 6a151ad commit 4775192
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 63 deletions.
44 changes: 31 additions & 13 deletions src/components/UploadForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@
:file-list="fileList"
:show-file-list="false"
>
<el-icon class="el-icon--upload" :size="100">
<el-icon class="el-icon--upload" :class="{'upload-list-busy': fileList.length}">
<CameraFilled color="blanchedalmond"/>
</el-icon>
<div class="el-upload__text"><em>拖拽</em> <em>点击</em> 或 <em>Ctrl + V</em> 粘贴上传</div>
<div class="el-upload__text" :class="{'upload-list-busy': fileList.length}"><em>拖拽</em> <em>点击</em> 或 <em>Ctrl + V</em> 粘贴上传</div>
<template #tip>
<div class="el-upload__tip">支持多文件上传，支持所有常见文件格式，Telegram渠道不支持超过20MB</div>
</template>
Expand Down Expand Up @@ -176,6 +176,11 @@ props: {
type: Boolean,
default: true,
required: false
},
urlPrefix: {
type: String,
default: '',
required: false
}
},
data() {
Expand Down Expand Up @@ -215,12 +220,11 @@ watch: {
item.ubbURL = `[img]${this.customUrlPrefix + item.srcID}[/img]`
})
} else {
const rootUrl = `${window.location.protocol}//${window.location.host}/file/`
this.fileList.forEach(item => {
item.finalURL = rootUrl + item.srcID
item.mdURL = `![${item.name}](${rootUrl + item.srcID})`
item.htmlURL = `<img src="${rootUrl + item.srcID}" alt="${item.name}" width=100% />`
item.ubbURL = `[img]${rootUrl + item.srcID}[/img]`
item.finalURL = this.rootUrl + item.srcID
item.mdURL = `![${item.name}](${this.rootUrl + item.srcID})`
item.htmlURL = `<img src="${this.rootUrl + item.srcID}" alt="${item.name}" width=100% />`
item.ubbURL = `[img]${this.rootUrl + item.srcID}[/img]`
})
}
},
Expand Down Expand Up @@ -259,6 +263,10 @@ computed: {
},
disableTooltip() {
return window.innerWidth < 768
},
rootUrl() {
// 链接前缀，优先级：用户自定义 > urlPrefix > 默认
return this.useCustomUrl === 'true' ? this.customUrlPrefix : this.urlPrefix || `${window.location.protocol}//${window.location.host}/file/`
}
},
mounted() {
Expand Down Expand Up @@ -319,14 +327,13 @@ methods: {
},
handleSuccess(response, file) {
try {
const rootUrl = this.useCustomUrl === 'true'? this.customUrlPrefix : `${window.location.protocol}//${window.location.host}/file/`
// 从response.data[0].src中去除/file/前缀
const srcID = response.data[0].src.replace('/file/', '')
this.fileList.find(item => item.uid === file.uid).url = `${window.location.protocol}//${window.location.host}/file/` + srcID
this.fileList.find(item => item.uid === file.uid).finalURL = rootUrl + srcID
this.fileList.find(item => item.uid === file.uid).mdURL = `![${file.name}](${rootUrl + srcID})`
this.fileList.find(item => item.uid === file.uid).htmlURL = `<img src="${rootUrl + srcID}" alt="${file.name}" width=100% />`
this.fileList.find(item => item.uid === file.uid).ubbURL = `[img]${rootUrl + srcID}[/img]`
this.fileList.find(item => item.uid === file.uid).finalURL = this.rootUrl + srcID
this.fileList.find(item => item.uid === file.uid).mdURL = `![${file.name}](${this.rootUrl + srcID})`
this.fileList.find(item => item.uid === file.uid).htmlURL = `<img src="${this.rootUrl + srcID}" alt="${file.name}" width=100% />`
this.fileList.find(item => item.uid === file.uid).ubbURL = `[img]${this.rootUrl + srcID}[/img]`
this.fileList.find(item => item.uid === file.uid).srcID = srcID
this.fileList.find(item => item.uid === file.uid).progreess = 100
this.fileList.find(item => item.uid === file.uid).status = 'success'
Expand Down Expand Up @@ -819,7 +826,7 @@ methods: {
}
}
.upload-card-busy :deep(.el-upload-dragger) {
height: 25vh;
height: 17vh;
}
:deep(.el-upload-dragger) {
display: flex;
Expand Down Expand Up @@ -849,6 +856,17 @@ methods: {
font-weight: bold;
font-size: medium;
user-select: none;
transition: all 0.3s ease;
}
.el-upload__text.upload-list-busy {
font-size: small;
}
.el-icon--upload {
font-size: 100px;
transition: all 0.3s ease;
}
.el-icon--upload.upload-list-busy {
font-size: 50px;
}
.el-upload__tip {
font-size: medium;
Expand Down
10 changes: 9 additions & 1 deletion src/store/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@ export default createStore({
customUrlSettings: {
useCustomUrl: 'false',
customUrlPrefix: '',
}
},
adminUrlSettings: {
useCustomUrl: 'false',
customUrlPrefix: '',
},
},
getters: {
userConfig: state => state.userConfig,
Expand All @@ -31,6 +35,7 @@ export default createStore({
storeUploadNameType: state => state.storeUploadNameType,
customUrlSettings: state => state.customUrlSettings,
storeAutoRetry: state => state.storeAutoRetry,
adminUrlSettings: state => state.adminUrlSettings,
},
mutations: {
setUserConfig(state, userConfig) {
Expand Down Expand Up @@ -60,6 +65,9 @@ export default createStore({
setStoreAutoRetry(state, storeAutoRetry) {
state.storeAutoRetry = storeAutoRetry;
},
setAdminUrlSettings(state, { key, value }) {
state.adminUrlSettings[key] = value;
},
},
actions: {
async fetchUserConfig({ commit }) {
Expand Down
135 changes: 87 additions & 48 deletions src/views/AdminDashBoard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,21 +58,10 @@
</template>
</el-dropdown>
</el-tooltip>
<el-tooltip :disabled="disableTooltip" content="默认链接格式" placement="bottom">
<el-dropdown @command="handleDefaultUrlChange" :hide-on-click="false">
<span class="el-dropdown-link">
<font-awesome-icon icon="link" class="header-icon"></font-awesome-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="originUrl">原始链接</el-dropdown-item>
<el-dropdown-item command="mdUrl">Markdown</el-dropdown-item>
<el-dropdown-item command="htmlUrl">HTML</el-dropdown-item>
<el-dropdown-item command="bbUrl">BBCode</el-dropdown-item>
<el-dropdown-item command="tgId">TG文件ID</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-tooltip :disabled="disableTooltip" content="链接格式" placement="bottom">
<span class="el-dropdown-link">
<font-awesome-icon icon="link" class="header-icon" @click="showUrlDialog = true"></font-awesome-icon>
</span>
</el-tooltip>
<el-tooltip :disabled="disableTooltip" content="用户管理" placement="bottom">
<font-awesome-icon icon="user-cog" class="header-icon" @click="handleGoToAdmin"></font-awesome-icon>
Expand Down Expand Up @@ -126,7 +115,7 @@
</div>
</el-main>
</el-container>
<el-dialog title="文件详情" v-model="showdetailDialog" :width="dialogWidth" center>
<el-dialog title="文件详情" v-model="showdetailDialog" :width="dialogWidth">
<div class="detail-actions">
<el-button type="primary" @click="handleDownload(detailFile?.name)" round size="small" class="detail-action">
<font-awesome-icon icon="download" style="margin-right: 3px;"></font-awesome-icon> 下载
Expand Down Expand Up @@ -178,6 +167,34 @@
<el-descriptions-item label="审查结果" class-name="description-item">{{ detailFile?.metadata?.Label || '无' }}</el-descriptions-item>
</el-descriptions>
</el-dialog>
<el-dialog title="链接格式" v-model="showUrlDialog" :width="dialogWidth" :show-close="false">
<p style="font-size: medium; font-weight: bold">默认复制链接</p>
<el-radio-group v-model="defaultUrlFormat">
<el-radio label="originUrl">原始链接</el-radio>
<el-radio label="mdUrl">Markdown</el-radio>
<el-radio label="htmlUrl">HTML</el-radio>
<el-radio label="bbUrl">BBCode</el-radio>
<el-radio label="tgId">TG文件ID</el-radio>
</el-radio-group>
<p style="font-size: medium; font-weight: bold">自定义链接格式</p>
<el-form label-width="25%">
<el-form-item label="启用自定义">
<el-radio-group v-model="useCustomUrl">
<el-radio value="true">是</el-radio>
<el-radio value="false">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="自定义前缀" v-if="useCustomUrl === 'true'">
<el-input v-model="customUrlPrefix" placeholder="请输入自定义链接前缀"/>
</el-form-item>
<p style="text-align: left;font-size: small;">
<br/>*Tips: 默认链接为https://your.domain/file/xxx.jpg，如果启用自定义链接格式，只保留xxx.jpg部分，其他部分请自行输入
</p>
</el-form>
<div class="dialog-action">
<el-button type="primary" @click="showUrlDialog = false">确定</el-button>
</div>
</el-dialog>
</div>
</template>

Expand All @@ -201,10 +218,13 @@ data() {
detailFile: null,
activeUrlTab: 'originUrl',
defaultUrlFormat: 'originUrl',
showUrlDialog: false,
useCustomUrl: 'false', // 是否启用自定义链接
customUrlPrefix: '' // 自定义链接前缀
}
},
computed: {
...mapGetters(['credentials']),
...mapGetters(['credentials', 'adminUrlSettings', 'userConfig']),
filteredTableData() {
return this.tableData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()) || data.metadata?.FileName?.toLowerCase().includes(this.search.toLowerCase()));
},
Expand Down Expand Up @@ -240,10 +260,10 @@ computed: {
},
allUrl() {
return {
'originUrl': `${document.location.origin}/file/${this.detailFile?.name}`,
'mdUrl': `![${this.detailFile?.metadata?.FileName || this.detailFile?.name}](${document.location.origin}/file/${this.detailFile?.name})`,
'htmlUrl': `<img src="${document.location.origin}/file/${this.detailFile?.name}" alt="${this.detailFile?.metadata?.FileName || this.detailFile?.name}" width=100%>`,
'bbUrl': `[img]${document.location.origin}/file/${this.detailFile?.name}[/img]`,
'originUrl': `${this.rootUrl}${this.detailFile?.name}`,
'mdUrl': `![${this.detailFile?.metadata?.FileName || this.detailFile?.name}](${this.rootUrl}${this.detailFile?.name})`,
'htmlUrl': `<img src="${this.rootUrl}${this.detailFile?.name}" alt="${this.detailFile?.metadata?.FileName || this.detailFile?.name}" width=100%>`,
'bbUrl': `[img]${this.rootUrl}${this.detailFile?.name}[/img]`,
'tgId': this.detailFile?.metadata?.TgFileId || '未知'
}
},
Expand All @@ -262,6 +282,10 @@ computed: {
},
selectPageIcon() {
return this.selectPage ? 'check-square' : 'square';
},
rootUrl() {
// 链接前缀，优先级：用户自定义 > urlPrefix > 默认
return this.useCustomUrl === 'true' ? this.customUrlPrefix : this.userConfig?.urlPrefix || `${document.location.origin}/file/`
}
},
watch: {
Expand All @@ -284,7 +308,13 @@ watch: {
if (newVal) {
this.activeUrlTab = this.defaultUrlFormat || 'originUrl';
}
}
},
customUrlPrefix(val) {
this.$store.commit('setAdminUrlSettings', { key: 'customUrlPrefix', value: val })
},
useCustomUrl(val) {
this.$store.commit('setAdminUrlSettings', { key: 'useCustomUrl', value: val })
},
},
methods: {
refreshDashboard() {
Expand Down Expand Up @@ -471,16 +501,16 @@ methods: {
let tmpLinks = '';
switch (this.defaultUrlFormat) {
case 'originUrl':
tmpLinks = this.selectedFiles.map(file => `${document.location.origin}/file/${file.name}`).join('\n');
tmpLinks = this.selectedFiles.map(file => `${this.rootUrl}${file.name}`).join('\n');
break;
case 'mdUrl':
tmpLinks = this.selectedFiles.map(file => `![${file.metadata?.FileName || file.name}](${document.location.origin}/file/${file.name})`).join('\n');
tmpLinks = this.selectedFiles.map(file => `![${file.metadata?.FileName || file.name}](${this.rootUrl}${file.name})`).join('\n');
break;
case 'htmlUrl':
tmpLinks = this.selectedFiles.map(file => `<img src="${document.location.origin}/file/${file.name}" alt="${file.metadata?.FileName || file.name}" width=100%>`).join('\n');
tmpLinks = this.selectedFiles.map(file => `<img src="${this.rootUrl}${file.name}" alt="${file.metadata?.FileName || file.name}" width=100%>`).join('\n');
break;
case 'bbUrl':
tmpLinks = this.selectedFiles.map(file => `[img]${document.location.origin}/file/${file.name}[/img]`).join('\n');
tmpLinks = this.selectedFiles.map(file => `[img]${this.rootUrl}${file.name}[/img]`).join('\n');
break;
case 'tgId':
tmpLinks = this.selectedFiles.map(file => file.metadata?.TgFileId || 'none').join('\n');
Expand Down Expand Up @@ -509,7 +539,24 @@ methods: {
this.$router.push('/customerConfig');
},
handleCopy(index, key) {
const text = `${document.location.origin}/file/${key}`;
let text = '';
switch (this.defaultUrlFormat) {
case 'originUrl':
text = `${this.rootUrl}${key}`;
break;
case 'mdUrl':
text = `![${this.paginatedTableData[index].metadata?.FileName || key}](${this.rootUrl}${key})`;
break;
case 'htmlUrl':
text = `<img src="${this.rootUrl}${key}" alt="${this.paginatedTableData[index].metadata?.FileName || key}" width=100%>`;
break;
case 'bbUrl':
text = `[img]${this.rootUrl}${key}[/img]`;
break;
case 'tgId':
text = this.paginatedTableData[index].metadata?.TgFileId || 'none';
break;
}
navigator.clipboard ? navigator.clipboard.writeText(text).then(() => this.$message.success('复制文件链接成功~')) :
this.copyToClipboardFallback(text);
},
Expand Down Expand Up @@ -648,26 +695,6 @@ methods: {
link.download = 'files.zip';
link.click();
});
},
handleDefaultUrlChange(command) {
this.defaultUrlFormat = command;
switch (command) {
case 'originUrl':
this.$message.success('默认链接格式已切换为原始链接');
break;
case 'mdUrl':
this.$message.success('默认链接格式已切换为 Markdown');
break;
case 'htmlUrl':
this.$message.success('默认链接格式已切换为 HTML');
break;
case 'bbUrl':
this.$message.success('默认链接格式已切换为 BBCode');
break;
case 'tgId':
this.$message.success('默认链接格式已切换为 TG文件ID');
break;
}
}
},
mounted() {
Expand Down Expand Up @@ -703,7 +730,12 @@ mounted() {
this.$message.error('同步数据时出错，请检查网络连接');
}
});
}
// 读取自定义链接设置项
this.customUrlPrefix = this.adminUrlSettings.customUrlPrefix;
this.useCustomUrl = this.adminUrlSettings.useCustomUrl;
}
};
</script>
Expand All @@ -717,6 +749,13 @@ mounted() {
padding: 0;
}
:deep(.el-dialog) {
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
}
.header-content {
display: flex;
justify-content: space-between;
Expand Down
7 changes: 6 additions & 1 deletion src/views/UploadHome.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
:useCustomUrl="useCustomUrl"
:customUrlPrefix="customUrlPrefix"
:autoRetry="autoRetry"
:urlPrefix="urlPrefix"
class="upload"
/>
<el-dialog title="链接格式设置" v-model="showUrlDialog" :width="dialogWidth" :show-close="false">
Expand Down Expand Up @@ -167,7 +168,7 @@ export default {
uploadNameType: 'default', //上传文件命名方式
customUrlPrefix: '', //自定义链接前缀
useCustomUrl: 'false', //是否启用自定义链接格式
autoRetry: true //失败自动切换
autoRetry: true, //失败自动切换
}
},
watch: {
Expand Down Expand Up @@ -218,6 +219,10 @@ export default {
},
disableTooltip() {
return window.innerWidth < 768
},
urlPrefix() {
// 全局自定义链接前缀
return this.userConfig?.urlPrefix || `${window.location.protocol}//${window.location.host}/file/`
}
},
mounted() {
Expand Down

0 comments on commit 4775192

Please sign in to comment.