feat: 添加素材分组

src/App.vue

@@ -1,17 +1,16 @@
 <template>
-  <!-- <a-config-provider>
+  <a-config-provider>
     <router-view v-slot="{ Component }">
       <page-403 v-if="Math.random() > 0.999"></page-403>
       <component v-else :is="Component"></component>
     </router-view>
-  </a-config-provider> -->
+  </a-config-provider>
-  <div>
+  <!-- <div>
     <my-editor></my-editor>
-  </div>
+  </div> -->
 </template>
 
 <script setup lang="ts">
-import MyEditor from '@/components/editor/index.vue';
 </script>
 
 <style scoped></style>

src/pages/post/media/index.vue

@@ -1,15 +1,55 @@
 <template>
   <BreadPage>
-    <Table v-bind="table">
+    <div class="min-h-full grid grid-cols-[auto_auto_1fr]">
-      <template #action>
+      <div class="w-[220px]">
-        <a-button type="primary">
+        <!-- <div class="h-6 flex items-end justify-between gap-2">
-          <template #icon>
+          <div class="text-base">
-            <i class="icon-park-outline-upload"></i>
+            素材分组
+          </div>
+          <div>
+            <a-link>添加</a-link>
+          </div>
+        </div> -->
+        <!-- <a-divider :margin="12"></a-divider> -->
+        <div class="flex gap-2">
+          <a-input-search allow-clear placeholder="分组名称..." class="mb-2"></a-input-search>
+          <a-button>
+            <template #icon>
+              <i class="icon-park-outline-add"></i>
+            </template>
+          </a-button>
+        </div>
+        <li 
+          v-for="i in 10" 
+          class="group flex items-center justify-between gap-2 h-8 rounded mb-1 pl-2 hover:bg-gray-100 cursor-pointer">
+          <div>
+            <i class="icon-file-folder"></i>
+            日常素材
+            <span class="text-xs text-gray-400">(10)</span>
+          </div>
+          <div>
+            <a-button size="small" type="text" class="!hidden !group-hover:inline-block">
+              <template #icon>
+                <i class="icon-park-outline-more-one text-gray-400 hover:text-gray-700"></i>
+              </template>
+            </a-button>
+          </div>
+        </li>
+      </div>
+      <a-divider direction="vertical" :margin="16"></a-divider>
+      <div>
+        <Table v-bind="table">
+          <template #action>
+            <a-button type="primary">
+              <template #icon>
+                <i class="icon-park-outline-upload"></i>
+              </template>
+              上传
+            </a-button>
           </template>
-          上传
+        </Table>
-        </a-button>
+      </div>
-      </template>
+    </div>
-    </Table>
   </BreadPage>
 </template>
 
@@ -59,12 +99,12 @@ const table = useTable({
   search: {
     items: [
       {
-        field: 'name',
+        field: "name",
-        label: '文件名称',
+        label: "文件名称",
-        type: 'input',
+        type: "input",
-      }
+      },
-    ]
+    ],
-  }
+  },
 });
 </script>
 

src/types/auto-component.d.ts

@@ -8,7 +8,12 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AAvatar: typeof import('@arco-design/web-vue')['Avatar']
+    ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
+    ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
     AButton: typeof import('@arco-design/web-vue')['Button']
+    ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
+    ACheckboxGroup: typeof import('@arco-design/web-vue')['CheckboxGroup']
+    AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
     ADivider: typeof import('@arco-design/web-vue')['Divider']
     ADoption: typeof import('@arco-design/web-vue')['Doption']
     ADrawer: typeof import('@arco-design/web-vue')['Drawer']
@@ -38,6 +43,7 @@ declare module '@vue/runtime-core' {
     ATag: typeof import('@arco-design/web-vue')['Tag']
     ATextarea: typeof import('@arco-design/web-vue')['Textarea']
     ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
+    AUpload: typeof import('@arco-design/web-vue')['Upload']
     Block: typeof import('./../components/editor/panel-main/components/block.vue')['default']
     BlockAttr: typeof import('./../components/editor/panel-right/block-attr.vue')['default']
     BreadCrumb: typeof import('./../components/breadcrumb/bread-crumb.vue')['default']