From 54ca339d896d92a6c0daf120c516a231ecb8f13d Mon Sep 17 00:00:00 2001
From: ZvonimirSun <hi@iszy.xyz>
Date: Thu, 16 Nov 2023 15:20:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(urls):=20=E6=B7=BB=E5=8A=A0=E7=9F=AD?=
 =?UTF-8?q?=E7=BD=91=E5=9D=80=E5=B7=A5=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.test                 |   1 +
 package.json              |   1 +
 src/components.d.ts       |   4 +
 src/main.ts               |   2 +-
 src/views/others/urls.vue | 249 ++++++++++++++++++++++++++++++++++++++
 src/views/tools.json      |   5 +
 6 files changed, 261 insertions(+), 1 deletion(-)
 create mode 100644 .env.test
 create mode 100644 src/views/others/urls.vue

diff --git a/.env.test b/.env.test
new file mode 100644
index 000000000..455836569
--- /dev/null
+++ b/.env.test
@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://localhost:3001
diff --git a/package.json b/package.json
index 712fd5796..b592460f5 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "vite",
+    "dev:api": "vite --mode test",
     "build": "vue-tsc --noEmit && vite build",
     "serve": "vite preview",
     "lint": "eslint --fix src/**/*.{js,ts,vue}"
diff --git a/src/components.d.ts b/src/components.d.ts
index e0d3383c3..85e6ce571 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -47,6 +47,7 @@ declare module 'vue' {
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElLink: typeof import('element-plus/es')['ElLink']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
@@ -79,4 +80,7 @@ declare module 'vue' {
     VanillaJsonEditor: typeof import('./components/VanillaJsonEditor.vue')['default']
     VueCodemirror: typeof import('./components/vue-codemirror.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }
diff --git a/src/main.ts b/src/main.ts
index de8e11fb2..725cd1376 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,7 +4,7 @@ import axios from '@/plugins/Axios'
 import { createPiniaPersist } from '@/plugins/PiniaPersist'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 
-const $apiBase = 'https://api.iszy.xyz';
+const $apiBase = import.meta.env.PROD ? 'https://api.iszy.xyz' : import.meta.env.VITE_API_BASE_URL || 'https://api.iszy.xyz';
 
 (async () => {
   const pinia = createPinia()
diff --git a/src/views/others/urls.vue b/src/views/others/urls.vue
new file mode 100644
index 000000000..27811319a
--- /dev/null
+++ b/src/views/others/urls.vue
@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { Ref } from 'vue'
+import $axios from '@/plugins/Axios'
+import dayjs from 'dayjs'
+
+type Url = {
+  keyword: string
+  title: string
+  url: string
+  createdAt: string
+  updatedAt: string
+}
+
+const urlBase = 'https://url1.iszy.xyz'
+const urlList: Ref<Url[]> = ref([]) as Ref<Url[]>
+const pageSize: Ref<number> = ref(10)
+const pageIndex: Ref<number> = ref(1)
+const count: Ref<number> = ref(0)
+const loading: Ref<boolean> = ref(false)
+
+const newUrl = reactive({
+  keyword: '',
+  url: ''
+})
+
+onMounted(() => {
+  getUrlList(pageIndex.value - 1, pageSize.value)
+})
+
+watchEffect(() => {
+  getUrlList(pageIndex.value - 1, pageSize.value)
+})
+
+watch(pageSize, () => {
+  pageIndex.value = 1
+})
+
+async function getUrlList (pageIndex: number, pageSize: number) {
+  const tmp = setTimeout(() => {
+    loading.value = true
+  }, 300)
+  try {
+    const res = (await $axios.get(`${$axios.$apiBase}/urls/admin/urls`, {
+      params: {
+        pageIndex,
+        pageSize
+      }
+    })).data
+    if (res.success) {
+      count.value = res.data.count
+      urlList.value = res.data.rows.map((item: Url) => {
+        item.createdAt = dayjs(item.createdAt).format('YYYY年MM月DD日 HH:mm')
+        item.updatedAt = dayjs(item.updatedAt).format('YYYY年MM月DD日 HH:mm')
+        return item
+      })
+    } else {
+      ElMessage.error(res.message)
+    }
+  } catch (e) {
+    ElMessage.error((e as Error).message)
+  }
+  clearTimeout(tmp)
+  loading.value = false
+}
+
+async function createUrl () {
+  if (!newUrl.url) {
+    return
+  }
+  try {
+    const res = (await $axios.post(`${$axios.$apiBase}/urls/admin/url`, {
+      url: newUrl.url,
+      keyword: newUrl.keyword
+    })).data
+    if (res.success) {
+      ElMessage.success('创建成功')
+      newUrl.url = ''
+      newUrl.keyword = ''
+      await getUrlList(pageIndex.value - 1, pageSize.value)
+    } else {
+      ElMessage.error(res.message)
+    }
+  } catch (e) {
+    ElMessage.error((e as Error).message)
+  }
+}
+
+async function deleteUrl (url: Url) {
+  try {
+    const res = (await $axios.delete(`${$axios.$apiBase}/urls/admin/url/${url.keyword}`, {
+      params: {
+        keyword: url.keyword
+      }
+    })).data
+    if (res.success) {
+      ElMessage.success('删除成功')
+      await getUrlList(pageIndex.value - 1, pageSize.value)
+    } else {
+      ElMessage.error(res.message)
+    }
+  } catch (e) {
+    ElMessage.error((e as Error).message)
+  }
+}
+
+function editUrl (url: Url) {
+  debugger
+}
+</script>
+
+<template>
+  <div
+    flex
+    flex-col
+    gap-4
+    h-full
+  >
+    <div class="new-url-form">
+      <span>
+        输入链接:
+      </span>
+      <el-input
+        v-model="newUrl.url"
+        placeholder="https"
+        clearable
+        flex-1
+      />
+      <span>
+        自定义短网址(选):
+      </span>
+      <el-input
+        v-model="newUrl.keyword"
+        clearable
+      />
+      <el-button
+        type="primary"
+        @click="createUrl"
+      >
+        缩短
+      </el-button>
+    </div>
+    <el-table
+      v-loading="loading"
+      :data="urlList"
+      :border="true"
+      :stripe="true"
+      size="small"
+      flex-1
+    >
+      <el-table-column
+        prop="keyword"
+        label="短网址"
+        width="180"
+        fixed="left"
+      >
+        <template #default="{row}">
+          <el-link
+            :href="urlBase + '/' + row.keyword"
+            target="_blank"
+            style="white-space: nowrap;"
+          >
+            {{ row.keyword }}
+          </el-link>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="url"
+        label="原网址"
+        min-width="300"
+      >
+        <template #default="{row}">
+          <el-link
+            :href="row.url"
+            target="_blank"
+          >
+            {{ row.url }}
+          </el-link>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="createdAt"
+        label="日期"
+        width="180"
+      />
+      <el-table-column
+        prop="ip"
+        label="IP"
+        width="130"
+      />
+      <el-table-column
+        prop="clicks"
+        label="点击次数"
+        width="80"
+      />
+      <el-table-column
+        label="操作"
+        width="140"
+        fixed="right"
+      >
+        <template #default="{row}">
+          <el-button
+            size="small"
+            @click="editUrl(row)"
+          >
+            编辑
+          </el-button>
+          <el-popconfirm
+            width="160"
+            title="删除后无法恢复！"
+            confirm-button-type="danger"
+            confirm-button-text="删除"
+            @confirm="deleteUrl(row)"
+          >
+            <template #reference>
+              <el-button
+                size="small"
+                type="danger"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      v-model:current-page="pageIndex"
+      v-model:page-size="pageSize"
+      small
+      background
+      layout="prev, pager, next"
+      :total="count"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.new-url-form {
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+  align-items: center;
+
+  & > span {
+    white-space: nowrap;
+    font-size: var(--el-form-label-font-size)
+  }
+}
+</style>
diff --git a/src/views/tools.json b/src/views/tools.json
index bff934216..19884c050 100644
--- a/src/views/tools.json
+++ b/src/views/tools.json
@@ -3,6 +3,11 @@
     "type": "通用工具",
     "icon": "i-icon-park-outline-toolkit",
     "children": [
+      {
+        "name": "短网址",
+        "link": "/urls",
+        "requiresAuth": true
+      },
       {
         "name": "屏幕录制",
         "link": "/screenRecord"