修复富文本

2025-12-08 14:54:23 +08:00
parent eba8a924a9
commit 38473ab30a
9 changed files with 136 additions and 113 deletions
--- a/public/login-bg.jpg
+++ b/public/login-bg.jpg
--- a/src/components/editor/index.vue
+++ b/src/components/editor/index.vue
@@ -102,6 +102,44 @@ export default defineComponent({
 			}
 		};

+		// 应用禁用状态（只保留表情）
+		const applyDisableState = () => {
+			if (!state.editorToolbar || !props.disableExceptEmotion) return;
+
+			nextTick(() => {
+				// 获取所有工具栏按钮容器
+				const toolbarItems = state.editorToolbar!.querySelectorAll('.w-e-bar-item');
+				toolbarItems.forEach((item: Element) => {
+					// 尝试找到按钮上的 tooltip
+					const button = item.querySelector('button');
+					let isEmotionButton = false;
+					
+					if (button) {
+						// 检查 data-tooltip (新版) 或 data-title (旧版)
+						const tooltip = button.getAttribute('data-tooltip') || button.getAttribute('data-title') || '';
+						// 也检查svg或者特定的class，如果有的话。通常表情按钮会有特定的icon
+						// 这里主要依靠 tooltip 文字匹配
+						if (tooltip.includes('表情') || tooltip.toLowerCase().includes('emotion')) {
+							isEmotionButton = true;
+						}
+					}
+					
+					// 也可以尝试检查 menu key，但这通常不在 DOM 上直接体现，除非自己加了属性
+					// 下面是一个补充策略：如果 item 内部有 emoji 的 svg 或者特定的结构
+					
+					if (!isEmotionButton) {
+						(item as HTMLElement).style.opacity = '0.4';
+						(item as HTMLElement).style.pointerEvents = 'none';
+						(item as HTMLElement).style.cursor = 'not-allowed';
+					} else {
+						(item as HTMLElement).style.opacity = '1';
+						(item as HTMLElement).style.pointerEvents = 'auto';
+						(item as HTMLElement).style.cursor = 'pointer';
+					}
+				});
+			});
+		};
+
 		// 初始化富文本
 		const initWangeditor = () => {
 			destroyEditor();
@@ -124,35 +162,11 @@ export default defineComponent({
 				});

 				state.isInitialized = true;
-
-				// 初始化后应用禁用状态
-				applyDisableState();
-			});
-		};
-
-		// 应用禁用状态
-		const applyDisableState = () => {
-			if (!state.editorToolbar || !props.disableExceptEmotion) return;
-
-			nextTick(() => {
-				const toolbarItems = state.editorToolbar!.querySelectorAll('.w-e-bar-item');
-				toolbarItems.forEach((item: Element) => {
-					const button = item.querySelector('button');
-					if (button) {
-						const dataTitle = button.getAttribute('data-title') || '';
-						const isEmotionButton = dataTitle.includes('表情') || dataTitle.toLowerCase().includes('emotion');
-
-						if (!isEmotionButton) {
-							(item as HTMLElement).style.opacity = '0.5';
-							(item as HTMLElement).style.pointerEvents = 'none';
-							(item as HTMLElement).style.cursor = 'not-allowed';
-						} else {
-							(item as HTMLElement).style.opacity = '1';
-							(item as HTMLElement).style.pointerEvents = 'auto';
-							(item as HTMLElement).style.cursor = 'pointer';
-						}
-					}
-				});
+				
+				// 如果开启了特殊禁用模式，应用样式
+				if (props.disableExceptEmotion) {
+					applyDisableState();
+				}
 			});
 		};

