知识库

apps/web-ele/src/views/knowledge/edit/edit-drawer.vue

@@ -1,184 +1,188 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import { useVbenDrawer, useVbenForm } from '@vben/common-ui';
-
-import { Plus } from '@element-plus/icons-vue';
-import { ElIcon, ElUpload } from 'element-plus';
-
-import TinymceEditor from '#/components/tinymce/src/editor.vue';
-
-import { drawerFormSchema } from './config-data';
-
-const emit = defineEmits<{
-  reload: [];
-}>();
-
-// 附件列表
-const attachments = ref<any[]>([]);
-const uploadUrlRef = ref<string>('');
-
-// 表单配置
-const [Form, formApi] = useVbenForm({
-  showDefaultActions: false,
-  schema: drawerFormSchema(),
-});
-
-// 处理附件上传
-function handleAttachmentUpload(options: any) {
-  // 模拟上传成功处理
-  const fileData = {
-    uid: options.file.uid,
-    name: options.file.name,
-    url: URL.createObjectURL(options.file),
-    status: 'success',
-    raw: options.file,
-  };
-
-  // 多个文件上传时，url以逗号隔开
-  uploadUrlRef.value = uploadUrlRef.value
-    ? `${uploadUrlRef.value},${fileData.url}`
-    : fileData.url;
-
-  options.onSuccess(fileData);
-}
-
-// 移除附件
-function handleAttachmentRemove(file: any, fileList: any[]) {
-  attachments.value = fileList;
-  // 更新上传url，移除已删除的文件
-  uploadUrlRef.value = fileList
-    .filter((item: any) => item.status === 'success')
-    .map((item: any) => item.url)
-    .join(',');
-}
-
-// 预览附件
-function handleAttachmentPreview(file: any) {
-  console.log('预览附件', file);
-  // TODO: 实现附件预览功能
-}
-
-// 确认编辑
-async function handleConfirm() {
-  try {
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-    const data = await formApi.getValues();
-
-    // 处理附件url，转换为逗号分隔的字符串
-    data.attachments = uploadUrlRef.value;
-
-    // 模拟提交数据
-    console.log('提交数据:', data);
-    // TODO: 实现真实的API调用
-
-    // 提交成功后触发reload事件
-    emit('reload');
-    drawerApi.close();
-  } catch (error) {
-    console.error('保存失败:', error);
-  }
-}
-
-const isUpdateRef = ref<boolean>(false);
-
-const [Drawer, drawerApi] = useVbenDrawer({
-  async onOpenChange(isOpen) {
-    if (!isOpen) {
-      return;
-    }
-    try {
-      drawerApi.drawerLoading(true);
-      const { chapter, isUpdate } = drawerApi.getData();
-      isUpdateRef.value = isUpdate;
-      if (isUpdate && chapter) {
-        // 处理附件url，转换为文件列表格式
-        const attachmentsList = chapter.attachments
-          ? chapter.attachments
-              .split(',')
-              .map((url: string, index: number) => ({
-                uid: Date.now() + index,
-                name: url.split('/').pop() || `文件${index + 1}`,
-                url,
-                status: 'success',
-              }))
-          : [];
-
-        uploadUrlRef.value = chapter.attachments || '';
-        attachments.value = attachmentsList;
-
-        // 设置表单数据
-        await formApi.setValues({
-          ...chapter,
-          content: chapter.content || '',
-          attachments: attachmentsList,
-        });
-      } else {
-        // 新增时重置表单
-        await formApi.resetForm();
-        attachments.value = [];
-        uploadUrlRef.value = '';
-      }
-    } catch (error) {
-      console.error('加载数据失败:', error);
-    } finally {
-      drawerApi.drawerLoading(false);
-    }
-  },
-  async onConfirm() {
-    await handleConfirm();
-  },
-  onClosed() {
-    formApi.resetForm();
-    attachments.value = [];
-    uploadUrlRef.value = '';
-  },
-});
-</script>
-
-<template>
-  <Drawer :title="isUpdateRef ? '编辑章节' : '新增章节'">
-    <Form>
-      <!-- 自定义Tinymce编辑器插槽 -->
-      <template #content="scope">
-        <TinymceEditor v-model="scope.modelValue" :height="400" />
-      </template>
-
-      <!-- 自定义附件上传插槽 -->
-      <template #attachments="scope">
-        <ElUpload
-          v-model:file-list="attachments"
-          action="#"
-          accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx"
-          list-type="text"
-          show-file-list
-          :auto-upload="true"
-          :drag="false"
-          :limit="5"
-          :multiple="true"
-          :http-request="handleAttachmentUpload"
-          :on-remove="handleAttachmentRemove"
-          :on-preview="handleAttachmentPreview"
-          class="mb-4"
-        >
-          <div class="flex items-center justify-center">
-            <ElIcon class="el-upload__icon">
-              <Plus size="18" />
-            </ElIcon>
-            <div class="el-upload__text">
-              <div>上传附件</div>
-              <div class="text-xs text-gray-500">最多上传5个附件</div>
-            </div>
-          </div>
-        </ElUpload>
-      </template>
-    </Form>
-  </Drawer>
-</template>
-
-<style scoped lang="scss">
-/* 自定义样式 */
-</style>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenDrawer, useVbenForm } from '@vben/common-ui';
+
+import { Plus } from '@element-plus/icons-vue';
+import { ElIcon, ElUpload } from 'element-plus';
+
+import TinymceEditor from '#/components/tinymce/src/editor.vue';
+
+import { drawerFormSchema } from './config-data';
+
+const emit = defineEmits<{
+  reload: [];
+}>();
+
+// 附件列表
+const attachments = ref<any[]>([]);
+const uploadUrlRef = ref<string>('');
+
+// 表单配置
+const [Form, formApi] = useVbenForm({
+  showDefaultActions: false,
+  schema: drawerFormSchema(),
+});
+
+// 处理附件上传
+function handleAttachmentUpload(options: any): Promise<unknown> {
+  return new Promise((resolve) => {
+    // 模拟上传成功处理
+    const fileData = {
+      uid: options.file.uid,
+      name: options.file.name,
+      url: URL.createObjectURL(options.file),
+      status: 'success',
+      raw: options.file,
+    };
+
+    // 多个文件上传时，url以逗号隔开
+    uploadUrlRef.value = uploadUrlRef.value
+      ? `${uploadUrlRef.value},${fileData.url}`
+      : fileData.url;
+
+    options.onSuccess(fileData);
+    resolve(fileData);
+  });
+}
+
+// 移除附件
+function handleAttachmentRemove(file: any, fileList: any[]) {
+  attachments.value = fileList;
+  // 更新上传url，移除已删除的文件
+  uploadUrlRef.value = fileList
+    .filter((item: any) => item.status === 'success')
+    .map((item: any) => item.url)
+    .join(',');
+}
+
+// 预览附件
+function handleAttachmentPreview(file: any) {
+  console.log('预览附件', file);
+  // TODO: 实现附件预览功能
+}
+
+// 确认编辑
+async function handleConfirm() {
+  try {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    const data = await formApi.getValues();
+
+    // 处理附件url，转换为逗号分隔的字符串
+    data.attachments = uploadUrlRef.value;
+
+    // 模拟提交数据
+    console.log('提交数据:', data);
+    // TODO: 实现真实的API调用
+
+    // 提交成功后触发reload事件
+    emit('reload');
+    drawerApi.close();
+  } catch (error) {
+    console.error('保存失败:', error);
+  }
+}
+
+const isUpdateRef = ref<boolean>(false);
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return;
+    }
+    try {
+      drawerApi.drawerLoading(true);
+      const { chapter, isUpdate } = drawerApi.getData();
+      isUpdateRef.value = isUpdate;
+      if (isUpdate && chapter) {
+        // 处理附件url，转换为文件列表格式
+        const attachmentsList = chapter.attachments
+          ? chapter.attachments
+              .split(',')
+              .map((url: string, index: number) => ({
+                uid: Date.now() + index,
+                name: url.split('/').pop() || `文件${index + 1}`,
+                url,
+                status: 'success',
+              }))
+          : [];
+
+        uploadUrlRef.value = chapter.attachments || '';
+        attachments.value = attachmentsList;
+
+        // 设置表单数据
+        await formApi.setValues({
+          ...chapter,
+          content: chapter.content || '',
+          attachments: attachmentsList,
+        });
+      } else {
+        // 新增时重置表单
+        await formApi.resetForm();
+        attachments.value = [];
+        uploadUrlRef.value = '';
+      }
+    } catch (error) {
+      console.error('加载数据失败:', error);
+    } finally {
+      drawerApi.drawerLoading(false);
+    }
+  },
+  async onConfirm() {
+    await handleConfirm();
+  },
+  onClosed() {
+    formApi.resetForm();
+    attachments.value = [];
+    uploadUrlRef.value = '';
+  },
+});
+</script>
+
+<template>
+  <Drawer :title="isUpdateRef ? '编辑章节' : '新增章节'">
+    <Form>
+      <!-- 自定义Tinymce编辑器插槽 -->
+      <template #content="scope">
+        <TinymceEditor v-model="scope.modelValue" :height="400" />
+      </template>
+
+      <!-- 自定义附件上传插槽 -->
+      <template #attachments="scope">
+        <ElUpload
+          v-model:file-list="attachments"
+          action="#"
+          accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx"
+          list-type="text"
+          show-file-list
+          :auto-upload="true"
+          :drag="false"
+          :limit="5"
+          :multiple="true"
+          :http-request="handleAttachmentUpload"
+          :on-remove="handleAttachmentRemove"
+          :on-preview="handleAttachmentPreview"
+          class="mb-4"
+        >
+          <div class="flex items-center justify-center">
+            <ElIcon class="el-upload__icon">
+              <Plus size="18" />
+            </ElIcon>
+            <div class="el-upload__text">
+              <div>上传附件</div>
+              <div class="text-xs text-gray-500">最多上传5个附件</div>
+            </div>
+          </div>
+        </ElUpload>
+      </template>
+    </Form>
+  </Drawer>
+</template>
+
+<style scoped lang="scss">
+/* 自定义样式 */
+</style>
+

