🎨 优化cdk管理，新增域名管理功能

src/api/domain.js

@@ -0,0 +1,44 @@
+import service from '@/utils/request'
+
+export const list = (params) => {
+    return service({
+        url: '/domain/list',
+        method: 'get',
+        params
+    })
+}
+
+// addDomain
+export const addDomain = (data) => {
+    return service({
+        url: '/domain',
+        method: 'post',
+        data
+    })
+}
+
+// deleteDomain
+export const deleteDomain = (data) => {
+    return service({
+        url: '/domain',
+        method: 'delete',
+        data
+    })
+}
+
+// updateDomain
+export const updateDomain = (data) => {
+    return service({
+        url: '/domain',
+        method: 'put',
+        data
+    })
+}
+
+// getDomain
+export const getDomain = (id) => {
+    return service({
+        url: '/domain/' + id,
+        method: 'get',
+    })
+}

src/pathInfo.json

@@ -5,7 +5,8 @@
   "/src/view/bot/bot/botForm.vue": "BotForm",
   "/src/view/category/category/category.vue": "Category",
   "/src/view/category/category/categoryForm.vue": "CategoryForm",
-  "/src/view/cdk/index.vue": "CdkManagement",
+  "/src/view/cdk/cdkManage.vue": "CdkManage",
+  "/src/view/cdk/index.vue": "CdkLibraryManagement",
   "/src/view/dashboard/components/banner.vue": "Banner",
   "/src/view/dashboard/components/card.vue": "Card",
   "/src/view/dashboard/components/charts-content-numbers.vue": "ChartsContentNumbers",
@@ -16,6 +17,7 @@
   "/src/view/dashboard/components/table.vue": "Table",
   "/src/view/dashboard/components/wiki.vue": "Wiki",
   "/src/view/dashboard/index.vue": "Dashboard",
+  "/src/view/domain/index.vue": "Domain",
   "/src/view/error/index.vue": "Error",
   "/src/view/error/reload.vue": "Reload",
   "/src/view/example/breakpoint/breakpoint.vue": "BreakPoint",
@@ -95,6 +97,7 @@
   "/src/view/user/user/loginLog.vue": "LoginLog",
   "/src/view/user/user/teacherApply.vue": "TeacherApply",
   "/src/view/user/user/vipUser.vue": "VipUser",
+  "/src/view/user/user/with.vue": "WithdrawManagement",
   "/src/plugin/announcement/form/info.vue": "InfoForm",
   "/src/plugin/announcement/view/info.vue": "Info",
   "/src/plugin/customerservice/view/chat/index.vue": "ServiceMain",

src/view/cdk/cdkManage.vue

@@ -124,6 +124,12 @@
         </el-table-column>
         <el-table-column label="操作" width="120" fixed="right">
           <template #default="{ row }">
+            <el-button 
+              type="text" 
+              @click="openShare(row)"
+            >
+              分享
+            </el-button>
             <el-button 
               type="text" 
               @click="handleDelete(row)" 
@@ -148,6 +154,50 @@
       />
     </div>
 
+    <!-- 分享弹窗 -->
+    <el-dialog
+      v-model="shareDialogVisible"
+      title="分享兑换码"
+      width="520px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <el-form label-width="100px">
+        <el-form-item label="选择域名">
+          <el-select
+            v-model="shareForm.domain"
+            placeholder="请选择域名"
+            filterable
+            style="width: 100%"
+            @change="updateShareLink"
+          >
+            <el-option
+              v-for="item in domainOptions"
+              :key="item.ID"
+              :label="item.name ? `${item.name}（${item.domain_url}）` : item.domain_url"
+              :value="item.domain_url"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="分享链接">
+          <div class="flex" style="width: 100%">
+            <el-input v-model="shareForm.link" readonly />
+            <el-button style="margin-left: 10px" type="primary" @click="copyShareLink" :disabled="!shareForm.link">复制</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item label="二维码" v-if="shareForm.link">
+          <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">
+            <vue-qr :text="shareForm.link" :size="180" :margin="0" :autoColor="true" :dotScale="1"/>
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="closeShare">关 闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
     <!-- 生成兑换码弹窗 -->
     <el-dialog
       v-model="generateDialogVisible"
