文章管理-新增复制和预览功能

src/components/editor/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="editor-container">
 		<Toolbar v-if="!props.disable" :editor="editorRef" :mode="mode" />
-		<div v-else class="replace">
+		<div v-else class="replace" v-if="disableShowFullscreen">
 			<el-icon class="full" size="25px" @click="openCurrenFullscreen">
 				<ele-FullScreen />
 			</el-icon>
@@ -49,6 +49,11 @@ const props = defineProps({
 		type: String,
 		default: () => '310px',
 	},
+	// 高度
+	disableShowFullscreen: {
+		type: Boolean,
+		default: true,
+	},
 	// 双向绑定，用于获取 editor.getHtml()
 	getHtml: String,
 	// 双向绑定，用于获取 editor.getText()

src/i18n/lang/en.ts

@@ -13,6 +13,7 @@ export default {
 		article: 'article',
 		message: 'message',
 		order: 'order',
+		articleContent: 'articleContent',
 		statistics: 'statistics',
 		articleDetail: 'articleDetail',
 		addArticle: 'addArticle',

src/i18n/lang/zh-cn.ts

@@ -16,6 +16,7 @@ export default {
 		photos: '图片管理',
 		message: '留言管理',
 		order: '订单管理',
+		articleContent: '文章详情',
 		statistics: '统计分析',
 		articleDetail: '文章详情',
 		addArticle: '新增文章',

src/i18n/lang/zh-tw.ts

@@ -12,6 +12,7 @@ export default {
 		systemDic: '字典管理',
 		article: '文章管理',
 		message: '聯言管理',
+		articleContent: '文章詳情',
 		order: '訂單管理',
 		statistics: '統計分析',
 		articleDetail: '文章詳情',

src/router/index.ts

@@ -56,6 +56,14 @@ export function formatFlatteningRoutes(arr: any) {
 	return arr;
 }
 
+/**
+ * 忽略登录的路由
+ */
+const ignoreRouter: Array<string> = [
+	'/login',
+	'/article/content'
+];
+
 /**
  * 一维数组处理成多级嵌套数组（只保留二级：也就是二级以上全部处理成只有二级，keep-alive 支持二级缓存）
  * @description isKeepAlive 处理 `name` 值，进行缓存。顶级关闭，全部不缓存
@@ -95,7 +103,7 @@ router.beforeEach(async (to, from, next) => {
 	NProgress.configure({ showSpinner: false });
 	if (to.meta.title) NProgress.start();
 	const token = Session.get('token');
-	if (to.path === '/login' && !token) {
+	if (ignoreRouter.includes(to.path) && !token) {
 		next();
 		NProgress.done();
 	} else {

src/router/route.ts

@@ -1587,7 +1587,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 				},
 			},
 		],
-	},
+	}
 ];
 
 /**
@@ -1650,4 +1650,12 @@ export const staticRoutes: Array<RouteRecordRaw> = [
 			title: 'message.router.visualizingLinkDemo2',
 		},
 	},
+	{
+		path: '/article/content',
+		name: 'articleContent',
+		component: () => import('/@/views/article/content.vue'),
+		meta: {
+			title: 'message.router.articleContent',
+		},
+	}
 ];

src/views/article/content.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="article-content">
+        <Editor placeholder="暂无内容~~" height="100vh" :disableShowFullscreen="false"
+        v-model:get-html="state.data.text" :disable="true" />
+    </div>
+</template>
+
+<script setup lang="ts" name="articleContent">
+import { defineAsyncComponent, onMounted, reactive } from 'vue';
+import { articleApi } from '/@/api/article';
+import { ElMessage } from 'element-plus';
+import { useRoute } from 'vue-router';
+import { NextLoading } from '../../utils/loading';
+
+// 获取路由
+const route = useRoute();
+
+// 引入 api 请求接口
+const artApi = articleApi();
+
+// 引入组件
+const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
+
+const state = reactive({
+	data: {
+		text: '',
+	},
+	loading: false,
+})
+
+// 获取文章详情-根据id
+const getArticleDetailById = async(id:number) => {
+	try {
+		state.loading = true;
+		let res = await artApi.getArticleDetail(id);
+		if(res?.success) {
+			state.data = res.data;
+		}
+	} catch (error) {
+		ElMessage.error('获取文章详情失败');
+	} finally {
+	    state.loading = false;
+	}
+}
+
+onMounted(() => {
+    getArticleDetailById(Number(route.query.id));
+    NextLoading.done();
+})
+
+</script>

src/views/article/index.vue

@@ -40,10 +40,16 @@
 						<el-tag type="error" v-else>否</el-tag>
 					</template>
 				</el-table-column>
+				<el-table-column prop="htmlPath" label="链接" min-width="80">
+					<template #default="scope">
+						<el-button size="mini" style="border-radius: 10px;" @click="copyLink(scope.row)">复制</el-button>
+					</template>
+				</el-table-column>
 				<el-table-column prop="createtime" label="创建时间" :formatter="dateFormatter" show-overflow-tooltip></el-table-column>
 				<el-table-column label="操作" width="200">
 					<template #default="scope">
 						<el-button size="small" text type="primary" @click="toShowDetail(scope.row)">查看详情</el-button>
+						<el-button size="small" text type="primary" @click="toPreview(scope.row)">预览</el-button>
 						<el-button size="small" text type="primary" @click="toEditArticle(scope.row)">修改</el-button>
 						<el-button size="small" text type="primary" @click="deleteArticle(scope.row.id)">删除</el-button>
 					</template>
@@ -97,6 +103,9 @@ const moduleList = ref([]);
 // 标签列表
 const labelList = ref([]);
 
+// 基本路径
+const viteUrl = import.meta.env.VITE_API_URL;
+
 // 引入 api 请求接口
 const artApi = articleApi();
 
@@ -171,11 +180,29 @@ const toEditArticle = (row: any) => {
 	router.push({ path: '/article/edit', query: { id:row.id, moduleName: row.moduleName, labelName: row.labelName } });
 }
 
+// 复制链接
+const copyLink = (row: any) => {
+	if(row.id == null||row.id == ''){ ElMessage.warning('链接为空');return;}
+      var aux = document.createElement("input"); 
+      aux.setAttribute("value", `${viteUrl}#article/content?id=${row.id}`); 
+      document.body.appendChild(aux); 
+      aux.select();
+      document.execCommand("copy"); 
+      document.body.removeChild(aux);
+	  ElMessage.success('复制成功');
+	  aux.remove();
+}
+
 // 文章详情
 const toShowDetail = (row: any) => {
     router.push({ path: '/article/detail' , query: { id:row.id, moduleName: row.moduleName, labelName: row.labelName } });
 }
 
+// 预览
+const toPreview = (row: any) => {
+	window.open(`${viteUrl}#article/content?id=${row.id}`);
+}
+
 // 文章删除
 const deleteArticle = (id: number) => {
 	ElMessageBox.confirm('确定要删除该文章吗?', '提示', {