feat: 扫描文件

src/App.vue

@@ -11,12 +11,12 @@ const componentStore = useComponentStore()
 </script>
 
 <template>
-  <el-container>
+  <!-- <el-container> -->
     <!-- left -->
-    <el-aside class="fixed top-0 left-0 h-full z-10 c-md:block c-sm:hidden c-xs:hidden" width="240px" v-show="!componentStore.leftCom">
+    <!-- <el-aside class="fixed top-0 left-0 h-full z-10 c-md:block c-sm:hidden c-xs:hidden" width="240px" v-show="!componentStore.leftCom">
         <Left></Left>
-    </el-aside>
+    </el-aside> -->
-    <el-drawer 
+    <!-- <el-drawer 
       show-close
       size="240px" 
       :with-header="false" 
@@ -24,26 +24,26 @@ const componentStore = useComponentStore()
       direction="ltr"
       >
       <Left bgColor="#fff"></Left>
-    </el-drawer>
+    </el-drawer> -->
 
     <!-- right -->
-    <el-container  :class="!componentStore.leftCom ? 'c-md:ml-[240px]' : ''">
+    <!-- <el-container> -->
-      <el-header>
+      <!-- <el-header>
         <Header/>
-      </el-header>
+      </el-header> -->
-      <el-main>
+      <!-- <el-main> -->
         <router-view v-slot="{ Component, route }">
           <transition name="animation" mode="out-in">
             <component :is="Component" :key="route.path"></component>
           </transition>
         </router-view>
-      </el-main>
+      <!-- </el-main> -->
-      <el-footer class="md:mb-6 mt-12 c-xs:mb-12">
+      <!-- <el-footer class="md:mb-6 mt-12 c-xs:mb-12">
         <Floor />
-      </el-footer>
+      </el-footer> -->
-    </el-container>
+    <!-- </el-container> -->
 
-  </el-container>
+  <!-- </el-container> -->
 </template>
 
 <style scoped>

src/api/common.ts

@@ -3,3 +3,18 @@ export interface ResponseData {
   code: number,
   message: string,
 }
+
+//分页
+export interface PageData {
+  current_page: number,
+  first_page_url: string,
+  from: number,
+  last_page: number,
+  last_page_url: string,
+  next_page_url: string,
+  path: string,
+  per_page: number,
+  prev_page_url: string,
+  to: number,
+  total: number,
+}

src/api/scan/index.ts

@@ -0,0 +1,35 @@
+//统一管理咱们项目用户相关的接口
+import request from '@/utils/request'
+
+import type {
+  ScanReqData,
+  UpdateTagReqData,
+  getScanResponseData,
+  getScanTagResponseData,
+  updateTagResponseData,
+  ScanInfoReqData,
+  ScanFileInfo
+} from './type'
+
+//项目用户相关的请求地址
+
+enum API {
+  //获取scan列表
+  SCAN_FILE = '/scans',
+  //获取scan信息
+  SCAN_FILE_INFO = '/scans',
+  //获取标签
+  SCAN_TAGS = '/scan/tags',
+  //更新标签
+  UPDATE_TAG = '/scan/tag/updates',
+}
+//获取scan file
+export const getList = (data: ScanReqData) => request.get<any, getScanResponseData>(API.SCAN_FILE, {
+  params: data
+})
+//获取scan file
+export const getInfo = (data: ScanInfoReqData) => request.get<any, ScanFileInfo>(API.SCAN_FILE_INFO + '/' + data.fileId)
+//获取scan tags
+export const getTags = () => request.get<any, getScanTagResponseData>(API.SCAN_TAGS)
+//更新标签
+export const updateTag = (data: UpdateTagReqData) => request.post<any, updateTagResponseData>(API.UPDATE_TAG, data)

src/api/scan/type.ts

