xz/pediatrics-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dsedwe

Browse Source
This commit is contained in:
左哥 2025-06-16 23:53:04 +08:00
parent 60f4bc5913
commit 8603acf35e
7 changed files with 147 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -3,3 +3,5 @@ NODE_ENV = 'development'
VITE_APP_BASE_API = 'https://ddbs.1024tool.vip/'
VITE_SERVE = "https://ddbs.1024tool.vip/"
# VITE_SERVE = "http://192.168.210.29:18100/"
VITE_OSS_ACCESS_KEY_ID = "LTAI5tCpvXC17uuPwWvb5oRo"
VITE_OSS_ACCESS_KEY_SECRET = "44EqDghVI0UVF0rVaea7gwOsPkXZ1z"

2
.env.production
View File

@ -3,3 +3,5 @@ NODE_ENV = 'production'
VITE_APP_BASE_API = 'https://tools.1024tool.vip/'
VITE_SERVE = "https://tools.1024tool.vip/"
VITE_OSS_ACCESS_KEY_ID = "LTAI5tCpvXC17uuPwWvb5oRo"
VITE_OSS_ACCESS_KEY_SECRET = "44EqDghVI0UVF0rVaea7gwOsPkXZ1z"

1
package.json
View File

@ -20,6 +20,7 @@
"@element-plus/icons-vue": "2.1.0",
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "next",
"ali-oss": "^6.23.0",
"axios": "^1.4.0",
"default-passive-events": "^2.0.0",
"echarts": "^5.6.0",

19
src/api/upload.js Normal file
View File

@ -0,0 +1,19 @@
import request from '@/utils/request'
export const getCode = () =>{
return request({
url: 'admin/policy_token',
method: 'post',
})
}
export const uploadFile = (data) =>{
request({
url: 'https://image-fudan.oss-cn-beijing.aliyuncs.com',
method: 'get',
data
})
}

1
src/router/index.ts
View File

