【同步】前端项目源码

【修复】工作流兼容问题

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

@@ -0,0 +1,86 @@
+import { NTabs, NTabPane, NCard, NIcon } from 'naive-ui'
+import { SettingOutlined, BellOutlined, InfoCircleOutlined } from '@vicons/antd'
+
+import { useStore } from './useStore'
+import { useController } from './useController'
+import BaseComponent from '@/components/baseComponent'
+import GeneralSettings from './components/generalSettings'
+import NotificationSettings from './components/notificationSettings'
+import AboutSettings from './components/aboutSettings'
+
+/**
+ * 设置页面组件
+ */
+export default defineComponent({
+	name: 'Settings',
+	setup() {
+		const { activeTab, tabOptions } = useStore()
+		const { fetchAllSettings, isCutTab } = useController()
+
+		// 渲染图标组件
+		const renderIcon = (iconName: string) => {
+			const icons: Record<string, any> = {
+				SettingOutlined: <SettingOutlined />,
+				BellOutlined: <BellOutlined />,
+				InfoCircleOutlined: <InfoCircleOutlined />,
+			}
+			return <NIcon size="20">{icons[iconName]}</NIcon>
+		}
+
+		// 自定义Tab样式已移至全局reset.css
+
+		onMounted(() => {
+			isCutTab()
+			fetchAllSettings()
+		})
+
+		return () => (
+			<div class="h-full flex flex-col">
+				<div class="mx-auto max-w-[1600px] w-full p-6">
+					<BaseComponent
+						v-slots={{
+							content: () => (
+								<div class="w-full">
+									<NCard>
+										<NTabs
+											class="bg-white rounded-2xl p-6"
+											type="segment"
+											v-model:value={activeTab.value}
+											size="large"
+											justifyContent="space-evenly"
+										>
+											{tabOptions.value.map((tab) => (
+												<NTabPane key={tab.key} name={tab.key}>
+													{{
+														tab: () => (
+															<div class="flex items-center my-[10px] px-2 py-1 rounded-lg transition-all duration-300 ease-in-out">
+																{renderIcon(tab.icon)}
+																<span class="ml-2">{tab.title}</span>
+															</div>
+														),
+														default: () => (
+															<div class="w-full">
+																{/* 常用设置 */}
+																{activeTab.value === 'general' && <GeneralSettings />}
+
+																{/* 告警通知 */}
+																{activeTab.value === 'notification' && <NotificationSettings />}
+
+																{/* 关于我们 */}
+																{activeTab.value === 'about' && <AboutSettings />}
+															</div>
+														),
+													}}
+												</NTabPane>
+											))}
+										</NTabs>
+									</NCard>
+								</div>
+							),
+						}}
+					/>
+				</div>
+			</div>
+		)
+	},
+})