feat：调整优化

frontend/src/components/shared/FormDrawer/FormDrawer.css

@@ -0,0 +1,133 @@
+.form-drawer-root .ant-drawer-content-wrapper {
+  max-width: var(--app-form-drawer-max-width, calc(100vw - 48px));
+}
+
+.form-drawer .ant-drawer-header {
+  min-height: 64px;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--app-border-color, #f0f0f0);
+}
+
+.form-drawer .ant-drawer-header-title {
+  min-width: 0;
+}
+
+.form-drawer .ant-drawer-title {
+  min-width: 0;
+}
+
+.form-drawer .ant-drawer-body {
+  background: var(--app-surface-color, #ffffff);
+}
+
+.form-drawer .ant-drawer-footer {
+  border-top: 1px solid var(--app-border-color, #f0f0f0);
+  background: var(--app-surface-color, #ffffff);
+}
+
+.form-drawer__title {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.form-drawer__title-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  color: var(--app-primary-color, #1677ff);
+  font-size: 16px;
+}
+
+.form-drawer__title-main {
+  min-width: 0;
+}
+
+.form-drawer__title-text {
+  display: block;
+  overflow: hidden;
+  color: var(--app-text-main, rgba(0, 0, 0, 0.88));
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.form-drawer__subtitle {
+  display: block;
+  overflow: hidden;
+  margin-top: 2px;
+  color: var(--app-text-secondary, rgba(0, 0, 0, 0.45));
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.form-drawer__body {
+  min-height: 100%;
+  padding: 24px;
+}
+
+.form-drawer__body--compact {
+  padding: 20px 24px;
+}
+
+.form-drawer__body--spacious {
+  padding: 24px 32px;
+}
+
+.form-drawer__body .ant-form-vertical .ant-form-item {
+  margin-bottom: 18px;
+}
+
+.form-drawer__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 24px;
+}
+
+.form-drawer__footer-extra {
+  min-width: 0;
+  color: var(--app-text-secondary, rgba(0, 0, 0, 0.45));
+  font-size: 13px;
+}
+
+.form-drawer__footer-actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-left: auto;
+}
+
+.form-drawer__footer-actions .ant-btn {
+  min-width: 72px;
+}
+
+@media (max-width: 768px) {
+  .form-drawer-root .ant-drawer-content-wrapper {
+    width: 100vw !important;
+    max-width: 100vw;
+  }
+
+  .form-drawer .ant-drawer-header {
+    padding: 14px 16px;
+  }
+
+  .form-drawer__body,
+  .form-drawer__body--compact,
+  .form-drawer__body--spacious {
+    padding: 16px;
+  }
+
+  .form-drawer__footer {
+    padding: 12px 16px;
+  }
+}

frontend/src/components/shared/FormDrawer/index.tsx

@@ -0,0 +1,156 @@
+import type { CSSProperties, ReactNode } from "react";
+import { Button, Drawer } from "antd";
+import type { ButtonProps, DrawerProps } from "antd";
+import "./FormDrawer.css";
+
+type FormDrawerSize = "sm" | "md" | "lg" | "xl" | "wide";
+type FormDrawerBodyDensity = "compact" | "default" | "spacious";
+
+const FORM_DRAWER_WIDTH = "var(--app-form-drawer-width, 600px)";
+
+const drawerWidthMap: Record<FormDrawerSize, number | string> = {
+  sm: FORM_DRAWER_WIDTH,
+  md: FORM_DRAWER_WIDTH,
+  lg: FORM_DRAWER_WIDTH,
+  xl: FORM_DRAWER_WIDTH,
+  wide: FORM_DRAWER_WIDTH,
+};
+
+interface FormDrawerProps
+  extends Omit<DrawerProps, "children" | "footer" | "onClose" | "open" | "size" | "title" | "width"> {
+  open: boolean;
+  onClose: () => void;
+  title: ReactNode;
+  subtitle?: ReactNode;
+  icon?: ReactNode;
+  children: ReactNode;
+  size?: FormDrawerSize;
+  width?: number | string;
+  bodyDensity?: FormDrawerBodyDensity;
+  bodyClassName?: string;
+  bodyStyle?: CSSProperties;
+  footer?: ReactNode;
+  footerExtra?: ReactNode;
+  hideFooter?: boolean;
+  cancelText?: ReactNode;
+  okText?: ReactNode;
+  okIcon?: ReactNode;
+  okLoading?: boolean;
+  okDisabled?: boolean;
+  onOk?: () => void;
+  cancelButtonProps?: ButtonProps;
+  okButtonProps?: ButtonProps;
+}
+
+function joinClassNames(...classes: Array<string | undefined | false>) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export default function FormDrawer({
+  open,
+  onClose,
+  title,
+  subtitle,
+  icon,
+  children,
+  size = "md",
+  width,
+  bodyDensity = "default",
+  bodyClassName,
+  bodyStyle,
+  footer,
+  footerExtra,
+  hideFooter = false,
+  cancelText = "取消",
+  okText = "保存",
+  okIcon,
+  okLoading = false,
+  okDisabled = false,
+  onOk,
+  cancelButtonProps,
+  okButtonProps,
+  rootClassName,
+  className,
+  styles,
+  placement = "right",
+  maskClosable = false,
+  destroyOnHidden = true,
+  ...drawerProps
+}: FormDrawerProps) {
+  const { children: okButtonChildren, onClick: okButtonOnClick, ...restOkButtonProps } = okButtonProps ?? {};
+  const { body, footer: footerStyle, header, ...restStyles } = styles ?? {};
+  const resolvedWidth = width ?? drawerWidthMap[size];
+  const resolvedTitle = (
+    <div className="form-drawer__title">
+      {icon ? <span className="form-drawer__title-icon">{icon}</span> : null}
+      <span className="form-drawer__title-main">
+        <span className="form-drawer__title-text">{title}</span>
+        {subtitle ? <span className="form-drawer__subtitle">{subtitle}</span> : null}
+      </span>
+    </div>
+  );
+  const defaultFooter = (
+    <div className="form-drawer__footer">
+      {footerExtra ? <div className="form-drawer__footer-extra">{footerExtra}</div> : null}
+      <div className="form-drawer__footer-actions">
+        <Button onClick={onClose} {...cancelButtonProps}>
+          {cancelButtonProps?.children ?? cancelText}
+        </Button>
+        {onOk || okButtonProps ? (
+          <Button
+            type="primary"
+            icon={okIcon}
+            loading={okLoading}
+            disabled={okDisabled}
+            onClick={onOk ?? okButtonOnClick}
+            {...restOkButtonProps}
+          >
+            {okButtonChildren ?? okText}
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+  const resolvedFooter = hideFooter ? null : footer ?? defaultFooter;
+  const bodyClasses = joinClassNames(
+    "form-drawer__body",
+    bodyDensity !== "default" && `form-drawer__body--${bodyDensity}`,
+    bodyClassName,
+  );
+
+  return (
+    <Drawer
+      open={open}
+      onClose={onClose}
+      title={resolvedTitle}
+      width={resolvedWidth}
+      placement={placement}
+      maskClosable={maskClosable}
+      destroyOnHidden={destroyOnHidden}
+      rootClassName={joinClassNames("form-drawer-root", rootClassName)}
+      className={joinClassNames("form-drawer", className)}
+      footer={resolvedFooter}
+      styles={{
+        ...restStyles,
+        header: {
+          ...header,
+        },
+        body: {
+          padding: 0,
+          ...body,
+        },
+        footer: {
+          padding: 0,
+          ...footerStyle,
+        },
+      }}
+      {...drawerProps}
+    >
+      <div className={bodyClasses} style={bodyStyle}>
+        {children}
+      </div>
+    </Drawer>
+  );
+}
+
+export type { FormDrawerProps, FormDrawerSize, FormDrawerBodyDensity };

frontend/src/index.css

@@ -23,6 +23,8 @@
   --item-hover-bg: rgba(22, 119, 255, 0.08);
   --text-color-secondary: #66758f;
   --link-color: #1677ff;
+  --app-form-drawer-width: 600px;
+  --app-form-drawer-max-width: calc(100vw - 48px);
 }
 
 :root[data-theme="minimal"] {
@@ -339,6 +341,13 @@ body::after {
   padding: 8px 4px 4px;
 }
 
+.ant-drawer:has(.app-page__drawer-footer) .ant-drawer-content-wrapper,
+.ant-drawer:has(.screen-saver-drawer__footer) .ant-drawer-content-wrapper,
+.meeting-create-drawer-root .ant-drawer-content-wrapper {
+  width: min(var(--app-form-drawer-width), var(--app-form-drawer-max-width)) !important;
+  max-width: var(--app-form-drawer-max-width);
+}
+
 .app-page__split {
   flex: 1;
   min-height: 0;
@@ -856,6 +865,11 @@ body::after {
 }
 
 @media (max-width: 768px) {
+  :root {
+    --app-form-drawer-width: 100vw;
+    --app-form-drawer-max-width: 100vw;
+  }
+
   body::after {
     inset: 10px;
     border-radius: 18px;
@@ -1259,6 +1273,8 @@ body::after {
   --app-text-muted: #9095a1;
   --text-color-secondary: #9095a1;
   --link-color: #1677ff;
+  --app-form-drawer-width: 600px;
+  --app-form-drawer-max-width: calc(100vw - 48px);
 }
 
 html,

frontend/src/layouts/AppLayout.tsx

@@ -1,4 +1,3 @@
-import * as AntIcons from "@ant-design/icons";
 import {
   BellOutlined,
   ApartmentOutlined,
@@ -31,6 +30,16 @@ import "./AppLayout.css";
 const { Header, Sider, Content } = Layout;
 
 const iconMap: Record<string, ReactNode> = {
+  ApartmentOutlined: <ApartmentOutlined />,
+  BookOutlined: <BookOutlined />,
+  DashboardOutlined: <DashboardOutlined />,
+  DesktopOutlined: <DesktopOutlined />,
+  SafetyCertificateOutlined: <SafetyCertificateOutlined />,
+  SettingOutlined: <SettingOutlined />,
+  ShopOutlined: <ShopOutlined />,
+  TeamOutlined: <TeamOutlined />,
+  UserOutlined: <UserOutlined />,
+  VideoCameraOutlined: <VideoCameraOutlined />,
   dashboard: <DashboardOutlined />,
   meeting: <VideoCameraOutlined />,
   user: <UserOutlined />,
@@ -46,9 +55,7 @@ const iconMap: Record<string, ReactNode> = {
 function resolveMenuIcon(icon?: string): ReactNode {
   if (!icon) return <SettingOutlined />;
   const aliasIcon = iconMap[icon];
-  if (aliasIcon) return aliasIcon;
+  return aliasIcon ?? <SettingOutlined />;
-  const IconComponent = (AntIcons as unknown as Record<string, React.ComponentType>)[icon];
-  return IconComponent ? <IconComponent /> : <SettingOutlined />;
 }
 
 type PermissionMenuNode = SysPermission & {

frontend/src/pages/business/MeetingPointsManagement.tsx

@@ -386,11 +386,16 @@ export default function MeetingPointsManagement() {
       >
         <DataListPanel
           leftActions={
-            isLookupTab(activeTabKey) && showTransferButton ? (
+            <Space>
+              <Button icon={<ReloadOutlined />} onClick={() => void handleRefresh()}>
+                刷新
+              </Button>
+              {isLookupTab(activeTabKey) && showTransferButton ? (
                 <Button icon={<PlusOutlined />} onClick={() => void handleOpenTransfer()}>
                   分配积分
                 </Button>
-            ) : null
+              ) : null}
+            </Space>
           }
           rightActions={
             <Space wrap>
@@ -416,12 +421,6 @@ export default function MeetingPointsManagement() {
                   <Button onClick={handleReset}>重置</Button>
                 </>
               ) : null}
-              <Button
-                icon={<ReloadOutlined />}
-                onClick={() => void handleRefresh()}
-                title="刷新"
-                aria-label="刷新"
-              />
             </Space>
           }
           footer={

frontend/src/pages/business/PromptTemplates.tsx

@@ -4,7 +4,6 @@ import {
   Button,
   Col,
   Divider,
-  Drawer,
   Empty,
   Form,
   Input,
@@ -21,6 +20,7 @@ import {
 import type { ColumnsType } from 'antd/es/table';
 import PageContainer from "@/components/shared/PageContainer";
 import DataListPanel from "@/components/shared/DataListPanel";
+import FormDrawer from "@/components/shared/FormDrawer";
 import SectionCard from "@/components/shared/SectionCard";
 import { CopyOutlined, DeleteOutlined, EditOutlined, EyeOutlined, PlusOutlined, SaveOutlined } from '@ant-design/icons';
 import ReactMarkdown from 'react-markdown';
@@ -40,7 +40,7 @@ import AppPagination from '../../components/shared/AppPagination';
 import './PromptTemplates.css';
 
 const { Option } = Select;
-const { Text, Title } = Typography;
+const { Text } = Typography;
 
 const normalizePromptTags = (tags: unknown) => {
   if (Array.isArray(tags)) {
@@ -464,17 +464,15 @@ const PromptTemplates: React.FC = () => {
         </DataListPanel>
       </SectionCard>
 
-      <Drawer
+      <FormDrawer
-        title={<Title level={4} className="prompt-template-drawer__title">{editingId ? '编辑模板' : '创建新模板'}</Title>}
+        title={editingId ? '编辑模板' : '创建新模板'}
-        width="80%"
+        size="md"
+        bodyDensity="compact"
         onClose={() => setDrawerVisible(false)}
         open={drawerVisible}
-        extra={
+        okIcon={<SaveOutlined />}
-          <Space>
+        okLoading={submitLoading}
-            <Button onClick={() => setDrawerVisible(false)}>取消</Button>
+        okButtonProps={{ htmlType: "submit", form: "prompt-template-form" }}
-            <Button type="primary" icon={<SaveOutlined />} loading={submitLoading} htmlType="submit" form="prompt-template-form">保存</Button>
-          </Space>
-        }
       >
         <Form
           id="prompt-template-form"
@@ -491,14 +489,14 @@ const PromptTemplates: React.FC = () => {
             }
           }}
         >
-          <Row gutter={24}>
+          <Row gutter={16}>
-            <Col span={(isPlatformAdmin || isTenantAdmin) ? 8 : 12}>
+            <Col span={24}>
               <Form.Item name="templateName" label="模板名称" rules={[{ required: true }]}>
                 <Input />
               </Form.Item>
             </Col>
             {(isPlatformAdmin || isTenantAdmin) && (
-              <Col span={6}>
+              <Col span={24}>
                 <Form.Item name="isSystem" label="模板属性" rules={[{ required: true }]}>
                   <Select placeholder="选择属性">
                     {promptLevels.length > 0 ? (
@@ -513,14 +511,14 @@ const PromptTemplates: React.FC = () => {
                 </Form.Item>
               </Col>
             )}
-            <Col span={(isPlatformAdmin || isTenantAdmin) ? 5 : 6}>
+            <Col span={24}>
               <Form.Item name="category" label="分类" rules={[{ required: true }]}>
                 <Select loading={dictLoading}>
                   {categories.map((i) => <Option key={i.itemValue} value={i.itemValue}>{i.itemLabel}</Option>)}
                 </Select>
               </Form.Item>
             </Col>
-            <Col span={isPlatformAdmin ? 5 : 6}>
+            <Col span={24}>
               <Form.Item name="status" label="状态">
                 <Select>
                   <Option value={1}>启用</Option>
@@ -539,15 +537,15 @@ const PromptTemplates: React.FC = () => {
             />
           </Form.Item>
 
-          <Row gutter={24}>
+          <Row gutter={16}>
-            <Col span={12}>
+            <Col span={24}>
               <Form.Item name="tags" label="业务标签" tooltip="可从现有标签中选择，也可输入新内容按回车保存">
                 <Select mode="tags" placeholder="选择或输入新标签" allowClear tokenSeparators={[',', ' ', ';']}>
                   {dictTags.map((item) => <Option key={item.itemValue} value={item.itemValue}>{item.itemLabel}</Option>)}
                 </Select>
               </Form.Item>
             </Col>
-            <Col span={12}>
+            <Col span={24}>
               <Form.Item
                 name="hotWordGroupId"
                 label="绑定热词组"
@@ -563,8 +561,8 @@ const PromptTemplates: React.FC = () => {
           </Row>
 
           <Divider orientation="left">提示词编辑器 (Markdown 实时预览)</Divider>
-          <Row gutter={24} className="prompt-template-editor">
+          <Row gutter={[0, 16]} className="prompt-template-editor">
-            <Col span={12} className="prompt-template-editor__col">
+            <Col span={24} className="prompt-template-editor__col">
               <Form.Item name="promptContent" noStyle rules={[{ required: true }]}>
                 <Input.TextArea
                   onChange={(e) => setPreviewContent(e.target.value)}
@@ -573,7 +571,7 @@ const PromptTemplates: React.FC = () => {
                 />
               </Form.Item>
             </Col>
-            <Col span={12} className="prompt-template-editor__preview">
+            <Col span={24} className="prompt-template-editor__preview">
               <div className="prompt-template-editor__preview-meta">
                 {selectedHotWordGroupId ? (
                   <Tag color="blue">
@@ -588,7 +586,7 @@ const PromptTemplates: React.FC = () => {
             </Col>
           </Row>
         </Form>
-      </Drawer>
+      </FormDrawer>
     </PageContainer>
   );
 };

frontend/src/pages/system/sys-params/index.less

@@ -33,21 +33,55 @@
 }
 
 .param-boolean-segmented {
-  .ant-segmented-item-selected {
+  width: 176px;
-    background: var(--app-primary-color) !important;
+  padding: 2px;
-    color: #fff !important;
+  border-radius: 999px;
-    box-shadow: none;
+  background: #eaf1fb;
+
+  .ant-segmented-group {
+    width: 100%;
+    overflow: hidden;
+    border-radius: 999px;
   }
 
   .ant-segmented-item {
-    color: var(--app-text-secondary, rgba(0, 0, 0, 0.65));
+    flex: 1;
-    transition: all 0.2s;
+    min-width: 0;
+    height: 26px;
+    color: #5d6f86;
+    border-radius: 0;
+    transition: color 0.2s, background 0.2s;
 
     &:hover:not(.ant-segmented-item-selected) {
-      color: var(--app-primary-color);
+      color: #1d5fbf;
-      background: rgba(22, 119, 255, 0.06);
+      background: #dbe8fb;
     }
   }
+
+  .ant-segmented-item:first-child {
+    border-radius: 999px 0 0 999px;
+  }
+
+  .ant-segmented-item:last-child {
+    border-radius: 0 999px 999px 0;
+  }
+
+  .ant-segmented-thumb {
+    border-radius: 0;
+  }
+
+  .ant-segmented-item-selected {
+    background: #2f7ff0 !important;
+    color: #fff !important;
+    box-shadow: 0 1px 4px rgba(47, 127, 240, 0.22);
+  }
+
+  .ant-segmented-item-label {
+    min-height: 26px;
+    line-height: 26px;
+    font-size: 13px;
+    font-weight: 500;
+  }
 }
 
 @media (max-width: 768px) {

frontend/src/pages/system/sys-params/index.tsx

@@ -359,7 +359,6 @@ export default function SysParams() {
             ) : isType(paramType, "Boolean") ? (
               <Segmented
                 className="param-boolean-segmented"
-                block
                 options={[
                   { label: t("sysParamsExt.booleanTrue"), value: "true" },
                   { label: t("sysParamsExt.booleanFalse"), value: "false" }

frontend/src/routes/routes.tsx

@@ -24,16 +24,16 @@ const MeetingPointsManagement = lazy(() => import("@/pages/business/MeetingPoint
 const TenantMeetingPointsSettings = lazy(() => import("@/pages/business/TenantMeetingPointsSettings"));
 const LicenseManagement = lazy(() => import("@/pages/business/LicenseManagement"));
 
-import SpeakerReg from "../pages/business/SpeakerReg";
+const SpeakerReg = lazy(() => import("../pages/business/SpeakerReg"));
 const RealtimeAsrSession = lazy(async () => {
   const mod = await import("../pages/business/RealtimeAsrSession");
   return { default: mod.default ?? mod.RealtimeAsrSession };
 });
-import HotWords from "../pages/business/HotWords";
+const HotWords = lazy(() => import("../pages/business/HotWords"));
-import PromptTemplates from "../pages/business/PromptTemplates";
+const PromptTemplates = lazy(() => import("../pages/business/PromptTemplates"));
-import AiModels from "../pages/business/AiModels";
+const AiModels = lazy(() => import("../pages/business/AiModels"));
-import Meetings from "../pages/business/Meetings";
+const Meetings = lazy(() => import("../pages/business/Meetings"));
-import MeetingDetail from "../pages/business/MeetingDetail";
+const MeetingDetail = lazy(() => import("../pages/business/MeetingDetail"));
 
 function RouteFallback() {
   return (

frontend/vite.config.ts

@@ -9,7 +9,30 @@ export default defineConfig({
     }
   },
   build: {
-    chunkSizeWarningLimit: 700
+    chunkSizeWarningLimit: 700,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (!id.includes("node_modules")) {
+            return undefined;
+          }
+
+          if (id.includes("node_modules/react/") || id.includes("node_modules/react-dom/") || id.includes("node_modules/scheduler/")) {
+            return "vendor-react";
+          }
+
+          if (id.includes("node_modules/jspdf/") || id.includes("node_modules/react-markdown/") || id.includes("node_modules/remark-") || id.includes("node_modules/rehype-") || id.includes("node_modules/unified/")) {
+            return "vendor-docs";
+          }
+
+          if (id.includes("node_modules/@dnd-kit/")) {
+            return "vendor-dnd";
+          }
+
+          return undefined;
+        }
+      }
+    }
   },
   server: {
     port: 5174,