Merge branch 'master' of http://192.168.1.222:3000/hnsh-smart-steward/smart-steward-admin

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

@@ -103,6 +103,17 @@ const localRoutes: RouteRecordStringComponent[] = [
     path: '/knowledge/detail/:classId',
   },
   {
+    component: '/knowledge/edit/index',
+    meta: {
+      activePath: '/knowledge/edit',
+      icon: 'carbon:data-base', 
+      title: '知识库编辑',
+      hideInMenu: true,
+    },
+    name: 'KnowledgeDetailEdit',
+    path: '/knowledge/detail/edit/:classId',
+  },
+  {
     component: '/schedule/detail/index',
     meta: {
       activePath: '/schedule/detail',

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

@@ -1,75 +0,0 @@
-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/remind-drawer.vue

@@ -1,39 +0,0 @@
-<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/detail/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

@@ -0,0 +1,970 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { Page } from '@vben/common-ui';
+import {
+  HomeFilled,
+  Plus,
+  Edit,
+  Delete,
+  DArrowLeft,
+  Expand,
+  Notification,
+} from '@element-plus/icons-vue';
+import {
+  ElButton,
+  ElIcon,
+  ElTree,
+  ElMessage,
+  ElInput,
+  ElUpload,
+} from 'element-plus';
+import TinymceEditor from '#/components/tinymce/src/editor.vue';
+
+// 路由实例
+const route = useRoute();
+const classId = route.params.classId;
+
+// 菜单折叠状态
+const isCollapse = ref(false);
+
+// 章节数据
+const chapterData = ref([
+  {
+    id: 1,
+    label: '第一章 基础知识',
+    children: [
+      { id: 2, label: '1.1 概述', saved: true },
+      { id: 3, label: '1.2 基本概念', saved: false },
+      { id: 4, label: '1.3 核心原理', saved: true },
+    ],
+  },
+  {
+    id: 5,
+    label: '第二章 进阶知识',
+    children: [
+      { id: 6, label: '2.1 高级特性', saved: true },
+      { id: 7, label: '2.2 最佳实践', saved: true },
+    ],
+  },
+  {
+    id: 8,
+    label: '第三章 案例分析',
+    children: [
+      { id: 9, label: '3.1 案例一', saved: false },
+      { id: 10, label: '3.2 案例二', saved: true },
+    ],
+  },
+]);
+
+// 选中的章节
+const selectedChapter = ref({
+  id: 'home',
+  label: '主页',
+  content: '这是知识库的主页内容，您可以在这里查看知识库的概述信息。',
+  updatedTime: '2025-12-22 14:30:00',
+});
+// 保存草稿
+const saveDraft = () => {
+  ElMessage.success('草稿保存成功');
+};
+
+// 发布
+const publish = () => {
+  ElMessage.success('发布成功');
+};
+
+// 附件列表
+const attachments = ref<any[]>([]);
+const uploadUrlRef = ref<string>('');
+
+// 处理附件上传
+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: 实现附件预览功能
+}
+
+
+
+// 点击章节
+const handleChapterClick = (node: any) => {
+  selectedChapter.value = {
+    id: node.id,
+    label: node.label,
+    content: `这是 ${node.label} 的内容，内容丰富详实，包含了该章节的核心知识点和实践案例。`,
+    updatedTime: '2025-12-22 14:30:00',
+  };
+};
+
+// 点击主页
+const handleHomeClick = () => {
+  selectedChapter.value = {
+    id: 'home',
+    label: '主页',
+    content: '这是知识库的主页内容，您可以在这里查看知识库的概述信息和使用指南。',
+    updatedTime: '2025-12-22 14:30:00',
+  };
+};
+
+// 添加章节
+const addChapter = (parentId = null) => {
+  ElMessage.info('添加章节功能待实现');
+};
+
+// 编辑章节
+const editChapter = (node) => {
+  ElMessage.info('编辑章节功能待实现');
+};
+
+// 删除章节
+const deleteChapter = (node) => {
+  ElMessage.info('删除章节功能待实现');
+};
+
+
+
+// 页面加载时获取数据
+onMounted(() => {
+  // 模拟获取知识库详情数据
+  console.log('加载知识库详情，ID:', classId);
+});
+</script>
+
+<template>
+  <Page>
+    <div class="knowledge-detail">
+      <!-- 顶部导航栏 -->
+      <div class="top-nav">
+        <div class="nav-left">
+          <ElIcon class="nav-icon"><HomeFilled /></ElIcon>
+          <span class="nav-separator">|</span>
+          <span class="nav-item gray">知识搜索</span>
+          <span class="nav-separator">></span>
+          <span class="nav-item active">我的文件</span>
+        </div>
+        <div class="nav-right">
+          <ElButton type="default" @click="saveDraft">保存草稿</ElButton>
+          <ElButton type="primary" @click="publish">发布</ElButton>
+        </div>
+      </div>
+
+      <!-- 主体内容区 -->
+      <div class="main-content">
+        <!-- 左侧目录 -->
+        <div class="left-sidebar" :class="{ 'collapsed': isCollapse }">
+          <!-- 折叠按钮 -->
+          <div class="collapse-btn" @click="isCollapse = true">
+            <ElIcon><DArrowLeft /></ElIcon>
+          </div>
+          
+          <div class="sidebar-content">
+            <!-- 知识库信息 -->
+            <div class="knowledge-info">
+              <div class="knowledge-icon">
+                <ElIcon class="icon-large"><HomeFilled /></ElIcon>
+              </div>
+              <div class="knowledge-title">
+                知识库示例
+              </div>
+            </div>
+
+            <!-- 主页按钮 -->
+            <div class="home-btn" @click="handleHomeClick">
+              <ElIcon><HomeFilled /></ElIcon>
+              <span :class="{ 'collapsed': isCollapse }">主页</span>
+            </div>
+
+            <!-- 章节树 -->
+            <div class="chapter-tree">
+              <ElTree
+                :data="chapterData"
+                node-key="id"
+                default-expand-all
+                :expand-on-click-node="false"
+                @node-click="handleChapterClick"
+              >
+                <template #default="{ node, data }">
+                  <div class="tree-node-content">
+                    <span>
+                      {{ node.label }}
+                      <ElIcon v-if="!data.saved" class="unsaved-icon">
+                        <Notification />
+                      </ElIcon>
+                    </span>
+                    <div class="tree-node-actions">
+                      <ElButton
+                        type="text"
+                        size="small"
+                        circle
+                        @click.stop="addChapter(data.id)"
+                        title="添加子章节"
+                      >
+                        <ElIcon><Plus /></ElIcon>
+                      </ElButton>
+                      <ElButton
+                        type="text"
+                        size="small"
+                        circle
+                        @click.stop="editChapter(data)"
+                        title="编辑章节"
+                      >
+                        <ElIcon><Edit /></ElIcon>
+                      </ElButton>
+                      <ElButton
+                        type="text"
+                        size="small"
+                        circle
+                        @click.stop="deleteChapter(data)"
+                        title="删除章节"
+                      >
+                        <ElIcon><Delete /></ElIcon>
+                      </ElButton>
+                    </div>
+                  </div>
+                </template>
+              </ElTree>
+            </div>
+          </div>
+        </div>
+
+        <!-- 中间内容 -->
+        <div class="center-content">
+          <ElIcon v-if="isCollapse" :size="20" class="collapse-control-btn" @click="isCollapse = false"><Expand /></ElIcon>
+          <!-- 内容表单 -->
+          <div class="content-form">
+            <!-- 第一行：标题 -->
+            <div class="form-row">
+              <div class="form-item">
+                <ElInput
+                  v-model="selectedChapter.label"
+                  placeholder="请输入标题"
+                  class="title-input"
+                />
+              </div>
+            </div>
+
+            <!-- 第二行：富文本编辑器 -->
+            <div class="form-row">
+              <div class="form-item">
+                <TinymceEditor v-model="selectedChapter.content" :height="400" />
+              </div>
+            </div>
+
+            <!-- 第三行：附件上传 -->
+            <div class="form-row">
+              <div class="form-item">
+                <div class="upload-section">
+                  <div class="upload-header">
+                    <div class="upload-title">上传附件：</div>
+                    <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"
+                    >
+                      <div class="upload-btn">
+                        <ElIcon><Plus /></ElIcon>
+                        <span>添加附件</span>
+                      </div>
+                    </ElUpload>
+                    <div class="upload-note">不超过5M</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+    </div>
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+.knowledge-detail {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 122px);
+}
+
+/* 顶部导航 */
+.top-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  margin-bottom: 10px;
+  background-color: #fff;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.nav-left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.nav-icon {
+  font-size: 18px;
+  color: #1890ff;
+}
+
+.nav-separator {
+  color: #e8e8e8;
+}
+
+.nav-item {
+  font-size: 14px;
+  cursor: pointer;
+  transition: color 0.3s;
+  
+  &.gray {
+    color: #999;
+  }
+  
+  &.active {
+    font-weight: 500;
+    color: #000;
+  }
+  
+  &:hover {
+    color: #1890ff;
+  }
+}
+
+.nav-right {
+  display: flex;
+  gap: 12px;
+}
+
+/* 主体内容区 */
+.main-content {
+  display: flex;
+  flex: 1;
+  gap: 10px;
+}
+
+/* 左侧边栏 */
+.left-sidebar {
+  position: relative;
+  width: 250px;
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+  transition: all 0.3s ease;
+}
+
+.left-sidebar.collapsed {
+  width: 0;
+  padding: 0;
+  margin: 0;
+}
+
+.collapse-btn {
+  width: 24px;
+  height: 24px;
+  padding: 15px;
+  line-height: 24px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.left-sidebar.collapsed .collapse-btn {
+  right: -15px;
+}
+
+.sidebar-content {
+  padding: 15px;
+  transition: opacity 0.3s ease;
+}
+
+.left-sidebar.collapsed .sidebar-content {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.knowledge-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+
+.knowledge-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  margin-bottom: 10px;
+  background-color: #1890ff;
+  border-radius: 8px;
+}
+
+.icon-large {
+  font-size: 32px;
+  color: #fff;
+}
+
+.knowledge-title {
+  font-size: 16px;
+  font-weight: 500;
+  text-align: center;
+  transition: opacity 0.3s;
+  
+  &.collapsed {
+    height: 0;
+    margin: 0;
+    overflow: hidden;
+    opacity: 0;
+  }
+}
+
+.home-btn {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 10px;
+  margin-bottom: 20px;
+  cursor: pointer;
+  background-color: #E8F3FF;
+  border-radius: 6px;
+  transition: background-color 0.3s;
+  
+  span {
+    transition: opacity 0.3s;
+  }
+  
+  &.collapsed {
+    span {
+      width: 0;
+      overflow: hidden;
+      opacity: 0;
+    }
+  }
+  
+  &:hover {
+    background-color: #e0f2fe;
+  }
+}
+
+.chapter-search {
+  margin-bottom: 20px;
+  transition: opacity 0.3s;
+  
+  &.collapsed {
+    height: 0;
+    margin: 0;
+    overflow: hidden;
+    opacity: 0;
+  }
+}
+
+.chapter-tree {
+  max-height: calc(100vh - 300px);
+  overflow-y: auto;
+}
+
+.tree-node-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.tree-node-actions {
+  display: none;
+  gap: 4px;
+}
+
+.tree-node-content:hover .tree-node-actions {
+  display: flex;
+}
+
+.tree-node-actions button {
+  margin-left: 0 !important;
+}
+
+.unsaved-icon {
+  margin-left: 4px;
+  color: #ff9800;
+}
+
+/* 中间内容区 */
+.center-content {
+  position: relative;
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+/* 表单行样式 */
+.form-row {
+  margin-bottom: 15px;
+}
+
+/* 上传区域样式 */
+.upload-section {
+  width: 100%;
+}
+
+.upload-header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.upload-title {
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.upload-btn {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  padding: 6px 12px;
+  margin-top: 10px;
+  font-size: 14px;
+  color: #606266;
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  transition: all 0.3s;
+
+  &:hover {
+    color: #409eff;
+    border-color: #409eff;
+  }
+}
+
+.upload-note {
+  font-size: 12px;
+  color: #909399;
+  white-space: nowrap;
+}
+
+/* 附件列表样式 */
+.el-upload-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  margin-top: 15px;
+}
+
+.el-upload-list__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: #606266;
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+.el-upload-list__item-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.el-upload-list__item-delete {
+  color: #f56c6c;
+  cursor: pointer;
+  transition: color 0.3s;
+
+  &:hover {
+    color: #f78989;
+  }
+}
+
+.collapse-control-btn {
+  position: absolute;
+  top: 15px;
+  left: 10px;
+  z-index: 10;
+  padding: 4px;
+  margin-right: 10px;
+  font-size: 20px;
+  color: #666;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: color 0.3s;
+}
+
+.collapse-control-btn:hover {
+  color: #1890ff;
+  background-color: #f0f9ff;
+}
+
+.content-header {
+  margin-bottom: 20px;
+  margin-left: 20px;
+}
+
+.content-title {
+  margin-bottom: 8px;
+  font-size: 24px;
+  font-weight: 500;
+}
+
+.content-meta {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  font-size: 12px;
+  color: #999;
+}
+
+.content-body {
+  line-height: 1.8;
+}
+
+.content-text {
+  margin-bottom: 30px;
+  font-size: 14px;
+}
+
+.content-attachments {
+  padding-top: 20px;
+  border-top: 1px solid #e8e8e8;
+}
+
+/* 右侧边栏 */
+.right-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 320px;
+}
+
+.comment-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 20px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+.section-title {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding-left: 12px;
+  margin-bottom: 20px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #000;
+  border-left: 3px solid #1890ff;
+}
+
+.write-comment {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  max-height: 300px;
+  padding-right: 5px;
+  margin-bottom: 20px;
+  overflow-y: auto;
+}
+
+.write-comment::-webkit-scrollbar {
+  width: 6px;
+}
+
+.write-comment::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.write-comment::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.write-comment::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+.comment-row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+}
+
+.row-label {
+  flex-shrink: 0;
+  width: 60px;
+  padding-top: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #000;
+  text-align: right;
+}
+
+.row-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.photo-area {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+}
+
+.photo-preview,
+.photo-placeholder {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  background-color: #fafafa;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+}
+
+.photo-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.remove-photo {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  font-size: 14px;
+  line-height: 1;
+  color: #fff;
+  background-color: rgb(0 0 0 / 50%);
+  border-radius: 50%;
+}
+
+.comment-submit {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 10px;
+}
+
+.comment-submit .el-button {
+  padding: 8px 16px;
+  margin-left: 20px;
+  font-size: 14px;
+}
+
+.upload-btn {
+  display: flex;
+  align-items: center;
+}
+
+
+
+.comment-list {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+
+  /* max-height: 400px; */
+
+  /* overflow-y: auto; */
+}
+
+.comment-item {
+  display: flex;
+  gap: 12px;
+  padding-bottom: 15px;
+}
+
+.comment-avatar {
+  width: 36px;
+  height: 36px;
+  margin-top: 2px;
+  color: #fff;
+  background-color: #1890ff;
+}
+
+.comment-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* 第一行：头像、姓名、岗位 */
+.comment-header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 14px;
+}
+
+.comment-username {
+  font-weight: 500;
+  color: #000;
+}
+
+.comment-position {
+  font-size: 12px;
+  color: #666;
+}
+
+/* 第二行：评论内容 */
+.comment-text {
+  font-size: 14px;
+  line-height: 1.5;
+  color: #666;
+}
+
+.comment-images {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 5px;
+}
+
+.comment-image {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+/* 第三行：时间和回复按钮 */
+.comment-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #999;
+}
+
+.reply-btn {
+  padding: 0 !important;
+  margin: 0 !important;
+  font-size: 12px !important;
+  color: #1890ff !important;
+}
+
+/* 第四行：历史回复消息 */
+.reply-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.reply-item {
+  padding: 10px;
+  font-size: 14px;
+  color: #666;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+
+.reply-text {
+  display: block;
+  line-height: 1.4;
+}
+
+.reply-text .reply-username {
+  margin-right: 5px;
+  font-weight: 500;
+  color: #000;
+}
+
+/* 回复输入框 */
+.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/config-data.tsx

@@ -1,195 +0,0 @@
-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: '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: 'icon',
-    label: '知识图标',
-    // 使用插槽自定义上传组件
-    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: 'icon',
-    slots: { default: 'icon' },
-    title: '类别图标',
-    minWidth: 100,
-  },
-  {
-    field: 'id',
-    title: '类别ID',
-    width: 80,
-  },
-  {
-    field: 'name',
-    title: '类别名称',
-    minWidth: 120,
-  },
-
-  {
-    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/create.vue

@@ -0,0 +1,374 @@
+<script lang="ts" setup>
+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: string;
+  initialData?: FormData;
+}>();
+
+// 定义事件
+const emit = defineEmits(['close', 'save']);
+
+// 表单引用
+const formRef = ref();
+
+// 表单数据
+const form = ref<FormData>({
+  name: '',
+  description: '',
+  icon: '',
+  managers: [],
+  visibleApps: [],
+  visiblePositions: [],
+  association: '',
+});
+
+// 表单规则
+const rules = {
+  name: [
+    { required: true, message: '请输入知识库名称', trigger: 'blur' },
+    { max: 50, message: '知识库名称不能超过50个字符', trigger: 'blur' },
+  ],
+  description: [
+    { required: true, message: '请输入知识库描述', trigger: 'blur' },
+    { max: 200, message: '知识库描述不能超过200个字符', trigger: 'blur' },
+  ],
+  icon: [
+    { required: true, message: '请选择知识库图标', trigger: 'change' },
+  ],
+};
+
+// 默认图标选项
+const defaultIcons = [
+  { name: '蓝色书籍', value: 'blue-book' },
+  { name: '橙色书籍', value: 'orange-book' },
+  { name: '黄色书籍', value: 'yellow-book' },
+  { name: '绿色书籍', value: 'green-book' },
+  { name: '紫色书籍', value: 'purple-book' },
+  { name: '蓝色列表', value: 'blue-list' },
+  { name: '橙色列表', value: 'orange-list' },
+  { name: '黄色列表', value: 'yellow-list' },
+  { name: '绿色列表', value: 'green-list' },
+  { name: '紫色列表', value: 'purple-list' },
+];
+
+// 监听初始数据变化
+watch(
+  () => props.initialData,
+  (newData) => {
+    if (newData) {
+      form.value = { ...newData };
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+// 上传图片处理
+const uploadFile = (file: any) => {
+  // 这里可以添加图片上传逻辑
+  ElMessage.success('图片上传成功');
+  form.value.icon = URL.createObjectURL(file.raw);
+  return false; // 阻止默认上传行为
+};
+
+// 选择默认图标
+const selectDefaultIcon = (iconValue: string) => {
+  form.value.icon = iconValue;
+};
+
+// 表单提交
+const submitForm = () => {
+  // 这里可以添加表单提交逻辑
+  emit('save', form.value);
+  ElMessage.success(props.mode === 'create' ? '创建成功' : '编辑成功');
+};
+
+// 关闭表单
+const closeForm = () => {
+  emit('close');
+};
+</script>
+
+<template>
+  <ElForm
+    :model="form"
+    :rules="rules"
+    ref="formRef"
+    label-position="top"
+    class="knowledge-form"
+  >
+    <!-- 知识库名称 -->
+    <ElFormItem label="知识库名称" prop="name">
+      <ElInput
+        v-model="form.name"
+        placeholder="请输入"
+        maxlength="50"
+        show-word-limit
+      />
+    </ElFormItem>
+
+    <!-- 知识库描述 -->
+    <ElFormItem label="知识库描述" prop="description">
+      <ElInput
+        v-model="form.description"
+        type="textarea"
+        placeholder="请输入"
+        maxlength="200"
+        show-word-limit
+        :rows="4"
+      />
+    </ElFormItem>
+
+    <!-- 知识库图标 -->
+    <ElFormItem label="知识库图标" prop="icon">
+      <ElUpload
+        :show-file-list="false"
+        :auto-upload="false"
+        :on-change="uploadFile"
+      >
+        <div class="icon-upload">
+          <ElIcon><Upload /></ElIcon>
+          <div class="upload-text">上传图标</div>
+        </div>
+      </ElUpload>
+      <div v-if="form.icon" class="icon-preview">
+        <img :src="form.icon" alt="预览" />
+      </div>
+      <div class="icon-default">
+        <div class="section-title">预览可选图标</div>
+        <div class="icon-list">
+          <div
+            v-for="icon in defaultIcons"
+            :key="icon.value"
+            class="icon-item"
+            :class="{ active: form.icon === icon.value }"
+            @click="selectDefaultIcon(icon.value)"
+          >
+            <!-- 这里可以根据icon.value显示不同的图标 -->
+            <div class="icon-placeholder" :class="icon.value"></div>
+          </div>
+        </div>
+      </div>
+    </ElFormItem>
+
+    <!-- 知识库管理员 -->
+    <ElFormItem label="知识库管理员（管理员具有知识库编辑、删除的权限）" prop="managers">
+      <ElSelect
+        v-model="form.managers"
+        placeholder="可多选"
+        multiple
+        filterable
+      >
+        <ElOption label="管理员1" value="admin1" />
+        <ElOption label="管理员2" value="admin2" />
+        <ElOption label="管理员3" value="admin3" />
+      </ElSelect>
+    </ElFormItem>
+
+    <!-- 可见范围 -->
+    <ElFormItem label="可见范围（可查看该知识库权限）">
+      <div class="visible-range" style="width: 100%;">
+        <ElFormItem label="端" label-position="right" prop="visibleApps">
+          <ElSelect
+            v-model="form.visibleApps"
+            placeholder="可多选"
+            multiple
+            filterable
+            style="width: 100%"
+          >
+            <ElOption label="PC端" value="pc" />
+            <ElOption label="移动端" value="mobile" />
+            <ElOption label="小程序" value="miniprogram" />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="岗位" label-position="right" prop="visiblePositions">
+          <ElSelect
+            v-model="form.visiblePositions"
+            placeholder="可多选"
+            multiple
+            filterable
+            style="width: 100%"
+          >
+            <ElOption label="经理" value="manager" />
+            <ElOption label="员工" value="employee" />
+            <ElOption label="实习生" value="intern" />
+          </ElSelect>
+        </ElFormItem>
+      </div>
+    </ElFormItem>
+
+    <!-- 知识库关联 -->
+    <ElFormItem label="知识库关联（关联后，两个知识库内容同步编辑）" prop="association">
+      <ElSelect
+        v-model="form.association"
+        placeholder="单选"
+        filterable
+      >
+        <ElOption label="无关联" value="" />
+        <ElOption label="知识库A" value="knowledgeA" />
+        <ElOption label="知识库B" value="knowledgeB" />
+      </ElSelect>
+    </ElFormItem>
+
+    <!-- 操作按钮 -->
+    <div class="form-actions">
+      <ElButton type="primary" @click="submitForm">确定</ElButton>
+      <ElButton @click="closeForm">取消</ElButton>
+    </div>
+  </ElForm>
+</template>
+
+<style lang="scss" scoped>
+.knowledge-form {
+  padding: 20px;
+}
+
+.icon-upload {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 120px;
+  cursor: pointer;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  transition: all 0.3s;
+  
+  &:hover {
+    border-color: #409eff;
+  }
+  
+  .upload-text {
+    margin-top: 8px;
+    font-size: 14px;
+    color: #666;
+  }
+}
+
+.icon-preview {
+  margin: 16px 0;
+  
+  img {
+    width: 120px;
+    height: 120px;
+    object-fit: cover;
+    border-radius: 6px;
+  }
+}
+
+.icon-default {
+  margin-top: 24px;
+  
+  .section-title {
+    margin-bottom: 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+  }
+  
+  .icon-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+  
+  .icon-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 60px;
+    height: 60px;
+    cursor: pointer;
+    border: 2px solid transparent;
+    border-radius: 6px;
+    transition: all 0.3s;
+    
+    &:hover {
+      border-color: #409eff;
+    }
+    
+    &.active {
+      background-color: #e6f7ff;
+      border-color: #409eff;
+    }
+    
+    .icon-placeholder {
+      width: 40px;
+      height: 40px;
+      border-radius: 4px;
+    }
+    
+    .blue-book {
+      background-color: #3370ff;
+    }
+    
+    .orange-book {
+      background-color: #ff7d00;
+    }
+    
+    .yellow-book {
+      background-color: #ffc107;
+    }
+    
+    .green-book {
+      background-color: #00b42a;
+    }
+    
+    .purple-book {
+      background-color: #9254de;
+    }
+    
+    .blue-list {
+      background-color: #3370ff;
+    }
+    
+    .orange-list {
+      background-color: #ff7d00;
+    }
+    
+    .yellow-list {
+      background-color: #ffc107;
+    }
+    
+    .green-list {
+      background-color: #00b42a;
+    }
+    
+    .purple-list {
+      background-color: #9254de;
+    }
+  }
+}
+
+.visible-range {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  background-color: #f5f7fa;
+  border-radius: 6px;
+}
+
+.form-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 32px;
+}
+</style>
+

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

@@ -1,203 +1,278 @@
-<script setup lang="ts">
-import type { VbenFormProps } from '@vben/common-ui';
-
-import type { KnowledgeType } from './config-data';
-
-import type { VxeGridProps } from '#/adapter/vxe-table';
-
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+import { ElButton, ElCard, ElIcon, ElPagination } from 'element-plus';
+import { Edit, Delete } from '@element-plus/icons-vue';
+import KnowledgeCreate from './create.vue';
+import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { Page, useVbenDrawer } from '@vben/common-ui';
+// 导入 FormData 类型
+interface FormData {
+  name: string;
+  description: string;
+  icon: string;
+  managers: any[];
+  visibleApps: any[];
+  visiblePositions: any[];
+  association: string;
+}
 
-import { ElImage, ElMessageBox } from 'element-plus';
+// 路由实例
+const router = useRouter();
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+// 示例数据
+const categories = [
+  { id: 1, name: '悬浮态', description: '位使用人员提供了知识管理场景示例', creator: '张三', createTime: '2025-01-01', icon: 'Menu', color: '#3370FF' },
+  { id: 2, name: '常规态', description: '位使用人员提供了知识管理场景示例', creator: '张三', createTime: '2025-01-01', icon: 'Menu', color: '#3370FF' },
+  { id: 3, name: '我的文件', description: '位使用人员提供了知识管理场景示例', creator: '张三', createTime: '2025-01-01', icon: 'Menu', color: '#3370FF' },
+  { id: 4, name: '我的文件', description: '位使用人员提供了知识管理场景示例', creator: '张三', createTime: '2025-01-01', icon: 'Document', color: '#9254DE' },
+  { id: 5, name: '我的文件', description: '位使用人员提供了知识管理场景示例', creator: '张三', createTime: '2025-01-01', icon: 'Menu', color: '#FF7D00' },
+  { id: 6, name: '我的文件', description: '位使用人员提供了知识管理场景示例', creator: '张三', createTime: '2025-01-01', icon: 'Menu', color: '#00B42A' },
+  { id: 7, name: '我的文件', description: '位使用人员提供了知识管理场景示例', creator: '张三', createTime: '2025-01-01', icon: 'Menu', color: '#FF7D00' },
+  { id: 8, name: '我的文件', description: '位使用人员提供了知识管理场景示例', creator: '张三', createTime: '2025-01-01', icon: 'Menu', color: '#9254DE' },
+  { id: 9, name: '我的文件', description: '位使用人员提供了知识管理场景示例', creator: '张三', createTime: '2025-01-01', icon: 'Menu', color: '#3370FF' },
+  { id: 10, name: '我的文件', description: '位使用人员提供了知识管理场景示例', creator: '张三', createTime: '2025-01-01', icon: 'Menu', color: '#3370FF' },
+  { id: 11, name: '我的文件', description: '位使用人员提供了知识管理场景示例', creator: '张三', createTime: '2025-01-01', icon: 'Menu', color: '#3370FF' },
+  { id: 12, name: '我的文件', description: '位使用人员提供了知识管理场景示例', creator: '张三', createTime: '2025-01-01', icon: 'Menu', color: '#3370FF' },
+  { id: 13, name: '我的文件', description: '位使用人员提供了知识管理场景示例', creator: '张三', createTime: '2025-01-01', icon: 'Menu', color: '#3370FF' },
+  { id: 14, name: '我的文件', description: '位使用人员提供了知识管理场景示例', creator: '张三', createTime: '2025-01-01', icon: 'Menu', color: '#3370FF' },
+  { id: 15, name: '我的文件', description: '位使用人员提供了知识管理场景示例', creator: '张三', createTime: '2025-01-01', icon: 'Menu', color: '#3370FF' },
+];
 
-import { queryFormSchema, tableColumns } from './config-data';
-import TypeDrawer from './type-drawer.vue';
+// 抽屉控制
+const drawerVisible = ref(false);
+const drawerMode = ref('create');
+const selectedCategory = ref<FormData>({
+  name: '',
+  description: '',
+  icon: '',
+  managers: [],
+  visibleApps: [],
+  visiblePositions: [],
+  association: '',
+});
 
-const router = useRouter();
+// 跳转到详情页
+const navigateToDetail = (id: number) => {
+  router.push(`/knowledge/detail/${id}`);
+};
 
-// 模拟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,
+// 打开创建抽屉
+const openCreateDrawer = () => {
+  drawerMode.value = 'create';
+  selectedCategory.value = {
+    name: '',
+    description: '',
+    icon: '',
+    managers: [],
+    visibleApps: [],
+    visiblePositions: [],
+    association: '',
   };
-  return mockData;
+  drawerVisible.value = true;
 };
 
-// 定义侧拉
-const [TypeDrawerCom, typeDrawerApi] = useVbenDrawer({
-  connectedComponent: TypeDrawer,
-});
-
-const deleteKnowledgeType = async (ids: string[]) => {
-  // 模拟删除操作
-  // console.log('删除知识库类别', ids);
-  return { success: true };
+// 打开编辑抽屉
+const openEditDrawer = (category: any) => {
+  drawerMode.value = 'edit';
+  selectedCategory.value = {
+    name: category.name || '',
+    description: category.description || '',
+    icon: category.icon || '',
+    managers: [],
+    visibleApps: [],
+    visiblePositions: [],
+    association: '',
+  };
+  drawerVisible.value = 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 closeDrawer = () => {
+  drawerVisible.value = false;
 };
 
-// 列表配置
-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 saveCategory = (data: any) => {
+  if (drawerMode.value === 'create') {
+    // 这里可以添加创建逻辑
+    console.log('创建知识库:', data);
+  } else {
+    // 这里可以添加编辑逻辑
+    console.log('编辑知识库:', data);
+  }
 };
+</script>
+<template>
+<Page>
+<div class="wrap">
+    <!-- 页面头部 -->
+    <div class="header">
+      <ElButton type="primary" @click="openCreateDrawer">+ 添加类别</ElButton>
+      <!-- <ElButton type="default">管理</ElButton> -->
+    </div>
+    <!-- 卡片列表 -->
+    <div class="card-list">
+      <div v-for="category in categories" :key="category.id" class="card-item">
+        <ElCard :bordered="false" class="category-card" @click="navigateToDetail(category.id)">
+          <div class="card-content">
+            <!-- 左侧图标 -->
+            <div class="card-icon" :style="{ backgroundColor: category.color + '20', color: category.color }">
+              <ElIcon :icon="category.icon" size="24" />
+            </div>
+            <!-- 中间内容 -->
+            <div class="card-main">
+              <h3 class="card-title">{{ category.name }}</h3>
+              <p class="card-description">{{ category.description }}</p>
+            </div>
+            <!-- 右侧信息 -->
+            <div class="card-info">
+              <div class="creator">{{ category.creator }}</div>
+              <div class="create-time">{{ category.createTime }}</div>
+              <!-- 操作按钮 -->
+              <div class="card-actions">
+                <ElButton type="text" :icon="Edit" circle @click.stop="openEditDrawer(category)" />
+              <ElButton type="text" :icon="Delete" circle />
+              </div>
+            </div>
+          </div>
+        </ElCard>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="pagination">
+      <ElPagination 
+        layout="prev, pager, next" 
+        :total="categories.length" 
+        :page-size="15"
+      />
+    </div>
+    <!-- 创建/编辑抽屉 -->
+    <ElDrawer
+      v-model="drawerVisible"
+      :title="drawerMode === 'create' ? '创建知识库' : '编辑知识库'"
+      size="30%"
+      direction="rtl"
+      @close="closeDrawer"
+    >
+      <KnowledgeCreate
+        :mode="drawerMode"
+        :initial-data="selectedCategory"
+        @close="closeDrawer"
+        @save="saveCategory"
+      />
+    </ElDrawer>
+</div>
+</Page>
+</template>
+<style lang="scss" scoped>
+.wrap {
+padding: 16px;
+background-color: #fff;
+border-radius: 6px;
+}
 
-// 创建列表实例
-const [BasicTable, BasicTableApi] = useVbenVxeGrid({
-  formOptions,
-  gridOptions,
-});
+.header {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
 
-// 新增知识库类别
-const handleAdd = () => {
-  // 调用抽屉组件的open方法
-  typeDrawerApi.setData({ isUpdate: false }).open();
-};
+.card-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-bottom: 24px;
+}
 
-// 编辑知识库类别
-const handleEdit = (row: KnowledgeType) => {
-  // 调用抽屉组件的open方法
-  typeDrawerApi.setData({ id: row.id, isUpdate: true }).open();
-};
+.category-card {
+  height: 100%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
 
-// 查看知识库类别详情
-const handleView = (row: KnowledgeType) => {
-  // 实际项目中可以跳转到详情页面
+.category-card:hover {
+  background-color: #E8F3FF;
+}
 
-  router.push(`/knowledge/detail/${row.id}`);
-};
+.category-card:hover .card-title {
+  color: #2D64D0;
+}
 
-// 删除知识库类别
-const handleDelete = async (row: KnowledgeType) => {
-  try {
-    await ElMessageBox.confirm(`确认删除知识库类别"${row.name}"吗？`, '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    });
-    await deleteKnowledgeType([row.id]);
-    await BasicTableApi.reload();
-  } catch {
-    // 取消删除操作
-  }
-};
-</script>
+.category-card:hover .creator,
+.category-card:hover .create-time {
+  display: none;
+}
+
+.category-card:hover .card-actions {
+  display: flex;
+}
+
+.card-content {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 10px 0;
+}
+
+.card-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 6px;
+}
+
+.card-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.card-title {
+  margin: 0 0 4px;
+  overflow: hidden;
+  font-size: 16px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 0.3s ease;
+}
+
+.card-description {
+  margin: 0;
+  overflow: hidden;
+  font-size: 12px;
+  color: #666;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-info {
+  min-width: 80px;
+  text-align: right;
+}
+
+.creator {
+  margin-bottom: 4px;
+  font-size: 12px;
+  color: #666;
+}
+
+.create-time {
+  font-size: 12px;
+  color: #999;
+}
+
+.card-actions {
+  display: none;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+}
+</style>
 
-<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>
-
-    <!-- 抽屉组件 -->
-    <TypeDrawerCom />
-  </Page>
-</template>

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

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

apps/web-ele/src/views/schedule/ceshi/index.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElCard, ElTag, ElSpace, ElBadge } from 'element-plus';
+
+// 任务类型定义
+interface Task {
+  id: number;
+  title: string;
+  status: 'overdue' | 'today' | 'upcoming';
+  authorization: 'can_authorize' | 'authorized' | 'been_authorized' | 'none';
+  timeLeft?: string;
+  overdueDays?: number;
+}
+
+// 模拟数据
+const overdueTasks = ref<Task[]>([
+  {
+    id: 1,
+    title: '量缸试水 1',
+    status: 'overdue',
+    authorization: 'can_authorize',
+    overdueDays: 23
+  },
+  {
+    id: 2,
+    title: '量缸试水 1',
+    status: 'overdue',
+    authorization: 'been_authorized',
+    overdueDays: 23
+  },
+  {
+    id: 3,
+    title: '量缸试水 1',
+    status: 'overdue',
+    authorization: 'authorized',
+    overdueDays: 23
+  },
+  {
+    id: 4,
+    title: '量缸试水 1',
+    status: 'overdue',
+    authorization: 'none',
+    overdueDays: 23
+  }
+]);
+
+const todayTasks = ref<Task[]>([
+  {
+    id: 5,
+    title: '量缸试水 2',
+    status: 'today',
+    authorization: 'can_authorize',
+    timeLeft: '还剩 34 分钟截止'
+  },
+  {
+    id: 6,
+    title: '量缸试水 2',
+    status: 'today',
+    authorization: 'been_authorized',
+    timeLeft: '还剩 34 分钟截止'
+  },
+  {
+    id: 7,
+    title: '量缸试水 2',
+    status: 'today',
+    authorization: 'authorized',
+    timeLeft: '还剩 34 分钟截止'
+  },
+  {
+    id: 8,
+    title: '量缸试水 2',
+    status: 'today',
+    authorization: 'none',
+    timeLeft: '还剩 34 分钟截止'
+  }
+]);
+
+// 获取授权标签的颜色
+const getAuthorizationTagColor = (auth: string) => {
+  switch (auth) {
+    case 'can_authorize':
+      return 'primary';
+    case 'been_authorized':
+      return 'danger';
+    case 'authorized':
+      return 'warning';
+    default:
+      return '';
+  }
+};
+
+// 获取授权标签的文本
+const getAuthorizationTagText = (auth: string) => {
+  switch (auth) {
+    case 'can_authorize':
+      return '可授权';
+    case 'been_authorized':
+      return '被授权';
+    case 'authorized':
+      return '已授权';
+    default:
+      return '';
+  }
+};
+</script>
+
+<template>
+  <div class="schedule-day-view-messages">
+    <ElCard class="messages-container" shadow="hover" :body-style="{ padding: '16px' }">
+      <!-- 逾期待处理部分 -->
+      <div class="section">
+        <h3 class="section-title">逾期待处理</h3>
+        <div class="tasks-list">
+          <div 
+            v-for="task in overdueTasks" 
+            :key="task.id"
+            class="task-item overdue"
+          >
+            <div class="task-content">
+              <ElSpace size="small">
+                <ElTag 
+                  v-if="task.authorization !== 'none'"
+                  :type="getAuthorizationTagColor(task.authorization)"
+                  size="small"
+                >
+                  {{ getAuthorizationTagText(task.authorization) }}
+                </ElTag>
+                <span class="task-title">{{ task.title }}</span>
+              </ElSpace>
+            </div>
+            <div class="task-time">
+              <span class="overdue-text">已逾期 {{ task.overdueDays }} 天</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 当日部分 -->
+      <div class="section">
+        <h3 class="section-title">当日</h3>
+        <div class="tasks-list">
+          <div 
+            v-for="task in todayTasks" 
+            :key="task.id"
+            class="task-item today"
+          >
+            <div class="task-content">
+              <ElSpace size="small">
+                <ElTag 
+                  v-if="task.authorization !== 'none'"
+                  :type="getAuthorizationTagColor(task.authorization)"
+                  size="small"
+                >
+                  {{ getAuthorizationTagText(task.authorization) }}
+                </ElTag>
+                <span class="task-title">{{ task.title }}</span>
+              </ElSpace>
+            </div>
+            <div class="task-time">
+              <span class="time-left-text">{{ task.timeLeft }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ElCard>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.schedule-day-view-messages {
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+}
+
+.messages-container {
+  height: 100%;
+  overflow: auto;
+}
+
+.section {
+  margin-bottom: 24px;
+
+  &-title {
+    padding-bottom: 8px;
+    margin-bottom: 12px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #409EFF;
+    border-bottom: 1px solid #E4E7ED;
+  }
+}
+
+.tasks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.task-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border-radius: 4px;
+  transition: all 0.3s;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+  }
+
+  &.overdue {
+    background-color: #FDF6EC;
+    border: 1px solid #FAE5D3;
+  }
+
+  &.today {
+    background-color: #F0F9FF;
+    border: 1px solid #E0F2FE;
+  }
+}
+
+.task-content {
+  flex: 1;
+}
+
+.task-title {
+  font-size: 14px;
+  color: #303133;
+}
+
+.task-time {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.overdue-text {
+  color: #F56C6C;
+}
+
+.time-left-text {
+  color: #E6A23C;
+}
+</style>

apps/web-ele/src/views/schedule/view/index.vue

@@ -371,17 +371,17 @@ console.log(currentDate.value);
 // }
 
 :deep(.custom-radio-group .el-radio-button) {
-  border: none !important;
+  padding: 4px;
   // background: transparent !important;
   background-color: #fafafa !important;
-  padding: 4px;
+  border: none !important;
 }
 
 :deep(.custom-radio-group .el-radio-button__inner) {
-  border: none !important;
+  padding: 0 8px;
   background: transparent !important;
+  border: none !important;
   box-shadow: none !important;
-  padding: 0 8px;
 }
 
 :deep(.custom-radio-group .el-radio-button__inner:hover) {
@@ -390,9 +390,9 @@ console.log(currentDate.value);
 }
 
 :deep(.custom-radio-group .el-radio-button.is-active .el-radio-button__inner) {
-  background: transparent !important;
   color: #1890ff !important;
-  box-shadow: none !important;
+  background: transparent !important;
   border: none !important;
+  box-shadow: none !important;
 }
 </style>

apps/web-ele/src/views/system/post/config-data.ts

@@ -5,6 +5,20 @@ import { DictEnum } from '@vben/constants';
 
 import { getDictOptions } from '#/utils/dict';
 
+// 字典标识常量
+const DICT_KEYS = {
+  // 任务类型字典标识
+  TASK_TYPE: 'task_type',
+  // 岗位类型字典标识
+  POST_TYPE: 'post_type',
+};
+
+// 获取任务类型字典选项
+const getTaskTypeOptions = () => getDictOptions(DICT_KEYS.TASK_TYPE);
+
+// 获取岗位类型字典选项
+const getPostTypeOptions = () => getDictOptions(DICT_KEYS.POST_TYPE);
+
 export const tableColumns: VxeGridProps['columns'] = [
   {
     type: 'checkbox',
@@ -15,10 +29,6 @@ export const tableColumns: VxeGridProps['columns'] = [
     title: '岗位编号',
   },
   {
-    field: 'postCode',
-    title: '岗位编码',
-  },
-  {
     field: 'postName',
     title: '岗位名称',
   },
@@ -27,6 +37,29 @@ export const tableColumns: VxeGridProps['columns'] = [
     title: '岗位排序',
   },
   {
+    field: 'taskType',
+    title: '任务类型',
+    formatter: (params: { cellValue: string | string[]; column: any; row: any }) => {
+      const options = getTaskTypeOptions();
+      // 处理接口返回的逗号分隔字符串和前端多选的数组
+      const cellValue = params.cellValue;
+      const values = typeof cellValue === 'string' ? cellValue.split(',') : Array.isArray(cellValue) ? cellValue : [cellValue];
+      return values.map(value => {
+        const option = options.find((item) => item.value === value);
+        return option ? option.label : value;
+      }).filter(label => label).join(', ');
+    },
+  },
+  {
+    field: 'type',
+    title: '岗位类型',
+    formatter: (params: { cellValue: string; column: any; row: any }) => {
+      const options = getPostTypeOptions();
+      const option = options.find((item) => item.value === params.cellValue);
+      return option ? option.label : params.cellValue;
+    },
+  },
+  {
     field: 'status',
     title: '状态',
     slots: { default: 'status' },
@@ -46,16 +79,30 @@ export const tableColumns: VxeGridProps['columns'] = [
 export const querySchema: FormSchemaGetter = () => [
   {
     component: 'Input',
-    label: '岗位编码',
-    fieldName: 'postCode',
-  },
-  {
-    component: 'Input',
     label: '岗位名称',
     fieldName: 'postName',
   },
   {
     component: 'Select',
+    label: '任务类型',
+    componentProps: {
+      placeholder: '请选择任务类型',
+      options: getTaskTypeOptions(),
+      multiple: true,
+    },
+    fieldName: 'taskType',
+  },
+  {
+    component: 'Select',
+    label: '岗位类型',
+    componentProps: {
+      placeholder: '请选择岗位类型',
+      options: getPostTypeOptions(),
+    },
+    fieldName: 'type',
+  },
+  {
+    component: 'Select',
     label: '状态',
     componentProps: {
       options: getDictOptions(DictEnum.SYS_NORMAL_DISABLE),
@@ -82,15 +129,6 @@ export const drawerFormSchema: FormSchemaGetter = () => [
     rules: 'required',
   },
   {
-    component: 'Input',
-    label: '岗位编码',
-    componentProps: {
-      maxlength: 64,
-    },
-    fieldName: 'postCode',
-    rules: 'required',
-  },
-  {
     component: 'InputNumber',
     label: '岗位排序',
     componentProps: {
@@ -101,6 +139,25 @@ export const drawerFormSchema: FormSchemaGetter = () => [
     rules: 'required',
   },
   {
+    component: 'Select',
+    label: '任务类型',
+    componentProps: {
+      placeholder: '请选择任务类型',
+      options: getTaskTypeOptions(),
+      multiple: true,
+    },
+    fieldName: 'taskType',
+  },
+  {
+    component: 'Select',
+    label: '岗位类型',
+    componentProps: {
+      placeholder: '请选择岗位类型',
+      options: getPostTypeOptions(),
+    },
+    fieldName: 'type',
+  },
+  {
     component: 'RadioGroup',
     label: '状态',
     componentProps: {

apps/web-ele/src/views/system/post/index.vue

@@ -50,8 +50,13 @@ const gridOptions: VxeGridProps = {
   proxyConfig: {
     ajax: {
       query: async ({ page }, formValues = {}) => {
+        // 处理任务类型查询条件，转换为逗号分隔字符串
+        const queryParams = { ...formValues };
+        if (queryParams.taskType && Array.isArray(queryParams.taskType)) {
+          queryParams.taskType = queryParams.taskType.join(',');
+        }
         const resp = await getPostList({
-          ...formValues,
+          ...queryParams,
           pageNum: page.currentPage,
           pageSize: page.pageSize,
         });

apps/web-ele/src/views/system/post/post-drawer.vue

@@ -27,6 +27,10 @@ const [Drawer, drawerApi] = useVbenDrawer({
       isUpdateRef.value = isUpdate;
       if (isUpdate) {
         const postData = await detailPost(postId);
+        // 将任务类型字符串转换为数组
+        if (postData.taskType) {
+          postData.taskType = postData.taskType.split(',');
+        }
         await formApi.setValues(postData);
       }
     } catch (error) {
@@ -46,6 +50,10 @@ const [Drawer, drawerApi] = useVbenDrawer({
         return;
       }
       const data = await formApi.getValues<Post>();
+      // 将任务类型数组转换为逗号分隔的字符串
+      if (Array.isArray(data.taskType)) {
+        data.taskType = data.taskType.join(',');
+      }
       isUpdateRef.value ? await updatePost(data) : await addPost(data);
       emit('reload');
       drawerApi.close();