代码优化

blossom-editor/src/renderer/src/assets/utils/electron.ts

@@ -43,7 +43,7 @@ export const setUserinfo = (userinfo: any) => {
  * @param articleName 文章名称
  * @param articleId 文章ID
  */
-export const openNewArticleWindow = (articleName: string, articleId: number) => {
+export const openNewArticleWindow = (articleName: string, articleId: string) => {
   if (isElectron()) {
     window.electronAPI.openNewArticleWindow({ name: articleName, id: articleId })
   } else {

blossom-editor/src/renderer/src/router/route-init.ts

@@ -2,6 +2,8 @@ import router from '@renderer/router'
 
 // 全局根页面
 import Index from '@renderer/views/Index.vue'
+import SettingIndex from '@renderer/views/index/SettingIndex.vue'
+
 import Home from '@renderer/views/home/Home.vue'
 import ArticleIndex from '@renderer/views/article/ArticleIndex.vue'
 import PictureIndex from '@renderer/views/picture/PictureIndex.vue'
@@ -9,7 +11,14 @@ import TodoIndex from '@renderer/views/todo/TodoIndex.vue'
 import NoteIndex from '@renderer/views/note/NoteIndex.vue'
 import PlanIndex from '@renderer/views/plan/PlanIndex.vue'
 import IconListIndex from '@renderer/components/IconList.vue'
-import SettingIndex from '@renderer/views/index/SettingIndex.vue'
+
+// const Home = () => import('@renderer/views/home/Home.vue')
+// const ArticleIndex = () => import('@renderer/views/article/ArticleIndex.vue')
+// const PictureIndex = () => import('@renderer/views/picture/PictureIndex.vue')
+// const TodoIndex = () => import('@renderer/views/todo/TodoIndex.vue')
+// const NoteIndex = () => import('@renderer/views/note/NoteIndex.vue')
+// const PlanIndex = () => import('@renderer/views/plan/PlanIndex.vue')
+// const IconListIndex = () => import('@renderer/components/IconList.vue')
 
 // 新窗口页面
 import ArticleViewWindow from '@renderer/views/article/ArticleViewWindow.vue'
@@ -18,29 +27,30 @@ import ArticleHistory from '@renderer/views/article/ArticleHistory.vue'
 import ThemeSettingVue from '@renderer/views/index/setting/ThemeSetting.vue'
 
 router.addRoute({
-  path: '/', redirect: '/settingIndex'
+  path: '/',
+  redirect: '/settingIndex'
 })
 
-router.addRoute(
+router.addRoute({
-  {
+  path: '/',
-    path: '/', name: 'Index', component: Index, meta: { keepAlive: true },
+  name: 'Index',
-    children: [
+  component: Index,
-      { path: '/home', name: 'Home', component: Home, meta: { keepAlive: true } },
+  meta: { keepAlive: true },
-      { path: '/settingIndex', name: 'SettingIndex', component: SettingIndex, meta: { keepAlive: false } },
+  children: [
-      // 功能页面
+    { path: '/home', name: 'Home', component: Home, meta: { keepAlive: true } },
-      { path: '/articleIndex', name: 'ArticleIndex', component: ArticleIndex, meta: { keepAlive: true } },
+    { path: '/settingIndex', name: 'SettingIndex', component: SettingIndex, meta: { keepAlive: false } },
-      { path: '/pictureIndex', name: 'PictureIndex', component: PictureIndex, meta: { keepAlive: true } },
+    // 功能页面
-      { path: '/todoIndex', name: 'TodoIndex', component: TodoIndex, meta: { keepAlive: true } },
+    { path: '/articleIndex', name: 'ArticleIndex', component: ArticleIndex, meta: { keepAlive: true } },
-      { path: '/noteIndex', name: 'NoteIndex', component: NoteIndex, meta: { keepAlive: false } },
+    { path: '/pictureIndex', name: 'PictureIndex', component: PictureIndex, meta: { keepAlive: true } },
-      { path: '/planIndex', name: 'PlanIndex', component: PlanIndex, meta: { keepAlive: false } },
+    { path: '/todoIndex', name: 'TodoIndex', component: TodoIndex, meta: { keepAlive: true } },
-      { path: '/iconListIndex', name: 'IconListIndex', component: IconListIndex, meta: { keepAlive: false } },
+    { path: '/noteIndex', name: 'NoteIndex', component: NoteIndex, meta: { keepAlive: false } },
-
+    { path: '/planIndex', name: 'PlanIndex', component: PlanIndex, meta: { keepAlive: false } },
-    ]
+    { path: '/iconListIndex', name: 'IconListIndex', component: IconListIndex, meta: { keepAlive: false } }
-  }
+  ]
-)
+})
 
 router.addRoute({ path: '/articleViewWindow', name: 'ArticleViewWindow', component: ArticleViewWindow, meta: { keepAlive: true } })
 router.addRoute({ path: '/iconListIndexWindow', name: 'IconListIndexWindow', component: IconListIndex, meta: { keepAlive: true } })
 router.addRoute({ path: '/articleReferenceWindow', name: 'ArticleReferenceWindow', component: ArticleReference, meta: { keepAlive: true } })
 router.addRoute({ path: '/articleHistory', name: 'ArticleHistory', component: ArticleHistory, meta: { keepAlive: true } })
-router.addRoute({ path: '/themeSetting', name: 'ThemeSettingVue', component: ThemeSettingVue, meta: { keepAlive: true } })
+router.addRoute({ path: '/themeSetting', name: 'ThemeSettingVue', component: ThemeSettingVue, meta: { keepAlive: true } })

blossom-editor/src/renderer/src/views/article/ArticleIndex.vue

@@ -362,7 +362,7 @@ const uploadFile = (file: File) => {
 const ArticleViewRef = ref()
 const { articleReferenceView } = useArticleHtmlEvent(ArticleViewRef)
 
-const openArticleWindow = (id: number) => {
+const openArticleWindow = (id: string) => {
   openNewArticleWindow('article_window_' + id, id)
 }
 //#endregion
@@ -624,7 +624,7 @@ const renderer = {
     return renderHeading(text, level)
   },
   image(href: string | null, _title: string | null, text: string): string {
-    articleImg.value.push({ targetId: 0, targetName: text, targetUrl: href as string, type: 10 })
+    articleImg.value.push({ targetId: '0', targetName: text, targetUrl: href as string, type: 10 })
     return renderImage(href, _title, text)
   },
   link(href: string | null, title: string | null, text: string): string {

blossom-editor/src/renderer/src/views/article/ArticleInfo.vue

@@ -268,8 +268,8 @@ const docTreeData = inject<Ref<DocTree[]>>(provideKeyDocTree)
 const DocFormRef = ref<FormInstance>()
 // 表单
 const docForm = ref<DocInfo>({
-  id: 0,
+  id: '0',
-  pid: 0,
+  pid: '0',
   name: '',
   icon: '',
   tags: [],
@@ -330,7 +330,7 @@ const diffVersion = computed<number>(() => {
  * @param docType    文档类型: 1:文件夹; 2:文档;
  * @param pid        初始化父级文件夹
  */
-const reload = (dialogType: DocDialogType, id?: number, docType?: DocType, pid?: number) => {
+const reload = (dialogType: DocDialogType, id?: number, docType?: DocType, pid?: string) => {
   curDocDialogType.value = dialogType
   docForm.value.type = docType == undefined ? 3 : docType
   // 只有修改时才查询数据, 新增时不查询
@@ -375,7 +375,7 @@ const checkSelectTreeIsDisabled = (data: any) => {
  * 清空上级菜单选项, 清空后的上级菜单为0
  */
 const pidClear = () => {
-  docForm.value.pid = 0
+  docForm.value.pid = '0'
 }
 
 /**
@@ -399,13 +399,13 @@ const formatStorePath = () => {
 }
 
 const showStorePathWarning = ref(false)
-const fillStorePath = (id: number, path: string = ''): void => {
+const fillStorePath = (id: string, path: string = ''): void => {
   let doc = getDocById(id, docTreeData!.value)
   if (!doc) {
     return
   }
   path = doc.n + '/' + path
-  if (doc.p != 0) {
+  if (doc.p !== '0') {
     fillStorePath(doc.p, path)
   } else {
     let docName = ''
@@ -593,9 +593,9 @@ const quickTags = ref<Map<string, QuickTag>>(new Map())
 
 watch(
   () => docForm.value?.pid,
-  (newVal: number) => {
+  (newVal: string) => {
     if (newVal === undefined) {
-      docForm.value.pid = 0
+      docForm.value.pid = '0'
     }
     if (newVal != undefined) {
       initQuickTags(newVal)
@@ -603,7 +603,7 @@ watch(
   }
 )
 
-const initQuickTags = (pid: number) => {
+const initQuickTags = (pid: string) => {
   let docs = getCDocsByPid(pid, docTreeData!.value)
   let tags = new Set()
   for (let i = 0; i < docs.length; i++) {

blossom-editor/src/renderer/src/views/article/ArticleTreeDocs.vue

@@ -360,7 +360,7 @@ const endLoading = () => {
 //#endregion
 
 //#region ----------------------------------------< 右键菜单 >--------------------------------------
-const curDoc = ref<DocTree>({ i: 0, p: 0, n: '选择菜单', o: 0, t: [], s: 0, icon: '', ty: 1, star: 0, updn: false })
+const curDoc = ref<DocTree>({ i: '0', p: '0', n: '选择菜单', o: 0, t: [], s: 0, icon: '', ty: 1, star: 0, updn: false })
 const rMenu = ref<RightMenu>({ show: false, clientX: 0, clientY: 0 })
 const rMenuLevel2 = ref<RightMenuLevel2>({ top: '0px' })
 const ArticleDocTreeRightMenuRef = ref()
@@ -691,7 +691,7 @@ const isShowDocInfoDialog = ref<boolean>(false)
  * @param pid 父级ID, 新增同级或子集文档时使用
  */
 const handleShowDocInfoDialog = (dialogType: DocDialogType, pid?: number) => {
-  if (curDoc.value.i < 0) {
+  if (Number(curDoc.value.i) < 0) {
     Notify.info('当前文档为系统默认文档, 无法操作')
     return
   }

blossom-editor/src/renderer/src/views/article/scripts/article-html-event.ts

@@ -11,7 +11,7 @@ export function useArticleHtmlEvent(articleViewRef: Ref<HTMLElement>) {
   const articleReferenceView = ref({
     show: false,
     html: '',
-    articleId: 0,
+    articleId: '0',
     name: '',
     style: {
       top: '0',

blossom-editor/src/renderer/src/views/article/scripts/article.ts

@@ -21,7 +21,7 @@ export interface ArticleReference {
    * if type === 10 | 21, targetId is 0
    * else targetId is articleId
    */
-  targetId: number
+  targetId: string
   /**
    * Target name
    *

blossom-editor/src/renderer/src/views/article/scripts/markedjs.ts

@@ -394,7 +394,7 @@ export const renderImage = (href: string | null, title: string | null, text: str
  */
 export const renderLink = (href: string | null, title: string | null, text: string, docTrees: DocTree[]) => {
   let link: string
-  let ref: ArticleReference = { targetId: 0, targetName: text, targetUrl: href as string, type: 21 }
+  let ref: ArticleReference = { targetId: '0', targetName: text, targetUrl: href as string, type: 21 }
   if (isBlank(title)) {
     link = `<a target="_blank" href=${href} target="_blank">${text}</a>`
   } else {
@@ -408,7 +408,7 @@ export const renderLink = (href: string | null, title: string | null, text: stri
       }
 
       // 从文章列表中获取文章, 如果找到则认为是内部引用, 否则即使是内部引用格式, 也认为是个外部文章.
-      let article = getDocById(articleId, docTrees)
+      let article = getDocById(articleId.toString(), docTrees)
       if (article != undefined) {
         ref.targetId = article.i
         ref.targetName = article.n

blossom-editor/src/renderer/src/views/doc/doc.ts

@@ -18,7 +18,7 @@ export const provideKeyCurArticleInfo = Symbol() as InjectionKey<Ref<DocInfo | u
 export const treeToInfo = (tree: DocTree): DocInfo => {
   return {
     id: tree.i,
-    pid: 0,
+    pid: '0',
     name: tree.n,
     tags: tree.t,
     sort: 1,
@@ -59,7 +59,7 @@ export const computedDocTitleColor = (level: number) => {
  * @param trees 树状列表
  * @returns
  */
-export const checkLevel = (pid: number, trees: DocTree[]): boolean => {
+export const checkLevel = (pid: string, trees: DocTree[]): boolean => {
   let parents = getPDocsByPid(pid, trees)
   if (parents.length >= 4) {
     Notify.error('最多仅支持4级层级关系', '菜单层级错误')
@@ -74,7 +74,7 @@ export const checkLevel = (pid: number, trees: DocTree[]): boolean => {
  * @param articleId 文档ID, 通常是文章ID, 也兼容文件夹ID的获取
  * @param trees 文档树状列表
  */
-export const getDocById = (articleId: number, trees: DocTree[]): DocTree | undefined => {
+export const getDocById = (articleId: string, trees: DocTree[]): DocTree | undefined => {
   let target: DocTree | undefined
   for (let i = 0; i < trees.length; i++) {
     let tree = trees[i]
@@ -96,7 +96,7 @@ export const getDocById = (articleId: number, trees: DocTree[]): DocTree | undef
  * @param trees
  * @returns
  */
-export const getPDocsByPid = (id: number, trees: DocTree[], result?: DocInfo[]): DocInfo[] => {
+export const getPDocsByPid = (id: string, trees: DocTree[], result?: DocInfo[]): DocInfo[] => {
   let target: DocTree | undefined = getDocById(id, trees)
   if (!target) {
     return []
@@ -106,7 +106,7 @@ export const getPDocsByPid = (id: number, trees: DocTree[], result?: DocInfo[]):
   } else {
     result!.push(treeToInfo(target))
   }
-  if (target.p !== 0) {
+  if (target.p !== '0') {
     getPDocsByPid(target.p, trees, result)
   }
   return result!
@@ -118,7 +118,7 @@ export const getPDocsByPid = (id: number, trees: DocTree[], result?: DocInfo[]):
  * @param pid
  * @param trees 文档树状列表
  */
-export const getCDocsByPid = (id: number, trees: DocTree[]): DocInfo[] => {
+export const getCDocsByPid = (id: string, trees: DocTree[]): DocInfo[] => {
   let target: DocTree | undefined = getDocById(id, trees)
   if (!target) {
     return []

blossom-editor/src/renderer/src/views/doc/type.d.ts

@@ -3,9 +3,9 @@
  */
 declare interface DocTree {
   /** id */
-  i: number
+  i: string
   /** pid */
-  p: number
+  p: string
   /** name */
   n: string
   /** 是否修改名称 */
@@ -34,8 +34,8 @@ declare interface DocTree {
  * 文章详情
  */
 declare interface DocInfo {
-  id: number
+  id: string
-  pid: number
+  pid: string
   name: string
   icon?: string
   tags: string[]

blossom-editor/src/renderer/src/views/index/AsideUpload.vue

@@ -5,7 +5,7 @@
       <el-upload
         name="file"
         :action="serverStore.serverUrl + uploadFileApiUrl"
-        :data="(f: UploadRawFile) => uploadDate(f, -1)"
+        :data="(f: UploadRawFile) => uploadDate(f, '-1')"
         :headers="{ Authorization: 'Bearer ' + userStore.auth.token }"
         :show-file-list="false"
         :before-upload="beforeUpload"

blossom-editor/src/renderer/src/views/picture/PictureIndex.vue

@@ -13,60 +13,93 @@
 
     <!-- editor -->
     <div class="picture-container">
-      <div class="picutre-workbench">
+      <!-- 工作台 -->
-        <div class="workbench-group">
+      <div class="picutre-workbench" :style="workbencStyle.workbench1">
-          <div class="star">
+        <div class="workbenchs">
-            <div v-if="picuturePageParam.starStatus == undefined" class="iconbl bl-star-line" @click="changeStarStatus"></div>
+          <div class="workbench-level1">
-            <div v-else class="iconbl bl-star-fill" @click="changeStarStatus"></div>
+            <div class="star">
+              <div v-if="picuturePageParam.starStatus == undefined" class="iconbl bl-star-line" @click="changeStarStatus"></div>
+              <div v-else class="iconbl bl-star-fill" @click="changeStarStatus"></div>
+            </div>
+
+            <!-- 显式收藏 -->
+            <div class="radio">
+              <div>卡片大小</div>
+              <el-radio-group v-model="cardSize">
+                <el-radio-button label="mini">小</el-radio-button>
+                <el-radio-button label="large">大</el-radio-button>
+              </el-radio-group>
+            </div>
+
+            <div class="radio">
+              <el-tooltip effect="light" placement="right" :hide-after="0">
+                <template #content> 开启重复上传后<br />重名的图片将会被覆盖 </template>
+                <div>重复上传<span class="iconbl bl-admonish-line" style="font-size: 12px; margin-left: 3px"></span></div>
+              </el-tooltip>
+              <el-switch
+                width="70"
+                class="replace-upload-switch"
+                inline-prompt
+                size="large"
+                v-model="isReplaceUpload"
+                active-text="开启"
+                inactive-text="关闭" />
+            </div>
+
+            <div class="cache-clear">
+              <el-tooltip effect="light" placement="right" :hide-after="0">
+                <template #content> 重复上传图片后<br />如果图片无变化可刷新缓存 </template>
+                <el-button @click="picCacheRefresh">清空图片缓存</el-button>
+              </el-tooltip>
+            </div>
+
+            <div class="cache-clear">
+              <el-button type="primary" plain @click="handleBenchworkStyle">多选</el-button>
+            </div>
           </div>
 
-          <!-- 显式收藏 -->
+          <div class="workbench-level2" :style="workbencStyle.workbench2">
-          <div class="radio">
+            <div>
-            <div>卡片大小</div>
+              <el-button @click="checkedAll">选择全部</el-button>
-            <el-radio-group v-model="cardSize">
+              <el-button @click="uncheckAll">取消全选</el-button>
-              <el-radio-button label="mini">小</el-radio-button>
+              <el-button type="primary" plain @click="updPidBatch">将选中转移至</el-button>
-              <el-radio-button label="large">大</el-radio-button>
+              <el-button type="primary" plain @click="delBatch">删除已选中</el-button>
-            </el-radio-group>
+            </div>
-          </div>
-
-          <div class="radio">
-            <el-tooltip effect="light" placement="right" :hide-after="0">
-              <template #content> 开启重复上传后<br />重名的图片将会被覆盖 </template>
-              <div>重复上传<span class="iconbl bl-admonish-line" style="font-size: 12px; margin-left: 3px"></span></div>
-            </el-tooltip>
-            <el-switch
-              width="70"
-              class="replace-upload-switch"
-              inline-prompt
-              size="large"
-              v-model="isReplaceUpload"
-              active-text="开启"
-              inactive-text="关闭" />
-          </div>
-
-          <div class="cache-clear">
-            <el-tooltip effect="light" placement="right" :hide-after="0">
-              <template #content> 重复上传图片后<br />如果图片无变化可刷新缓存 </template>
-              <div>清空图片缓存<span class="iconbl bl-admonish-line" style="font-size: 12px; margin-left: 3px"></span></div>
-            </el-tooltip>
-            <el-button @click="picCacheRefresh">清空图片缓存</el-button>
           </div>
         </div>
 
-        <div class="workbench-group">
+        <div class="statistic">
-          <div class="statistic">
+          <bl-row just="flex-end" class="stat">
-            <div>《{{ curFolder?.name }}》</div>
+            <div>文件总览:</div>
-            <div>{{ pictureStat.cur.picCount }} P / {{ pictureStat.cur.picSize }}</div>
+            <div class="pics">{{ pictureStat.global.picCount }} P</div>
-          </div>
+            <span class="divider">/</span>
-          <div class="statistic">
+            <div class="size">{{ pictureStat.global.picSize }}</div>
-            <div>图片总览</div>
+          </bl-row>
-            <div>{{ pictureStat.global.picCount }} P / {{ pictureStat.global.picSize }}</div>
+          <bl-row just="flex-end" class="stat">
-          </div>
+            <div>{{ curFolder?.name }}:</div>
+            <div class="pics">{{ pictureStat.cur.picCount }} P</div>
+            <span class="divider">/</span>
+            <div class="size">{{ pictureStat.cur.picSize }}</div>
+          </bl-row>
+          <bl-row just="flex-end" class="item" :style="workbencStyle.workbench2">
+            <span>已选择</span> <bl-tag>{{ picChecks.size }}</bl-tag> <span>个文件</span>
+          </bl-row>
         </div>
       </div>
 
-      <div class="picture-card-container">
+      <div class="picture-card-container" :style="workbencStyle.cards">
         <div :class="['picture-card', cardClass]" v-for="pic in picturePages">
+          <el-checkbox
+            v-show="isExpandWorkbench"
+            class="picture-card-check"
+            size="large"
+            v-model="pic.checked"
+            @change="
+              (check: boolean) => {
+                picCheckChange(check, pic.id)
+              }
+            "></el-checkbox>
+
           <div v-if="pic.delTime" class="img-deleted">
             {{ pic.delTime == 2 ? '已删除' : pic.delTime == 1 ? '删除中' : '无法查看' }}
           </div>
@@ -148,18 +181,10 @@ const cardClass = computed(() => {
 })
 
 //#region ----------------------------------------< 当前文件当前文件 >----------------------------
-type PageParam = { pageNum: number; pageSize: number; pid: number; name: string; starStatus: number | undefined } // 分页对象类型
+type PageParam = { pageNum: number; pageSize: number; pid: string; name: string; starStatus: number | undefined } // 分页对象类型
 const curFolder = ref<DocInfo>() // 当前选中的文档, 包含文件夹和文章, 如果选中是文件夹, 则不会重置编辑器中的文章
-// 列表参数
+const picuturePageParam = ref<PageParam>({ pageNum: 1, pageSize: 10, pid: '0', name: '', starStatus: undefined }) // 列表参数
-const picuturePageParam = ref<PageParam>({
+const picturePages = ref<Picture[]>([]) // 图片列表
-  pageNum: 1,
-  pageSize: 10,
-  pid: 0,
-  name: '',
-  starStatus: undefined
-})
-// 图片列表
-const picturePages = ref<Picture[]>([])
 const pictureStat = ref<any>({
   cur: { picCount: 0, picSize: '0 MB' },
   global: { picCount: 0, picSize: '0 MB' }
@@ -177,7 +202,7 @@ const curIsFolder = () => {
   return true
 }
 
-const getPictureStat = (pid?: number) => {
+const getPictureStat = (pid?: string) => {
   pictureStatApi({ pid: pid }).then((resp) => {
     if (isNotNull(pid)) {
       pictureStat.value.cur.picCount = resp.data.pictureCount
@@ -234,7 +259,7 @@ const changeStarStatus = () => {
   }
   if (curIsFolder()) {
     picuturePageParam.value.pageNum = 1
-    picuturePageParam.value.pid = curFolder.value?.id as number
+    picuturePageParam.value.pid = curFolder.value!.id
     picturePageApi(picuturePageParam.value).then((resp) => {
       picturePages.value = resp.data.datas
     })
@@ -243,7 +268,7 @@ const changeStarStatus = () => {
 
 //#endregion
 
-//#region ----------------------------------------< 图片卡片操作 >------------------------------------------
+//#region ----------------------------------------< 图片卡片操作 >--------------------------------
 const PictureViewerInfoRef = ref()
 
 const showPicInfo = (url: string) => {
@@ -336,6 +361,71 @@ const deletePicture = (pic: Picture) => {
   })
 }
 
+//#endregion
+
+//#region ----------------------------------------< 二级操作台 >----------------------------------
+const workbencStyle = ref({
+  workbench1: { height: '50px' },
+  workbench2: { height: '0', visibility: 'hidden', opacity: 0 },
+  cards: { height: 'calc(100% - 50px)' }
+})
+const isExpandWorkbench = ref(false)
+
+const handleBenchworkStyle = () => {
+  isExpandWorkbench.value = !isExpandWorkbench.value
+  if (isExpandWorkbench.value) {
+    // 展开
+    workbencStyle.value = {
+      workbench1: { height: '85px' },
+      workbench2: { height: '35px', visibility: 'visible', opacity: 1 },
+      cards: { height: 'calc(100% - 85px)' }
+    }
+  } else {
+    // 收起
+    workbencStyle.value = {
+      workbench1: { height: '50px' },
+      workbench2: { height: '0', visibility: 'hidden', opacity: 0 },
+      cards: { height: 'calc(100% - 50px)' }
+    }
+  }
+}
+
+const picChecks = ref<Set<string>>(new Set())
+
+/** 选中全部图片 */
+const checkedAll = () => {
+  picturePages.value.forEach((ele) => {
+    ele.checked = true
+    picChecks.value.add(ele.id)
+  })
+}
+
+/** 取消选中的图片 */
+const uncheckAll = () => {
+  picturePages.value.forEach((ele) => {
+    ele.checked = false
+    picChecks.value.delete(ele.id)
+  })
+}
+
+/** 图片选中 */
+const picCheckChange = (check: boolean, id: string) => {
+  console.log(check, id)
+  if (check) {
+    picChecks.value.add(id)
+  } else {
+    picChecks.value.delete(id)
+  }
+}
+
+/** 修改图片的归属 */
+const updPidBatch = () => {
+  let ids: string[] = Array.from(picChecks.value)
+  console.log(ids)
+}
+
+const delBatch = () => {}
+
 //#endregion
 </script>
 

blossom-editor/src/renderer/src/views/picture/PictureInfo.vue

@@ -164,8 +164,8 @@ const isLoading = ref(false)
 const docTreeData = inject<Ref<DocTree[]>>(provideKeyDocTree)
 // 表单
 const docForm = ref<DocInfo>({
-  id: 0,
+  id: '0',
-  pid: 0,
+  pid: '0',
   name: '',
   icon: 'wl-folder',
   tags: [],
@@ -188,7 +188,7 @@ const docFormRule = ref<FormRules<DocInfo>>({
  * @param id         文件夹或文章ID
  * @param pid        初始化父级文件夹
  */
-const reload = (dialogType: DocDialogType, id?: number, pid?: number) => {
+const reload = (dialogType: DocDialogType, id?: number, pid?: string) => {
   curDocDialogType = dialogType
   docForm.value.type = 2
   // 只有修改时才查询数据, 新增时不查询
@@ -220,7 +220,7 @@ const checkSelectTreeIsDisabled = (data: any) => {
  * 清空上级菜单选项, 清空后的上级菜单为0
  */
 const clearPid = () => {
-  docForm.value.pid = 0
+  docForm.value.pid = ''
 }
 
 /**
@@ -245,13 +245,13 @@ const formatStorePath = () => {
 }
 
 const showStorePathWarning = ref(false)
-const fillStorePath = (id: number, path: string = ''): void => {
+const fillStorePath = (id: string, path: string = ''): void => {
   let doc = getDocById(id, docTreeData!.value)
   if (!doc) {
     return
   }
   path = doc.n + '/' + path
-  if (doc.p != 0) {
+  if (doc.p !== '0') {
     fillStorePath(doc.p, path)
   } else {
     let docName = ''
@@ -303,9 +303,9 @@ const quickTags = ref<Map<string, QuickTag>>(new Map())
 
 watch(
   () => docForm.value?.pid,
-  (newVal: number) => {
+  (newVal: string) => {
     if (newVal === undefined) {
-      docForm.value.pid = 0
+      docForm.value.pid = '0'
     }
     if (newVal != undefined) {
       initQuickTags(newVal)
@@ -313,7 +313,7 @@ watch(
   }
 )
 
-const initQuickTags = (pid: number) => {
+const initQuickTags = (pid: string) => {
   let docs = getCDocsByPid(pid, docTreeData!.value)
   let tags = new Set()
   for (let i = 0; i < docs.length; i++) {

blossom-editor/src/renderer/src/views/picture/PictureTreeDocs.vue

@@ -175,8 +175,8 @@ const getDocTree = () => {
 
       // 插入分割符
       docTree.splice(Math.max(lastPicIndex, 1), 0, {
-        i: docTree[0].i - 100000,
+        i: (Number(docTree[0].i) - 100000).toString(),
-        p: 0,
+        p: '0',
         n: '',
         o: 0,
         t: [],
@@ -218,7 +218,7 @@ const handleShowSort = () => {
 }
 
 //#region ----------------------------------------< 右键菜单 >--------------------------------------
-const curDoc = ref<DocTree>({ i: 0, p: 0, n: '选择菜单', o: 0, t: [], s: 0, icon: '', ty: 1, star: 0 })
+const curDoc = ref<DocTree>({ i: '0', p: '0', n: '选择菜单', o: 0, t: [], s: 0, icon: '', ty: 1, star: 0 })
 const rMenu = ref<RightMenu>({ show: false, clientX: 0, clientY: 0 })
 const rMenuHeight = 151 // 固定的菜单高度, 每次增加右键菜单项时需要修改该值
 
@@ -328,7 +328,7 @@ const isShowDocInfoDialog = ref<boolean>(false)
  * @param pid 父级ID, 新增同级或子集文档时使用
  */
 const handleShowDocInfoDialog = (dialogType: DocDialogType, pid?: number) => {
-  if (curDoc.value.i < 0) {
+  if (Number(curDoc.value.i) < 0) {
     Notify.info('当前文档为系统默认文档, 无法操作', '操作无效')
     return
   }

blossom-editor/src/renderer/src/views/picture/scripts/picture.ts

@@ -14,16 +14,17 @@ const { userinfo } = useUserStore()
  */
 export interface Picture {
   creTime: string
-  id: string | number
+  id: string
   name: string
   pathName: string
-  pid: string | number
+  pid: string
   size: number
   sourceName: string
   starStatus: number
   url: string
   articleNames: string
   delTime: number
+  checked: boolean
 }
 
 /**
@@ -32,8 +33,8 @@ export interface Picture {
  */
 export const buildDefaultPicture = (): Picture => {
   return {
-    id: 0,
+    id: '0',
-    pid: 0,
+    pid: '0',
     sourceName: '',
     starStatus: 0,
     name: '',
@@ -42,7 +43,8 @@ export const buildDefaultPicture = (): Picture => {
     creTime: '',
     url: '',
     articleNames: '',
-    delTime: 0
+    delTime: 0,
+    checked: false
   }
 }
 
@@ -72,14 +74,14 @@ export const wrapperFilename = (name: string): string => {
  * @param callback 上传回调
  * @returns 返回文件路径
  */
-export const uploadForm = (file: File, pid: number, callback: UploadCallback) => {
+export const uploadForm = (file: File, pid: string, callback: UploadCallback) => {
   if (file.size / 1024 / 1024 > picStyle.maxSize) {
     Notify.error(`文件大小不能超过 ${picStyle.maxSize}MB!`, '上传失败')
   } else {
     const form = new FormData()
     form.append('file', file)
     form.append('filename', wrapperFilename(file.name))
-    form.append('pid', pid.toString())
+    form.append('pid', pid)
     uploadFileApi(form).then((resp) => {
       callback(resp.data)
     })
@@ -92,7 +94,7 @@ export const uploadForm = (file: File, pid: number, callback: UploadCallback) =>
  * @param pid
  * @returns
  */
-export const uploadDate = (rawFile: UploadRawFile, pid: number, repeatUpload: boolean = false) => {
+export const uploadDate = (rawFile: UploadRawFile, pid: string, repeatUpload: boolean = false) => {
   return {
     pid: pid,
     filename: wrapperFilename(rawFile.name),

blossom-editor/src/renderer/src/views/picture/styles/picture-index.scss

@@ -59,32 +59,39 @@
     // 图片列表的控制按钮
     .picutre-workbench {
       @include flex(row, space-between, center);
-      @include box(calc(100% - 20px), 50px);
       @include themeShadow(0 3px 10px 1px #d3d3d3, 0 3px 10px 1px #000);
+      width: calc(100% - 20px);
       margin: 5px 10px 10px 10px;
-      padding: 5px;
+      padding: 0px 10px;
       border-radius: 5px;
+      transition: height 0.1s;
+      overflow-y: hidden;
+      overflow-x: auto;
 
-      .workbench-group {
+      &::-webkit-scrollbar {
-        height: 100%;
+        height: 3px;
-        @include flex(row, flex-start, center);
       }
 
-      :deep(.el-upload) {
+      .workbenchs {
-        width: 150px;
+        @include flex(column, center, center);
-        --el-upload-dragger-padding-horizontal: 20px;
+        height: 100%;
-        --el-upload-dragger-padding-vertical: 3px;
+      }
-        --el-fill-color-blank: var(--el-color-primary-light-9);
-        --el-border-color: var(--el-color-primary-light-3);
-        color: var(--el-color-primary-light-5);
 
-        .el-upload-dragger {
+      .workbench-level1 {
-          padding: 8px;
+        @include flex(row, space-between, flex-end);
-        }
+        width: 100%;
+      }
 
-        :hover {
+      .workbench-level2 {
-          color: var(--el-color-primary);
+        @include flex(row, space-between, center);
-        }
+        width: 100%;
+        transition:
+          height 0.1s,
+          opacity 0.1s;
+      }
+
+      .radio {
+        min-width: 70px;
       }
 
       .radio,
@@ -106,29 +113,43 @@
       }
 
       .statistic {
-        @include themeBg(#f3f3f3, #2b2b2b);
+        @include flex(column, flex-start, flex-end);
+        width: max-content;
         height: 100%;
-        border-radius: 5px;
-        padding: 2px 0;
 
-        div {
+        .stat {
-          padding: 0 10px;
+          height: 25px;
-
+        }
-          &:first-child {
+        .item {
-            font-size: 14px;
+          transition:
-            @include themeBorder(1px, #cdcdcd, #6d6d6d, 'bottom');
+            height 0.1s,
-          }
+            opacity 0.1s;
-
+        }
-          &:last-child {
+        .divider {
-            font-size: 13px;
+          padding: 0 5px;
-          }
+        }
+        .pics {
+          min-width: 40px;
+          text-align: right;
+        }
+        .size {
+          min-width: 55px;
+          text-align: right;
+        }
+        .pic-check-num {
         }
       }
     }
 
+    .picutre-workbench-child {
+      transition: all 0.1s ease;
+      padding-left: 10px;
+      font-size: 12px;
+    }
+
     .picture-card-container {
-      @include box(100%, calc(100% - 50px));
       @include flex(row, flex-start, flex-start);
+      width: 100%;
       align-content: flex-start;
       flex-wrap: wrap;
       padding: 10px 20px;
@@ -150,6 +171,24 @@
           }
         }
 
+        .picture-card-check {
+          position: absolute;
+          height: auto;
+          right: 10px;
+          top: 10px;
+
+          :deep(.el-checkbox__inner) {
+            height: 20px;
+            width: 20px;
+            &::after {
+              border-width: 2px;
+              height: 13px;
+              left: 7px;
+              top: 0;
+            }
+          }
+        }
+
         .other-file {
           @include flex(column, center, center);
           @include box(100%, 100%);
@@ -181,7 +220,6 @@
         }
 
         .img-error {
-        
         }
 
         .img-deleted {