announcement.

src/admin/announcement/components/Actions.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { deleteAnnouncement } from "~/admin/api"
+
+interface Props {
+  announcementID: number
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(["deleted"])
+const router = useRouter()
+const message = useMessage()
+
+function goEdit() {
+  router.push({
+    name: "admin announcement edit",
+    params: { announcementID: props.announcementID },
+  })
+}
+
+async function handleDelete() {
+  await deleteAnnouncement(props.announcementID)
+  message.success("删除成功")
+  emit("deleted")
+}
+
+function goDetail() {}
+</script>
+<template>
+  <n-space>
+    <n-button size="small" type="success" secondary @click="goEdit">
+      编辑
+    </n-button>
+    <n-button size="small" type="info" secondary @click="goDetail">
+      查看
+    </n-button>
+    <n-popconfirm @positive-click="handleDelete">
+      <template #trigger>
+        <n-button size="small" type="error" secondary>删除</n-button>
+      </template>
+      确定删除这条公告吗？
+    </n-popconfirm>
+  </n-space>
+</template>
+<style scoped></style>

src/admin/announcement/detail.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import TextEditor from "~/shared/components/TextEditor.vue"
+import { createAnnouncement, editAnnouncement, getAnnouncement } from "../api"
+import { AnnouncementEdit } from "~/utils/types"
+
+interface Props {
+  announcementID?: string
+}
+
+const route = useRoute()
+const router = useRouter()
+const message = useMessage()
+const props = defineProps<Props>()
+const [ready, toggleReady] = useToggle()
+
+const announcement = reactive<AnnouncementEdit>({
+  id: 0,
+  title: "",
+  content: "",
+  visible: false,
+})
+
+async function init() {
+  if (!props.announcementID) {
+    toggleReady(true)
+    return
+  }
+  const id = parseInt(route.params.announcementID as string)
+  const res = await getAnnouncement(id)
+  toggleReady(true)
+  announcement.id = id
+  announcement.title = res.data.title
+  announcement.content = res.data.content
+  announcement.visible = res.data.visible
+}
+
+async function submit() {
+  if (announcement.content === "<p><br></p>") {
+    announcement.content = ""
+  }
+  if (!announcement.title || !announcement.content) {
+    message.error("标题和正文必填")
+    return
+  }
+  const api = {
+    "admin announcement create": createAnnouncement,
+    "admin announcement edit": editAnnouncement,
+  }[<string>route.name]
+  try {
+    await api!(announcement)
+    if (route.name === "admin announcement create") {
+      message.success("成功新建公告 💐")
+    } else {
+      message.success("修改已保存")
+    }
+    router.push({ name: "admin announcement list" })
+  } catch (err: any) {
+    message.error(err.data)
+  }
+}
+
+onMounted(init)
+</script>
+<template>
+  <h2 class="title">
+    {{ route.name === "admin announcement create" ? "新建公告" : "编辑公告" }}
+  </h2>
+  <n-form inline>
+    <n-form-item label="标题">
+      <n-input class="contestTitle" v-model:value="announcement.title" />
+    </n-form-item>
+    <n-form-item label="可见">
+      <n-switch v-model:value="announcement.visible" />
+    </n-form-item>
+  </n-form>
+  <TextEditor
+    v-if="ready"
+    title="正文"
+    v-model:value="announcement.content"
+    :min-height="200"
+  />
+  <n-space justify="end">
+    <n-button type="primary" @click="submit">保存</n-button>
+  </n-space>
+</template>
+<style scoped>
+.title {
+  margin-top: 0;
+}
+
+.contestTitle {
+  width: 400px;
+}
+</style>

src/admin/announcement/list.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import Pagination from "~/shared/components/Pagination.vue"
+import Actions from "./components/Actions.vue"
+import { Announcement } from "~/utils/types"
+import { editAnnouncement, getAnnouncementList } from "../api"
+import { parseTime } from "~/utils/functions"
+import { NSwitch } from "naive-ui"
+
+const total = ref(0)
+const query = reactive({
+  limit: 10,
+  page: 1,
+})
+const announcements = ref<Announcement[]>([])
+
+const columns: DataTableColumn<Announcement>[] = [
+  { title: "ID", key: "id", width: 60 },
+  { title: "标题", key: "title", minWidth: 300 },
+  {
+    title: "创建时间",
+    key: "create_time",
+    width: 180,
+    render: (row) => parseTime(row.create_time, "YYYY-MM-DD HH:mm:ss"),
+  },
+  {
+    title: "上次更新时间",
+    key: "last_update_time",
+    width: 180,
+    render: (row) => parseTime(row.last_update_time, "YYYY-MM-DD HH:mm:ss"),
+  },
+  {
+    title: "作者",
+    key: "created_by",
+    width: 80,
+    render: (row) => row.created_by.username,
+  },
+  {
+    title: "可见",
+    key: "visible",
+    render: (row) =>
+      h(NSwitch, {
+        value: row.visible,
+        size: "small",
+        rubberBand: false,
+        onUpdateValue: () => toggleVisible(row),
+      }),
+  },
+  {
+    title: "选项",
+    key: "actions",
+    width: 200,
+    render: (row) =>
+      h(Actions, { announcementID: row.id, onDeleted: listAnnouncements }),
+  },
+]
+
+async function toggleVisible(announcement: Announcement) {
+  announcement.visible = !announcement.visible
+  editAnnouncement({
+    id: announcement.id,
+    title: announcement.title,
+    content: announcement.content,
+    visible: announcement.visible,
+  })
+}
+
+async function listAnnouncements() {
+  const offset = (query.page - 1) * query.limit
+  const res = await getAnnouncementList(offset, query.limit)
+  announcements.value = res.data.results
+  total.value = res.data.total
+}
+
+onMounted(listAnnouncements)
+watch(query, listAnnouncements, { deep: true })
+</script>
+
+<template>
+  <h2 class="title">网站公告</h2>
+  <n-data-table striped size="small" :columns="columns" :data="announcements" />
+  <Pagination
+    :total="total"
+    v-model:limit="query.limit"
+    v-model:page="query.page"
+  />
+</template>
+
+<style scoped>
+.title {
+  margin: 0 0 16px;
+}
+</style>