apps/web-ele/src/views/knowledge/edit/index.vue

@@ -64,14 +64,6 @@ const selectedChapter = ref({
   content: '这是知识库的主页内容，您可以在这里查看知识库的概述信息。',
   updatedTime: '2025-12-22 14:30:00',
 });
-
-
-
-// 折叠菜单
-const toggleCollapse = () => {
-  isCollapse.value = !isCollapse.value;
-};
-
 // 保存草稿
 const saveDraft = () => {
   ElMessage.success('草稿保存成功');
@@ -87,22 +79,25 @@ const attachments = ref<any[]>([]);
 const uploadUrlRef = ref<string>('');
 
 // 处理附件上传
-function handleAttachmentUpload(options: any) {
-  // 模拟上传成功处理
-  const fileData = {
-    uid: options.file.uid,
-    name: options.file.name,
-    url: URL.createObjectURL(options.file),
-    status: 'success',
-    raw: options.file,
-  };
-
-  // 多个文件上传时，url以逗号隔开
-  uploadUrlRef.value = uploadUrlRef.value
-    ? `${uploadUrlRef.value},${fileData.url}`
-    : fileData.url;
-
-  options.onSuccess(fileData);
+function handleAttachmentUpload(options: any): Promise<unknown> {
+  return new Promise((resolve) => {
+    // 模拟上传成功处理
+    const fileData = {
+      uid: options.file.uid,
+      name: options.file.name,
+      url: URL.createObjectURL(options.file),
+      status: 'success',
+      raw: options.file,
+    };
+
+    // 多个文件上传时，url以逗号隔开
+    uploadUrlRef.value = uploadUrlRef.value
+      ? `${uploadUrlRef.value},${fileData.url}`
+      : fileData.url;
+
+    options.onSuccess(fileData);
+    resolve(fileData);
+  });
 }
 
 // 移除附件
@@ -124,7 +119,7 @@ function handleAttachmentPreview(file: any) {
 
 
 // 点击章节
-const handleChapterClick = (node) => {
+const handleChapterClick = (node: any) => {
   selectedChapter.value = {
     id: node.id,
     label: node.label,
@@ -971,349 +966,5 @@ onMounted(() => {
   background-color: #fff;
   border-color: #dcdfe6;
 }
-
-/* 编辑历史弹框样式 */
-.edit-history-dialog {
-  display: flex;
-  gap: 20px;
-  width: 100%;
-  height: calc(100vh - 300px);
-  padding: 10px;
-}
-
-/* 左侧时间轴 */
-.history-timeline {
-  width: 250px;
-  height: 100%;
-  padding: 10px;
-  overflow-y: auto;
-  background-color: #fff;
-  border-radius: 8px;
-}
-
-.history-day {
-  margin-bottom: 20px;
-}
-
-.day-title {
-  margin-bottom: 10px;
-  font-size: 16px;
-  font-weight: 500;
-  color: #303133;
-}
-
-.history-record {
-  display: flex;
-  gap: 10px;
-  padding: 10px;
-  cursor: pointer;
-  background-color: #fff;
-  border-radius: 6px;
-  transition: all 0.3s ease;
-}
-
-.record-time {
-  flex-shrink: 0;
-  width: 60px;
-  padding-top: 2px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #303133;
-  text-align: left;
-}
-
-.record-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.record-user {
-  margin-bottom: 2px;
-  font-size: 13px;
-  color: #606266;
-}
-
-.record-action {
-  font-size: 13px;
-  color: #909399;
-}
-
-.history-record:hover {
-  background-color: #E6E8EB;
-}
-
-.history-record.active {
-  // border-left: 3px solid #1890ff;
-  color: #1890ff;
-  background-color: #E8F3FF;
-}
-
-.record-time {
-  margin-bottom: 2px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #303133;
-}
-
-.record-user {
-  margin-bottom: 2px;
-  font-size: 13px;
-  color: #606266;
-}
-
-.record-action {
-  font-size: 13px;
-  color: #909399;
-}
-
-/* 右侧内容 */
-.history-content {
-  flex: 1;
-  height: 100%;
-  padding: 20px;
-  overflow-y: auto;
-  background-color: #fff;
-  border-radius: 8px;
-}
-
-.content-title {
-  margin-bottom: 20px;
-  font-size: 24px;
-  font-weight: 500;
-  color: #303133;
-}
-
-.content-section {
-  margin-bottom: 30px;
-}
-
-.section-title {
-  margin-bottom: 10px;
-  font-size: 18px;
-  font-weight: 500;
-  color: #303133;
-}
-
-.section-content {
-  font-size: 14px;
-  line-height: 1.8;
-  color: #606266;
-  white-space: pre-wrap;
-}
-
-.content-attachments {
-  padding-top: 20px;
-  margin-top: 30px;
-  border-top: 1px solid #e8e8e8;
-}
-
-.attachments-title {
-  margin-bottom: 10px;
-  font-size: 16px;
-  font-weight: 500;
-  color: #303133;
-}
-
-/* 滚动条样式 */
-.history-timeline::-webkit-scrollbar,
-.history-content::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.history-timeline::-webkit-scrollbar-track,
-.history-content::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 3px;
-}
-
-.history-timeline::-webkit-scrollbar-thumb,
-.history-content::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
-}
-
-.history-timeline::-webkit-scrollbar-thumb:hover,
-.history-content::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
-}
-
-/* 标签页样式 */
-.right-tabs {
-  flex: 1;
-  max-height: 400px;
-  padding-right: 5px;
-  overflow-y: auto;
-}
-
-.right-tabs::-webkit-scrollbar {
-  width: 6px;
-}
-
-.right-tabs::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 3px;
-}
-
-.right-tabs::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
-}
-
-.right-tabs::-webkit-scrollbar-thumb:hover {
-  background: #a8a8a8;
-}
-
-/* 查看记录和操作记录 */
-.view-records,
-.operation-records {
-  padding: 0;
-  background-color: transparent;
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.record-list {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-
-  /* max-height: 200px; */
-
-  /* overflow-y: auto; */
-}
-
-.record-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  font-size: 14px;
-}
-
-.record-left {
-  display: flex;
-  flex: 1;
-  gap: 10px;
-  align-items: center;
-}
-
-.record-info {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.record-avatar {
-  width: 32px;
-  height: 32px;
-  color: #fff;
-  background-color: #1890ff;
-}
-
-.record-user {
-  font-size: 14px;
-  font-weight: 500;
-  color: #000;
-}
-
-.record-time {
-  font-size: 14px;
-  color: #000;
-  text-align: right;
-}
-
-.record-action {
-  margin-top: 2px;
-  font-size: 13px;
-  color: #666;
-}
-
-/* 提醒弹框样式 */
-.notification-content {
-  .form-item {
-    margin-bottom: 20px;
-  }
-  
-  .form-label {
-    margin-bottom: 8px;
-    font-size: 14px;
-    font-weight: 500;
-    color: #000;
-  }
-  
-  .recipient-section {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-  }
-}
-
-/* 提醒弹框样式 */
-.notification-dialog {
-  .dialog-row {
-    display: flex;
-    gap: 12px;
-    align-items: flex-start;
-    margin-bottom: 16px;
-  }
-
-  .row-label {
-    flex-shrink: 0;
-    width: 70px;
-    padding-top: 8px;
-    font-size: 14px;
-    font-weight: 500;
-    color: #303133;
-    text-align: right;
-  }
-
-  .row-content {
-    flex: 1;
-    width: 0;
-  }
-
-  .select-all-btn {
-    margin-top: 8px;
-    text-align: right;
-  }
-
-  .dialog-footer {
-    display: flex;
-    gap: 12px;
-    justify-content: flex-end;
-  }
-}
-
-/* 回复相关样式 */
-.reply-input-wrapper {
-  padding: 15px;
-  margin-top: 12px;
-  background-color: #fafafa;
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
-}
-
-.reply-input {
-  margin-bottom: 10px;
-  border-radius: 4px;
-}
-
-.reply-actions {
-  display: flex;
-  gap: 10px;
-  justify-content: flex-start;
-}
-
-.submit-btn {
-  color: #fff;
-  background-color: #1890ff;
-  border-color: #1890ff;
-}
-
-.cancel-btn {
-  color: #606266;
-  background-color: #fff;
-  border-color: #dcdfe6;
-}
 </style>
+

apps/web-ele/src/views/knowledge/type/create.vue

@@ -3,17 +3,22 @@ import { ref, watch } from 'vue';
 import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElUpload, ElMessage, ElButton, ElIcon } from 'element-plus';
 import { Upload, Plus } from '@element-plus/icons-vue';
 
+// 定义表单数据类型
+interface FormData {
+  name: string;
+  description: string;
+  icon: string;
+  managers: any[];
+  visibleApps: any[];
+  visiblePositions: any[];
+  association: string;
+}
+
 // 定义组件的props
-const props = defineProps({
-  mode: {
-    type: String,
-    default: 'create', // create 或 edit
-  },
-  initialData: {
-    type: Object,
-    default: () => ({}),
-  },
-});
+const props = defineProps<{
+  mode: string;
+  initialData?: FormData;
+}>();
 
 // 定义事件
 const emit = defineEmits(['close', 'save']);
@@ -22,7 +27,7 @@ const emit = defineEmits(['close', 'save']);
 const formRef = ref();
 
 // 表单数据
-const form = ref({
+const form = ref<FormData>({
   name: '',
   description: '',
   icon: '',
@@ -366,3 +371,4 @@ const closeForm = () => {
   margin-top: 32px;
 }
 </style>
+

apps/web-ele/src/views/knowledge/type/index.vue

@@ -6,6 +6,17 @@ import KnowledgeCreate from './create.vue';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+// 导入 FormData 类型
+interface FormData {
+  name: string;
+  description: string;
+  icon: string;
+  managers: any[];
+  visibleApps: any[];
+  visiblePositions: any[];
+  association: string;
+}
+
 // 路由实例
 const router = useRouter();
 
@@ -31,7 +42,15 @@ const categories = [
 // 抽屉控制
 const drawerVisible = ref(false);
 const drawerMode = ref('create');
-const selectedCategory = ref({});
+const selectedCategory = ref<FormData>({
+  name: '',
+  description: '',
+  icon: '',
+  managers: [],
+  visibleApps: [],
+  visiblePositions: [],
+  association: '',
+});
 
 // 跳转到详情页
 const navigateToDetail = (id: number) => {
@@ -41,14 +60,30 @@ const navigateToDetail = (id: number) => {
 // 打开创建抽屉
 const openCreateDrawer = () => {
   drawerMode.value = 'create';
-  selectedCategory.value = {};
+  selectedCategory.value = {
+    name: '',
+    description: '',
+    icon: '',
+    managers: [],
+    visibleApps: [],
+    visiblePositions: [],
+    association: '',
+  };
   drawerVisible.value = true;
 };
 
 // 打开编辑抽屉
-const openEditDrawer = (category) => {
+const openEditDrawer = (category: any) => {
   drawerMode.value = 'edit';
-  selectedCategory.value = category;
+  selectedCategory.value = {
+    name: category.name || '',
+    description: category.description || '',
+    icon: category.icon || '',
+    managers: [],
+    visibleApps: [],
+    visiblePositions: [],
+    association: '',
+  };
   drawerVisible.value = true;
 };
 
@@ -58,7 +93,7 @@ const closeDrawer = () => {
 };
 
 // 保存知识类别
-const saveCategory = (data) => {
+const saveCategory = (data: any) => {
   if (drawerMode.value === 'create') {
     // 这里可以添加创建逻辑
     console.log('创建知识库:', data);
@@ -116,7 +151,7 @@ const saveCategory = (data) => {
     <ElDrawer
       v-model="drawerVisible"
       :title="drawerMode === 'create' ? '创建知识库' : '编辑知识库'"
-      size="50%"
+      size="30%"
       direction="rtl"
       @close="closeDrawer"
     >
@@ -240,3 +275,4 @@ border-radius: 6px;
   justify-content: center;
 }
 </style>
+