From 732b3f51aa4bd0e5201edf3f099a7c334a751f17 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Fri, 8 May 2026 12:58:56 +0200
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20Phase=205c-v=20=E2=80=94=20cu?=
 =?UTF-8?q?stom-geo=20section=20in=20VersionModal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds the third collapse panel ("Custom geo") that lets users register
external geosite/geoip files referenced by routing rules via
ext:<filename>:tag. Backend endpoints are unchanged.

- CustomGeoSection.vue: bordered table over /panel/api/custom-geo/list
  with per-row edit, download (refetch), and delete actions, plus an
  Add button and Update-all. Lazy-loads the list when the parent
  collapse opens this panel — closed panels don't fetch.
- CustomGeoFormModal.vue: shared add/edit form with the same alias
  regex (^[a-z0-9_-]+$) and URL validation as legacy. Type and alias
  are immutable when editing — backend rejects changes anyway.
- ext:<filename>:tag value is click-to-copy via ClipboardManager.
- Relative time is computed inline (no moment dep); tooltip shows the
  absolute timestamp.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/pages/index/CustomGeoFormModal.vue    | 112 +++++++
 frontend/src/pages/index/CustomGeoSection.vue | 309 ++++++++++++++++++
 frontend/src/pages/index/VersionModal.vue     |   5 +
 3 files changed, 426 insertions(+)
 create mode 100644 frontend/src/pages/index/CustomGeoFormModal.vue
 create mode 100644 frontend/src/pages/index/CustomGeoSection.vue

