优化backend产品和解决方案

backend/src/views/apps/cms/solution/index/components/edit.vue

@@ -1,8 +1,9 @@
 <template>
-  <el-dialog
+  <el-drawer
     v-model="visible"
     :title="title"
-    width="600px"
+    size="65%"
+    class="cms-solution-drawer"
     destroy-on-close
     @close="handleClose"
   >
@@ -11,19 +12,25 @@
       :model="formData"
       :rules="formRules"
       label-width="100px"
+      class="solution-form"
     >
-      <el-form-item label="服务名称" prop="title">
-        <el-input v-model="formData.title" placeholder="请输入服务名称" />
+      <el-form-item label="方案名称" prop="title">
+        <el-input v-model="formData.title" placeholder="请输入解决方案名称" />
       </el-form-item>
-      <el-form-item label="服务描述" prop="desc">
+      <el-form-item label="方案描述" prop="desc">
         <el-input
           v-model="formData.desc"
           type="textarea"
-          :rows="5"
-          placeholder="请输入服务描述"
+          :rows="4"
+          placeholder="请输入解决方案描述"
         />
       </el-form-item>
-      <el-form-item label="Logo" prop="thumb">
+      <el-form-item label="方案内容" prop="content" class="content-form-item">
+        <div class="editor-container">
+          <UmoEditor v-model="formData.content" style="height: 450px;" />
+        </div>
+      </el-form-item>
+      <el-form-item label="方案图片" prop="thumb">
         <div class="flex-direction">
           <el-upload
             class="image-uploader"
@@ -42,7 +49,7 @@
             />
             <div v-else class="upload-placeholder">
               <el-icon class="image-uploader-icon"><Plus /></el-icon>
-              <div class="el-upload__text">点击上传服务图标</div>
+              <div class="el-upload__text">点击上传方案图片</div>
             </div>
           </el-upload>
           <div
@@ -63,7 +70,7 @@
           @click="handleRemoveImage"
           style="margin-top: 8px"
         >
-          删除图标
+          删除图片
         </el-button>
       </el-form-item>
       <el-form-item label="排序" prop="sort">
@@ -82,7 +89,7 @@
         </el-button>
       </span>
     </template>
-  </el-dialog>
+  </el-drawer>
 </template>
 
 <script setup>
@@ -101,7 +108,7 @@ const props = defineProps({
   },
   title: {
     type: String,
-    default: "添加服务",
+    default: "添加解决方案",
   },
   isEdit: {
     type: Boolean,
@@ -144,7 +151,7 @@ const beforeImageUpload = (file) => {
 // 图片上传成功
 const handleImageSuccess = (response) => {
   if (response.code === 200 || response.code === 201) {
-    formData.link_logo = response.data.url || response.data.path;
+    formData.thumb = response.data.url || response.data.path;
     ElMessage.success(
       response.code === 201 ? "文件已存在，直接使用" : "图片上传成功",
     );
@@ -160,7 +167,7 @@ const handleImageError = () => {
 
 // 删除图片
 const handleRemoveImage = () => {
-  formData.link_logo = "";
+  formData.thumb = "";
   ElMessage.success("图片已删除");
 };
 
@@ -174,6 +181,7 @@ const getImageUrl = (imagePath) => {
 const formData = reactive({
   title: "",
   desc: "",
+  content: "",
   thumb: "",
   url: "",
   sort: 0,
@@ -182,11 +190,11 @@ const formData = reactive({
 
 const formRules = {
   title: [
-    { required: true, message: "请输入服务名称", trigger: "blur" },
+    { required: true, message: "请输入解决方案名称", trigger: "blur" },
     { max: 100, message: "长度不超过100个字符", trigger: "blur" },
   ],
   desc: [
-    { required: true, message: "请输入服务描述", trigger: "blur" },
+    { required: true, message: "请输入解决方案描述", trigger: "blur" },
     { max: 200, message: "描述长度不超过200个字符", trigger: "blur" },
   ],
 };
@@ -214,6 +222,7 @@ watch(visible, (val) => {
 const resetForm = () => {
   formData.title = "";
   formData.desc = "";
+  formData.content = "";
   formData.thumb = "";
   formData.url = "";
   formData.sort = 0;
@@ -259,6 +268,30 @@ const handleSubmit = async () => {
 </script>
 
 <style scoped>
+:deep(.el-drawer__body) {
+  overflow-x: hidden;
+  padding: 20px;
+}
+
+.solution-form {
+  width: 100%;
+}
+
+:deep(.el-form-item__content) {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.editor-container {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  border: 1px solid var(--el-border-color, #dcdfe6);
+  border-radius: 4px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
 .dialog-footer {
   display: flex;
   justify-content: flex-end;