feat: 事件管理

2026-01-04 00:27:48 +08:00
parent 5dd68d8dc5
commit 4b46484cfe
7 changed files with 396 additions and 87 deletions
--- a/src/renderer/components/TitleSection/index.vue
+++ b/src/renderer/components/TitleSection/index.vue
@@ -1,15 +1,35 @@
+<!--
+ * @Author: kongbeiwu lishaohua-520@qq.com
+ * @Date: 2025-12-21 23:02:06
+ * @LastEditors: kongbeiwu lishaohua-520@qq.com
+ * @LastEditTime: 2025-12-30 01:19:20
+ * @FilePath: /project/zn-ai/src/renderer/components/TitleSection/index.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
-    <div class="box-border border-b-[1px] border-b-[#E5E8EE] mb-[20px] pb-[20px]">
-        <span class="text-[24px] font-500 text-[#171717] leading-[32px] mr-[8px]">
-            {{ title }}
-        </span>
-        <span class="text-[12px] font-400 text-[#99A0AE] leading-[16px]">
-            {{ desc }}
-        </span>
+    <div class="flex box-border border-b-[1px] border-b-[#E5E8EE] mb-[20px] pb-[20px]">
+        <div class="flex">
+            <div class="flex items-center">
+                <el-icon v-if="attrs.onBackTo" @click="emits('back-to', true)" size="18px" color="#525866" class="mr-[15px] cursor-pointer">
+                    <ArrowLeftBold />
+                </el-icon>
+                <span class="text-[24px] font-500 text-[#171717] leading-[32px] mr-[8px]">
+                    {{ title }}
+                </span>
+            </div>
+            <span class="text-[12px] font-400 text-[#99A0AE] leading-[16px]" style="align-self: flex-end;">
+                {{ desc }}
+            </span>
+        </div>
+        <div class="flex items-center">
+            <slot name="right"></slot>
+        </div>
    </div>
 </template>

 <script setup lang="ts">