diff --git a/frontend/src/pages/index/CustomGeoFormModal.vue b/frontend/src/pages/index/CustomGeoFormModal.vue
new file mode 100644
index 00000000..ee85c7fa
--- /dev/null
+++ b/frontend/src/pages/index/CustomGeoFormModal.vue
@@ -0,0 +1,112 @@
+<script setup>
+import { reactive, ref, watch } from 'vue';
+import { message } from 'ant-design-vue';
+import { HttpUtil } from '@/utils';
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  // Populate with the record when editing; null/undefined when adding.
+  record: { type: Object, default: null },
+});
+
+const emit = defineEmits(['update:open', 'saved']);
+
+const form = reactive({ type: 'geosite', alias: '', url: '' });
+const saving = ref(false);
+
+const editing = ref(false);
+const editId = ref(null);
+
+watch(() => props.open, (next) => {
+  if (!next) return;
+  if (props.record) {
+    editing.value = true;
+    editId.value = props.record.id;
+    form.type = props.record.type;
+    form.alias = props.record.alias;
+    form.url = props.record.url;
+  } else {
+    editing.value = false;
+    editId.value = null;
+    form.type = 'geosite';
+    form.alias = '';
+    form.url = '';
+  }
+});
+
+function close() {
+  emit('update:open', false);
+}
+
+function validate() {
+  // Backend expects a filesystem-safe alias; legacy enforces the same regex.
+  if (!/^[a-z0-9_-]+$/.test(form.alias || '')) {
+    message.error('Alias must contain only lowercase letters, digits, dashes or underscores.');
+    return false;
+  }
+  const u = (form.url || '').trim();
+  if (!/^https?:\/\//i.test(u)) {
+    message.error('URL must start with http:// or https://');
+    return false;
+  }
+  try {
+    const parsed = new URL(u);
+    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+      message.error('URL must start with http:// or https://');
+      return false;
+    }
+  } catch (_e) {
+    message.error('URL must start with http:// or https://');
+    return false;
+  }
+  return true;
+}
+
+async function submit() {
+  if (!validate()) return;
+  saving.value = true;
+  try {
+    const url = editing.value
+      ? `/panel/api/custom-geo/update/${editId.value}`
+      : '/panel/api/custom-geo/add';
+    const msg = await HttpUtil.post(url, form);
+    if (msg?.success) {
+      emit('saved');
+      close();
+    }
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <a-modal
+    :open="open"
+    :title="editing ? 'Edit custom geo entry' : 'Add custom geo entry'"
+    :confirm-loading="saving"
+    ok-text="Save"
+    cancel-text="Close"
+    @ok="submit"
+    @cancel="close"
+  >
+    <a-form layout="vertical">
+      <a-form-item label="Type">
+        <a-select v-model:value="form.type" :disabled="editing">
+          <a-select-option value="geosite">geosite</a-select-option>
+          <a-select-option value="geoip">geoip</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item label="Alias">
+        <a-input
+          v-model:value="form.alias"
+          :disabled="editing"
+          placeholder="lowercase letters, digits, dashes, underscores"
+        />
+      </a-form-item>
+      <a-form-item label="URL">
+        <a-input v-model:value="form.url" placeholder="https://" />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
diff --git a/frontend/src/pages/index/CustomGeoSection.vue b/frontend/src/pages/index/CustomGeoSection.vue
new file mode 100644
index 00000000..c5351071
--- /dev/null
+++ b/frontend/src/pages/index/CustomGeoSection.vue
@@ -0,0 +1,309 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { Modal, message } from 'ant-design-vue';
+import {
+  PlusOutlined,
+  ReloadOutlined,
+  EditOutlined,
+  DeleteOutlined,
+  InboxOutlined,
+} from '@ant-design/icons-vue';
+
+import { HttpUtil, ClipboardManager } from '@/utils';
+import CustomGeoFormModal from './CustomGeoFormModal.vue';
+
+const props = defineProps({
+  // Re-fetch the list when the parent collapse expands this section.
+  active: { type: Boolean, default: false },
+});
+
+const list = ref([]);
+const loading = ref(false);
+const updatingAll = ref(false);
+const actionId = ref(null);
+
+const formOpen = ref(false);
+const editingRecord = ref(null);
+
+const columns = [
+  { title: 'Alias', key: 'alias', width: 200 },
+  { title: 'URL', key: 'url', ellipsis: true },
+  { title: 'Ext', key: 'extDat', width: 220 },
+  { title: 'Last updated', key: 'lastUpdatedAt', width: 140 },
+  { title: 'Actions', key: 'action', width: 120 },
+];
+
+async function loadList() {
+  loading.value = true;
+  try {
+    const msg = await HttpUtil.get('/panel/api/custom-geo/list');
+    if (msg?.success && Array.isArray(msg.obj)) list.value = msg.obj;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openAdd() {
+  editingRecord.value = null;
+  formOpen.value = true;
+}
+
+function openEdit(record) {
+  editingRecord.value = record;
+  formOpen.value = true;
+}
+
+function extDisplay(record) {
+  const fn = record.type === 'geoip'
+    ? `geoip_${record.alias}.dat`
+    : `geosite_${record.alias}.dat`;
+  return `ext:${fn}:tag`;
+}
+
+async function copyExt(record) {
+  const text = extDisplay(record);
+  const ok = await ClipboardManager.copyText(text);
+  if (ok) message.success(`Copied: ${text}`);
+}
+
+function formatTime(ts) {
+  if (!ts) return '';
+  const d = new Date(ts * 1000);
+  if (isNaN(d.getTime())) return String(ts);
+  const pad = (n) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+// Tiny inline relative-time formatter so we don't pull in moment.
+function relativeTime(ts) {
+  if (!ts) return '';
+  const diff = Math.floor(Date.now() / 1000) - ts;
+  if (diff < 60) return 'just now';
+  if (diff < 3600) return `${Math.floor(diff / 60)} min ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)} h ago`;
+  if (diff < 2592000) return `${Math.floor(diff / 86400)} d ago`;
+  return formatTime(ts);
+}
+
+function confirmDelete(record) {
+  Modal.confirm({
+    title: 'Delete custom geo entry',
+    content: `Delete "${record.alias}"? This cannot be undone.`,
+    okText: 'Delete',
+    okType: 'danger',
+    cancelText: 'Cancel',
+    onOk: async () => {
+      const msg = await HttpUtil.post(`/panel/api/custom-geo/delete/${record.id}`);
+      if (msg?.success) await loadList();
+    },
+  });
+}
+
+async function downloadOne(id) {
+  actionId.value = id;
+  try {
+    const msg = await HttpUtil.post(`/panel/api/custom-geo/download/${id}`);
+    if (msg?.success) await loadList();
+  } finally {
+    actionId.value = null;
+  }
+}
+
+async function updateAll() {
+  updatingAll.value = true;
+  try {
+    const msg = await HttpUtil.post('/panel/api/custom-geo/update-all');
+    const ok = msg?.obj?.succeeded?.length || 0;
+    const failed = msg?.obj?.failed?.length || 0;
+    if (msg?.success || ok > 0) {
+      await loadList();
+      if (failed > 0) message.warning(`Updated ${ok}, failed ${failed}`);
+    }
+  } finally {
+    updatingAll.value = false;
+  }
+}
+
+// Lazy-load: only fetch when the parent collapse opens this panel.
+watch(() => props.active, (next) => { if (next) loadList(); }, { immediate: true });
+</script>
+
+<template>
+  <div class="custom-geo-section">
+    <a-alert
+      type="info"
+      show-icon
+      class="mb-10"
+      message="Reference custom files in routing rules with ext:&lt;filename&gt;:tag"
+    />
+
+    <div class="toolbar">
+      <a-button type="primary" :loading="loading" @click="openAdd">
+        <template #icon><PlusOutlined /></template>
+        Add
+      </a-button>
+      <a-button :loading="updatingAll" :disabled="!list.length" @click="updateAll">
+        <template #icon><ReloadOutlined /></template>
+        Update all
+      </a-button>
+      <span v-if="list.length" class="custom-geo-count">{{ list.length }}</span>
+    </div>
+
+    <a-table
+      :columns="columns"
+      :data-source="list"
+      :pagination="false"
+      :row-key="(r) => r.id"
+      :loading="loading"
+      size="small"
+      :scroll="{ x: 760 }"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'alias'">
+          <div class="custom-geo-alias-cell">
+            <a-tag :color="record.type === 'geoip' ? 'cyan' : 'purple'" class="custom-geo-type-tag">
+              {{ record.type }}
+            </a-tag>
+            <span class="custom-geo-alias">{{ record.alias }}</span>
+          </div>
+        </template>
+
+        <template v-else-if="column.key === 'url'">
+          <a-tooltip placement="topLeft" :title="record.url">
+            <a :href="record.url" target="_blank" rel="noopener noreferrer" class="custom-geo-url">
+              {{ record.url }}
+            </a>
+          </a-tooltip>
+        </template>
+
+        <template v-else-if="column.key === 'extDat'">
+          <a-tooltip title="Copy">
+            <code class="custom-geo-ext-code custom-geo-copyable" @click="copyExt(record)">
+              {{ extDisplay(record) }}
+            </code>
+          </a-tooltip>
+        </template>
+
+        <template v-else-if="column.key === 'lastUpdatedAt'">
+          <a-tooltip v-if="record.lastUpdatedAt" :title="formatTime(record.lastUpdatedAt)">
+            <span>{{ relativeTime(record.lastUpdatedAt) }}</span>
+          </a-tooltip>
+          <span v-else class="custom-geo-muted">—</span>
+        </template>
+
+        <template v-else-if="column.key === 'action'">
+          <a-space size="small">
+            <a-tooltip title="Edit">
+              <a-button type="link" size="small" @click="openEdit(record)">
+                <template #icon><EditOutlined /></template>
+              </a-button>
+            </a-tooltip>
+            <a-tooltip title="Download">
+              <a-button
+                type="link"
+                size="small"
+                :loading="actionId === record.id"
+                @click="downloadOne(record.id)"
+              >
+                <template #icon><ReloadOutlined /></template>
+              </a-button>
+            </a-tooltip>
+            <a-tooltip title="Delete">
+              <a-button type="link" size="small" danger @click="confirmDelete(record)">
+                <template #icon><DeleteOutlined /></template>
+              </a-button>
+            </a-tooltip>
+          </a-space>
+        </template>
+      </template>
+
+      <template #emptyText>
+        <div class="custom-geo-empty">
+          <InboxOutlined class="custom-geo-empty-icon" />
+          <div>No custom geo entries yet</div>
+        </div>
+      </template>
+    </a-table>
+
+    <CustomGeoFormModal
+      v-model:open="formOpen"
+      :record="editingRecord"
+      @saved="loadList"
+    />
+  </div>
+</template>
+
+<style scoped>
+.mb-10 { margin-bottom: 10px; }
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.custom-geo-count {
+  margin-left: 4px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.05);
+  font-size: 12px;
+  opacity: 0.75;
+}
+:global(body.dark) .custom-geo-count {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.custom-geo-alias-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.custom-geo-alias {
+  font-weight: 500;
+  word-break: break-all;
+}
+.custom-geo-type-tag {
+  margin: 0;
+}
+
+.custom-geo-url {
+  word-break: break-all;
+}
+
+.custom-geo-ext-code {
+  cursor: pointer;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.05);
+  user-select: all;
+}
+.custom-geo-copyable:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+:global(body.dark) .custom-geo-ext-code {
+  background: rgba(255, 255, 255, 0.08);
+}
+:global(body.dark) .custom-geo-copyable:hover {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+.custom-geo-muted {
+  opacity: 0.5;
+}
+
+.custom-geo-empty {
+  text-align: center;
+  padding: 18px 0;
+  opacity: 0.6;
+}
+.custom-geo-empty-icon {
+  font-size: 32px;
+  margin-bottom: 6px;
+  display: block;
+}
+</style>
diff --git a/frontend/src/pages/index/VersionModal.vue b/frontend/src/pages/index/VersionModal.vue
index 30d044ae..c9c6fbac 100644
--- a/frontend/src/pages/index/VersionModal.vue
+++ b/frontend/src/pages/index/VersionModal.vue
@@ -3,6 +3,7 @@ import { ref, watch } from 'vue';
 import { Modal } from 'ant-design-vue';
 import { ReloadOutlined } from '@ant-design/icons-vue';
 import { HttpUtil } from '@/utils';
+import CustomGeoSection from './CustomGeoSection.vue';
 
 const props = defineProps({
   open: { type: Boolean, default: false },
@@ -113,6 +114,10 @@ watch(() => props.open, (next) => { if (next) fetchVersions(); });
             <a-button @click="updateGeofile('')">Update all</a-button>
           </div>
         </a-collapse-panel>
+
+        <a-collapse-panel key="3" header="Custom geo">
+          <CustomGeoSection :active="activeKey === '3'" />
+        </a-collapse-panel>
       </a-collapse>
     </a-spin>
   </a-modal>