@@ -192,10 +206,11 @@ export default defineComponent({
 		// 监听禁用除表情外的状态变化
 		watch(
 			() => props.disableExceptEmotion,
-			(disabled) => {
-				if (state.editor && state.isInitialized) {
-					applyDisableState();
-				}
+			(val) => {
+				// 重新初始化或者直接应用样式
+				// 为了稳妥，重新初始化以确保工具栏状态正确
+				// 但也可以只调用 applyDisableState 如果只是切换禁用状态
+				initWangeditor();
 			}
 		);

@@ -211,39 +226,20 @@ export default defineComponent({
 	position: relative;
 }

-/* 禁用除表情外的所有工具栏按钮 */
-.disabled-editor :deep(.w-e-bar-item) {
-	opacity: 0.5;
-	cursor: not-allowed !important;
-	pointer-events: none !important;
+/* 仅在“只保留表情”模式下应用边框和样式修正 */
+.disabled-editor {
+	border: 1px solid #dcdfe6;
+	border-radius: 4px;
 }

-/* 允许表情按钮正常使用 */
-.disabled-editor :deep(.w-e-bar-item[data-title*='表情']),
-.disabled-editor :deep(.w-e-bar-item[data-title*='emotion']) {
-	opacity: 1 !important;
-	cursor: pointer !important;
-	pointer-events: auto !important;
+.disabled-editor :deep(.w-e-toolbar) {
+	border-bottom: 1px solid #dcdfe6;
+	background-color: #f5f7fa;
+	border-radius: 4px 4px 0 0;
 }

-/* 禁用编辑区域的所有操作（除了通过表情插入） */
 .disabled-editor :deep(.w-e-text-container) {
-	cursor: not-allowed;
-	user-select: text; /* 允许选择文本 */
-}
-
-/* 禁用所有菜单项，除了表情相关的 */
-.disabled-editor :deep(.w-e-menu-tooltip:not([data-title*='表情']):not([data-title*='emotion'])) {
-	opacity: 0.5 !important;
-	cursor: not-allowed !important;
-	pointer-events: none !important;
-}
-
-/* 允许表情菜单正常使用 */
-.disabled-editor :deep(.w-e-menu-tooltip[data-title*='表情']),
-.disabled-editor :deep(.w-e-menu-tooltip[data-title*='emotion']) {
-	opacity: 1 !important;
-	cursor: pointer !important;
-	pointer-events: auto !important;
+	border-radius: 0 0 4px 4px;
+	background-color: #fff;
 }
 </style>
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -149,19 +149,19 @@ const responseErrorHandler = (error: any) => {
 			handleTokenExpired();
 			break;
 		case 403:
-			ElMessage.error('没有权限访问该资源');
+			// ElMessage.error('没有权限访问该资源');
 			break;
 		case 404:
-			ElMessage.error('请求的资源不存在');
+			// ElMessage.error('请求的资源不存在');
 			break;
 		case 500:
-			ElMessage.error('服务器内部错误');
+			// ElMessage.error('服务器内部错误');
 			break;
 		case 502:
-			ElMessage.error('网关错误');
+			// ElMessage.error('网关错误');
 			break;
 		case 503:
-			ElMessage.error('服务不可用');
+			// ElMessage.error('服务不可用');
 			break;
 		default:
 			if (httpStatus >= 400) {
--- a/src/views/customerService/account/index.vue
+++ b/src/views/customerService/account/index.vue
@@ -286,7 +286,7 @@ const onOpenAddRole = () => {
 /**
 * 打开编辑客服对话框
 */
-const onOpenEditRole = (row: TableDataItem) => {
+const onOpenEditRole = (row: any) => {
 	editRoleRef.value?.openDialog(row);
 };

--- a/src/views/customerService/product/component/editRole.vue
+++ b/src/views/customerService/product/component/editRole.vue
@@ -81,7 +81,10 @@ const state = reactive<ComponentState>({

 // 表单验证规则
 const rules: FormRules = {
-	name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }, { max: 64, message: '产品名称长度最多 64 个字符', trigger: 'blur' }, 1],
+	name: [
+		{ required: true, message: '产品名称不能为空', trigger: 'blur' },
+		{ max: 64, message: '产品名称长度最多 64 个字符', trigger: 'blur' },
+	],
 	description: [
 		{ required: true, message: '产品详情不能为空', trigger: 'blur' },
 		{ max: 8126, message: '产品详情长度最多8126 个字符', trigger: 'blur' },
@@ -120,7 +123,7 @@ const openDialog = async (row?: ProductFormData) => {
 * 处理编辑模式的数据获取
 * @param id - 产品ID
 */
-const handleEditMode = async (row) => {
+const handleEditMode = async (row: ProductFormData) => {
 	try {
 		state.formData.id = row.id;
 		state.formData.description = row.description;
--- a/src/views/customerService/report/component/exportDialog.vue
+++ b/src/views/customerService/report/component/exportDialog.vue
@@ -1,22 +1,24 @@
 <template>
-	<el-dialog title="导出报表数据" v-model="isShowDialog" width="450px" align-center>
-		<div class="report-export-content">
-			<div class="export-icon">
-				<el-icon class="icon-download"><Download /></el-icon>
+	<div class="product-export-dialog">
+		<el-dialog title="导出数据报表" v-model="isShowDialog" width="450px" align-center>
+			<div class="export-content">
+				<div class="export-icon">
+					<el-icon class="icon-download"><Download /></el-icon>
+				</div>
+				<p class="export-text">确定要导出数据数据报表吗？</p>
+				<p class="export-tip">导出的文件将包含所有数据信息</p>
 			</div>
-			<p class="export-text">确定要导出报表数据吗？</p>
-			<p class="export-tip">导出的文件将包含所有报表信息</p>
-		</div>
-		<template #footer>
-			<div class="dialog-footer">
-				<el-button @click="isShowDialog = false">取消</el-button>
-				<el-button type="primary" @click="handleExport" :loading="loading">
-					<el-icon><Download /></el-icon>
-					导出
-				</el-button>
-			</div>
-		</template>
-	</el-dialog>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="isShowDialog = false">取消</el-button>
+					<el-button type="primary" @click="handleExport" :loading="loading">
+						<el-icon><Download /></el-icon>
+						导出
+					</el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
 </template>

 <script lang="ts" setup>
--- a/src/views/customerService/script/component/editRole.vue
+++ b/src/views/customerService/script/component/editRole.vue
@@ -11,7 +11,7 @@
 					<!-- 富文本编辑器 -->
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="话术" prop="content">
-							<Editor v-model="formData.content" height="400px" :key="editorKey" placeholder="请输入产品详情" />
+							<Editor v-model="formData.content" height="400px" :key="editorKey" placeholder="请输入产品详情" :disableExceptEmotion="true" />
 						</el-form-item>
 					</el-col>
 				</el-row>
--- a/src/views/login/component/account.vue
+++ b/src/views/login/component/account.vue
@@ -64,7 +64,7 @@ import { toRefs, reactive, defineComponent, computed, onMounted, getCurrentInsta
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import { useI18n } from 'vue-i18n';
-import Cookies from 'js-cookie';
+// import Cookies from 'js-cookie';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { initFrontEndControlRoutes } from '/@/router/frontEnd';
@@ -137,7 +137,7 @@ export default defineComponent({
 							// 设置按钮权限
 							Session.set('permissions', res.data.permissions);
 							// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
-							Cookies.set('username', state.ruleForm.username);
+							// Cookies.set('username', state.ruleForm.username);
 							if (!themeConfig.value.isRequestRoutes) {
 								// 前端控制路由，2、请注意执行顺序
 								await initFrontEndControlRoutes();
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -16,29 +16,41 @@
 			<!-- 右侧表单区域 -->
 			<div class="login-form-section">
 				<div class="form-wrapper">
-					<div class="form-header">
-						<h2>欢迎登录</h2>
-						<p>请输入您的账户信息</p>
+					<!-- 扫码/账号切换按钮 -->
+					<div class="scan-toggle" @click="state.isScan = !state.isScan">
+						<!-- 电脑图标 (切换回账号登录) -->
+						<svg v-if="state.isScan" viewBox="0 0 1024 1024" width="24" height="24" fill="currentColor">
+							<path d="M128 192h768v448H128V192z m0-64c-35.3 0-64 28.7-64 64v448c0 35.3 28.7 64 64 64h768c35.3 0 64-28.7 64-64V192c0-35.3-28.7-64-64-64H128z m256 640h256v64H384v-64z"></path>
+						</svg>
+						<!-- 二维码图标 (切换到扫码登录) -->
+						<svg v-else viewBox="0 0 1024 1024" width="24" height="24" fill="currentColor">
+							<path d="M64 64h384v384H64V64z m64 64v256h256V128H128zM576 64h384v384H576V64z m64 64v256h256V128H640zM64 576h384v384H64V576z m64 64v256h256V640H128zM576 576h128v128H576V576z m128 128h128v128H704V704z m-128 128h128v128H576V832z m256 0h128v128H832V832z m0-128h128v128H832V704z"></path>
+						</svg>
 					</div>

-					<div v-if="!isScan" class="form-content">
-						<el-tabs v-model="tabsActiveName" class="login-tabs">
-							<el-tab-pane :label="$t('message.label.one1')" name="account">
-								<Account />
-							</el-tab-pane>
-							<el-tab-pane :label="$t('message.label.two2')" name="mobile">
-								<Mobile />
-							</el-tab-pane>
-						</el-tabs>
+					<!-- 正常登录表单 -->
+					<div v-if="!state.isScan">
+						<div class="form-header">
+							<h2>欢迎登录</h2>
+							<p>请输入您的账户信息</p>
+						</div>
+
+						<div class="form-content">
+							<el-tabs v-model="state.tabsActiveName" class="login-tabs">
+								<el-tab-pane label="账号登录" name="account">
+									<Account />
+								</el-tab-pane>
+								<el-tab-pane label="手机号登录" name="mobile">
+									<Mobile />
+								</el-tab-pane>
+							</el-tabs>
+						</div>
 					</div>

-					<div v-if="isScan" class="form-content">
+					<!-- 扫码登录 -->
+					<div v-else class="scan-container">
 						<Scan />
 					</div>
-
-					<div class="scan-toggle" @click="isScan = !isScan" :title="isScan ? '切换为账户登录' : '切换为扫码登录'">
-						<i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
-					</div>
 				</div>
 			</div>
 		</div>
@@ -57,9 +69,9 @@ import { useThemeConfig } from '/@/stores/themeConfig';
 import logoMini from '/@/assets/logo-mini.svg';
 import loginIconTwo from '/@/assets/login-icon-two.svg';
 import { NextLoading } from '/@/utils/loading';
-import Account from '/@/views/login/component/account.vue';
-import Mobile from '/@/views/login/component/mobile.vue';
-import Scan from '/@/views/login/component/scan.vue';
+import Account from './component/account.vue';
+import Mobile from './component/mobile.vue';
+import Scan from './component/scan.vue';

 // 定义接口来定义对象的类型
 interface LoginState {
@@ -89,7 +101,7 @@ export default defineComponent({
 			logoMini,
 			loginIconTwo,
 			getThemeConfig,
-			...toRefs(state),
+			state,
 		};
 	},
 });
@@ -100,8 +112,18 @@ export default defineComponent({
 	width: 100%;
 	height: 100%;
 	position: relative;
-	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-	background-size: cover;
+	/* 替换原有图片背景，使用 CSS 品牌色融合背景 */
+	/* 基础深色背景 (抖音风格) */
+	background-color: #0f1014;
+	background-image: 
+		/* 右上：抖音青 */
+		radial-gradient(circle at 80% 20%, rgba(36, 246, 250, 0.25) 0%, transparent 35%),
+		/* 左上：小红书/抖音红 */
+		radial-gradient(circle at 20% 20%, rgba(254, 44, 85, 0.25) 0%, transparent 35%),
+		/* 左下：快手橙 */
+		radial-gradient(circle at 20% 80%, rgba(255, 80, 0, 0.25) 0%, transparent 35%),
+		/* 右下：小红书红 */
+		radial-gradient(circle at 80% 80%, rgba(255, 36, 66, 0.25) 0%, transparent 35%);
 	background-attachment: fixed;
 	display: flex;
 	flex-direction: column;