@@ -0,0 +1,58 @@
+import { ResponseData, PageData } from "../common"
+
+export interface ScanReqData {
+  title: string,
+  tags: string
+}
+
+export interface ScanInfoReqData {
+  fileId: number,
+}
+
+export interface UpdateTagReqData {
+  fileId: number,
+  tagId: number
+}
+
+export interface ScanTagInfo {
+  id: number,
+  title: string,
+  pid: number,
+}
+
+//file info
+export interface ScanFileInfo {
+  id: number,
+  title: string,
+  path: string,
+  dir: string,
+  ext: string,
+  tags: number[],
+  scan_tag: ScanTagInfo[]
+}
+
+export interface ScanFilePage extends PageData {
+  data: ScanFileInfo[],
+}
+
+//tag info
+export interface ScanTagInfo {
+  id: number,
+  title: string,
+  pid: number,
+  childTags: ScanTagInfo[]
+}
+
+//响应格式 - scan file
+export interface getScanResponseData extends ResponseData {
+  data: ScanFileInfo
+}
+
+//响应格式 - scan tag
+export interface getScanTagResponseData extends ResponseData {
+  data: ScanTagInfo
+}
+
+//响应格式 - update tag
+export interface updateTagResponseData extends ResponseData {
+}

src/components/Home/Home copy.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { onMounted,reactive } from 'vue';
+import { RouterLink } from "vue-router"
+import { Star } from '@element-plus/icons-vue'
+import { useToolsStore } from '@/store/modules/tools'
+import { useUserStore } from '@/store/modules/user'
+import { ElMessage } from 'element-plus'
+import { useRoute } from "vue-router"
+//store
+const toolsStore = useToolsStore()
+const userStore = useUserStore()
+const route = useRoute()
+// const getToolsCate = async () => {
+//   try {
+//     await toolsStore.getToolCate()
+//   } catch (error: any) {
+//     ElMessage.error(error.message)
+//   }
+// }
+
+//收藏
+const toolCollect = reactive({
+  toolId: 0
+})
+const collect = async (toolId) => {
+  try {
+    if (!userStore.isLogin()) {
+      //未登录,弹出登录窗口
+      ElMessage.error('请登录')
+      return 
+    }
+    toolCollect.toolId = toolId
+    await toolsStore.toolCollect(toolCollect)
+    // ElMessage.success('收藏成功')
+  } catch (error: any) {
+    ElMessage.error(error.message)
+  }
+  return
+}
+
+onMounted(() => {
+  // getToolsCate()
+  if (route.query && route.query.value) {//底部导航跳转过来的则定位到响应位置
+      document?.querySelector('#' + `${route.query.value}`)?.scrollIntoView();
+  } else {//其他位置跳转过来不需要定位的则定位到顶部
+      document?.querySelector('#collect')?.scrollIntoView()
+  }
+})
+</script>
+
+<template>
+  <div class="md:mr-6 c-xs:mr-0">
+    <!-- collect -->
+    <div id="collect">
+      <!-- cate title -->
+      <div class="md:mt-8 md:mb-8 c-xs:mt-1 c-xs:mb-4 text-xl font-bold text-[--base-black]">
+        我的收藏
+      </div>
+      <!-- card -->
+      <div class="flex justify-between flex-wrap self-card-div c-xs:ml-3" :gutter="10" v-if="toolsStore.collect.length > 0">
+          <router-link v-for="(item, index) in toolsStore.collect" :key="index" :to="item.url" class="flex flex-col mt-5 border-solid rounded-2xl border-gray w-[24%] p-2 bg-white hover:shadow-md c-xs:w-[99.5%] c-md:w-[24%] c-sm:w-[32%] p-5">
+            <div class="flex items-center border-b pb-2">
+              <el-image :src="item.logo" class="w-10 h-10 min-h-[2.5rem] min-w-[2.5rem] rounded-full"></el-image>
+              <div class="flex flex-col ml-2 w-full">
+                <div class="flex">
+                  <div class="font-semibold text-lg line-clamp-1">{{ item.title }}</div>
+                </div>
+                <div class="flex justify-between">
+                  <el-text size="small">{{ item.cate }}</el-text>
+                  <el-button :icon="Star" circle size="small" @click.prevent="collect(item.id)"  type="warning"/>
+                </div>
+              </div>
+            </div>
+            <div class="flex items-center justify-between mt-2">
+              <el-text line-clamp="2">{{ item.desc }}</el-text>
+            </div>
+          </router-link>
+          <!-- 占位 div -->
+          <div class="w-[24%] c-md:w-[24%] c-sm:w-[32%]"></div>
+      </div>
+      <div v-else class="bg-white rounded-2xl">
+        <el-empty description="暂无收藏" />
+      </div>
+    </div>
+
+    <!-- list -->
+    <div v-for="(cate, index) in toolsStore.cates" :key="index">
+      <!-- cate title -->
+      <div class="mt-8 mb-3 text-xl font-bold text-[--base-black]" :id="'cate_' + cate.id">
+        {{ cate.title }}
+      </div>
+      <!-- card -->
+      <div class="flex justify-between flex-wrap self-card-div c-xs:ml-0" :gutter="10">
+          <router-link v-for="(item, index) in cate.list" :key="index" :to="item.url" class="flex flex-col mt-5 border-solid rounded-2xl border-gray w-[24%] p-2 bg-white hover:shadow-md c-xs:w-[99.5%] c-md:w-[24%] c-sm:w-[32%] p-5 hover:-translate-y-2 duration-300">
+            <div class="flex items-center border-b pb-2">
+              <el-image :src="item.logo" class="w-10 h-10 min-h-[2.5rem] min-w-[2.5rem] rounded-full"></el-image>
+              <div class="flex flex-col ml-2 w-full">
+                <div class="flex">
+                  <div class="font-semibold text-lg line-clamp-1">{{ item.title }}</div>
+                </div>
+                <div class="flex justify-between">
+                  <el-text size="small">{{ item.cate }}</el-text>
+                  <el-button :icon="Star" circle size="small" @click.prevent="collect(item.id)" type="warning" :plain="!toolsStore.collectIds.includes(item.id)"/>
+                </div>
+              </div>
+            </div>
+            <div class="flex items-center justify-between mt-2">
+              <el-text line-clamp="2">{{ item.desc }}</el-text>
+            </div>
+          </router-link>
+          <!-- 占位 div -->
+          <div class="w-[24%] c-md:w-[24%] c-sm:w-[32%] "></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.self-card-div:after{
+  content: "";
+  width: 24%
+}
+</style>

