add 站点编辑

2026-05-14 17:57:35 +08:00 · 2023-07-07 10:26:15 +08:00
parent a96503c05a
commit e54dd44edb
2 changed files with 195 additions and 24 deletions
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -173,6 +173,8 @@ export interface Site {
  filter?: string
  // 是否演染
  render?: number
+  // 是否公开站点
+  public?: number
  // 备注
  note?: string
  // 流控单位周期
--- a/src/components/cards/SiteCard.vue
+++ b/src/components/cards/SiteCard.vue
@@ -32,6 +32,9 @@ const updateButtonDisable = ref(false);
 // 更新站点Cookie UA弹窗
 const siteCookieDialog = ref(false);

+// 站点编辑弹窗
+const siteInfoDialog = ref(false);
+
 // 用户名密码表单
 const userPwForm = ref({
  username: "",
@@ -70,6 +73,11 @@ const handleSiteUpdate = async () => {
  siteCookieDialog.value = true;
 };

+// 打开站点编辑弹窗
+const handleSiteInfo = async () => {
+  siteInfoDialog.value = true;
+};
+
 // 调用API，更新站点Cookie UA
 const updateSiteCookie = async () => {
  try {
@@ -88,7 +96,7 @@ const updateSiteCookie = async () => {
        params: {
          username: userPwForm.value.username,
          password: userPwForm.value.password,
-        }
+        },
      }
    );
    if (result.success) {
@@ -103,6 +111,68 @@ const updateSiteCookie = async () => {
  }
 };

+// 调用API更新站点信息
+const updateSiteInfo = async () => {
+  try {
+    // 更新按钮状态
+    siteInfoDialog.value = false;
+
+    const result: { [key: string]: any } = await api.put("site", siteForm);
+    if (result.success) {
+      $toast.success(`${props.site?.name} 更新成功！`);
+    } else {
+      $toast.error(`${props.site?.name} 更新失败：${result.message}`);
+    }
+  } catch (error) {
+    $toast.error(`${props.site?.name} 更新失败！`);
+    console.error(error);
+  }
+};
+
+// 站点编辑表单数据
+const siteForm = reactive({
+  // ID
+  id: props.site?.id,
+  // 站点名称
+  name: props.site?.name,
+  // 站点主域名Key
+  domain: props.site?.domain,
+  // 站点地址
+  url: props.site?.url,
+  // 站点优先级
+  pri: props.site?.pri,
+  // RSS地址
+  rss: props.site?.rss,
+  // Cookie
+  cookie: props.site?.cookie,
+  // User-Agent
+  ua: props.site?.ua,
+  // 是否使用代理
+  proxy: props.site?.proxy ? true : false,
+  // 过滤规则
+  filter: props.site?.filter,
+  // 是否演染
+  render: props.site?.render ? true : false,
+  // 是否公开站点
+  public: props.site?.public,
+  // 备注
+  note: props.site?.note,
+  // 流控单位周期
+  limit_interval: props.site?.limit_interval,
+  // 流控次数
+  limit_count: props.site?.limit_count,
+  // 流控间隔
+  limit_seconds: props.site?.limit_seconds,
+  // 是否启用
+  is_active: props.site?.is_active,
+});
+
+// 状态下拉项
+const statusItems = [
+  { title: "启用", value: true },
+  { title: "停用", value: false },
+];
+
 // 装载时查询站点图标
 onMounted(() => {
  getSiteIcon();
@@ -110,7 +180,12 @@ onMounted(() => {
 </script>

 <template>
-  <VCard :height="props.height" :width="props.width" :flat="!props.site?.is_active" class="overflow-hidden">
+  <VCard
+    :height="props.height"
+    :width="props.width"
+    :flat="!siteForm.is_active"
+    class="overflow-hidden"
+  >
    <template #image>
      <VAvatar class="absolute right-2 bottom-2" variant="flat" rounded="0">
        <VImg :src="siteIcon" />
@@ -121,16 +196,28 @@ onMounted(() => {
      <VCardSubtitle>{{ props.site?.url }}</VCardSubtitle>
    </VCardItem>

-    <div class="absolute top-0 right-0 flex items-center justify-between p-2" v-if="props.site?.is_active">
+    <div
+      class="absolute top-0 right-0 flex items-center justify-between p-2"
+      v-if="siteForm.is_active"
+    >
      <div class="pointer-events-none z-40 flex items-center">
        <div
-          class="relative inline-flex whitespace-nowrap rounded-full border-gray-700 font-semibold leading-5 ring-gray-700">
+          class="relative inline-flex whitespace-nowrap rounded-full border-gray-700 font-semibold leading-5 ring-gray-700"
+        >
          <div
-            class="rounded-full bg-opacity-80 shadow-md w-5 border p-0 bg-green-500 border-green-400 ring-green-400 text-green-100">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path fill-rule="evenodd"
+            class="rounded-full bg-opacity-80 shadow-md w-5 border p-0 bg-green-500 border-green-400 ring-green-400 text-green-100"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
-                clip-rule="evenodd"></path>
+                clip-rule="evenodd"
+              ></path>
            </svg>
          </div>
        </div>
@@ -138,39 +225,48 @@ onMounted(() => {
    </div>

    <VCardText class="py-2">
-      <VTooltip text="浏览器仿真" v-if="props.site?.render">
+      <VTooltip text="浏览器仿真" v-if="siteForm.render">
        <template #activator="{ props }">
          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-apple-safari" />
        </template>
      </VTooltip>

-      <VTooltip text="代理" v-if="props.site?.proxy">
+      <VTooltip text="代理" v-if="siteForm.proxy">
        <template #activator="{ props }">
          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-network-outline" />
        </template>
      </VTooltip>

-      <VTooltip text="流控" v-if="props.site?.limit_interval">
+      <VTooltip text="流控" v-if="siteForm.limit_interval">
        <template #activator="{ props }">
          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-speedometer" />
        </template>
      </VTooltip>

-      <VTooltip text="过滤" v-if="props.site?.filter">
+      <VTooltip text="过滤" v-if="siteForm.filter">
        <template #activator="{ props }">
-          <VIcon color="primary" class="me-2" v-bind="props" icon="mdi-filter-cog-outline" />
+          <VIcon
+            color="primary"
+            class="me-2"
+            v-bind="props"
+            icon="mdi-filter-cog-outline"
+          />
        </template>
      </VTooltip>
    </VCardText>

    <VCardActions>
-      <VBtn @click="handleSiteUpdate" :disabled="updateButtonDisable">
+      <VBtn
+        @click="handleSiteUpdate"
+        :disabled="updateButtonDisable"
+        v-if="!props.site?.public"
+      >
        <template #prepend>
          <VIcon icon="mdi-refresh"></VIcon>
        </template>
        {{ updateButtonText }}
      </VBtn>
-      <VBtn>
+      <VBtn @click="handleSiteInfo">
        <template #prepend>
          <VIcon icon="mdi-square-edit-outline"></VIcon>
        </template>
@@ -184,20 +280,32 @@ onMounted(() => {
      </VBtn>
    </VCardActions>
  </VCard>
+  <!-- 更新站点Cookie & UA弹窗 -->
  <VDialog v-model="siteCookieDialog" max-width="600">
    <!-- Dialog Content -->
    <VCard title="更新站点Cookie & UA">
      <VCardText>
-        <VForm @submit.prevent="() => { }">
+        <VForm @submit.prevent="() => {}">
          <VRow>
            <VCol cols="6">
-              <VTextField v-model="userPwForm.username" label="用户名" :rules="[requiredValidator]" />
+              <VTextField
+                v-model="userPwForm.username"
+                label="用户名"
+                :rules="[requiredValidator]"
+              />
            </VCol>
            <VCol cols="6">
-              <VTextField v-model="userPwForm.password" label="密码" :type="isPasswordVisible ? 'text' : 'password'"
-                :append-inner-icon="isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
-                @click:append-inner="isPasswordVisible = !isPasswordVisible" :rules="[requiredValidator]"
-                @keydown.enter="updateSiteCookie" />
+              <VTextField
+                v-model="userPwForm.password"
+                label="密码"
+                :type="isPasswordVisible ? 'text' : 'password'"
+                :append-inner-icon="
+                  isPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'
+                "
+                @click:append-inner="isPasswordVisible = !isPasswordVisible"
+                :rules="[requiredValidator]"
+                @keydown.enter="updateSiteCookie"
+              />
            </VCol>
          </VRow>
        </VForm>
@@ -205,9 +313,70 @@ onMounted(() => {

      <VCardActions>
        <VSpacer />
-        <VBtn @click="updateSiteCookie">
-          开始更新
-        </VBtn>
+        <VBtn @click="updateSiteCookie"> 开始更新 </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+  <!-- 站点编辑弹窗 -->
+  <VDialog v-model="siteInfoDialog" max-width="1000" persistent>
+    <!-- Dialog Content -->
+    <VCard :title="`编辑站点 - ${props.site?.name}`">
+      <VCardText>
+        <VForm @submit.prevent="() => {}">
+          <VRow>
+            <VCol cols="6">
+              <VTextField
+                v-model="siteForm.url"
+                label="站点地址"
+                :rules="[requiredValidator]"
+              />
+            </VCol>
+            <VCol cols="3">
+              <VSelect
+                v-model="siteForm.pri"
+                label="优先级"
+                :items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
+                :rules="[requiredValidator]"
+              />
+            </VCol>
+            <VCol cols="3">
+              <VSelect v-model="siteForm.is_active" :items="statusItems" label="状态" />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol cols="12">
+              <VTextarea v-model="siteForm.cookie" label="站点Cookie" />
+            </VCol>
+            <VCol cols="12">
+              <VTextField v-model="siteForm.ua" label="站点User-Agent" />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol cols="4">
+              <VTextField v-model="siteForm.limit_interval" label="单位周期（秒）" />
+            </VCol>
+            <VCol cols="4">
+              <VTextField v-model="siteForm.limit_seconds" label="访问次数" />
+            </VCol>
+            <VCol cols="4">
+              <VTextField v-model="siteForm.limit_seconds" label="访问间隔（秒）" />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol cols="6">
+              <VSwitch v-model="siteForm.proxy" label="代理" />
+            </VCol>
+            <VCol cols="6">
+              <VSwitch v-model="siteForm.render" label="仿真" />
+            </VCol>
+          </VRow>
+        </VForm>
+      </VCardText>
+
+      <VCardActions>
+        <VBtn @click="siteInfoDialog = false"> 取消 </VBtn>
+        <VSpacer />
+        <VBtn @click="updateSiteInfo"> 确定 </VBtn>
      </VCardActions>
    </VCard>
  </VDialog>