beauty page to knowledge

langchat-ui/src/views/aigc/knowledge/index.vue

@@ -19,13 +19,6 @@
   import { BasicForm, useForm } from '@/components/Form/index';
   import { del, page as getPage } from '@/api/aigc/knowledge';
   import { searchSchemas } from './columns';
-  import {
-    CloudOutlined,
-    DeleteOutlined,
-    EditOutlined,
-    FolderOutlined,
-    PlusOutlined,
-  } from '@vicons/antd';
   import Edit from './edit.vue';
   import { useDialog, useMessage } from 'naive-ui';
   import { useRouter } from 'vue-router';
@@ -42,6 +35,16 @@
     limit: 10,
   });
   const list = ref<any>([]);
+  const actionOptions = [
+    {
+      label: '修改',
+      value: 'edit',
+    },
+    {
+      label: '删除',
+      value: 'delete',
+    },
+  ];
 
   const [register, { getFieldsValue }] = useForm({
     gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
@@ -68,6 +71,15 @@
     editRef.value.show();
   }
 
+  function onSelectAction(key, item) {
+    if (key === 'edit') {
+      handleEdit(item);
+    }
+    if (key === 'delete') {
+      handleDelete(item);
+    }
+  }
+
   function handleEdit(record: any) {
     editRef.value.show(record.id);
   }
@@ -89,87 +101,67 @@
 </script>
 
 <template>
-  <n-card :bordered="false">
+  <section class="overflow-y-auto h-full px-3 py-4">
     <BasicForm @register="register" @reset="fetch" @submit="fetch" />
 
-    <div>
-      <n-button type="primary" @click="handleAdd">
-        <template #icon>
-          <n-icon>
-            <PlusOutlined />
-          </n-icon>
-        </template>
-        新增知识库
-      </n-button>
-    </div>
-
     <n-spin :show="loading">
-      <n-empty v-if="list == null || list.length == 0" class="mt-10" />
+      <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4 mb-8">
+        <div
+          class="bg-gray-100 py-3 pt-4 transition-all duration-300 px-2 transform border cursor-pointer rounded-xl group"
+        >
+          <div class="font-bold text-xs mb-1.5 px-6 text-gray-500">创建知识库</div>
+          <div
+            class="w-full transition-all hover:bg-white rounded-lg py-1.5 px-6 flex items-center gap-1 font-medium hover:text-blue-500"
+            @click="handleAdd"
+          >
+            <SvgIcon icon="line-md:file-plus" />
+            <span class="text-sm">创建空白知识库</span>
+          </div>
+        </div>
+
+        <n-empty v-if="list == null || list.length == 0" class="mt-10" />
 
-      <ul class="mt-6 grid gap-8 sm:grid-cols-3 lg:grid-cols-4">
-        <li
-          v-for="(item, idx) in list"
-          :key="idx"
-          class="rounded-lg border border-gray-200 hover:shadow-lg cursor-pointer"
+        <div
+          v-for="item in list"
+          :key="item.id"
+          class="bg-white px-4 py-3 pt-4 transition-all duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:shadow-lg"
+          @click="handleInfo(item)"
         >
-          <div class="flex items-center justify-between p-4">
-            <div class="flex items-center gap-2">
-              <n-avatar v-if="item.cover" :size="48" :src="item.cover" round>
-                <template #fallback>
-                  <SvgIcon class="text-4xl" icon="twemoji:open-book" />
-                </template>
-              </n-avatar>
-              <SvgIcon v-else class="text-4xl" icon="twemoji:open-book" />
-              <h2
-                class="text-gray-800 font-semibold cursor-pointer hover:text-blue-500"
-                @click="handleInfo(item)"
-              >
-                {{ item.name }}
-              </h2>
+          <div class="flex flex-col sm:-mx-4 sm:flex-row">
+            <div class="sm:mx-4">
+              <div class="relative bg-blue-100 p-4 rounded-lg">
+                <SvgIcon class="text-3xl" icon="ep:document" />
+              </div>
             </div>
-            <button
-              class="text-blue-500 text-sm border rounded-lg px-3 py-2 duration-150 hover:bg-gray-200 flex items-center gap-2"
-              @click="handleInfo(item)"
-            >
-              <n-icon size="18">
-                <FolderOutlined />
-              </n-icon>
-              <span>文档数：{{ item.docsNum }}</span>
-            </button>
-          </div>
-          <div class="p-4 pt-2">
-            <p class="text-gray-600 text-sm">
-              <n-ellipsis class="w-full max-w-full">
+
+            <div class="pr-4">
+              <h1 class="text-lg font-semibold text-gray-700 capitalize"> {{ item.name }} </h1>
+
+              <p class="mt-2 text-gray-500 capitalize text-xs">
                 {{ item.des }}
-              </n-ellipsis>
-            </p>
+              </p>
+            </div>
           </div>
-          <div class="py-3 px-4 border-t flex justify-between items-center">
-            <div class="flex gap-1 items-center">
-              <n-icon size="20"> <CloudOutlined /> </n-icon>
-              <span class="text-sm"> {{ (Number(item.totalSize) / 1000000).toFixed(2) }} MB </span>
+
+          <div class="flex mt-4 -mx-2 px-2 text-gray-400 justify-between items-center">
+            <div class="flex items-center gap-1">
+              <SvgIcon class="" icon="mdi:tag-outline" />
+              <span class="text-xs">文档数：{{ item.docsNum }}</span>
+              <span class="text-xs">{{ (Number(item.totalSize) / 1000000).toFixed(2) }} MB</span>
             </div>
-            <div class="flex gap-3">
-              <n-button text type="primary" @click="handleEdit(item)">
-                <template #icon>
-                  <n-icon>
-                    <EditOutlined />
-                  </n-icon>
-                </template>
-                修改
-              </n-button>
-              <n-button text type="error" @click="handleDelete(item)">
-                <template #icon>
-                  <n-icon>
-                    <DeleteOutlined />
-                  </n-icon>
-                </template>
-                删除
-              </n-button>
+            <div class="flex items-center">
+              <n-popselect
+                :options="actionOptions"
+                @update:value="(key) => onSelectAction(key, item)"
+              >
+                <n-button text>
+                  <SvgIcon class="text-xl" icon="heroicons-outline:dots-horizontal" />
+                </n-button>
+              </n-popselect>
             </div>
           </div>
-        </li>
-      </ul>
+        </div>
+      </div>
 
       <div class="flex justify-end my-2 mt-8">
         <n-pagination
@@ -185,7 +177,7 @@
     </n-spin>
 
     <Edit ref="editRef" @reload="fetch" />
-  </n-card>
+  </section>
 </template>
 
 <style lang="less" scoped></style>