【需求 20331】feat: 完善prompt相关组件

src/api/case/types.ts

@@ -33,9 +33,9 @@ export interface CaseDetailDto {
   depIdList: number[]
   depNameList: string[]
   isSync: BooleanFlag
-  cultureKeywordMain: string
-  cultureKeywordSub: string[]
-  sceneKeywordMain: string
-  sceneKeywordSub: string[]
+  cultureKeywordMain: { id: string; title: string }[]
+  cultureKeywordSecond: { id: string; title: string }[]
+  sceneKeywordMain: { id: string; title: string }[]
+  sceneKeywordSecond: { id: string; title: string }[]
   isAudit: AuditStatusEnum
 }

src/components/common/ActionMore/index.vue

@@ -9,25 +9,24 @@
   </el-dropdown>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
 import { addComplaint } from '@/api'
 import type { ArticleItemDto } from '@/api/article/types'
 import { push } from 'notivue'
+import { useMessageBox } from '@/hooks'
 
+const { prompt } = useMessageBox()
 const { articleDetail } = defineProps<{
   articleDetail: ArticleItemDto
 }>()
 
 const handleMore = async (command: string) => {
   if (command === '举报') {
-    const { value } = await ElMessageBox.prompt('请输入举报原因', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      inputPattern: /^\S+$/,
-      inputPlaceholder: '请输入举报原因',
-      inputErrorMessage: '举报原因不能为空',
+    const reason = await prompt({
+      title: '请输入要举报原因',
+      type: 'warning',
     })
-    addComplaint({ articleId: articleDetail.id, reason: value })
+    addComplaint({ articleId: articleDetail.id, reason })
     push.success('举报成功')
   }
 }

src/components/common/Comment/index.vue

 <template>
   <div
     ref="commentRef"
-    class="bg-white backdrop-blur-sm rounded-lg shadow-sm border border-white/50 overflow-hidden"
+    class="bg-white rounded-lg shadow-sm border border-white/50 overflow-hidden"
   >
     <!-- 评论筛选 -->
     <div class="p-4 border-b border-gray-100">

src/hooks/useMessageBox.tsx

 import MessageBox from '@/components/common/MessageBox/index.vue'
 import type { MessageBoxProps } from '@/components/common/MessageBox/types'
+import type { FormInstance } from 'element-plus'
 import { render, effect } from 'vue'
 
 interface ConfirmProps extends MessageBoxProps {
   useLoading?: boolean // 是否用到loading
 }
+interface PromptProps extends MessageBoxProps {
+  inputPattern?: RegExp // 输入框的正则
+  inputErrorMessage?: string // 输入框的错误信息
+}
 
 export const useMessageBox = () => {
   const confirm = (props: ConfirmProps) => {
@@ -53,5 +58,71 @@ export const useMessageBox = () => {
     })
   }
 
-  return { confirm }
+  const prompt = <T extends string | number = string>(props: PromptProps): Promise<T> => {
+    return new Promise((resolve, reject) => {
+      const visible = ref(false)
+      const loading = ref(false)
+      const rules = {
+        inputValue: [
+          {
+            required: true,
+            message: '内容不能为空',
+            trigger: 'blur',
+          },
+          {
+            pattern: props.inputPattern,
+            message: props.inputErrorMessage ?? '请输入正确的内容',
+            trigger: 'blur',
+          },
+        ],
+      }
+
+      const validate = async () => {
+        await formRef.value?.validate()
+        return form.value.inputValue
+      }
+      const formRef = ref<FormInstance | null>(null)
+      const form = ref<{ inputValue: T }>({ inputValue: '' as T })
+
+      const messageFC = () => (
+        <div>
+          <el-form ref={formRef} rules={rules} model={form.value}>
+            <el-form-item prop="inputValue">
+              <el-input v-model={form.value.inputValue} />
+            </el-form-item>
+          </el-form>
+        </div>
+      )
+
+      const onConfirm = (val: T) => {
+        resolve(val)
+      }
+      const onCancel = () => {
+        reject(false)
+      }
+      const onClose = () => {
+        reject(false)
+      }
+
+      effect(() => {
+        render(
+          <MessageBox
+            {...props}
+            v-model={visible.value}
+            validate={validate}
+            message={messageFC}
+            loading={loading.value}
+            onConfirm={(res: string | number | undefined) => onConfirm(res as T)}
+            onCancel={onCancel}
+            onClose={onClose}
+          />,
+          document.body,
+        )
+      })
+
+      visible.value = true
+    })
+  }
+
+  return { confirm, prompt }
 }

src/views/auditArticle/index.vue

@@ -32,6 +32,9 @@ import { getArticleDetail, auditArticle } from '@/api'
 import { AuditStatusEnum } from '@/constants/enums'
 import type { AuditArticleDto } from '@/api'
 import { push } from 'notivue'
+import { useMessageBox } from '@/hooks'
+
+const { prompt } = useMessageBox()
 const route = useRoute()
 const router = useRouter()
 const id = route.params.id as string
