From 1b9d58f222e014b2edc29976e73dd66c0230b804 Mon Sep 17 00:00:00 2001
From: Double-_-Z <2492419643@qq.com>
Date: Thu, 5 Dec 2024 16:21:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E7=AB=A0=E7=AE=A1=E7=90=86-=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E5=A4=8D=E5=88=B6=E5=92=8C=E9=A2=84=E8=A7=88=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/editor/index.vue |  7 ++++-
 src/i18n/lang/en.ts             |  1 +
 src/i18n/lang/zh-cn.ts          |  1 +
 src/i18n/lang/zh-tw.ts          |  1 +
 src/router/index.ts             | 10 ++++++-
 src/router/route.ts             | 10 ++++++-
 src/views/article/content.vue   | 51 +++++++++++++++++++++++++++++++++
 src/views/article/index.vue     | 27 +++++++++++++++++
 8 files changed, 105 insertions(+), 3 deletions(-)
 create mode 100644 src/views/article/content.vue

diff --git a/src/components/editor/index.vue b/src/components/editor/index.vue
index ca99c44..b927cd2 100644
--- a/src/components/editor/index.vue
+++ b/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()
diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts
index 11eeee2..8343a03 100644
--- a/src/i18n/lang/en.ts
+++ b/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',
diff --git a/src/i18n/lang/zh-cn.ts b/src/i18n/lang/zh-cn.ts
index 9e6a65a..3a94bc6 100644
--- a/src/i18n/lang/zh-cn.ts
+++ b/src/i18n/lang/zh-cn.ts
@@ -16,6 +16,7 @@ export default {
 		photos: '图片管理',
 		message: '留言管理',
 		order: '订单管理',
+		articleContent: '文章详情',
 		statistics: '统计分析',
 		articleDetail: '文章详情',
 		addArticle: '新增文章',
diff --git a/src/i18n/lang/zh-tw.ts b/src/i18n/lang/zh-tw.ts
index f933845..08f60b8 100644
--- a/src/i18n/lang/zh-tw.ts
+++ b/src/i18n/lang/zh-tw.ts
@@ -12,6 +12,7 @@ export default {
 		systemDic: '字典管理',
 		article: '文章管理',
 		message: '聯言管理',
+		articleContent: '文章詳情',
 		order: '訂單管理',
 		statistics: '統計分析',
 		articleDetail: '文章詳情',
diff --git a/src/router/index.ts b/src/router/index.ts
index a92deab..e74fe61 100644
--- a/src/router/index.ts
+++ b/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 {
diff --git a/src/router/route.ts b/src/router/route.ts
index 3448ffa..69dbe1e 100644
--- a/src/router/route.ts
+++ b/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',
+		},
+	}
 ];
diff --git a/src/views/article/content.vue b/src/views/article/content.vue
new file mode 100644
index 0000000..3a3febb
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/article/index.vue b/src/views/article/index.vue
index 6980ae1..d9f5727 100644
--- a/src/views/article/index.vue
+++ b/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('确定要删除该文章吗?', '提示', {