mod: 知识库页面

apps/web-ele/src/router/routes/local.ts

@@ -69,6 +69,17 @@ const localRoutes: RouteRecordStringComponent[] = [
     name: 'OilstationBaseCreate',
     path: '/oilstation/base/create',
   },
+  {
+    component: '/knowledge/detail/index',
+    meta: {
+      activePath: '/knowledge/detail',
+      icon: 'carbon:data-base',
+      title: '知识库详情',
+      hideInMenu: true,
+    },
+    name: 'KnowledgeDetail',
+    path: '/knowledge/detail/:classId',
+  },
 ];
 
 /**

apps/web-ele/src/views/knowledge/detail/config-data.tsx

@@ -0,0 +1,75 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+
+// 编辑表单配置
+export const drawerFormSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'title',
+    label: '标题',
+    componentProps: {
+      placeholder: '请输入章节标题',
+    },
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'content',
+    label: '内容',
+    componentProps: {
+      placeholder: '请输入章节内容',
+      rows: 10,
+    },
+    // 使用自定义插槽渲染Tinymce编辑器
+    slot: 'content',
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'attachments',
+    label: '附件',
+    componentProps: {
+      placeholder: '请上传附件',
+      readonly: true,
+    },
+  },
+];
+
+// 提醒表单配置
+export const remindFormSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'remindContent',
+    label: '提醒内容',
+    componentProps: {
+      placeholder: '请输入提醒内容',
+      rows: 4,
+      maxlength: 200,
+      type: 'textarea',
+      showWordLimit: true,
+    },
+    // 使用自定义插槽渲染文本域
+    slot: 'remindContent',
+    rules: 'required',
+  },
+  {
+    // 组件需要在 #/adapter.ts内注册，并加上类型
+    component: 'ApiSelect',
+    // 对应组件的参数
+    componentProps: {
+      placeholder: '请选择或搜索提醒人',
+      // 菜单接口转options格式
+      afterFetch: (data: { name: string; path: string }[]) => {
+        return data.map((item: any) => ({
+          label: item.name,
+          value: item.path,
+        }));
+      },
+      // 菜单接口
+      api: () => {},
+    },
+    // 字段名
+    fieldName: 'remindPerson',
+    // 界面显示的label
+    label: '提醒人',
+  },
+];

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

@@ -0,0 +1,184 @@
+<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>

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

@@ -0,0 +1,531 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue';
+
+import { ColPage, useVbenDrawer } from '@vben/common-ui';
+import { ReadCount } from '@vben/icons';
+
+import {
+  Camera,
+  Delete,
+  Edit,
+  HomeFilled,
+  Plus,
+  Search,
+} from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+// 导入编辑抽屉组件
+import EditDrawer from './edit-drawer.vue';
+// 导入提醒抽屉组件
+import RemindDrawer from './remind-drawer.vue';
+
+// 模拟章节数据
+const chapterDataRef = ref([
+  {
+    id: 1,
+    label: '一级标题',
+    children: [
+      {
+        id: 2,
+        label: '二级标题',
+        children: [{ id: 3, label: '三级标题' }],
+      },
+    ],
+  },
+  {
+    id: 4,
+    label: '一级标题',
+    children: [
+      {
+        id: 5,
+        label: '二级标题',
+        children: [{ id: 6, label: '三级标题' }],
+      },
+      {
+        id: 7,
+        label: '二级标题',
+        children: [
+          { id: 8, label: '三级标题' },
+          { id: 9, label: '三级标题' },
+          { id: 10, label: '三级标题' },
+        ],
+      },
+      {
+        id: 11,
+        label: '二级标题',
+        children: [{ id: 12, label: '三级标题' }],
+      },
+    ],
+  },
+]);
+
+const treeRef = ref();
+const searchTextRef = ref<string>('');
+const selectedChapterRef = ref<any>({ id: 'home', label: '主页', content: '' });
+const contentRef = ref<string>('');
+
+// 评论相关
+const commentContent = ref<string>('');
+const commentImages = ref<any[]>([]);
+
+// 定义编辑抽屉
+const [EditDrawerComp, drawerApi] = useVbenDrawer({
+  connectedComponent: EditDrawer,
+});
+
+// 定义提醒抽屉
+const [RemindDrawerComp, remindDrawerApi] = useVbenDrawer({
+  connectedComponent: RemindDrawer,
+});
+
+// 过滤树形图回调
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.label.includes(value);
+};
+
+// 左侧属性搜索关键字监听过滤
+watch(searchTextRef, (val) => {
+  treeRef.value?.filter(val);
+});
+
+// 点击左侧树形图某一个节点
+function nodeClick(currentNode: any) {
+  selectedChapterRef.value = currentNode;
+}
+
+// 点击主页
+function handleHomeClick() {
+  selectedChapterRef.value = { id: 'home', label: '主页', content: '' };
+}
+
+// 添加章节
+function addChapter(parentNode?: any) {
+  console.log('添加章节', parentNode);
+  // TODO: 实现添加章节逻辑
+}
+
+// 编辑章节
+function editChapter(node: any) {
+  console.log('编辑章节', node);
+  // TODO: 实现编辑章节逻辑
+}
+
+// 删除章节
+function deleteChapter(node: any) {
+  console.log('删除章节', node);
+  // TODO: 实现删除章节逻辑
+}
+
+// 章节拖拽结束事件
+function handleDragEnd(draggingNode: any, dropNode: any, dropType: string) {
+  console.log('拖拽结束', draggingNode, dropNode, dropType);
+  // TODO: 实现章节拖拽排序逻辑
+}
+
+// 打开编辑抽屉
+function openEditModal() {
+  drawerApi
+    .setData({ chapter: selectedChapterRef.value, isUpdate: true })
+    .open();
+}
+
+// 打开提醒抽屉
+function openRemindModal() {
+  remindDrawerApi.setData({}).open();
+}
+
+// 保存编辑内容
+function handleSaveEdit() {
+  console.log('保存编辑内容');
+  // TODO: 实现保存编辑内容逻辑
+  ElMessage.success('章节编辑成功');
+  drawerApi.close();
+}
+
+// 处理评论图片上传
+function handleCommentImageUpload(options: any) {
+  // 模拟上传成功处理
+  const fileData = {
+    uid: options.file.uid,
+    name: options.file.name,
+    url: URL.createObjectURL(options.file),
+    status: 'success',
+    raw: options.file,
+  };
+
+  // 直接通过v-model:file-list绑定，无需手动添加
+  options.onSuccess(fileData);
+}
+
+// 移除评论图片
+function handleCommentImageRemove(file: any, fileList: any[]) {
+  commentImages.value = fileList;
+}
+
+// 预览评论图片
+function handleCommentImagePreview(file: any) {
+  console.log('预览图片', file);
+  // TODO: 实现图片预览功能
+}
+
+// 提交评论
+function submitComment() {
+  if (!commentContent.value.trim() && commentImages.value.length === 0) {
+    ElMessage.warning('请输入评论内容或上传图片');
+    return;
+  }
+
+  // 过滤出已成功上传的图片
+  const uploadedImages = commentImages.value.filter(
+    (image: any) => image.status === 'success',
+  );
+  // TODO: 实现提交评论逻辑
+
+  // 清空评论内容和
+  commentContent.value = '';
+  commentImages.value = [];
+}
+function deleteKnowledge() {
+  //
+}
+
+onMounted(async () => {
+  // TODO: 从接口获取章节数据
+  // chapterDataRef.value = await getChapterTree();
+});
+</script>
+
+<template>
+  <div class="knowledge-detail-container">
+    <ColPage :left-width="25" auto-content-height>
+      <template #left>
+        <div
+          :style="{ minWidth: '250px' }"
+          class="border-border bg-card mr-2 flex h-full flex-col rounded-[var(--radius)] border p-2"
+        >
+          <!-- 知识库标题 -->
+          <div class="mb-4">
+            <div class="mb-2 flex items-center justify-between">
+              <h3 class="flex items-center text-lg font-bold">
+                <img src="/icon/1.png" alt="知识库" class="mr-2 h-6 w-6" />
+                知识库示例
+              </h3>
+            </div>
+            <ElInput
+              v-model="searchTextRef"
+              placeholder="请输入章节名称"
+              :prefix-icon="Search"
+            />
+          </div>
+
+          <!-- 单独的主页项 -->
+          <div class="mb-2">
+            <div
+              class="flex cursor-pointer items-center rounded p-2 transition-colors hover:bg-gray-100"
+              @click="handleHomeClick"
+            >
+              <HomeFilled class="mr-2 h-4 w-4" />
+              <span>主页</span>
+            </div>
+          </div>
+
+          <!-- 单独的目录标题 -->
+          <div class="mb-2 flex items-center justify-between p-2 font-medium">
+            <span class="text-gray-500">目录</span>
+            <ElButton
+              type="primary"
+              size="small"
+              circle
+              @click.stop="addChapter()"
+              class="!h-6 !w-6 !p-0"
+              title="添加一级章节"
+            >
+              <Plus class="!h-3 !w-3" />
+            </ElButton>
+          </div>
+
+          <!-- 章节树 -->
+          <div class="flex-1 overflow-auto">
+            <ElTree
+              ref="treeRef"
+              :data="chapterDataRef"
+              node-key="id"
+              default-expand-all
+              highlight-current
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              @node-click="nodeClick"
+              draggable
+              :allow-drop="
+                (draggingNode, dropNode, type) => {
+                  // 只允许在同级或父级下拖拽
+                  return type === 'inner' || type === 'prev' || type === 'next';
+                }
+              "
+              @node-drag-end="handleDragEnd"
+            >
+              <template #default="{ node, data }">
+                <div class="flex w-full items-center justify-between">
+                  <!-- 节点文本 -->
+                  <span>{{ node.label }}</span>
+
+                  <!-- 操作按钮 -->
+                  <div
+                    class="flex items-center space-x-1 opacity-0 transition-opacity hover:opacity-100"
+                  >
+                    <ElButton
+                      type="primary"
+                      size="small"
+                      circle
+                      @click.stop="addChapter(data)"
+                      class="!h-6 !w-6 !p-0"
+                      title="添加子章节"
+                    >
+                      <Plus class="!h-3 !w-3" />
+                    </ElButton>
+                    <ElButton
+                      type="warning"
+                      size="small"
+                      circle
+                      @click.stop="editChapter(data)"
+                      class="!h-6 !w-6 !p-0"
+                      title="编辑章节"
+                    >
+                      <Edit class="!h-3 !w-3" />
+                    </ElButton>
+                    <ElButton
+                      type="danger"
+                      size="small"
+                      circle
+                      @click.stop="deleteChapter(data)"
+                      class="!h-6 !w-6 !p-0"
+                      title="删除章节"
+                    >
+                      <Delete class="!h-3 !w-3" />
+                    </ElButton>
+                  </div>
+                </div>
+              </template>
+            </ElTree>
+          </div>
+        </div>
+      </template>
+
+      <!-- 右侧内容显示区域 -->
+      <div
+        class="border-border bg-card mr-2 flex h-full flex-col rounded-[var(--radius)] border p-4"
+      >
+        <!-- 顶部操作栏 -->
+        <div class="mb-4 flex items-center justify-between">
+          <div class="flex items-center space-x-3">
+            <h3 class="text-xl font-bold">
+              {{ selectedChapterRef?.label || '主页' }}
+            </h3>
+            <div class="flex items-center space-x-1 text-sm text-gray-500">
+              2025-07-21 18:01:38
+              <ReadCount class="ml-2 size-4 text-blue-500" />
+              <span class="text-blue-500">51</span>
+            </div>
+          </div>
+          <div class="flex items-center space-x-2">
+            <ElButton type="text" @click="openEditModal"> 编辑 </ElButton>
+            <ElButton type="text" @click="openRemindModal"> 提醒 </ElButton>
+            <!-- <ElButton type="text"> 历史 </ElButton> -->
+            <ElButton type="text" @click="deleteKnowledge"> 删除 </ElButton>
+          </div>
+        </div>
+
+        <!-- 内容显示区域 -->
+        <div class="mb-4">
+          <!-- 主页内容 -->
+          <div
+            v-if="selectedChapterRef?.id === 'home'"
+            class="prose max-w-none"
+          >
+            <h2>编辑主页</h2>
+            <p>
+              此页面是知识库的主页，你可以点击右上角「编辑」，开始编辑主页内容，例如在主页中介绍知识库的内容。
+            </p>
+
+            <h2>新建文档</h2>
+            <p>点击左侧「目录+」按钮，开始创建你的文档。</p>
+          </div>
+
+          <!-- 章节内容 -->
+          <div v-else-if="selectedChapterRef" class="prose max-w-none">
+            <p>
+              {{
+                selectedChapterRef.content || '暂无内容，点击编辑开始添加内容'
+              }}
+            </p>
+          </div>
+
+          <!-- 默认内容 -->
+          <div v-else class="py-10 text-center text-gray-500">
+            请选择左侧章节查看内容
+          </div>
+        </div>
+
+        <!-- 评论区域 -->
+        <div class="border-t pt-4">
+          <h4 class="mb-3 font-bold">评论</h4>
+
+          <!-- 评论列表 -->
+          <div class="mb-4">
+            <!-- 评论项 -->
+            <div class="mb-4 rounded bg-gray-50 p-3">
+              <div class="mb-2 flex items-center">
+                <div
+                  class="mr-2 flex h-8 w-8 items-center justify-center rounded-full bg-gray-200"
+                >
+                  <Camera class="h-4 w-4" />
+                </div>
+                <div class="font-medium">用户名</div>
+                <div class="ml-2 text-xs text-gray-500">
+                  2025-07-21 18:01:38
+                </div>
+              </div>
+              <div class="mb-2">
+                这是一条评论内容，用户可以在这里发表自己的看法和意见。
+              </div>
+              <!-- 评论图片 -->
+              <div class="mb-2 flex space-x-2">
+                <img
+                  src="https://picsum.photos/80/80"
+                  alt="评论图片"
+                  class="h-20 w-20 rounded object-cover"
+                />
+                <img
+                  src="https://picsum.photos/80/80"
+                  alt="评论图片"
+                  class="h-20 w-20 rounded object-cover"
+                />
+              </div>
+              <!-- <div class="flex items-center text-sm text-gray-500">
+                <span class="mr-4 cursor-pointer hover:text-blue-500"
+                  >点赞 (5)</span
+                >
+                <span class="cursor-pointer hover:text-blue-500">回复</span>
+              </div> -->
+            </div>
+
+            <!-- 评论项 -->
+            <div class="mb-4 rounded bg-gray-50 p-3">
+              <div class="mb-2 flex items-center">
+                <div
+                  class="mr-2 flex h-8 w-8 items-center justify-center rounded-full bg-gray-200"
+                >
+                  <Camera class="h-4 w-4" />
+                </div>
+                <div class="font-medium">用户名</div>
+                <div class="ml-2 text-xs text-gray-500">
+                  2025-07-21 17:45:22
+                </div>
+              </div>
+              <div class="mb-2">
+                这是另一条评论内容，用户可以在这里发表自己的看法和意见。
+              </div>
+              <!-- <div class="flex items-center text-sm text-gray-500">
+                <span class="mr-4 cursor-pointer hover:text-blue-500"
+                  >点赞 (3)</span
+                >
+                <span class="cursor-pointer hover:text-blue-500">回复</span>
+              </div> -->
+            </div>
+          </div>
+
+          <!-- 评论操作区域 -->
+          <div class="flex flex-col space-y-3">
+            <div class="flex space-x-3">
+              <div
+                class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200"
+              >
+                <Camera class="h-4 w-4" />
+              </div>
+              <div class="flex-1">
+                <ElInput
+                  v-model="commentContent"
+                  type="textarea"
+                  placeholder="写下您的评论..."
+                  resize="none"
+                  rows="3"
+                />
+
+                <!-- 上传图片区域 -->
+                <div class="mt-2">
+                  <!-- 使用ElUpload组件实现多图片上传 -->
+                  <ElUpload
+                    v-model:file-list="commentImages"
+                    action="#"
+                    accept=".jpg,.jpeg,.png,.gif"
+                    list-type="picture-card"
+                    show-file-list
+                    :auto-upload="true"
+                    :drag="false"
+                    :limit="10"
+                    :multiple="true"
+                    :http-request="handleCommentImageUpload"
+                    :on-remove="handleCommentImageRemove"
+                    :on-preview="handleCommentImagePreview"
+                    class="mb-2"
+                  >
+                    <div class="flex h-full w-full items-center justify-center">
+                      <ElIcon class="el-upload__icon">
+                        <Plus size="18" />
+                      </ElIcon>
+                    </div>
+                  </ElUpload>
+                </div>
+
+                <!-- 评论按钮 -->
+                <div class="mt-2 flex justify-end">
+                  <ElButton type="primary" size="small" @click="submitComment">
+                    评论
+                  </ElButton>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 编辑抽屉组件 -->
+      <EditDrawerComp />
+      <!-- 提醒抽屉组件 -->
+      <RemindDrawerComp />
+    </ColPage>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.knowledge-detail-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+// 自定义树节点样式
+:deep(.el-tree-node__content) {
+  padding-right: 8px;
+}
+
+::v-deep .el-upload--picture-card {
+  --el-upload-picture-card-size: 148px;
+
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  vertical-align: top;
+  cursor: pointer;
+  background-color: #fafafa;
+  background-color: var(--el-fill-color-lighter);
+  border: 1px dashed #cdd0d6;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 6px;
+}
+</style>

apps/web-ele/src/views/knowledge/detail/remind-drawer.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { remindFormSchema } from './config-data';
+
+defineOptions({
+  name: 'RemindForm',
+});
+
+const [Form, formApi] = useVbenForm({
+  schema: remindFormSchema(),
+  showDefaultActions: false,
+});
+const [Drawer, drawerApi] = useVbenDrawer({
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm: async () => {
+    await formApi.submitForm();
+    drawerApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const { values } = drawerApi.getData<Record<string, any>>();
+      if (values) {
+        formApi.setValues(values);
+      }
+    }
+  },
+  title: '提醒',
+});
+</script>
+<template>
+  <Drawer>
+    <Form />
+  </Drawer>
+</template>

apps/web-ele/src/views/knowledge/type/config-data.tsx

@@ -0,0 +1,194 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+// 知识库类别数据模型
+export interface KnowledgeType {
+  id: string;
+  name: string;
+  icon: string;
+  description: string;
+  admin: string;
+  applicableEnd: string;
+  applicablePost: string;
+  createTime: string;
+  createUser: string;
+}
+
+// 查询表单配置
+export const queryFormSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: '名称',
+    componentProps: {
+      placeholder: '请输入知识库类别名称',
+      allowClear: true,
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'description',
+    label: '描述',
+    componentProps: {
+      placeholder: '请输入知识库类别描述',
+      allowClear: true,
+    },
+  },
+];
+
+// 抽屉表单配置
+export const drawerFormSchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+    fieldName: 'id',
+  },
+  {
+    component: 'Input',
+    fieldName: 'icon',
+    label: '知识图标',
+    // 使用插槽自定义上传组件
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: '知识库名称',
+    componentProps: {
+      placeholder: '请输入知识库名称',
+      maxlength: 100,
+    },
+    rules: 'required',
+  },
+  {
+    component: 'Input',
+    fieldName: 'description',
+    label: '知识库描述',
+    componentProps: {
+      placeholder: '请输入知识库描述',
+      maxlength: 200,
+      type: 'textarea',
+      showWordLimit: true,
+    },
+    rules: 'required',
+  },
+
+  {
+    component: 'Input',
+    fieldName: 'admin',
+    label: '知识库管理员',
+    componentProps: {
+      placeholder: '请输入知识库管理员',
+      maxlength: 50,
+    },
+    rules: 'required',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择适用端',
+      options: [
+        { label: '钉钉', value: 'dingtalk' },
+        { label: 'PC', value: 'pc' },
+      ],
+    },
+    fieldName: 'applicableEnd',
+    label: '适用端',
+    rules: 'required',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择适用岗位',
+      options: [
+        { label: '管理员', value: 'admin' },
+        { label: '普通用户', value: 'user' },
+        { label: '技术人员', value: 'tech' },
+      ],
+    },
+    fieldName: 'applicablePost',
+    label: '适用岗位',
+    rules: 'required',
+  },
+];
+
+// 表格列配置
+export const tableColumns: VxeGridProps['columns'] = [
+  {
+    type: 'checkbox',
+    width: 60,
+  },
+  {
+    field: 'id',
+    title: '类别ID',
+    width: 80,
+  },
+  {
+    field: 'name',
+    title: '类别名称',
+    minWidth: 120,
+  },
+  {
+    field: 'icon',
+    slots: { default: 'icon' },
+    title: '类别图标',
+    minWidth: 100,
+  },
+  {
+    field: 'description',
+    title: '类别描述',
+    minWidth: 150,
+  },
+  {
+    field: 'admin',
+    title: '管理员',
+    minWidth: 100,
+  },
+  {
+    field: 'applicableEnd',
+    title: '适用端',
+    minWidth: 100,
+    formatter: (params: { cellValue: string }) => {
+      const options = [
+        { label: '钉钉', value: 'dingtalk' },
+        { label: 'PC', value: 'pc' },
+      ];
+      const option = options.find((item) => item.value === params.cellValue);
+      return option ? option.label : params.cellValue;
+    },
+  },
+  {
+    field: 'applicablePost',
+    title: '适用岗位',
+    minWidth: 100,
+    formatter: (params: { cellValue: string }) => {
+      const options = [
+        { label: '管理员', value: 'admin' },
+        { label: '普通用户', value: 'user' },
+        { label: '技术人员', value: 'tech' },
+      ];
+      const option = options.find((item) => item.value === params.cellValue);
+      return option ? option.label : params.cellValue;
+    },
+  },
+  {
+    field: 'createUser',
+    title: '创建人',
+    minWidth: 100,
+  },
+  {
+    field: 'createTime',
+    title: '创建时间',
+    minWidth: 150,
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];

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

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { KnowledgeType } from './config-data';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+
+import { ElImage, ElMessageBox } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { queryFormSchema, tableColumns } from './config-data';
+import TypeDrawer from './type-drawer.vue';
+
+const router = useRouter();
+
+// 模拟API调用，实际项目中需要替换为真实API
+const getKnowledgeTypeList = async (params: any) => {
+  // 模拟数据
+  const mockData = {
+    rows: [
+      {
+        id: '1',
+        name: '产品知识',
+        icon: '/icon/1.png',
+        description: '产品相关知识',
+        admin: 'admin',
+        applicableEnd: 'pc',
+        applicablePost: 'admin',
+        createTime: '2024-01-01 10:00:00',
+        createUser: 'admin',
+      },
+      {
+        id: '2',
+        name: '技术文档',
+        icon: '/icon/3.png',
+        description: '技术相关文档',
+        admin: 'admin',
+        applicableEnd: 'dingtalk',
+        applicablePost: 'tech',
+        createTime: '2024-01-02 11:00:00',
+        createUser: 'admin',
+      },
+      {
+        id: '3',
+        name: '常见问题',
+        icon: '/icon/4.png',
+        description: '常见问题解答',
+        admin: 'admin',
+        applicableEnd: 'pc',
+        applicablePost: 'user',
+        createTime: '2024-01-03 14:00:00',
+        createUser: 'admin',
+      },
+      {
+        id: '4',
+        name: '用户指南',
+        icon: 'carbon:book-open',
+        description: '用户使用指南',
+        admin: 'admin',
+        applicableEnd: 'dingtalk',
+        applicablePost: 'user',
+        createTime: '2024-01-04 16:00:00',
+        createUser: 'admin',
+      },
+    ],
+    total: 4,
+  };
+  return mockData;
+};
+
+const deleteKnowledgeType = async (ids: string[]) => {
+  // 模拟删除操作
+  // console.log('删除知识库类别', ids);
+  return { success: true };
+};
+
+// 查询表单配置
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: queryFormSchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+// 列表配置
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    trigger: 'default',
+  },
+  columns: tableColumns,
+  size: 'medium',
+  height: 'auto',
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        const resp = await getKnowledgeTypeList({
+          ...formValues,
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+        });
+        return { items: resp.rows, total: resp.total };
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  toolbarConfig: {
+    custom: true,
+    refresh: true,
+    zoom: true,
+  },
+  id: 'knowledge-type-index',
+};
+
+// 创建列表实例
+const [BasicTable, BasicTableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+// 抽屉组件引用
+const typeDrawerRef = ref();
+
+// 新增知识库类别
+const handleAdd = () => {
+  // 调用抽屉组件的open方法
+  const drawerApi = typeDrawerRef.value?.getDrawerApi?.();
+  if (drawerApi) {
+    drawerApi.setData({ isUpdate: false }).open();
+  }
+};
+
+// 编辑知识库类别
+const handleEdit = (row: KnowledgeType) => {
+  // 调用抽屉组件的open方法
+  const drawerApi = typeDrawerRef.value?.getDrawerApi?.();
+  if (drawerApi) {
+    drawerApi.setData({ id: row.id, isUpdate: true }).open();
+  }
+};
+
+// 查看知识库类别详情
+const handleView = (row: KnowledgeType) => {
+  // 实际项目中可以跳转到详情页面
+
+  router.push(`/knowledge/detail/${row.id}`);
+};
+
+// 删除知识库类别
+const handleDelete = async (row: KnowledgeType) => {
+  try {
+    await ElMessageBox.confirm(`确认删除知识库类别"${row.name}"吗？`, '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
+    await deleteKnowledgeType([row.id]);
+    await BasicTableApi.reload();
+  } catch {
+    // 取消删除操作
+  }
+};
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="知识库类别列表">
+      <!-- 自定义图标列 -->
+      <template #icon="{ row }">
+        <ElImage style="width: 30px; height: 30px" :src="row.icon" />
+      </template>
+
+      <!-- 自定义操作列 -->
+      <template #action="{ row }">
+        <el-button size="small" type="info" plain @click="handleView(row)">
+          查看
+        </el-button>
+        <el-button size="small" type="primary" plain @click="handleEdit(row)">
+          编辑
+        </el-button>
+      </template>
+
+      <!-- 自定义工具栏 -->
+      <template #toolbar-tools>
+        <el-button type="primary" @click="handleAdd">新增</el-button>
+      </template>
+    </BasicTable>
+
+    <!-- 抽屉组件 -->
+    <TypeDrawer @reload="BasicTableApi.reload()" />
+  </Page>
+</template>

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

@@ -0,0 +1,263 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useVbenDrawer, useVbenForm } from '@vben/common-ui';
+import { UploadFilled, Plus } from '@element-plus/icons-vue';
+import { ElUpload } from 'element-plus';
+import { VbenIcon } from '@vben-core/shadcn-ui';
+import { drawerFormSchema } from './config-data';
+
+const emit = defineEmits<{
+  reload: [];
+}>();
+
+// 模拟API调用，实际项目中需要替换为真实API
+const addKnowledgeType = async (data: any) => {
+  console.log('添加知识库类型', data);
+  return { success: true };
+};
+
+const updateKnowledgeType = async (data: any) => {
+  console.log('更新知识库类型', data);
+  return { success: true };
+};
+
+const getKnowledgeTypeDetail = async (id: string) => {
+  console.log('获取知识库类型详情', id);
+  // 模拟数据
+  return {
+    id,
+    name: '测试类型',
+    description: '测试描述',
+    icon: 'carbon:test',
+    admin: 'admin',
+    applicableEnd: 'pc',
+    applicablePost: 'admin',
+  };
+};
+
+// 默认图标列表
+const defaultIcons = [
+  { label: '产品知识', value: 'carbon:product' },
+  { label: '技术文档', value: 'carbon:code' },
+  { label: '常见问题', value: 'carbon:question' },
+];
+
+// 图标文件列表
+const iconFileList = ref([]);
+
+// 可选图标列表，使用public/icon下的本地图片
+const optionalIcons = [
+  { label: '文档', value: '/icon/1.png' },
+  { label: '代码', value: '/icon/2.png' },
+  { label: '问题', value: '/icon/3.png' },
+  { label: '书籍', value: '/icon/4.png' }
+];
+
+// 上传请求处理
+const handleUpload = (options) => {
+  console.log('上传图标', options);
+  // 实际项目中需要调用上传API
+  // 这里模拟上传成功
+  const mockResponse = {
+    data: {
+      url: URL.createObjectURL(options.file),
+      filename: options.file.name,
+    },
+  };
+  // 更新文件列表
+  scope.icon = [
+    {
+      name: options.file.name,
+      url: mockResponse.data.url,
+      status: 'success',
+      uid: options.file.uid,
+    },
+  ];
+  // 更新表单值
+  formApi.setValues({ icon: mockResponse.data.url });
+  options.onSuccess(mockResponse);
+};
+
+// 移除文件处理
+const handleRemove = (file, fileList) => {
+  console.log('移除图标', file, fileList);
+  scope.icon = fileList;
+  if (fileList.length === 0) {
+    formApi.setValues({ icon: '' });
+  }
+};
+
+// 预览文件处理
+const handlePreview = (file) => {
+  console.log('预览图标', file);
+  // 实际项目中可以实现预览功能
+};
+
+// 选择可选图标
+const selectOptionalIcon = (iconValue, currentScope) => {
+  console.log('选择可选图标', iconValue, currentScope);
+  // 生成一个模拟的文件对象
+  const mockFile = {
+    name: `${iconValue.replace('carbon:', '')}.svg`,
+    url: iconValue,
+    status: 'success',
+    uid: Date.now(),
+    isOptional: true,
+  };
+  // 更新文件列表
+  currentScope.icon = [mockFile];
+  // 更新表单值
+  formApi.setValues({ icon: iconValue });
+};
+
+const [Form, formApi] = useVbenForm({
+  showDefaultActions: false,
+  schema: drawerFormSchema(),
+});
+
+const isUpdateRef = ref<boolean>(false);
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onOpenChange(isOpen) {
+    if (!isOpen) {
+      return;
+    }
+    try {
+      drawerApi.drawerLoading(true);
+      const { id, isUpdate } = drawerApi.getData();
+      isUpdateRef.value = isUpdate;
+      if (isUpdate && id) {
+        const res = await getKnowledgeTypeDetail(id);
+        console.log('获取知识库类型详情数据:', res);
+        // 确保从正确的响应结构中获取数据
+        const detailData = res?.data || res;
+        await formApi.setValues(detailData);
+      } else {
+        // 新增时重置表单
+        await formApi.resetForm();
+      }
+    } catch (error) {
+      console.error('获取知识库类型详情失败:', error);
+    } finally {
+      drawerApi.drawerLoading(false);
+    }
+  },
+
+  async onConfirm() {
+    try {
+      this.confirmLoading = true;
+      const { valid } = await formApi.validate();
+      if (!valid) {
+        return;
+      }
+      const data = await formApi.getValues();
+
+      console.log('提交数据:', data);
+      await (isUpdateRef.value
+        ? updateKnowledgeType(data)
+        : addKnowledgeType(data));
+      emit('reload');
+      drawerApi.close();
+    } catch (error) {
+      console.error('保存知识库类型失败:', error);
+    } finally {
+      this.confirmLoading = false;
+    }
+  },
+});
+
+// 暴露drawerApi给父组件
+defineExpose({
+  getDrawerApi: () => drawerApi,
+});
+</script>
+
+<template>
+  <Drawer :title="isUpdateRef ? '编辑知识库分类' : '新增知识库分类'">
+    <Form>
+      <!-- 自定义Upload组件插槽 -->
+      <template #icon="scope">
+        <div class="flex items-start gap-6">
+          <!-- 上传组件 -->
+          <ElUpload
+            v-model:file-list="scope.icon"
+            action="#"
+            accept=".jpg,.jpeg,.png"
+            list-type="picture-card"
+            show-file-list
+            :auto-upload="true"
+            :drag="false"
+            :http-request="handleUpload"
+            :on-remove="handleRemove"
+            :on-preview="handlePreview"
+            class="w-[60px] h-[60px]"
+            :style="{ width: '60px', height: '60px' }"
+          >
+            <div class="w-full h-full flex items-center justify-center">
+              <ElIcon class="el-upload__icon">
+                <Plus size="18" />
+              </ElIcon>
+            </div>
+          </ElUpload>
+          
+          <!-- 可选图标列表 -->
+          <div class="flex flex-col gap-2">
+            <div class="text-xs text-gray-500">可选图标：</div>
+            <div class="flex gap-3 flex-wrap">
+              <div 
+                v-for="icon in optionalIcons" 
+                :key="icon.value"
+                class="optional-icon-item"
+                @click="selectOptionalIcon(icon.value, scope)"
+              >
+                <img :src="icon.value" :alt="icon.label" class="w-10 h-10" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </Form>
+  </Drawer>
+</template>
+
+<style scoped lang="scss">
+.optional-icon-item {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background-color: #f5f7fa;
+  
+  &:hover {
+    border-color: #409eff;
+    background-color: #ecf5ff;
+    transform: scale(1.1);
+  }
+  
+  &:active {
+    transform: scale(0.9);
+  }
+}
+
+::v-deep .el-upload--picture-card {
+    --el-upload-picture-card-size: 148px;
+    align-items: center;
+    background-color: #fafafa;
+    background-color: var(--el-fill-color-lighter);
+    border: 1px dashed #cdd0d6;
+    border: 1px dashed var(--el-border-color-darker);
+    border-radius: 6px;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-flex;
+    height: 60px;
+    justify-content: center;
+    vertical-align: top;
+    width: 60px;
+}
+</style>

packages/icons/src/iconify/index.ts

@@ -31,3 +31,6 @@ export const Refresh = createIconifyIcon('material-symbols-light:refresh');
 export const Clear = createIconifyIcon('material-symbols-light:delete-outline');
 export const Copy = createIconifyIcon('mingcute:copy-line');
 export const UserCenter = createIconifyIcon('la:user-cog');
+
+// 阅读量
+export const ReadCount = createIconifyIcon('la:eye');