+import { useAttrs, defineEmits } from 'vue';
+import { ArrowLeftBold } from '@element-plus/icons-vue';
 interface TitleSectionProps {
    title?: string
    desc?: string
@@ -19,4 +39,6 @@ withDefaults(
    defineProps<TitleSectionProps>(),
    { title: '', desc: '' }
 )
+const emits = defineEmits(["update:back-to"]);
+const attrs = useAttrs();
 </script>
--- a/src/renderer/views/knowledge/components/EventManager/UploadImage.vue
+++ b/src/renderer/views/knowledge/components/EventManager/UploadImage.vue
@@ -0,0 +1,145 @@
+<!--
+ * @Author: kongbeiwu lishaohua-520@qq.com
+ * @Date: 2025-12-30 12:08:51
+ * @LastEditors: kongbeiwu lishaohua-520@qq.com
+ * @LastEditTime: 2026-01-04 00:25:43
+ * @FilePath: /project/zn-ai/src/renderer/views/knowledge/components/EventManager/addDialog.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <el-dialog v-model="model" title="上传图片" :width="width" :before-close="handleClose" :close-on-click-modal="false"
+    :close-on-press-escape="false">
+    <div class="flex justify-center">
+      <div class="w-[500px] mt-[20px]">
+        <el-steps style="max-width: 500px" :active="activeIndex" simple finish-status="success">
+          <el-step title="上传图片 1" />
+          <el-step title="图片描述 2" />
+        </el-steps>
+      </div>
+    </div>
+    <div v-if="activeIndex === 0" class="m-[20px]">
+      <el-upload drag action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="text-[14px] text-[#171717]">
+          选择一个文件或将其拖放到此处
+        </div>
+        <div class="text-[12px] text-[#99A0AE]">
+          JPEG,PNG,PDF,和 MP4 格式最大不超过50MB。
+        </div>
+      </el-upload>
+    </div>
+    <div v-else-if="activeIndex === 1" class="p-[20px]">
+      <el-alert type="info" show-icon>
+        <div class="flex justify-between items-center">
+          <span class="flex-1">若暂时不想输入提示词可点击确认，到列表操作</span>
+        </div>
+        <template #icon>
+          <component :is="RiMagicFill" color="#717784" class="w-[20px] h-[20px]" />
+        </template>
+      </el-alert>
+      <div v-for="(item, index) in picList" :key="index"
+        class="rounded-[12px] border border-[#E5E8EE] p-[16px] mt-[16px] relative">
+        <div class="absolute right-[0px] top-[0px] w-[28px] h-[28px] text-center bg-[rgba(0,0,0,0.5)] cursor-pointer z-10" style="border-radius: 0px 8px 0 8px;" @click="picList.splice(index, 1)">
+          <component :is="RiDeleteBinLine" color="#FFFFFF" class="w-[12px] h-[12px] ml-[7px] mt-[7px]" />
+        </div>
+        <div class="flex">
+          <img src="@assets/images/task/xc.png" class="w-[120px] h-[120px] mr-[16px] rounded-[8px]" />
+          <el-input v-model="item.desc" maxlength="200" placeholder="请输入" show-word-limit word-limit-position="outside"
+            type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" class="rounded-[10px]" />
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="model = false">取消</el-button>
+        <el-button type="primary" @click="submitForm(ruleFormRef)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { UploadFilled } from '@element-plus/icons-vue';
+import { RiMagicFill, RiDeleteBinLine } from '@remixicon/vue';
+import { ElMessage } from 'element-plus'
+import { ref, defineModel } from 'vue';
+
+const model = defineModel({ type: Boolean, default: false })
+defineProps({
+  width: { type: String, default: '500' },
+  data: { type: Object, default: {} },
+})
+
+const activeIndex = ref(1);
+// const dialogVisible = ref(false);
+const handleClose = (done: () => void) => {
+  done();
+  model.value = false;
+  // dialogVisible.value = false;
+}
+
+const picList = ref([{ url: '', name: '', desc: '' }, { url: '', name: '', desc: '' }]);
+const submitForm = async () => {
+  if (picList.value.length > 0) {
+    upSuccess();
+  } else {
+    ElMessage({
+      message: '请先上传图片',
+      type: 'warning',
+    })
+    return;
+  }
+}
+// 上传成功
+const upSuccess = () => {
+  if (activeIndex.value === 1) {
+    activeIndex.value = 2;
+  } if (activeIndex.value === 2) {
+    model.value = false;
+    ElMessage({
+      message: '图片上传成功',
+      type: 'success',
+    })
+  }
+}
+</script>
+<style scoped>
+:deep(.el-steps--simple) {
+  background: transparent;
+}
+
+:deep(.el-step.is-simple .el-step__arrow:before) {
+  width: 2px;
+  background: #525866;
+}
+
+:deep(.el-step.is-simple .el-step__arrow:after) {
+  width: 2px;
+  background: #525866;
+}
+
+:deep(.el-step__icon.is-text) {
+  border-color: #2B7FFF;
+}
+:deep(.el-step__head.is-success) {
+  color: #1FC16B;
+}
+:deep(.el-step__head.is-success .el-step__icon.is-text) {
+  background: #1FC16B;
+}:deep(.el-step__head.is-success .el-step__icon.is-text) {
+  border-color: #1FC16B;
+  color: #ffffff;
+}
+:deep(.el-step__title.is-success) {
+  font-weight: 500;
+  font-size: 14px;
+  color: #525866;
+}
+
+:deep(.el-textarea .el-input__count.is-outside) {
+  top: auto;
+  bottom: 10px;
+  right: 15px;
+}
+</style>
--- a/src/renderer/views/knowledge/components/EventManager/addDialog.vue
+++ b/src/renderer/views/knowledge/components/EventManager/addDialog.vue
@@ -0,0 +1,89 @@
+<!--
+ * @Author: kongbeiwu lishaohua-520@qq.com
+ * @Date: 2025-12-30 12:08:51
+ * @LastEditors: kongbeiwu lishaohua-520@qq.com
+ * @LastEditTime: 2026-01-03 22:00:09
+ * @FilePath: /project/zn-ai/src/renderer/views/knowledge/components/EventManager/addDialog.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <el-dialog v-model="model" title="添加事件" width="500" :before-close="handleClose" :close-on-click-modal="false"
+    :close-on-press-escape="false">
+    <div class="p-[20px]">
+      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-position="top"
+        label-width="auto">
+        <el-form-item label="事件名称" prop="name">
+          <el-input v-model="ruleForm.name" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item label="事件描述" prop="des">
+          <el-input v-model="ruleForm.des" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item label="生效时间段" prop="time">
+          <el-date-picker type="daterange" v-model="ruleForm.time" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期">
+            <template #suffix>
+              <el-icon class="el-input__icon">
+                <calendar />
+              </el-icon>
+            </template>
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="model = false">取消</el-button>
+        <el-button type="primary" @click="submitForm(ruleFormRef)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import type { FormInstance } from 'element-plus';
+import { ref, reactive, defineModel } from 'vue';
+
+const model = defineModel({ type: Boolean, default: false })
+
+interface RuleForm {
+  name: string
+  des: string
+  time: string[]
+}
+const ruleFormRef = ref<any>();
+const rules = ref<any>({
+  name: [
+    { required: true, message: '请输入活动名称', trigger: 'blur' },
+    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' },
+  ],
+  des: [
+    { required: true, message: '请输入活动描述', trigger: 'blur' },
+    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' },
+  ],
+  time: [
+    { required: true, message: '请选择生效时间段', trigger: 'change' },
+  ],
+});
+const ruleForm = reactive<RuleForm>({
+  name: '',
+  des: '',
+  time: [],
+});
+// const dialogVisible = ref(false);
+const handleClose = (done: () => void) => {
+  done();
+  model.value = false;
+  // dialogVisible.value = false;
+}
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+</script>
--- a/src/renderer/views/knowledge/components/EventManager/index.vue
+++ b/src/renderer/views/knowledge/components/EventManager/index.vue
@@ -2,7 +2,7 @@
 * @Author: kongbeiwu lishaohua-520@qq.com
 * @Date: 2025-12-22 01:11:57
 * @LastEditors: kongbeiwu lishaohua-520@qq.com
- * @LastEditTime: 2025-12-29 13:20:57
+ * @LastEditTime: 2026-01-03 22:09:31
 * @FilePath: /project/zn-ai/src/renderer/views/knowledge/components/EventManagement/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -23,10 +23,10 @@
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template #default="scope">
-            <el-button link size="small" type="primary">
+            <el-button link size="small" type="primary" @click="emits('change', '查看图片', scope.row)">
              查看图片
            </el-button>
-            <el-button link size="small" type="primary">
+            <el-button link size="small" type="primary" @click="uploadImageChange(scope.row)">
              上传图片
            </el-button>
          </template>
@@ -35,44 +35,21 @@
    </div>
  </div>
  <!-- 添加事件弹窗 -->
-  <el-dialog v-model="dialogVisible" title="添加事件" width="500" :before-close="handleClose" :modal="false"
-    :close-on-click-modal="false" :close-on-press-escape="false">
-    <div class="p-[20px]">
-      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-position="top"
-        label-width="auto">
-        <el-form-item label="事件名称" prop="name">
-          <el-input v-model="ruleForm.name" placeholder="请输入" />
-        </el-form-item>
-        <el-form-item label="事件描述" prop="des">
-          <el-input v-model="ruleForm.des" placeholder="请输入" />
-        </el-form-item>
-        <el-form-item label="生效时间段" prop="time">
-          <el-date-picker type="daterange" v-model="ruleForm.time" range-separator="至" start-placeholder="开始日期"
-            end-placeholder="结束日期">
-            <template #suffix>
-              <el-icon class="el-input__icon">
-                <calendar />
-              </el-icon>
-            </template>
-          </el-date-picker>
-        </el-form-item>
-      </el-form>
-    </div>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitForm(ruleFormRef)">
-          确认
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
+  <AddDialog v-model="dialogVisible" />
+  <!-- 上传图片弹窗 -->
+  <UploadImage v-model="dialogVisibleUploadImage" width="80%" />
 </template>

 <script setup lang="ts">
 import { ref, reactive } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
-import type { FormInstance } from 'element-plus'
+import AddDialog from './addDialog.vue';
+import UploadImage from './UploadImage.vue';
+
+const emits = defineEmits(["update:change"]);
+
+const dialogVisible = ref(false);
+
 type TableData = {
  address: string
  date: string
@@ -94,45 +71,10 @@ const tableData: TableData[] = [
  },
 ];

-
-interface RuleForm {
-  name: string
-  des: string
-  time: string[]
-}
-const ruleFormRef = ref<any>();
-const rules = ref<any>({
-  name: [
-    { required: true, message: '请输入活动名称', trigger: 'blur' },
-    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' },
-  ],
-  des: [
-    { required: true, message: '请输入活动描述', trigger: 'blur' },
-    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' },
-  ],
-  time: [
-    { required: true, message: '请选择生效时间段', trigger: 'change' },
-  ],
-});
-const ruleForm = reactive<RuleForm>({
-  name: '',
-  des: '',
-  time: [],
-});
-const dialogVisible = ref(false);
-const handleClose = (done: () => void) => {
-  done();
-  // dialogVisible.value = false;
-}
-const submitForm = async (formEl: FormInstance | undefined) => {
-  if (!formEl) return
-  await formEl.validate((valid, fields) => {
-    if (valid) {
-      console.log('submit!')
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
+// 上传图片弹窗
+const dialogVisibleUploadImage = ref(false);
+const uploadImageChange = (row) => {
+  dialogVisibleUploadImage.value = true;  
 }
 </script>

--- a/src/renderer/views/knowledge/components/EventPic/index.vue
+++ b/src/renderer/views/knowledge/components/EventPic/index.vue
@@ -0,0 +1,90 @@
+<!--
+ * @Author: kongbeiwu lishaohua-520@qq.com
+ * @Date: 2025-12-29 13:45:28
+ * @LastEditors: kongbeiwu lishaohua-520@qq.com
+ * @LastEditTime: 2025-12-30 11:58:46
+ * @FilePath: /project/zn-ai/src/renderer/views/knowledge/page.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="bg-white box-border w-full h-full p-[20px]">
+    <TitleSection @back-to="handleBack" :title="data.date" :desc="data.name" />
+    <div class="flex flex-wrap items-center">
+      <div v-for="item in 10" class="rounded-[12px] border border-[#E5E8EE] event-pic-item">
+        <img src="@assets/images/task/xc.png" />
+        <div class="p-[16px]">
+          <div class="flex items-center mb-[8px]">
+            <span>01.png</span>
+            <el-tooltip placement="top">
+              <template #content>
+                <div class="flex">
+                  <span>https://image.baidu.com/search/index</span>
+                  <el-button :icon="DocumentCopy" size="small" text class="ml-[3px] bg-[#000]" @click="copyText('https://image.baidu.com/search/index')" />
+                </div>
+              </template>
+              <component :is="RiInformationLine" color="#99A0AE" class="w-[15px] ml-[11px] cursor-pointer" />
+            </el-tooltip>
+          </div>
+          <div class="h-[55px] text-[12px] text-[#99A0AE] mb-[12px] line-clamp-3">
+            这是一只靓仔河马，拍照这是一只亲子青蛙主题很合适特别适合亲子主题这是一只靓仔河马，拍照这是一只亲子青蛙主题很合适特别适合亲子主题
+          </div>
+          <div class="flex items-center justify-between">
+            <div class="text-[12px] text-[#99A0AE]">2025-12-15 10:45</div>
+            <div class="flex items-center">
+              <component :is="RiEditLine" color="#99A0AE" class="w-[12px] mr-[12px] cursor-pointer" />
+              <component :is="RiDeleteBinLine" color="#99A0AE" class="w-[12px] cursor-pointer" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import { DocumentCopy } from '@element-plus/icons-vue';
+import { RiInformationLine, RiEditLine, RiDeleteBinLine } from '@remixicon/vue';
+import TitleSection from '@renderer/components/TitleSection/index.vue';
+
+interface Props {
+  data: object;
+}
+const props = defineProps<Props>();
+
+const emits = defineEmits(["update:change"]);
+
+// 复制文本
+const copyText = async (text) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    ElMessage({
+      message: '复制成功',
+      type: 'success',
+    });
+  } catch (err) {
+    ElMessage({
+      message: '复制失败',
+      type: 'warning',
+    });
+  }
+};
+
+// 返回上一页
+const handleBack = (val) => {
+  emits("change", '返回事件管理');
+};
+
+</script>
+<style scoped>
+.event-pic-item {
+  width: calc((100% - 48px) / 4);
+  margin-right: 16px;
+  margin-bottom: 16px;
+}
+
+.event-pic-item:nth-child(4n) {
+  margin-right: 0;
+}
+</style>
--- a/src/renderer/views/knowledge/index.vue
+++ b/src/renderer/views/knowledge/index.vue
@@ -2,16 +2,31 @@
 * @Author: kongbeiwu lishaohua-520@qq.com
 * @Date: 2025-12-28 16:08:45
 * @LastEditors: kongbeiwu lishaohua-520@qq.com
- * @LastEditTime: 2025-12-29 13:48:26
+ * @LastEditTime: 2025-12-30 12:03:50
 * @FilePath: /project/zn-ai/src/renderer/views/knowledge/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-  <knowledgePage />
+  <component :is="componentData" @change="handleClick" :data="commData"></component>
+  <!-- <knowledgePage /> -->
 </template>

 <script setup lang="ts" name="Knowledge">
+import { ref } from 'vue';
 import knowledgePage from './page.vue';
+import EventPicList from './components/EventPic/index.vue';
+const componentData = ref(knowledgePage);
+
+const commData = ref(null);
+const handleClick = (type: string, val: any) => {
+  console.log(type, val, 11111111);
+  commData.value = val;
+  if (type === '查看图片') {
+    componentData.value = EventPicList;
+  } else {
+    componentData.value = knowledgePage;
+  }
+};
 </script>
 <style scoped>
 :deep(.el-tabs__item) {
--- a/src/renderer/views/knowledge/page.vue
+++ b/src/renderer/views/knowledge/page.vue
@@ -2,7 +2,7 @@
 * @Author: kongbeiwu lishaohua-520@qq.com
 * @Date: 2025-12-29 13:45:28
 * @LastEditors: kongbeiwu lishaohua-520@qq.com
- * @LastEditTime: 2025-12-29 13:45:54
+ * @LastEditTime: 2025-12-30 01:48:36
 * @FilePath: /project/zn-ai/src/renderer/views/knowledge/page.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -11,7 +11,7 @@
    <TitleSection title="知识库管理" desc="内容管理" />
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="事件管理" name="first">
-        <EventManager />
+        <EventManager @change="handleChange" />
      </el-tab-pane>
      <el-tab-pane label="房型管理" name="second">
        <RoomTypeManager />
@@ -27,10 +27,16 @@ import RoomTypeManager from './components/RoomTypeManager/index.vue'
 import { ref } from 'vue';
 import type { TabsPaneContext } from 'element-plus';

+const emits = defineEmits(["update:change"]);
+
 const activeName = ref('first');

 const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event)
+  console.log(tab, event);
+};
+
+const handleChange = (type: string, value: any) => {
+  emits("change", type, value);
 };
 </script>
 <style scoped>