From 6c196f9efb90976a33ae2dd0a8a608e51d46216d Mon Sep 17 00:00:00 2001
From: juetan <contact@juetan.cn>
Date: Mon, 23 Oct 2023 18:38:11 +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

---
 .env                                      |   2 +-
 src/pages/post/media/components/group.vue | 136 ++++++++++++++++++++++
 src/pages/post/media/index.vue            |  50 +-------
 3 files changed, 139 insertions(+), 49 deletions(-)
 create mode 100644 src/pages/post/media/components/group.vue

diff --git a/.env b/.env
index 2ea954c..f84a78f 100644
--- a/.env
+++ b/.env
@@ -6,7 +6,7 @@ VITE_TITLE = 绝弹管理后台
 # 网站副标题
 VITE_SUBTITLE = 快速开发web应用的模板工具
 # 接口前缀 说明：参见 axios 的 baseURL
-VITE_API = https://nest.dev.juetan.cn/
+VITE_API = http://127.0.0.1:3030/
 
 # =====================================================================================
 # 开发设置
diff --git a/src/pages/post/media/components/group.vue b/src/pages/post/media/components/group.vue
new file mode 100644
index 0000000..e735523
--- /dev/null
+++ b/src/pages/post/media/components/group.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="w-[210px] h-full overflow-hidden grid grid-rows-[auto_1fr]">
+    <div class="flex gap-2">
+      <a-input-search allow-clear placeholder="分组名称..." class="mb-2"></a-input-search>
+      <a-button @click="onCreateRow">
+        <template #icon>
+          <i class="icon-park-outline-add"></i>
+        </template>
+      </a-button>
+      <form-modal></form-modal>
+    </div>
+    <a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-auto">
+      <ul class="pl-0 mt-0">
+        <li
+          v-for="item in list"
+          :key="item.id"
+          class="group flex items-center justify-between gap-1 h-8 rounded mb-2 pl-3 hover:bg-gray-100 cursor-pointer"
+        >
+          <div>
+            <i class="icon-park-outline-folder-close"></i>
+            {{ item.title }}
+            <span class="text-xs text-gray-500"> ({{ item.count }}) </span>
+          </div>
+          <div>
+            <a-dropdown>
+              <a-button size="small" type="text">
+                <template #icon>
+                  <i class="icon-park-outline-more-one text-gray-400 hover:text-gray-700"></i>
+                </template>
+              </a-button>
+              <template #content>
+                <a-doption @click="onModifyRow(item)">
+                  <template #icon>
+                    <i class="icon-park-outline-edit"></i>
+                  </template>
+                  修改
+                </a-doption>
+                <a-doption class="!text-red-500" @click="onDeleteRow">
+                  <template #icon>
+                    <i class="icon-park-outline-delete"></i>
+                  </template>
+                  删除
+                </a-doption>
+              </template>
+            </a-dropdown>
+          </div>
+        </li>
+      </ul>
+    </a-scrollbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAniFormModal } from "@/components";
+import { delConfirm } from "@/utils";
+
+const data = [
+  {
+    id: 1,
+    title: "生活笔记",
+    count: 23,
+  },
+  {
+    id: 2,
+    title: "微信头像",
+    count: 52,
+  },
+  {
+    id: 3,
+    title: "文章封面",
+    count: 19,
+  },
+  {
+    id: 4,
+    title: "山水诗画",
+    count: 81,
+  },
+  {
+    id: 5,
+    title: "虾米沙雕",
+    count: 12,
+  },
+];
+
+const list = ref(data);
+
+const onModifyRow = (row: any) => {
+  formCtx.props.title = "修改分组";
+  formCtx.open(row);
+};
+
+const onCreateRow = () => {
+  formCtx.props.title = "新建分组";
+  formCtx.open();
+};
+
+const onDeleteRow = async () => {
+  await delConfirm();
+};
+
+const [formModal, formCtx] = useAniFormModal({
+  title: "修改分组",
+  trigger: false,
+  modalProps: {
+    width: 432,
+  },
+  model: {
+    id: undefined,
+  },
+  items: [
+    {
+      field: "title",
+      label: "分组名称",
+      type: "input",
+    },
+  ],
+  submit: async ({ model }) => {
+    if (model.id) {
+      const item = list.value.find((i) => i.id === model.id);
+      if (item) {
+        item.title = model.title;
+      }
+    } else {
+      const ids = list.value.map((i) => i.id);
+      const maxId = Math.max.apply(null, ids);
+      list.value.push({
+        id: maxId,
+        title: model.title,
+        count: 0,
+      });
+    }
+  },
+});
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/pages/post/media/index.vue b/src/pages/post/media/index.vue
index a100b2c..04411a4 100644
--- a/src/pages/post/media/index.vue
+++ b/src/pages/post/media/index.vue
@@ -1,54 +1,7 @@
 <template>
   <BreadPage>
     <div class="overflow-hidden grid grid-cols-[auto_auto_1fr]">
-      <div class="w-[210px] h-full overflow-hidden grid grid-rows-[auto_1fr]">
-        <div class="flex gap-2 pr-4">
-          <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>
-        <a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-auto">
-          <ul class="pr-4 pl-0 mt-0">
-            <li
-              v-for="i in 5"
-              class="group flex items-center justify-between gap-2 h-8 rounded mb-2 pl-3 hover:bg-gray-100 cursor-pointer"
-            >
-              <div>
-                <i class="icon-file-folder text-gray-600"></i>
-                日常素材
-                <span class="text-xs text-gray-400">(10)</span>
-              </div>
-              <div>
-                <a-dropdown>
-                  <a-button size="small" type="text">
-                    <template #icon>
-                      <i class="icon-park-outline-more-one text-gray-400 hover:text-gray-700"></i>
-                    </template>
-                  </a-button>
-                  <template #content>
-                    <a-doption @click="typeCtx.open()">
-                      <template #icon>
-                        <i class="icon-park-outline-edit"></i>
-                      </template>
-                      修改
-                    </a-doption>
-                    <a-doption class="!text-red-500">
-                      <template #icon>
-                        <i class="icon-park-outline-delete"></i>
-                      </template>
-                      删除
-                    </a-doption>
-                  </template>
-                </a-dropdown>
-                <type-modal></type-modal>
-              </div>
-            </li>
-          </ul>
-        </a-scrollbar>
-      </div>
+      <ani-group></ani-group>
       <a-divider direction="vertical" :margin="16"></a-divider>
       <div>
         <Table v-bind="table">
@@ -72,6 +25,7 @@ import { api } from "@/api";
 import { Table, useAniFormModal, useTable } from "@/components";
 import { dayjs } from "@/libs/dayjs";
 import numeral from "numeral";
+import AniGroup from './components/group.vue';
 import AniUpload from "./components/upload.vue";
 
 const [typeModal, typeCtx] = useAniFormModal({