@ -99,7 +99,6 @@ const whiteList = ['/login']
router.beforeEach(async (to, from, next) => {
// Nprogress.start()
const token = GET_TOKEN()
console.log(token)
if (token) {
if (to.path === '/login') {
next('/index')

191
src/views/news/addNew.vue
View File

@ -26,11 +26,11 @@
<el-button type="primary" @click="handlePreviewArticle">预览</el-button>
</div>
</div>
</div>
</div>
<input type="file" @change="handleUpload" />
<el-dialog v-model="dialogPreview" title="文章预览" width="1000px">
<div class="dialog-preview" style="padding: 20px;">
<div class="preview-title">{{ newTitle }}</div>
@ -43,19 +43,21 @@
<el-button type="primary" @click="dialogPreview = false">关闭</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Loading } from '@element-plus/icons-vue'
import { onBeforeUnmount, onUnmounted , ref, reactive, shallowRef, onMounted, computed, getCurrentInstance, nextTick } from 'vue'
import { onBeforeUnmount, onUnmounted, ref, reactive, shallowRef, onMounted, computed, getCurrentInstance, nextTick } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { addNews, editNews } from '@/api/news'
import { getCode } from '@/api/upload'
import { useRoute, useRouter } from 'vue-router'
import { DomEditor } from '@wangeditor/editor'
import OSS from 'ali-oss'
const ossurl = 'https://image-fudan.oss-cn-beijing.aliyuncs.com'
@ -75,12 +77,9 @@ const mode = ref('default')
const valueText = ref('')
// 添加字数统计
const characterCount = ref(0)
const characterCount = ref(0)
const toolbarConfig = {
excludeKeys: [
'group-image',
'group-video',
]
}
@ -92,46 +91,87 @@ const editorConfig = {
editorConfig.MENU_CONF['uploadImage'] = {
// 上传图片的配置
server: import.meta.env.VITE_API_BASE_URL + '/api/upload', // 使用环境变量中的API基础URL
// 上传图片的最大体积限制，默认为 10M
maxFileSize: 5 * 1024 * 1024, // 5M
// 上传图片的类型限制
allowedFileTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
// 自定义上传参数
meta: {
token: localStorage.getItem('token') || ''
},
// 自定义添加 http 请求头
headers: {
Authorization: 'Bearer ' + (localStorage.getItem('token') || '')
},
// 上传之前触发
onBeforeUpload(file) {
console.log('准备上传图片', file)
return file // 返回file继续上传
},
// 上传成功触发
onSuccess(file, res) {
console.log('图片上传成功', file, res)
},
// 上传失败触发
onError(file, err, res) {
console.log('图片上传失败', file, err, res)
// 可以自定义错误提示
ElNotification.error('图片上传失败，请重试')
},
// server: '', // 使用环境变量中的API基础URL
// fieldName: 'your-custom-name',
// // 上传图片的最大体积限制，默认为 10M
// maxFileSize: 5 * 1024 * 1024, // 5M
// // 上传图片的类型限制
// allowedFileTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
// // 自定义上传参数
// meta: {
// token: localStorage.getItem('token') || ''
// },
// // 自定义添加 http 请求头
// headers: {
// Authorization: 'Bearer ' + (localStorage.getItem('token') || '')
// },
// // 上传之前触发
// onBeforeUpload(file) {
// console.log('准备上传图片', file)
// return file // 返回file继续上传
// },
// // 上传成功触发
// onSuccess(file, res) {
// console.log('图片上传成功', file, res)
// },
// // 上传失败触发
// onError(file, err, res) {
// console.log('图片上传失败', file, err, res)
// // 可以自定义错误提示
// ElNotification.error('图片上传失败，请重试')
// },
// 自定义插入图片
customInsert(res, insertFn) {
// res 即服务端的返回结果
if (res.code === 200 && res.data) {
// 从响应结果中获取图片URL
const url = res.data.url || res.data
// 调用插入图片的函数
insertFn(url)
} else {
ElNotification.error('图片插入失败')
// customInsert(res, insertFn) {
// console.log('自定义插入图片', res, insertFn)
// // res 即服务端的返回结果
// if (res.code === 200 && res.data) {
// // 从响应结果中获取图片URL
// const url = res.data.url || res.data
// // 调用插入图片的函数
// insertFn(url)
// } else {
// ElNotification.error('图片插入失败')
// }
// }
// 自定义上传
async customUpload(file, insertFn) {
try {
const formData = new FormData()
formData.append('file', file)
const code = await getCode()
const client = new OSS({
region: "oss-cn-beijing",
authorizationV4: true,
accessKeyId: import.meta.env.VITE_OSS_ACCESS_KEY_ID,
accessKeySecret: import.meta.env.VITE_OSS_ACCESS_KEY_SECRET,
stsToken: code.token,
bucket: "image-fudan",
});
// Generate unique filename with original extension
const fileExt = file.name.split('.').pop()
const fileName = `${Date.now()}-${Math.random().toString(36).substring(2)}.${fileExt}`
const options = {
meta: { temp: "demo" },
mime: file.type,
headers: { "Content-Type": file.type },
};
const result = await client.put(fileName, file, options);
console.log('Upload result:', result);
// Construct the full URL and call insertFn
const url = `${ossurl}/${fileName}`;
insertFn(url, file.name, url);
} catch (error) {
console.error('Upload failed:', error);
ElNotification.error('图片上传失败，请重试');
}
}
},
}
const handleUpload = (e) => {
console.log(e.target.files[0])
}
editorConfig.MENU_CONF['uploadVideo'] = {
@ -153,7 +193,7 @@ editorConfig.MENU_CONF['uploadVideo'] = {
const handleSaveArticle = () => {
if(route.query.id){
if (route.query.id) {
editNews({
title: newTitle.value,
content: valueHtml.value
@ -171,7 +211,7 @@ const handleSaveArticle = () => {
})
}
}
// 组件销毁时，也及时销毁编辑器
@ -184,7 +224,7 @@ onBeforeUnmount(() => {
const handleCreated = (editor) => {
editorRef.value = editor // 记录 editor 实例，重要！
if (route.query.id) {
editor.setHtml(sessionStorage.getItem('works'))
// valueHtml.value = sessionStorage.getItem('works')
@ -197,10 +237,10 @@ const handleCreated = (editor) => {
characterCount.value = valueText.value.length
})
// const toolbar = DomEditor.getToolbar(editor)
// const toolbar = DomEditor.getToolbar(editor)
// const curToolbarConfig = toolbar.getConfig()
// console.log(curToolbarConfig.toolbarKeys) // 当前菜单排序和分组
// const curToolbarConfig = toolbar.getConfig()
// console.log(curToolbarConfig.toolbarKeys) // 当前菜单排序和分组
}
@ -222,7 +262,7 @@ const handlePreviewArticle = () => {
onMounted(() => {
if(route.query.id){
if (route.query.id) {
newTitle.value = sessionStorage.getItem('title')
}
})
@ -258,16 +298,20 @@ app.appContext.app.directive('auto-resize', vAutoResize)
.container {
width: 100%;
height: 100%;
.toolbar-box{
.toolbar-box {
height: 80px;
}
:deep(.el-radio__label) {
white-space: normal;
}
.editor-box-content{
.editor-box-content {
padding: 0 16px;
height: calc(100% - 130px);
}
.title-input {
width: 100%;
height: 50px;
@ -288,10 +332,9 @@ app.appContext.app.directive('auto-resize', vAutoResize)
flex: 1;
position: relative;
.editor {
}
.editor {}
.editor-btn-box {
width: 100%;
@ -564,7 +607,8 @@ app.appContext.app.directive('auto-resize', vAutoResize)
padding: 0;
}
.drawer-content, .drawer-content2 {
.drawer-content,
.drawer-content2 {
padding: 20px;
padding-top: 0;
margin-top: 20px;
@ -635,7 +679,7 @@ app.appContext.app.directive('auto-resize', vAutoResize)
// margin-left: 35px;
height: auto;
min-height: 24px;
&::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
@ -691,14 +735,23 @@ app.appContext.app.directive('auto-resize', vAutoResize)
}
@keyframes loadingDots {
0% { opacity: 0.2; }
20% { opacity: 1; }
100% { opacity: 0.2; }
0% {
opacity: 0.2;
}
20% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
.article-preview {
padding: 10px;
height: 100%;
.article-preview-title {
font-size: 16px;
font-weight: 600;
@ -746,11 +799,12 @@ app.appContext.app.directive('auto-resize', vAutoResize)
background-color: var(--el-fill-color-blank);
border-radius: 6px;
padding: 15px;
// min-height: 100px;
// min-height: 100px;
// max-height: 200px;
overflow-y: auto;
height: 200px;
display: flex;
pre {
line-height: 18px;
white-space: pre-wrap;
@ -785,7 +839,8 @@ app.appContext.app.directive('auto-resize', vAutoResize)
// }
}
}
.drawer-footer{
.drawer-footer {
display: flex;
justify-content: space-between;
}

12
src/views/news/upload.js
View File

@ -1,12 +0,0 @@
export default uploadFile = (data) =>{
request({
url: 'https://image-fudan.oss-cn-beijing.aliyuncs.com',
method: 'get',
data
})
}