src/components/Home/Home.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-import { onMounted,reactive } from 'vue';
+import { onMounted,reactive, ref } from 'vue';
-import { RouterLink } from "vue-router"
+import { useScanStore } from '@/store/modules/scan'
-import { Star } from '@element-plus/icons-vue'
+// import { ElMessage } from 'element-plus'
-import { useToolsStore } from '@/store/modules/tools'
+import { Search } from '@element-plus/icons-vue';
-import { useUserStore } from '@/store/modules/user'
+// import { useRoute } from "vue-router"
-import { ElMessage } from 'element-plus'
-import { useRoute } from "vue-router"
 //store
-const toolsStore = useToolsStore()
+const scanStore = useScanStore()
-const userStore = useUserStore()
+// const route = useRoute()
-const route = useRoute()
 // const getToolsCate = async () => {
 //   try {
 //     await toolsStore.getToolCate()
@@ -18,100 +15,197 @@ const route = useRoute()
 //   }
 // }
 
-//收藏
+const loading = ref(false)
-const toolCollect = reactive({
+const setTagsDialog = ref(false)
-  toolId: 0
+// const checkedTags = reactive({})
+//常见视频格式
+const extVideo = ref(['ts', 'mp4', 'mkv', 'wmv', 'avi', 'flv', '3gp', 'dvd', 'mov', 'vob', 'webm'])
+
+//获取分类
+//查询参数
+const searchParam = reactive({
+  title: '',
+  tags: '',
+  page: 1,
 })
-const collect = async (toolId) => {
+const getList = async () => {
   try {
-    if (!userStore.isLogin()) {
+    await scanStore.getList(searchParam)
-      //未登录,弹出登录窗口
+  } catch (error) {
-      ElMessage.error('请登录')
+    console.log(error)
-      return 
-    }
-    toolCollect.toolId = toolId
-    await toolsStore.toolCollect(toolCollect)
-    // ElMessage.success('收藏成功')
-  } catch (error: any) {
-    ElMessage.error(error.message)
   }
-  return
+}
+
+//获取标签
+const getTags = async () => {
+  try {
+    await scanStore.getTags()
+    //设置标签checked
+    // for (let index in scanStore.tags) {
+    //   for (let childIndex in scanStore.tags[index].childTags) {
+    //     let cheeckedTag = 'checkTag' + scanStore.tags[index].childTags[childIndex].id
+    //   }
+    //   console.log(scanStore.tags[index].childTags)
+    // }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+const optionClick = (path: string) => {
+  console.log(path)
+  // router.push(url)
+}
+
+//获取文件信息
+const getFileInfo = async (fileId: number) => {
+  try {
+    await scanStore.getInfo({
+      fileId: fileId,
+    })
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+//set tags
+const setTagsDia = async (fileId: number) => {
+  //显示dialog
+  setTagsDialog.value = true
+  await getFileInfo(fileId)
+}
+
+//更新标签
+const updateTag = async (fileId: number, tagId: number) => {
+  console.log(fileId, tagId)
+  try {
+    await scanStore.updateTag({
+      fileId: fileId,
+      tagId: tagId
+    })
+    //获取当前文件标签
+    await getFileInfo(fileId)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+//分页 - 页码改变时
+const pageChange = async (nowPage: number) => {
+  searchParam.page = nowPage
+  console.log(nowPage)
+  await scanStore.getList(searchParam)
 }
 
 onMounted(() => {
-  // getToolsCate()
+  getList();
-  if (route.query && route.query.value) {//底部导航跳转过来的则定位到响应位置
+  getTags();
-      document?.querySelector('#' + `${route.query.value}`)?.scrollIntoView();
-  } else {//其他位置跳转过来不需要定位的则定位到顶部
-      document?.querySelector('#collect')?.scrollIntoView()
-  }
 })
 </script>
 
 <template>
-  <div class="md:mr-6 c-xs:mr-0">
+  <div>
-    <!-- collect -->
+    <div class="mt-3">
-    <div id="collect">
+      <el-select
-      <!-- cate title -->
+        v-model="searchParam.title"
-      <div class="md:mt-8 md:mb-8 c-xs:mt-1 c-xs:mb-4 text-xl font-bold text-[--base-black]">
+        filterable
-        我的收藏
+        remote
-      </div>
+        reserve-keyword
-      <!-- card -->
+        remote-show-suffix
-      <div class="flex justify-between flex-wrap self-card-div c-xs:ml-3" :gutter="10" v-if="toolsStore.collect.length > 0">
+        :suffix-transition="false"
-          <router-link v-for="(item, index) in toolsStore.collect" :key="index" :to="item.url" class="flex flex-col mt-5 border-solid rounded-2xl border-gray w-[24%] p-2 bg-white hover:shadow-md c-xs:w-[99.5%] c-md:w-[24%] c-sm:w-[32%] p-5">
+        :suffix-icon="Search"
-            <div class="flex items-center border-b pb-2">
+        placeholder="输入关键词搜索"
-              <el-image :src="item.logo" class="w-10 h-10 min-h-[2.5rem] min-w-[2.5rem] rounded-full"></el-image>
+        :remote-method="getList"
-              <div class="flex flex-col ml-2 w-full">
+        :loading="loading"
-                <div class="flex">
+        class="ml-3 mr-3 md:w-80 c-xs:w-60"
-                  <div class="font-semibold text-lg line-clamp-1">{{ item.title }}</div>
+      >
-                </div>
+        <el-optiond
-                <div class="flex justify-between">
+          v-for="item in scanStore.list.data"
-                  <el-text size="small">{{ item.cate }}</el-text>
+          :key="item.id"
-                  <el-button :icon="Star" circle size="small" @click.prevent="collect(item.id)"  type="warning"/>
+          :label="item.title"
-                </div>
+          :value="item.id"
-              </div>
+          @click="optionClick(item.path)"
-            </div>
+        >
-            <div class="flex items-center justify-between mt-2">
+        </el-optiond>
-              <el-text line-clamp="2">{{ item.desc }}</el-text>
+      </el-select>
-            </div>
-          </router-link>
-          <!-- 占位 div -->
-          <div class="w-[24%] c-md:w-[24%] c-sm:w-[32%]"></div>
-      </div>
-      <div v-else class="bg-white rounded-2xl">
-        <el-empty description="暂无收藏" />
-      </div>
     </div>
 
-    <!-- list -->
+    <div class="flex w-full">
-    <div v-for="(cate, index) in toolsStore.cates" :key="index">
+      <!-- 左侧列表 -->
-      <!-- cate title -->
+      <div class="w-9/12">
-      <div class="mt-8 mb-3 text-xl font-bold text-[--base-black]" :id="'cate_' + cate.id">
+        <div class="flex items-center justify-between h-40 bg-white mt-3 ml-3 rounded-lg p-3" v-for="(item, index) in scanStore.list.data" :key="index">
-        {{ cate.title }}
+          <!-- left -->
-      </div>
+          <div class="flex items-center">
-      <!-- card -->
+            <!--  -->
-      <div class="flex justify-between flex-wrap self-card-div c-xs:ml-0" :gutter="10">
+            <div>
-          <router-link v-for="(item, index) in cate.list" :key="index" :to="item.url" class="flex flex-col mt-5 border-solid rounded-2xl border-gray w-[24%] p-2 bg-white hover:shadow-md c-xs:w-[99.5%] c-md:w-[24%] c-sm:w-[32%] p-5 hover:-translate-y-2 duration-300">
+              <div v-if="extVideo.includes(item.ext)">
-            <div class="flex items-center border-b pb-2">
+                <video :src="item.path" controls></video>
-              <el-image :src="item.logo" class="w-10 h-10 min-h-[2.5rem] min-w-[2.5rem] rounded-full"></el-image>
+              </div>
-              <div class="flex flex-col ml-2 w-full">
+              <div v-else>
-                <div class="flex">
+                <el-empty description="无预览" :image-size="100"/>
-                  <div class="font-semibold text-lg line-clamp-1">{{ item.title }}</div>
-                </div>
-                <div class="flex justify-between">
-                  <el-text size="small">{{ item.cate }}</el-text>
-                  <el-button :icon="Star" circle size="small" @click.prevent="collect(item.id)" type="warning" :plain="!toolsStore.collectIds.includes(item.id)"/>
-                </div>
               </div>
             </div>
-            <div class="flex items-center justify-between mt-2">
+            
-              <el-text line-clamp="2">{{ item.desc }}</el-text>
+            <!--  -->
+            <div class="ml-3">
+              <div class="flex items-center">
+                  <el-button class="mr-2" type="warning" size="small">{{ item.ext }}</el-button>
+                  <el-text>{{item.title}}</el-text>
+              </div>
+              <div class="mt-3">
+                <el-text class="mt-3">{{ item.path }}</el-text>
+              </div>
+              <div class="mt-3">
+                <el-tag type="danger" class="mt-2 mr-2" v-for="(childItem, childIndex) in item.scan_tag" :key="childIndex">{{ childItem.title }}</el-tag>
+              </div>
             </div>
-          </router-link>
+          </div>
-          <!-- 占位 div -->
+
-          <div class="w-[24%] c-md:w-[24%] c-sm:w-[32%] "></div>
+          <!-- right -->
+          <div class="flex flex-col justify-center">
+            <el-button size="small" type="primary" class="w-20">open</el-button>
+            <el-button size="small" type="primary" class="w-20 mt-2" style="margin-left: 0;" @click="setTagsDia(item.id)">set tags</el-button>
+            <el-button size="small" type="primary" class="w-20 mt-2" style="margin-left: 0;" >move</el-button>
+            <el-button size="small" type="primary" class="w-20 mt-2" style="margin-left: 0;">delete</el-button>
+          </div>
+        </div>
+        <!-- 分页 -->
+        <div class="mt-3 mb-3 ml-3 flex justify-end">
+          <el-pagination 
+            background 
+            layout="prev, pager, next, jumper" 
+            :page-count="scanStore.list.last_page"
+            :total="scanStore.list.total" 
+            :default-page-size="scanStore.list.per_page" 
+            @current-change="pageChange"
+            @size-change="pageChange"
+            @prev-click="pageChange"
+            @next-click="pageChange"/>
+        </div>
+      </div>
+      <!-- 右侧栏目 -->
+      <div class="w-3/12 mt-3 ml-3 mr-3  rounded-lg">
+        <!-- tags -->
+        <div class="p-3 bg-white" v-for="(item, index) in scanStore.tags" :key="index">
+          <div>{{ item.title }}</div>
+          <div class="flex flex-wrap">
+            <el-tag type="danger" class="mt-2 mr-2" v-for="(childItem, childIndex) in item.childTags" :key="childIndex" @click="">{{ childItem.title }}</el-tag>
+          </div>
+        </div>
+        
       </div>
     </div>
+    <!-- set tags dialog -->
+    <el-dialog v-model="setTagsDialog" title="set tags" width="800" @close="getList()">
+      <!-- tags -->
+      <div class="p-3 bg-white" v-for="(item, index) in scanStore.tags" :key="index">
+        <div>{{ item.title }}</div>
+        <div class="flex flex-wrap">
+          <el-check-tag type="danger" :checked="scanStore.fileInfoTags.includes(childItem.id)" @change="updateTag(scanStore.fileInfo.id, childItem.id)" class="mt-2 mr-2" v-for="(childItem, childIndex) in item.childTags" :key="childIndex">{{ childItem.title }}</el-check-tag>
+        </div>
+      </div>
+      <!-- <el-button class="ml-3 mt-3" type="primary">保存</el-button> -->
+    </el-dialog>
   </div>
 </template>
 

src/store/modules/scan.ts

@@ -0,0 +1,60 @@
+//创建tools相关的小工具
+import { defineStore } from 'pinia'
+import type { ScanReqData, ScanFilePage, ScanTagInfo, UpdateTagReqData, ScanInfoReqData, ScanFileInfo } from '@/api/scan/type'
+import { getList, getTags, updateTag, getInfo } from '@/api/scan'
+
+export const useScanStore = defineStore('scan', {
+  //用来存放变量
+  state: () => ({
+    list: {} as ScanFilePage,
+    fileInfo: {} as ScanFileInfo, //当前文件信息
+    fileInfoTags: [] as number[], //当期文件tags
+    tags: [] as ScanTagInfo[]
+  }),
+  //方法
+  actions: {
+    //获取scan file list
+    async getList(data: ScanReqData) {
+      //发送请求
+      const result: any = await getList(data)
+      if (result.code == 200) {
+          this.list = result.data
+          return result.message
+      } else {
+        return Promise.reject(new Error(result.message))
+      }
+    },
+    //获取scan file list
+    async getInfo(data: ScanInfoReqData) {
+      //发送请求
+      const result: any = await getInfo(data)
+      if (result.code == 200) {
+          this.fileInfo = result.data
+          this.fileInfoTags = this.fileInfo.tags
+          return result.message
+      } else {
+        return Promise.reject(new Error(result.message))
+      }
+    },
+    //get tags
+    async getTags() {
+      //发送请求
+      const result: any = await getTags()
+      if (result.code == 200) {
+          this.tags = result.data
+          return result.message
+      } else {
+        return Promise.reject(new Error(result.message))
+      }
+    },
+    //收藏工具
+    async updateTag(data: UpdateTagReqData) {
+      const result: any = await updateTag(data)
+      if (result.code == 200) {
+        return result.message
+      } else {
+        return Promise.reject(new Error(result.message))
+      }
+    },
+  }
+})