feat(admin): 添加全局域名过滤器并重构相关视图
将域名过滤器从各视图移至布局组件,通过依赖注入共享状态 更新文档链接和API基础URL
This commit is contained in:
@@ -2,16 +2,6 @@
|
|||||||
<div class="page">
|
<div class="page">
|
||||||
<div style="display: flex; align-items: center; gap: 20px">
|
<div style="display: flex; align-items: center; gap: 20px">
|
||||||
<h2 class="page-title">访问统计</h2>
|
<h2 class="page-title">访问统计</h2>
|
||||||
<div class="toolbar">
|
|
||||||
<div class="toolbar-left">
|
|
||||||
<select v-model="domainFilter" class="toolbar-select">
|
|
||||||
<option value="">全部域名</option>
|
|
||||||
<option v-for="item in domainOptions" :key="item" :value="item">
|
|
||||||
{{ item }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="toastVisible"
|
v-if="toastVisible"
|
||||||
@@ -122,18 +112,16 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, onBeforeUnmount, ref, nextTick, watch } from "vue";
|
import { onMounted, onBeforeUnmount, ref, nextTick, watch, inject } from "vue";
|
||||||
|
import type { Ref } from "vue";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import {
|
import {
|
||||||
fetchVisitOverview,
|
fetchVisitOverview,
|
||||||
fetchVisitPages,
|
fetchVisitPages,
|
||||||
fetchDomainList,
|
|
||||||
type VisitOverviewResponse,
|
type VisitOverviewResponse,
|
||||||
type VisitPageItem,
|
type VisitPageItem,
|
||||||
} from "../api/admin";
|
} from "../api/admin";
|
||||||
|
|
||||||
const DOMAIN_STORAGE_KEY = "cwd_admin_domain_filter";
|
|
||||||
|
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const listLoading = ref(false);
|
const listLoading = ref(false);
|
||||||
const error = ref("");
|
const error = ref("");
|
||||||
@@ -148,12 +136,8 @@ const overview = ref<VisitOverviewResponse>({
|
|||||||
const items = ref<VisitPageItem[]>([]);
|
const items = ref<VisitPageItem[]>([]);
|
||||||
const visitTab = ref<"pv" | "latest">("pv");
|
const visitTab = ref<"pv" | "latest">("pv");
|
||||||
|
|
||||||
const storedDomain =
|
const injectedDomainFilter = inject<Ref<string> | null>("domainFilter", null);
|
||||||
typeof window !== "undefined"
|
const domainFilter = injectedDomainFilter ?? ref("");
|
||||||
? window.localStorage.getItem(DOMAIN_STORAGE_KEY) || ""
|
|
||||||
: "";
|
|
||||||
const domainFilter = ref(storedDomain);
|
|
||||||
const domainOptions = ref<string[]>([]);
|
|
||||||
const last30Days = ref<{ date: string; total: number }[]>([]);
|
const last30Days = ref<{ date: string; total: number }[]>([]);
|
||||||
|
|
||||||
const toastMessage = ref("");
|
const toastMessage = ref("");
|
||||||
@@ -267,21 +251,6 @@ async function loadData() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadDomains() {
|
|
||||||
try {
|
|
||||||
const res = await fetchDomainList();
|
|
||||||
const domains = Array.isArray(res.domains) ? res.domains : [];
|
|
||||||
const set = new Set(domains);
|
|
||||||
if (domainFilter.value && !set.has(domainFilter.value)) {
|
|
||||||
set.add(domainFilter.value);
|
|
||||||
}
|
|
||||||
domainOptions.value = Array.from(set);
|
|
||||||
} catch (e: any) {
|
|
||||||
const msg = e.message || "加载域名列表失败";
|
|
||||||
showToast(msg, "error");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadVisitPagesOnly() {
|
async function loadVisitPagesOnly() {
|
||||||
listLoading.value = true;
|
listLoading.value = true;
|
||||||
error.value = "";
|
error.value = "";
|
||||||
@@ -370,7 +339,6 @@ function handleResize() {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadData();
|
loadData();
|
||||||
loadDomains();
|
|
||||||
window.addEventListener("resize", handleResize);
|
window.addEventListener("resize", handleResize);
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -382,15 +350,9 @@ onBeforeUnmount(() => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(
|
watch(domainFilter, () => {
|
||||||
domainFilter,
|
loadData();
|
||||||
(value) => {
|
});
|
||||||
if (typeof window !== "undefined") {
|
|
||||||
window.localStorage.setItem(DOMAIN_STORAGE_KEY, value || "");
|
|
||||||
}
|
|
||||||
loadData();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -9,12 +9,6 @@
|
|||||||
<option value="pending">待审核</option>
|
<option value="pending">待审核</option>
|
||||||
<option value="rejected">已拒绝</option>
|
<option value="rejected">已拒绝</option>
|
||||||
</select>
|
</select>
|
||||||
<select v-model="domainFilter" class="toolbar-select">
|
|
||||||
<option value="">全部域名</option>
|
|
||||||
<option v-for="item in domainOptions" :key="item" :value="item">
|
|
||||||
{{ item }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="toolbar-right">
|
<div class="toolbar-right">
|
||||||
<button class="toolbar-button" @click="goPage(1)">刷新</button>
|
<button class="toolbar-button" @click="goPage(1)">刷新</button>
|
||||||
@@ -82,7 +76,7 @@
|
|||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
v-if="item.priority && item.priority > 1"
|
v-if="item.priority && item.priority > 1"
|
||||||
:title="item.priority"
|
:title="String(item.priority)"
|
||||||
class="cell-status cell-pin-flag"
|
class="cell-status cell-pin-flag"
|
||||||
>
|
>
|
||||||
置顶
|
置顶
|
||||||
@@ -251,7 +245,8 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref, computed, watch } from "vue";
|
import { onMounted, ref, computed, watch, inject } from "vue";
|
||||||
|
import type { Ref } from "vue";
|
||||||
import { useRoute, useRouter } from "vue-router";
|
import { useRoute, useRouter } from "vue-router";
|
||||||
import {
|
import {
|
||||||
CommentItem,
|
CommentItem,
|
||||||
@@ -265,8 +260,6 @@ import {
|
|||||||
fetchDomainList,
|
fetchDomainList,
|
||||||
} from "../api/admin";
|
} from "../api/admin";
|
||||||
|
|
||||||
const DOMAIN_STORAGE_KEY = "cwd_admin_domain_filter";
|
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
@@ -275,11 +268,8 @@ const pagination = ref<{ page: number; total: number }>({ page: 1, total: 1 });
|
|||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const error = ref("");
|
const error = ref("");
|
||||||
const statusFilter = ref("");
|
const statusFilter = ref("");
|
||||||
const storedDomain =
|
const injectedDomainFilter = inject<Ref<string> | null>("domainFilter", null);
|
||||||
typeof window !== "undefined"
|
const domainFilter = injectedDomainFilter ?? ref("");
|
||||||
? window.localStorage.getItem(DOMAIN_STORAGE_KEY) || ""
|
|
||||||
: "";
|
|
||||||
const domainFilter = ref(storedDomain);
|
|
||||||
const jumpPageInput = ref("");
|
const jumpPageInput = ref("");
|
||||||
const editVisible = ref(false);
|
const editVisible = ref(false);
|
||||||
const editSaving = ref(false);
|
const editSaving = ref(false);
|
||||||
@@ -294,8 +284,6 @@ const editForm = ref<{
|
|||||||
priority: number;
|
priority: number;
|
||||||
} | null>(null);
|
} | null>(null);
|
||||||
|
|
||||||
const domainOptions = ref<string[]>([]);
|
|
||||||
|
|
||||||
const filteredComments = computed(() => {
|
const filteredComments = computed(() => {
|
||||||
if (!statusFilter.value) {
|
if (!statusFilter.value) {
|
||||||
return comments.value;
|
return comments.value;
|
||||||
@@ -558,26 +546,13 @@ onMounted(() => {
|
|||||||
domainFilter.value = d.trim();
|
domainFilter.value = d.trim();
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchDomainList()
|
|
||||||
.then((res) => {
|
|
||||||
const domains = Array.isArray(res.domains) ? res.domains : [];
|
|
||||||
domainOptions.value = Array.from(new Set(domains));
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
domainOptions.value = [];
|
|
||||||
});
|
|
||||||
|
|
||||||
loadComments(initialPage);
|
loadComments(initialPage);
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(
|
watch(domainFilter, () => {
|
||||||
domainFilter,
|
updateRoutePage(1);
|
||||||
(value) => {
|
loadComments(1);
|
||||||
if (typeof window !== "undefined") {
|
});
|
||||||
window.localStorage.setItem(DOMAIN_STORAGE_KEY, value || "");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -16,6 +16,14 @@
|
|||||||
</button>
|
</button>
|
||||||
<div class="layout-title">CWD 评论后台</div>
|
<div class="layout-title">CWD 评论后台</div>
|
||||||
<div class="layout-actions-wrapper">
|
<div class="layout-actions-wrapper">
|
||||||
|
<div class="layout-domain-filter">
|
||||||
|
<select v-model="domainFilter" class="layout-domain-select">
|
||||||
|
<option value="">全部域名</option>
|
||||||
|
<option v-for="item in domainOptions" :key="item" :value="item">
|
||||||
|
{{ item }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
<div class="layout-actions">
|
<div class="layout-actions">
|
||||||
<a class="layout-button" href="https://cwd.js.org" target="_blank">
|
<a class="layout-button" href="https://cwd.js.org" target="_blank">
|
||||||
使用文档
|
使用文档
|
||||||
@@ -107,9 +115,11 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from "vue";
|
import { ref, onMounted, watch, provide } from "vue";
|
||||||
import { useRouter, useRoute } from "vue-router";
|
import { useRouter, useRoute } from "vue-router";
|
||||||
import { logoutAdmin } from "../api/admin";
|
import { logoutAdmin, fetchDomainList } from "../api/admin";
|
||||||
|
|
||||||
|
const DOMAIN_STORAGE_KEY = "cwd_admin_domain_filter";
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
@@ -117,6 +127,39 @@ const route = useRoute();
|
|||||||
const isMobileSiderOpen = ref(false);
|
const isMobileSiderOpen = ref(false);
|
||||||
const isActionsOpen = ref(false);
|
const isActionsOpen = ref(false);
|
||||||
|
|
||||||
|
const storedDomain =
|
||||||
|
typeof window !== "undefined"
|
||||||
|
? window.localStorage.getItem(DOMAIN_STORAGE_KEY) || ""
|
||||||
|
: "";
|
||||||
|
const domainFilter = ref(storedDomain);
|
||||||
|
const domainOptions = ref<string[]>([]);
|
||||||
|
|
||||||
|
async function loadDomains() {
|
||||||
|
try {
|
||||||
|
const res = await fetchDomainList();
|
||||||
|
const domains = Array.isArray(res.domains) ? res.domains : [];
|
||||||
|
const set = new Set(domains);
|
||||||
|
if (domainFilter.value && !set.has(domainFilter.value)) {
|
||||||
|
set.add(domainFilter.value);
|
||||||
|
}
|
||||||
|
domainOptions.value = Array.from(set);
|
||||||
|
} catch {
|
||||||
|
domainOptions.value = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
provide("domainFilter", domainFilter);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
loadDomains();
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(domainFilter, (value) => {
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
window.localStorage.setItem(DOMAIN_STORAGE_KEY, value || "");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
function isRouteActive(name: string) {
|
function isRouteActive(name: string) {
|
||||||
return route.name === name;
|
return route.name === name;
|
||||||
}
|
}
|
||||||
@@ -209,10 +252,24 @@ function handleLogoutFromActions() {
|
|||||||
.layout-actions-wrapper {
|
.layout-actions-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layout-domain-filter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-domain-select {
|
||||||
|
padding: 6px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #57606a;
|
||||||
|
background-color: #24292f;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
.layout-actions {
|
.layout-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
|||||||
@@ -2,16 +2,6 @@
|
|||||||
<div class="page">
|
<div class="page">
|
||||||
<div style="display: flex; align-items: center; gap: 20px">
|
<div style="display: flex; align-items: center; gap: 20px">
|
||||||
<h2 class="page-title">数据看板</h2>
|
<h2 class="page-title">数据看板</h2>
|
||||||
<div class="toolbar">
|
|
||||||
<div class="toolbar-left">
|
|
||||||
<select v-model="domainFilter" class="toolbar-select">
|
|
||||||
<option value="">全部域名</option>
|
|
||||||
<option v-for="item in domainOptions" :key="item" :value="item">
|
|
||||||
{{ item }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="toastVisible"
|
v-if="toastVisible"
|
||||||
@@ -92,9 +82,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, onBeforeUnmount, ref, nextTick, watch } from "vue";
|
import { onMounted, onBeforeUnmount, ref, nextTick, watch, inject } from "vue";
|
||||||
|
import type { Ref } from "vue";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import { fetchCommentStats, fetchDomainList } from "../api/admin";
|
import { fetchCommentStats } from "../api/admin";
|
||||||
|
|
||||||
type DomainStat = {
|
type DomainStat = {
|
||||||
domain: string;
|
domain: string;
|
||||||
@@ -104,8 +95,6 @@ type DomainStat = {
|
|||||||
rejected: number;
|
rejected: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
const DOMAIN_STORAGE_KEY = "cwd_admin_domain_filter";
|
|
||||||
|
|
||||||
const statsLoading = ref(false);
|
const statsLoading = ref(false);
|
||||||
const statsError = ref("");
|
const statsError = ref("");
|
||||||
const statsSummary = ref({
|
const statsSummary = ref({
|
||||||
@@ -117,12 +106,8 @@ const statsSummary = ref({
|
|||||||
const domainStats = ref<DomainStat[]>([]);
|
const domainStats = ref<DomainStat[]>([]);
|
||||||
const last7Days = ref<{ date: string; total: number }[]>([]);
|
const last7Days = ref<{ date: string; total: number }[]>([]);
|
||||||
|
|
||||||
const storedDomain =
|
const injectedDomainFilter = inject<Ref<string> | null>("domainFilter", null);
|
||||||
typeof window !== "undefined"
|
const domainFilter = injectedDomainFilter ?? ref("");
|
||||||
? window.localStorage.getItem(DOMAIN_STORAGE_KEY) || ""
|
|
||||||
: "";
|
|
||||||
const domainFilter = ref(storedDomain);
|
|
||||||
const domainOptions = ref<string[]>([]);
|
|
||||||
|
|
||||||
const toastMessage = ref("");
|
const toastMessage = ref("");
|
||||||
const toastType = ref<"success" | "error">("success");
|
const toastType = ref<"success" | "error">("success");
|
||||||
@@ -166,21 +151,6 @@ async function loadStats() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadDomains() {
|
|
||||||
try {
|
|
||||||
const res = await fetchDomainList();
|
|
||||||
const domains = Array.isArray(res.domains) ? res.domains : [];
|
|
||||||
const set = new Set(domains);
|
|
||||||
if (domainFilter.value && !set.has(domainFilter.value)) {
|
|
||||||
set.add(domainFilter.value);
|
|
||||||
}
|
|
||||||
domainOptions.value = Array.from(set);
|
|
||||||
} catch (e: any) {
|
|
||||||
const msg = e.message || "加载域名列表失败";
|
|
||||||
showToast(msg, "error");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderChart() {
|
function renderChart() {
|
||||||
const el = chartEl.value;
|
const el = chartEl.value;
|
||||||
if (!el) {
|
if (!el) {
|
||||||
@@ -244,14 +214,10 @@ function handleResize() {
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
loadStats();
|
loadStats();
|
||||||
loadDomains();
|
|
||||||
window.addEventListener("resize", handleResize);
|
window.addEventListener("resize", handleResize);
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(domainFilter, (value) => {
|
watch(domainFilter, () => {
|
||||||
if (typeof window !== "undefined") {
|
|
||||||
window.localStorage.setItem(DOMAIN_STORAGE_KEY, value || "");
|
|
||||||
}
|
|
||||||
loadStats();
|
loadStats();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -210,7 +210,7 @@ app.use('/admin/*', async (c, next) => {
|
|||||||
|
|
||||||
app.get('/', (c) => {
|
app.get('/', (c) => {
|
||||||
return c.html(
|
return c.html(
|
||||||
`CWD 评论部署成功,当前版本 ${VERSION},<a href="https://github.com/anghunk/cwd" target="_blank" rel="noreferrer">查看文档</a>`
|
`CWD 评论部署成功,当前版本 ${VERSION},<a href="https://cdw.js.org" target="_blank" rel="noreferrer">查看文档</a>`
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ const commentsRoot = ref(null);
|
|||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
if (!commentsRoot.value || typeof window === "undefined") return;
|
if (!commentsRoot.value || typeof window === "undefined") return;
|
||||||
|
|
||||||
const apiBaseUrl = "https://cwd-api.anghunk.workers.dev";
|
const apiBaseUrl = "https://cwd-api.zishu.me";
|
||||||
|
|
||||||
if (!apiBaseUrl) return;
|
if (!apiBaseUrl) return;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user