【初始化】前端工程项目

frontend/apps/allin-ssl/src/views/certManage/index.tsx

@@ -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>
+		)
+	},
+})