mirror of
https://gitee.com/mirrors/AllinSSL.git
synced 2026-03-13 01:50:53 +08:00
【同步】前端项目源码
【修复】工作流兼容问题
This commit is contained in:
chudong
@@ -0,0 +1,12 @@
|
||||
import { useUploadCertController } from '@certManage/useController'
|
||||
|
||||
/**
|
||||
* 上传证书组件
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'UploadCert',
|
||||
setup() {
|
||||
const { UploadCertForm } = useUploadCertController()
|
||||
return () => <UploadCertForm labelPlacement="top" />
|
||||
},
|
||||
})
|
||||
76
frontend/apps/allin-ssl/src/views/certManage/index.tsx
Normal file
76
frontend/apps/allin-ssl/src/views/certManage/index.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { NInput, NButton } from 'naive-ui'
|
||||
import { useThemeCssVar } from '@baota/naive-ui/theme'
|
||||
import { PlusOutlined } from '@vicons/antd'
|
||||
import { Search } from '@vicons/carbon'
|
||||
import { $t } from '@locales/index'
|
||||
import { useController } from './useController'
|
||||
|
||||
import BaseComponent from '@components/baseComponent'
|
||||
|
||||
/**
|
||||
* 证书管理组件
|
||||
*/
|
||||
export default defineComponent({
|
||||
name: 'CertManage',
|
||||
setup() {
|
||||
const { CertTable, CertTablePage, fetch, data, param, openUploadModal } = useController()
|
||||
const cssVar = useThemeCssVar(['contentPadding', 'borderColor', 'headerHeight', 'iconColorHover'])
|
||||
// 挂载时请求数据
|
||||
onMounted(() => fetch())
|
||||
|
||||
return () => (
|
||||
<div class="h-full flex flex-col" style={cssVar.value}>
|
||||
<div class="mx-auto max-w-[1600px] w-full p-6">
|
||||
<BaseComponent
|
||||
v-slots={{
|
||||
headerLeft: () => (
|
||||
<NButton type="primary" size="large" class="px-5" onClick={openUploadModal}>
|
||||
<PlusOutlined class="text-[var(--text-color-3)] w-[1.6rem]" />
|
||||
<span class="px-2">{$t('t_13_1745227838275')}</span>
|
||||
</NButton>
|
||||
),
|
||||
headerRight: () => (
|
||||
<NInput
|
||||
v-model:value={param.value.search}
|
||||
onKeydown={(e: KeyboardEvent) => {
|
||||
if (e.key === 'Enter') fetch()
|
||||
}}
|
||||
onClear={() => useThrottleFn(fetch, 100)}
|
||||
placeholder={$t('t_14_1745227840904')}
|
||||
clearable
|
||||
size="large"
|
||||
class="min-w-[300px]"
|
||||
v-slots={{
|
||||
suffix: () => (
|
||||
<div class="flex items-center" onClick={fetch}>
|
||||
<Search class="text-[var(--text-color-3)] w-[1.6rem] cursor-pointer font-bold" />
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
></NInput>
|
||||
),
|
||||
content: () => (
|
||||
<div class="rounded-lg bg-white">
|
||||
<CertTable size="medium" />
|
||||
</div>
|
||||
),
|
||||
footerRight: () => (
|
||||
<div class="mt-4 flex justify-end">
|
||||
<CertTablePage
|
||||
v-slots={{
|
||||
prefix: () => (
|
||||
<span>
|
||||
{$t('t_15_1745227839354')} {data.value.total} {$t('t_16_1745227838930')}
|
||||
</span>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
></BaseComponent>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
})
|
||||
228
frontend/apps/allin-ssl/src/views/certManage/useController.tsx
Normal file
228
frontend/apps/allin-ssl/src/views/certManage/useController.tsx
Normal file
@@ -0,0 +1,228 @@
|
||||
import { NButton, NSpace, NTag, type DataTableColumns } from 'naive-ui'
|
||||
import {
|
||||
useModal,
|
||||
useTable,
|
||||
useTablePage,
|
||||
useDialog,
|
||||
useFormHooks,
|
||||
useModalHooks,
|
||||
useForm,
|
||||
useLoadingMask,
|
||||
} from '@baota/naive-ui/hooks'
|
||||
import { useError } from '@baota/hooks/error'
|
||||
import { $t } from '@locales/index'
|
||||
|
||||
import { useStore } from './useStore'
|
||||
import UploadCert from './components/uploadCertForm'
|
||||
|
||||
import type { CertItem, CertListParams } from '@/types/cert'
|
||||
|
||||
const { handleError } = useError()
|
||||
const { useFormTextarea } = useFormHooks()
|
||||
const { fetchCertList, downloadExistingCert, deleteExistingCert, uploadNewCert, uploadForm, resetUploadForm } =
|
||||
useStore()
|
||||
const { confirm } = useModalHooks()
|
||||
/**
|
||||
* useController
|
||||
* @description 证书管理业务逻辑控制器
|
||||
* @returns {object} 返回controller对象
|
||||
*/
|
||||
export const useController = () => {
|
||||
/**
|
||||
* @description 创建表格列配置
|
||||
* @returns {DataTableColumns<CertItem>} 返回表格列配置数组
|
||||
*/
|
||||
const createColumns = (): DataTableColumns<CertItem> => [
|
||||
{
|
||||
title: $t('t_17_1745227838561'),
|
||||
key: 'domains',
|
||||
width: 200,
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: $t('t_18_1745227838154'),
|
||||
key: 'issuer',
|
||||
width: 200,
|
||||
ellipsis: {
|
||||
tooltip: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: $t('t_21_1745227837972'),
|
||||
key: 'source',
|
||||
width: 100,
|
||||
render: (row: CertItem) => (row.source !== 'upload' ? $t('t_22_1745227838154') : $t('t_23_1745227838699')),
|
||||
},
|
||||
{
|
||||
title: $t('t_19_1745227839107'),
|
||||
key: 'end_day',
|
||||
width: 100,
|
||||
render: (row: CertItem) => {
|
||||
const endDay = Number(row.end_day)
|
||||
const config = [
|
||||
[endDay <= 0, 'error', $t('t_0_1746001199409')],
|
||||
[endDay < 30, 'warning', $t('t_1_1745999036289', { days: row.end_day })],
|
||||
[endDay > 30, 'success', $t('t_0_1745999035681', { days: row.end_day })],
|
||||
] as [boolean, 'success' | 'error' | 'warning' | 'default' | 'info' | 'primary', string][]
|
||||
const [_, type, text] = config.find((item) => item[0]) ?? ['default', 'error', '获取失败']
|
||||
console.log(config)
|
||||
return (
|
||||
<NTag type={type} size="small" bordered={false}>
|
||||
{text}
|
||||
</NTag>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
title: $t('t_20_1745227838813'),
|
||||
key: 'end_time',
|
||||
width: 150,
|
||||
},
|
||||
|
||||
{
|
||||
title: $t('t_24_1745227839508'),
|
||||
key: 'create_time',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: $t('t_8_1745215914610'),
|
||||
key: 'actions',
|
||||
fixed: 'right' as const,
|
||||
align: 'right',
|
||||
width: 150,
|
||||
render: (row: CertItem) => (
|
||||
<NSpace justify="end">
|
||||
<NButton
|
||||
style={{ '--n-text-color': 'var(--text-color-3)' }}
|
||||
size="tiny"
|
||||
strong
|
||||
secondary
|
||||
onClick={() => downloadExistingCert(row.id)}
|
||||
>
|
||||
{$t('t_25_1745227838080')}
|
||||
</NButton>
|
||||
<NButton size="tiny" strong secondary type="error" onClick={() => handleDeleteCert(row)}>
|
||||
{$t('t_12_1745215914312')}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
// 表格实例
|
||||
const {
|
||||
component: CertTable,
|
||||
loading,
|
||||
param,
|
||||
data,
|
||||
total,
|
||||
fetch,
|
||||
} = useTable<CertItem, CertListParams>({
|
||||
config: createColumns(),
|
||||
request: fetchCertList,
|
||||
defaultValue: {
|
||||
p: 1,
|
||||
limit: 10,
|
||||
search: '',
|
||||
},
|
||||
watchValue: ['p', 'limit'],
|
||||
})
|
||||
|
||||
// 分页实例
|
||||
const { component: CertTablePage } = useTablePage({
|
||||
param,
|
||||
total,
|
||||
alias: {
|
||||
page: 'p',
|
||||
pageSize: 'limit',
|
||||
},
|
||||
})
|
||||
|
||||
/**
|
||||
* @description 打开上传证书弹窗
|
||||
*/
|
||||
const openUploadModal = () => {
|
||||
useModal({
|
||||
title: $t('t_13_1745227838275'),
|
||||
area: 600,
|
||||
component: UploadCert,
|
||||
footer: true,
|
||||
onUpdateShow: (show) => {
|
||||
if (!show) fetch()
|
||||
resetUploadForm()
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @description 删除证书
|
||||
* @param {CertItem} cert - 证书对象
|
||||
*/
|
||||
const handleDeleteCert = async ({ id }: CertItem) => {
|
||||
useDialog({
|
||||
title: $t('t_29_1745227838410'),
|
||||
content: $t('t_30_1745227841739'),
|
||||
onPositiveClick: async () => {
|
||||
try {
|
||||
await deleteExistingCert(id)
|
||||
await fetch()
|
||||
} catch (error) {
|
||||
handleError(error)
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
loading,
|
||||
fetch,
|
||||
CertTable,
|
||||
CertTablePage,
|
||||
param,
|
||||
data,
|
||||
openUploadModal,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 上传证书控制器
|
||||
*/
|
||||
export const useUploadCertController = () => {
|
||||
const { open: openLoad, close: closeLoad } = useLoadingMask({ text: $t('t_0_1746667592819') })
|
||||
// 表单实例
|
||||
const { example, component, loading, fetch } = useForm({
|
||||
config: [
|
||||
useFormTextarea($t('t_34_1745227839375'), 'cert', { placeholder: $t('t_35_1745227839208'), rows: 6 }),
|
||||
useFormTextarea($t('t_36_1745227838958'), 'key', { placeholder: $t('t_37_1745227839669'), rows: 6 }),
|
||||
],
|
||||
request: uploadNewCert,
|
||||
defaultValue: uploadForm,
|
||||
rules: {
|
||||
cert: [{ required: true, message: $t('t_35_1745227839208'), trigger: 'input' }],
|
||||
key: [{ required: true, message: $t('t_37_1745227839669'), trigger: 'input' }],
|
||||
},
|
||||
})
|
||||
|
||||
// 关联确认按钮
|
||||
confirm(async (close) => {
|
||||
try {
|
||||
openLoad()
|
||||
await fetch()
|
||||
close()
|
||||
} catch (error) {
|
||||
handleError(error)
|
||||
} finally {
|
||||
closeLoad()
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
UploadCertForm: component,
|
||||
example,
|
||||
loading,
|
||||
fetch,
|
||||
}
|
||||
}
|
||||
123
frontend/apps/allin-ssl/src/views/certManage/useStore.tsx
Normal file
123
frontend/apps/allin-ssl/src/views/certManage/useStore.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { defineStore, storeToRefs } from 'pinia'
|
||||
import { getCertList, uploadCert, deleteCert } from '@/api/cert'
|
||||
import { useError } from '@baota/hooks/error'
|
||||
import { $t } from '@locales/index'
|
||||
import type { CertItem, UploadCertParams, CertListParams } from '@/types/cert'
|
||||
import type { TableResponse } from '@baota/naive-ui/types/table'
|
||||
|
||||
// 导入错误处理钩子
|
||||
const { handleError } = useError()
|
||||
|
||||
/**
|
||||
* 证书管理状态 Store
|
||||
* @description 用于管理证书相关的状态和操作，包括证书列表、上传、下载等
|
||||
*/
|
||||
export const useCertManageStore = defineStore('cert-manage-store', () => {
|
||||
// -------------------- 状态定义 --------------------
|
||||
// 上传证书表单
|
||||
const uploadForm = ref<UploadCertParams>({
|
||||
cert: '',
|
||||
key: '',
|
||||
})
|
||||
|
||||
// -------------------- 工具方法 --------------------
|
||||
/**
|
||||
* 获取证书列表
|
||||
* @description 根据分页参数获取证书列表数据
|
||||
* @param {CertListParams} params - 查询参数
|
||||
* @returns {Promise<TableResponse<T>>} 返回列表数据和总数
|
||||
*/
|
||||
const fetchCertList = async <T = CertItem,>(params: CertListParams): Promise<TableResponse<T>> => {
|
||||
try {
|
||||
const { data, count } = await getCertList(params).fetch()
|
||||
return {
|
||||
list: (data || []) as T[],
|
||||
total: count,
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error)
|
||||
return { list: [] as T[], total: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载证书
|
||||
* @description 下载指定ID的证书文件
|
||||
* @param {number} id - 证书ID
|
||||
* @returns {Promise<boolean>} 是否下载成功
|
||||
*/
|
||||
const downloadExistingCert = (id: string) => {
|
||||
try {
|
||||
// const { data } = await downloadCert({ id })
|
||||
const link = document.createElement('a')
|
||||
link.href = '/v1/cert/download?id=' + id
|
||||
link.target = '_blank'
|
||||
link.click()
|
||||
} catch (error) {
|
||||
handleError(error).default($t('t_38_1745227838813'))
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传证书
|
||||
* @description 上传新证书
|
||||
* @param {UploadCertParams} params - 上传证书参数
|
||||
* @returns {Promise<boolean>} 是否上传成功
|
||||
*/
|
||||
const uploadNewCert = async (params: UploadCertParams) => {
|
||||
try {
|
||||
const { message, fetch } = uploadCert(params)
|
||||
message.value = true
|
||||
await fetch()
|
||||
} catch (error) {
|
||||
handleError(error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除证书
|
||||
* @description 删除指定ID的证书
|
||||
* @param {number} id - 证书ID
|
||||
* @returns {Promise<boolean>} 是否删除成功
|
||||
*/
|
||||
const deleteExistingCert = async (id: string) => {
|
||||
try {
|
||||
const { message, fetch } = deleteCert({ id })
|
||||
message.value = true
|
||||
await fetch()
|
||||
} catch (error) {
|
||||
handleError(error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 重置上传证书表单
|
||||
*/
|
||||
const resetUploadForm = () => {
|
||||
uploadForm.value = {
|
||||
cert: '',
|
||||
key: '',
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// 状态
|
||||
uploadForm,
|
||||
// 方法
|
||||
fetchCertList,
|
||||
downloadExistingCert,
|
||||
uploadNewCert,
|
||||
deleteExistingCert,
|
||||
resetUploadForm,
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 组合式 API 使用 Store
|
||||
* @description 提供对证书管理 Store 的访问，并返回响应式引用
|
||||
* @returns {Object} 包含所有 store 状态和方法的对象
|
||||
*/
|
||||
export const useStore = () => {
|
||||
const store = useCertManageStore()
|
||||
return { ...store, ...storeToRefs(store) }
|
||||
}
|
||||
Reference in New Issue
Block a user