@@ -205,6 +255,8 @@
 
 <script setup>
 import { cdkList, addCdk, delCdk } from '@/api/cdk/index.js'
+import { list as domainList } from '@/api/domain'
+import vueQr from 'vue-qr/src/packages/vue-qr.vue'
 import { ref, onMounted, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
@@ -214,6 +266,9 @@ defineOptions({
   name: 'CdkManage'
 })
 
+// 注册二维码组件（局部）
+const components = { vueQr }
+
 const route = useRoute()
 const router = useRouter()
 
@@ -239,6 +294,66 @@ const searchForm = ref({
   status: '',
   useName: ''
 })
+// 分享相关
+const shareDialogVisible = ref(false)
+const shareForm = ref({
+  domain: '',
+  link: ''
+})
+const currentShareCode = ref('')
+const domainOptions = ref([])
+
+const openShare = async (row) => {
+  currentShareCode.value = row.code
+  shareForm.value = { domain: '', link: '' }
+  shareDialogVisible.value = true
+  if (!domainOptions.value.length) {
+    try {
+      const res = await domainList({ page: 1, pageSize: 1000 })
+      if (res.code === 0) {
+        domainOptions.value = res.data.list || []
+      }
+    } catch (e) {
+      // ignore
+    }
+  }
+}
+
+const stripProtocol = (url) => {
+  if (!url) return ''
+  return url.replace(/^https?:\/\//i, '').replace(/\/$/, '')
+}
+
+const updateShareLink = () => {
+  const host = stripProtocol(shareForm.value.domain)
+  if (!host || !currentShareCode.value) {
+    shareForm.value.link = ''
+    return
+  }
+  shareForm.value.link = `${host}/pages/user/cdk/index?dhm=${encodeURIComponent(currentShareCode.value)}`
+}
+
+const copyShareLink = async () => {
+  if (!shareForm.value.link) return
+  try {
+    await navigator.clipboard.writeText(shareForm.value.link)
+    ElMessage.success('链接已复制到剪贴板')
+  } catch (error) {
+    // 兼容不支持的情况
+    const ta = document.createElement('textarea')
+    ta.value = shareForm.value.link
+    document.body.appendChild(ta)
+    ta.select()
+    document.execCommand('copy')
+    document.body.removeChild(ta)
+    ElMessage.success('链接已复制到剪贴板')
+  }
+}
+
+const closeShare = () => {
+  shareDialogVisible.value = false
+}
+
 
 // 统计数据
 const stats = computed(() => {

src/view/cdk/index.vue

@@ -529,7 +529,6 @@ async function getMkOptions() {
 
 const handleAddMk = () => {
   mkForm.value = {
-    ID: '',
     codeName: '',
     type: 1,
     item: ''

src/view/domain/index.vue

@@ -0,0 +1,394 @@
+<template>
+  <div>
+    <div class="gva-search-box">
+      <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline" :rules="searchRule" @keyup.enter="onSubmit">
+        <el-form-item label="创建日期" prop="createdAt">
+          <template #label>
+            <span>
+              创建日期
+              <el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">
+                <el-icon><QuestionFilled /></el-icon>
+              </el-tooltip>
+            </span>
+          </template>
+          <el-date-picker v-model="searchInfo.startCreatedAt" type="datetime" placeholder="开始日期" :disabled-date="time=> searchInfo.endCreatedAt ? time.getTime() > searchInfo.endCreatedAt.getTime() : false"></el-date-picker>
+          —
+          <el-date-picker v-model="searchInfo.endCreatedAt" type="datetime" placeholder="结束日期" :disabled-date="time=> searchInfo.startCreatedAt ? time.getTime() < searchInfo.startCreatedAt.getTime() : false"></el-date-picker>
+        </el-form-item>
+
+        <template v-if="showAllQuery">
+          <el-form-item label="域名名称">
+            <el-input v-model="searchInfo.name" placeholder="请输入名称" clearable style="width: 200px" />
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="searchInfo.status" placeholder="全部" clearable style="width: 180px">
+              <el-option label="启用" :value="1" />
+              <el-option label="禁用" :value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="类型">
+            <el-select v-model="searchInfo.type" placeholder="全部" clearable style="width: 180px">
+              <el-option label="炮灰域名" :value="1" />
+              <el-option label="入口域名" :value="2" />
+            </el-select>
+          </el-form-item>
+        </template>
+
+        <el-form-item>
+          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
+          <el-button icon="refresh" @click="onReset">重置</el-button>
+          <el-button link type="primary" icon="arrow-down" @click="showAllQuery=true" v-if="!showAllQuery">展开</el-button>
+          <el-button link type="primary" icon="arrow-up" @click="showAllQuery=false" v-else>收起</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="gva-table-box">
+      <div class="gva-btn-list">
+        <el-button type="primary" icon="plus" @click="openDialog()">新增</el-button>
+        <el-button icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="onDelete">删除</el-button>
+      </div>
+
+      <el-table
+        ref="multipleTable"
+        style="width: 100%"
+        tooltip-effect="dark"
+        :data="tableData"
+        row-key="ID"
+        @selection-change="handleSelectionChange"
+        @sort-change="sortChange"
+      >
+        <el-table-column type="selection" width="55" />
+
+        <el-table-column align="left" label="日期" prop="CreatedAt" width="180">
+          <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
+        </el-table-column>
+
+        <el-table-column sortable align="left" label="名称" prop="name" min-width="140" />
+        <el-table-column align="left" label="域名" prop="domain_url" min-width="220">
+          <template #default="scope">
+            <el-link :href="scope.row.domain_url" target="_blank" type="primary">{{ scope.row.domain_url }}</el-link>
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="描述" prop="description" min-width="200" show-overflow-tooltip />
+        <el-table-column align="left" label="状态" prop="status" width="120">
+          <template #default="scope">{{ formatStatus(scope.row.status) }}</template>
+        </el-table-column>
+        <el-table-column align="left" label="类型" prop="type" width="120">
+          <template #default="scope">{{ formatType(scope.row.type) }}</template>
+        </el-table-column>
+
+        <el-table-column align="left" label="操作" fixed="right" :min-width="appStore.operateMinWith">
+          <template #default="scope">
+            <el-button type="primary" link class="table-button" @click="getDetails(scope.row)"><el-icon style="margin-right: 5px"><InfoFilled /></el-icon>查看</el-button>
+            <el-button type="primary" link icon="edit" class="table-button" @click="updateDomainFunc(scope.row)">编辑</el-button>
+            <el-button type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="gva-pagination">
+        <el-pagination
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page="page"
+          :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :total="total"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
+
+    <el-drawer destroy-on-close :size="appStore.drawerSize" v-model="dialogFormVisible" :show-close="false" :before-close="closeDialog">
+      <template #header>
+        <div class="flex justify-between items-center">
+          <span class="text-lg">{{ type==='create' ? '新增' : '编辑' }}</span>
+          <div>
+            <el-button :loading="btnLoading" type="primary" @click="enterDialog">确 定</el-button>
+            <el-button @click="closeDialog">取 消</el-button>
+          </div>
+        </div>
+      </template>
+
+      <el-form :model="formData" label-position="top" ref="elFormRef" :rules="rule" label-width="80px">
+        <el-form-item label="名称:" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="域名地址:" prop="domain_url">
+          <el-input v-model="formData.domain_url" placeholder="例如：https://example.com" />
+        </el-form-item>
+        <el-form-item label="描述:" prop="description">
+          <el-input v-model="formData.description" type="textarea" :rows="3" placeholder="请输入描述" />
+        </el-form-item>
+        <el-form-item label="状态:" prop="status">
+          <el-select v-model="formData.status" placeholder="请选择" style="width: 100%">
+            <el-option label="启用" :value="1" />
+            <el-option label="禁用" :value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="类型:" prop="type">
+          <el-select v-model="formData.type" placeholder="请选择" style="width: 100%">
+            <el-option label="炮灰域名" :value="1" />
+            <el-option label="入口域名" :value="2" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </el-drawer>
+
+    <el-drawer destroy-on-close :size="appStore.drawerSize" v-model="detailShow" :show-close="true" :before-close="closeDetailShow" title="查看">
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="名称">{{ detailFrom.name }}</el-descriptions-item>
+        <el-descriptions-item label="域名">
+          <el-link :href="detailFrom.domain_url" target="_blank" type="primary">{{ detailFrom.domain_url }}</el-link>
+        </el-descriptions-item>
+        <el-descriptions-item label="描述">{{ detailFrom.description }}</el-descriptions-item>
+        <el-descriptions-item label="状态">{{ formatStatus(detailFrom.status) }}</el-descriptions-item>
+        <el-descriptions-item label="类型">{{ formatType(detailFrom.type) }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ formatDate(detailFrom.CreatedAt) }}</el-descriptions-item>
+        <el-descriptions-item label="更新时间">{{ formatDate(detailFrom.UpdatedAt) }}</el-descriptions-item>
+      </el-descriptions>
+    </el-drawer>
+  </div>
+  
+</template>
+
+<script setup>
+import { list, addDomain, deleteDomain, updateDomain, getDomain } from '@/api/domain'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { ref, reactive } from 'vue'
+import { useAppStore } from "@/pinia"
+import { formatDate } from '@/utils/format'
+
+defineOptions({ name: 'Domain' })
+
+const appStore = useAppStore()
+const btnLoading = ref(false)
+const showAllQuery = ref(false)
+
+const formData = ref({
+  name: '',
+  domain_url: '',
+  description: '',
+  status: undefined,
+  type: undefined,
+})
+
+const rule = reactive({
+  name: [
+    { required: true, message: '请输入名称', trigger: ['input','blur'] },
+    { whitespace: true, message: '不能只输入空格', trigger: ['input','blur'] },
+  ],
+  domain_url: [
+    { required: true, message: '请输入域名地址', trigger: ['input','blur'] },
+  ],
+  status: [
+    { required: true, message: '请选择状态', trigger: ['change','blur'] },
+  ],
+  type: [
+    { required: true, message: '请选择类型', trigger: ['change','blur'] },
+  ],
+})
+
+const searchRule = reactive({
+  createdAt: [
+    { validator: (rule, value, callback) => {
+      if (searchInfo.value.startCreatedAt && !searchInfo.value.endCreatedAt) {
+        callback(new Error('请填写结束日期'))
+      } else if (!searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt) {
+        callback(new Error('请填写开始日期'))
+      } else if (searchInfo.value.startCreatedAt && searchInfo.value.endCreatedAt && (searchInfo.value.startCreatedAt.getTime() === searchInfo.value.endCreatedAt.getTime() || searchInfo.value.startCreatedAt.getTime() > searchInfo.value.endCreatedAt.getTime())) {
+        callback(new Error('开始日期应当早于结束日期'))
+      } else {
+        callback()
+      }
+    }, trigger: 'change' }
+  ],
+})
+
+const elFormRef = ref()
+const elSearchFormRef = ref()
+
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(10)
+const tableData = ref([])
+const searchInfo = ref({})
+
+const sortChange = ({ prop, order }) => {
+  const sortMap = { name: 'name', CreatedAt: 'created_at' }
+  let sort = sortMap[prop]
+  if(!sort){
+    sort = prop && prop.replace(/[A-Z]/g, match => `_${match.toLowerCase()}`)
+  }
+  searchInfo.value.sort = sort
+  searchInfo.value.order = order
+  getTableData()
+}
+
+const onReset = () => {
+  searchInfo.value = {}
+  getTableData()
+}
+
+const onSubmit = () => {
+  elSearchFormRef.value?.validate(async(valid) => {
+    if (!valid) return
+    page.value = 1
+    getTableData()
+  })
+}
+
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  getTableData()
+}
+
+const handleCurrentChange = (val) => {
+  page.value = val
+  getTableData()
+}
+
+const getTableData = async() => {
+  const table = await list({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
+  if (table.code === 0) {
+    tableData.value = table.data.list
+    total.value = table.data.total
+    page.value = table.data.page
+    pageSize.value = table.data.pageSize
+  }
+}
+
+getTableData()
+
+const multipleSelection = ref([])
+const handleSelectionChange = (val) => {
+  multipleSelection.value = val
+}
+
+const deleteRow = (row) => {
+  ElMessageBox.confirm('确定要删除吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    deleteDomainFunc(row)
+  })
+}
+
+const onDelete = async() => {
+  ElMessageBox.confirm('确定要删除吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async() => {
+    if (multipleSelection.value.length === 0) {
+      ElMessage({ type: 'warning', message: '请选择要删除的数据' })
+      return
+    }
+    const results = await Promise.all(
+      multipleSelection.value.map(item => deleteDomain({ ID: item.ID }))
+    )
+    const ok = results.every(r => r && r.code === 0)
+    if (ok) {
+      ElMessage({ type: 'success', message: '删除成功' })
+      if (tableData.value.length === multipleSelection.value.length && page.value > 1) {
+        page.value--
+      }
+      getTableData()
+    }
+  })
+}
+
+const type = ref('')
+
+const updateDomainFunc = async(row) => {
+  const res = await getDomain(row.ID)
+  type.value = 'update'
+  if (res.code === 0) {
+    formData.value = { ...res.data }
+    dialogFormVisible.value = true
+  }
+}
+
+const deleteDomainFunc = async (row) => {
+  const res = await deleteDomain({ ID: row.ID })
+  if (res.code === 0) {
+    ElMessage({ type: 'success', message: '删除成功' })
+    if (tableData.value.length === 1 && page.value > 1) {
+      page.value--
+    }
+    getTableData()
+  }
+}
+
+const dialogFormVisible = ref(false)
+
+const openDialog = () => {
+  type.value = 'create'
+  dialogFormVisible.value = true
+}
+
+const closeDialog = () => {
+  dialogFormVisible.value = false
+  formData.value = {
+    name: '',
+    domain_url: '',
+    description: '',
+    status: undefined,
+    type: undefined,
+  }
+}
+
+const enterDialog = async () => {
+  btnLoading.value = true
+  elFormRef.value?.validate( async (valid) => {
+    if (!valid) return btnLoading.value = false
+    let res
+    switch (type.value) {
+      case 'create':
+        res = await addDomain(formData.value)
+        break
+      case 'update':
+        res = await updateDomain(formData.value)
+        break
+      default:
+        res = await addDomain(formData.value)
+        break
+    }
+    btnLoading.value = false
+    if (res.code === 0) {
+      ElMessage({ type: 'success', message: '创建/更改成功' })
+      closeDialog()
+      getTableData()
+    }
+  })
+}
+
+const detailFrom = ref({})
+const detailShow = ref(false)
+const openDetailShow = () => { detailShow.value = true }
+
+const getDetails = async (row) => {
+  const res = await getDomain(row.ID)
+  if (res.code === 0) {
+    detailFrom.value = res.data
+    openDetailShow()
+  }
+}
+
+const closeDetailShow = () => {
+  detailShow.value = false
+  detailFrom.value = {}
+}
+
+const formatStatus = (s) => s === 1 ? '启用' : s === 2 ? '禁用' : '-'
+const formatType = (t) => t === 1 ? '炮灰域名' : t === 2 ? '入口域名' : '-'
+
+</script>
+
+<style>
+
+</style>
+
+