feat:1.密钥管理

.env.development

@@ -7,24 +7,4 @@ VITE_BASE_PATH = http://10.10.10.30
 VITE_POSITION = close
 VITE_EDITOR = vscode
 # UDE 后端地址，本地开发连 10.10.10.66
-VITE_UDE_SERVER = http://localhost:9993
-# 数据库透明加密后端 udeServer（接入管理/密钥管理，go-zero，端口 9993）
-VITE_UDE_DB_SERVER = http://localhost:9993
-// 业务端服务
-//VITE_SERVICE_PATH = http://127.0.0.1
-//VITE_SERVICE_PORT = 9200
-// 业务端WS
-//VITE_WEBSOCKET_PATH = ws://127.0.0.1:9200
-//VITE_QRCODE_BASE_PATH = http://127.0.0.1:9200 # 生成二维码接口调用的地址
-// 业务端邀请注册链接
-//VITE_INVITE_BASE_PATH = "http://10.10.10.82:8080/#/user/register?code="
-// 学员端登录链接(需要启动学员端项目)
-//VITE_STUDENT_LOGIN_PATH = "http://10.10.10.30:8070/#/login"
-// 视频切片统一后缀
-//VITE_VIDEO_SUFFIX = "-style.m3u8"
-// 客户端标记
-VITE_USER_AGENT = "cms"
-
-// VITE_EDITOR = webstorm 如果使用webstorm开发且要使用dom定位到代码行功能 请先自定添加 webstorm到环境变量 再将VITE_EDITOR值修改为webstorm
-// 如果使用docker-compose开发模式，设置为下面的地址或本机主机IP
-//VITE_BASE_PATH = http://177.7.0.12
+VITE_UDE_SERVER = http://10.10.10.88:9993

.env.production

@@ -1,27 +1,11 @@
 ENV = 'production'
 
-VITE_CLI_PORT = 8700
+VITE_CLI_PORT = 9992
 VITE_SERVER_PORT = 8888
 VITE_BASE_API = /api
 VITE_FILE_API = /api
-#下方修改为你的线上ip
 VITE_BASE_PATH = http://10.10.10.30
-
-VITE_QRCODE_BASE_PATH = http://10.10.10.30:9200 # 生成二维码接口调用的地址
-
-VITE_FILE_PATH = http://10.10.10.25:9020/test/
-// 业务端服务
-VITE_SERVICE_PATH = http://10.10.10.30
-VITE_SERVICE_PORT = 9200
-// 业务端WS
-VITE_WEBSOCKET_PATH = ws://10.10.10.30:9200
-// 业务端邀请注册链接
-VITE_INVITE_BASE_PATH = "http://10.10.10.30:8700/#/user/register?code="
-// 学员端登录链接(需要启动学员端项目)
-VITE_STUDENT_LOGIN_PATH = "http://10.10.10.30:8070/#/login"
-// 视频切片统一后缀
-VITE_VIDEO_SUFFIX = "-style.m3u8"
-// 客户端标记
-VITE_USER_AGENT = "cms"
-// UDE 后端地址（构建时兜底；部署以 config.js 中 UDE_SERVER 为准）
-VITE_UDE_SERVER = http://10.10.10.30:9990
+VITE_POSITION = close
+VITE_EDITOR = vscode
+# UDE 后端地址，本地开发连 10.10.10.66
+VITE_UDE_SERVER = http://10.10.10.88:9993

src/api/sys/key.js

@@ -0,0 +1,8 @@
+import service from '@/utils/request'
+
+export const keyList = () => {
+  return service({
+    url: '/v1/keys/list',
+    method: 'post'
+  })
+}

src/view/ude/key/key.vue

@@ -1,18 +1,154 @@
 <template>
   <div>
-    <el-card shadow="never">
-      <template #header>
-        <div class="card-header">
-          <span>密钥管理</span>
-        </div>
-      </template>
-      <el-empty description="密钥管理页面（待实现）" />
-    </el-card>
+    <div class="gva-search-box">
+      <el-form :inline="true" :model="searchInfo">
+        <el-form-item label="密钥标识">
+          <el-input v-model="searchInfo.iden" placeholder="密钥标识" />
+        </el-form-item>
+        <el-form-item label="密钥别名">
+          <el-input v-model="searchInfo.name" placeholder="密钥别名" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="searchInfo.status" clearable placeholder="请选择">
+            <el-option label="启用" value="1" />
+            <el-option label="禁用" value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button v-preReClick icon="search" type="primary" @click="onSubmit"
+            >查询
+          </el-button>
+          <el-button v-preReClick icon="refresh" @click="onReset"
+            >重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="gva-table-box">
+      <el-table :data="tableData" style="width: 100%" tooltip-effect="dark">
+        <el-table-column
+          align="left"
+          label="密钥标识"
+          prop="iden"
+          min-width="140"
+        />
+        <el-table-column
+          align="left"
+          label="密钥别名"
+          prop="name"
+          min-width="140"
+        />
+        <el-table-column
+          align="left"
+          label="状态"
+          prop="status"
+          min-width="100"
+        >
+          <template #default="scope">
+            <el-tag
+              :type="String(scope.row.status) === '1' ? 'success' : 'info'"
+              disable-transitions
+            >
+              {{ statusFilter(scope.row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="left"
+          label="创建时间"
+          prop="createAt"
+          min-width="180"
+        >
+          <template #default="scope">
+            <span>{{ formatDate(scope.row.createAt) }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="page"
+          :page-size="pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { keyList } from '@/api/sys/key'
+import { ref } from 'vue'
+import { formatDate } from '@/utils/format'
+
 defineOptions({
   name: 'MaskKey'
 })
-</script>
+
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(10)
+const tableData = ref([])
+const searchInfo = ref({
+  iden: '',
+  name: '',
+  status: ''
+})
+
+// 状态展示（1 启用 / 2 禁用）
+const statusFilter = status => {
+  if (String(status) === '1') return '启用'
+  if (String(status) === '2') return '禁用'
+  return status ?? ''
+}
+
+const onReset = () => {
+  searchInfo.value = {
+    iden: '',
+    name: '',
+    status: ''
+  }
+}
+
+// 搜索
+const onSubmit = () => {
+  page.value = 1
+  pageSize.value = 10
+  getTableData()
+}
+
+// 分页
+const handleSizeChange = val => {
+  pageSize.value = val
+  getTableData()
+}
+
+const handleCurrentChange = val => {
+  page.value = val
+  getTableData()
+}
+
+// 查询
+const getTableData = async () => {
+  const table = await keyList({
+    page: page.value,
+    pageSize: pageSize.value,
+    ...searchInfo.value
+  })
+  if (table.code === 100000) {
+    tableData.value = table.data.list || []
+    total.value = Number(table.data.total) || tableData.value.length
+    if (table.data.page) {
+      page.value = table.data.page
+    }
+    if (table.data.pageSize) {
+      pageSize.value = table.data.pageSize
+    }
+  }
+}
+
+getTableData()
+</script>

vite.config.js

@@ -57,8 +57,8 @@ export default ({ command, mode }) => {
       proxy: {
         // 把key的路径代理到target位置
         // detail: https://cli.vuejs.org/config/#devserver-proxy
-        [process.env.VITE_BASE_API + '/cms']: {
-          target: `${process.env.VITE_SERVICE_PATH}:${process.env.VITE_SERVICE_PORT}/`,
+        [process.env.VITE_BASE_API + '/v1']: {
+          target: `${process.env.VITE_UDE_SERVER}`,
           changeOrigin: false,
           rewrite: path => path.replace(new RegExp('^'), '')
         },