From 177a060323ba23cf84812afa85eeed109c93834a Mon Sep 17 00:00:00 2001
From: juetan <contact@juetan.cn>
Date: Tue, 10 Oct 2023 23:28:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E5=88=86=E7=BB=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    |  9 ++---
 src/pages/post/media/index.vue | 70 ++++++++++++++++++++++++++--------
 src/types/auto-component.d.ts  |  6 +++
 3 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3c6c877..2c7a76e 100644
--- a/src/App.vue
+++ b/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> -->
-  <div>
+  </a-config-provider>
+  <!-- <div>
     <my-editor></my-editor>
-  </div>
+  </div> -->
 </template>
 
 <script setup lang="ts">
-import MyEditor from '@/components/editor/index.vue';
 </script>
 
 <style scoped></style>
diff --git a/src/pages/post/media/index.vue b/src/pages/post/media/index.vue
index 7072512..6d61df0 100644
--- a/src/pages/post/media/index.vue
+++ b/src/pages/post/media/index.vue
@@ -1,15 +1,55 @@
 <template>
   <BreadPage>
-    <Table v-bind="table">
-      <template #action>
-        <a-button type="primary">
-          <template #icon>
-            <i class="icon-park-outline-upload"></i>
+    <div class="min-h-full grid grid-cols-[auto_auto_1fr]">
+      <div class="w-[220px]">
+        <!-- <div class="h-6 flex items-end justify-between gap-2">
+          <div class="text-base">
+            素材分组
+          </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>
-          上传
-        </a-button>
-      </template>
-    </Table>
+        </Table>
+      </div>
+    </div>
   </BreadPage>
 </template>
 
@@ -59,12 +99,12 @@ const table = useTable({
   search: {
     items: [
       {
-        field: 'name',
-        label: '文件名称',
-        type: 'input',
-      }
-    ]
-  }
+        field: "name",
+        label: "文件名称",
+        type: "input",
+      },
+    ],
+  },
 });
 </script>
 
diff --git a/src/types/auto-component.d.ts b/src/types/auto-component.d.ts
index de38408..0b9225d 100644
--- a/src/types/auto-component.d.ts
+++ b/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']