@@ -45,14 +48,12 @@ const handleAudit = async (auditStatus: AuditStatusEnum) => {
     auditResult: auditStatus,
   }
   if (auditStatus === AuditStatusEnum.REJECTED) {
-    const { value } = await ElMessageBox.prompt('请输入拒绝理由', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      inputPattern: /^\S+$/,
-      inputErrorMessage: '请输入拒绝理由',
+    const reason = await prompt({
+      type: 'warning',
+      title: '请输入拒绝理由',
     })
 
-    auditData.auditRemark = value
+    auditData.auditRemark = reason
   }
   await auditArticle(auditData)
   push.success('审核成功')

src/views/backend/contentsMenu/columnManage/index.vue

@@ -9,6 +9,9 @@ import dayjs from 'dayjs'
 import { ArticleTypeEnum, BooleanFlag } from '@/constants'
 import type { ArticleItemDto } from '@/api/article/types'
 import { push } from 'notivue'
+import { useMessageBox } from '@/hooks'
+
+const { prompt } = useMessageBox()
 const { loading, list, total, reset, goToPage, changePageSize, refresh, searchParams, search } =
   usePageSearch(getArticleList, {
     defaultParams: {
@@ -50,10 +53,9 @@ const handleIsRecommendChange = async (val: BooleanFlag, row: ArticleItemDto) =>
 
 // 编辑排序
 const handleEditSort = async (row: ArticleItemDto) => {
-  const { value } = await ElMessageBox.prompt('请输入排序值', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    // 数字
+  const value = await prompt({
+    title: '请输入排序值',
+    type: 'primary',
     inputPattern: /^\d+$/,
     inputErrorMessage: '请输入数字',
   })

src/views/backend/contentsMenu/interviewManage/index.vue

@@ -9,6 +9,9 @@ import dayjs from 'dayjs'
 import { ArticleTypeEnum, BooleanFlag } from '@/constants'
 import type { ArticleItemDto } from '@/api/article/types'
 import { push } from 'notivue'
+import { useMessageBox } from '@/hooks'
+
+const { prompt } = useMessageBox()
 const { loading, list, total, reset, goToPage, changePageSize, refresh, searchParams, search } =
   usePageSearch(getArticleList, {
     defaultParams: {
@@ -50,13 +53,13 @@ const handleIsRecommendChange = async (val: BooleanFlag, row: ArticleItemDto) =>
 
 // 编辑排序
 const handleEditSort = async (row: ArticleItemDto) => {
-  const { value } = await ElMessageBox.prompt('请输入排序值', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    // 数字
+  const value = await prompt({
+    title: '请输入排序值',
+    type: 'primary',
     inputPattern: /^\d+$/,
     inputErrorMessage: '请输入数字',
   })
+
   await updateArticleRecommendAndSort({
     articleId: row.id,
     recommendSort: Number(value),

src/views/backend/contentsMenu/questionManage/index.vue

@@ -9,6 +9,9 @@ import dayjs from 'dayjs'
 import { ArticleTypeEnum, BooleanFlag } from '@/constants'
 import type { ArticleItemDto } from '@/api/article/types'
 import { push } from 'notivue'
+import { useMessageBox } from '@/hooks'
+
+const { prompt } = useMessageBox()
 const { loading, list, total, reset, goToPage, changePageSize, refresh, searchParams, search } =
   usePageSearch(getArticleList, {
     defaultParams: {
@@ -50,10 +53,9 @@ const handleIsRecommendChange = async (val: BooleanFlag, row: ArticleItemDto) =>
 
 // 编辑排序
 const handleEditSort = async (row: ArticleItemDto) => {
-  const { value } = await ElMessageBox.prompt('请输入排序值', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    // 数字
+  const value = await prompt({
+    title: '请输入排序值',
+    type: 'primary',
     inputPattern: /^\d+$/,
     inputErrorMessage: '请输入数字',
   })

src/views/backend/contentsMenu/videoManage/index.vue

@@ -9,6 +9,9 @@ import dayjs from 'dayjs'
 import { ArticleTypeEnum, BooleanFlag } from '@/constants'
 import type { ArticleItemDto } from '@/api/article/types'
 import { push } from 'notivue'
+import { useMessageBox } from '@/hooks'
+const { prompt } = useMessageBox()
+
 const { loading, list, total, reset, goToPage, changePageSize, refresh, searchParams, search } =
   usePageSearch(getArticleList, {
     defaultParams: {
@@ -50,10 +53,9 @@ const handleIsRecommendChange = async (val: BooleanFlag, row: ArticleItemDto) =>
 
 // 编辑排序
 const handleEditSort = async (row: ArticleItemDto) => {
-  const { value } = await ElMessageBox.prompt('请输入排序值', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    // 数字
+  const value = await prompt({
+    title: '请输入排序值',
+    type: 'primary',
     inputPattern: /^\d+$/,
     inputErrorMessage: '请输入数字',
   })

src/views/backend/goodsDistribution/index.vue

@@ -177,7 +177,7 @@ import type { ExportColumn } from '@/utils'
 import { push } from 'notivue'
 import { useMessageBox } from '@/hooks'
 
-const { confirm } = useMessageBox()
+const { confirm, prompt } = useMessageBox()
 const { loading, list, total, reset, goToPage, changePageSize, refresh, searchParams, search } =
   usePageSearch(getBackendExchangeList, {
     defaultParams: {},
@@ -286,13 +286,13 @@ const handleCancelIssue = async (row: BackendColumnListItemDto) => {
 // 发放
 const handleIssue = async (row: BackendColumnListItemDto) => {
   // 弹出message输入框 填写发放备注
-  const memo = await ElMessageBox.prompt('请输入发放备注', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
+  const memo = await prompt({
+    title: '请输入发放备注',
+    type: 'primary',
   })
   await issueProduct({
     id: row.id,
-    memo: memo.value,
+    memo,
     status: 1,
   })
   push.success('发放成功')

src/views/userPage/components/SelfComplaint.vue

@@ -128,6 +128,9 @@ import type { AuditComplaintDto } from '@/api'
 import type { TabPaneName } from 'element-plus'
 import { useNavigation } from '@/hooks'
 import { push } from 'notivue'
+import { useMessageBox } from '@/hooks'
+
+const { prompt } = useMessageBox()
 const toggleTab = (key: TabPaneName) => {
   searchParams.value.status = key as AuditStatusEnum
   refresh()
@@ -145,14 +148,12 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
 const { jumpToArticleDetailPage } = useNavigation()
 const handleAudit = async (data: AuditComplaintDto) => {
   if (data.status === AuditStatusEnum.REJECTED) {
-    const { value } = await ElMessageBox.prompt('请输入拒绝理由', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      inputPattern: /^\S+$/,
-      inputErrorMessage: '请输入拒绝理由',
+    const reason = await prompt({
+      title: '请输入拒绝理由',
+      type: 'warning',
     })
 
-    data.remark = value
+    data.remark = reason
   }
 
   await auditComplaint(data)

src/views/userPage/components/selfAudit.vue

@@ -139,7 +139,9 @@ import type { AuditArticleDto } from '@/api'
 import type { TabPaneName } from 'element-plus'
 import dayjs from 'dayjs'
 import { push } from 'notivue'
+import { useMessageBox } from '@/hooks'
 
+const { prompt } = useMessageBox()
 const router = useRouter()
 const { jumpToArticleDetailPage } = useNavigation()
 const toggleTab = (key: TabPaneName) => {
@@ -177,14 +179,14 @@ const { list, loading, searchParams, total, refresh, goToPage, changePageSize }
 
 const handleAudit = async (data: AuditArticleDto) => {
   if (data.auditResult === AuditStatusEnum.REJECTED) {
-    const { value } = await ElMessageBox.prompt('请输入拒绝理由', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
+    const reason = await prompt({
+      title: '请输入拒绝理由',
+      type: 'warning',
       inputPattern: /^\S+$/,
       inputErrorMessage: '请输入拒绝理由',
     })
 
-    data.auditRemark = value
+    data.auditRemark = reason
   }
 
   await auditArticle(data)

src/views/userPage/components/selfCase.vue

@@ -153,13 +153,12 @@ const showDelBtn = (item: SelfCaseItemDto) => {
 const handleView = async (item: SelfCaseItemDto) => {
   // 根据 id获取详情数据
   const { data } = await getCaseDetail(item.id)
-  console.log(data)
   // 打开弹窗 查看详情
   const formData = {
     title: data.title,
     content: data.content,
-    keywords: [data.cultureKeywordMain, ...(data.cultureKeywordSub || [])].filter(Boolean),
-    scenes: [data.sceneKeywordMain, ...(data.sceneKeywordSub || [])].filter(Boolean),
+    keywords: [...data.cultureKeywordMain, ...data.cultureKeywordSecond],
+    scenes: [...data.sceneKeywordMain, ...data.sceneKeywordSecond],
     departments: data.depNameList.filter(Boolean),
     syncPublish: data.isSync ? '是' : '否',
   }
@@ -195,9 +194,9 @@ const handleView = async (item: SelfCaseItemDto) => {
             文化关键词
           </div>
           <div class="flex flex-wrap gap-2">
-            {formData.keywords.map((keyword, index) => (
+            {formData.keywords.map((item, index) => (
               <span key={index} class="px-3 py-1.5 bg-blue-50 text-blue-600 rounded-md text-13px">
-                {keyword}
+                {item.title}
               </span>
             ))}
           </div>
@@ -208,9 +207,9 @@ const handleView = async (item: SelfCaseItemDto) => {
           <div class="text-13px text-gray-500 mb-2">关联场景</div>
           {formData.scenes.length > 0 ? (
             <div class="flex flex-wrap gap-2">
-              {formData.scenes.map((scene, index) => (
+              {formData.scenes.map((item, index) => (
                 <span key={index} class="px-3 py-1.5 bg-blue-50 text-blue-600 rounded-md text-13px">
-                  {scene}
+                  {item.title}
                 </span>
               ))}
             </div>