feat(web): Unified frontend code style (#1923)

Co-authored-by: Fangyin Cheng <staneyffer@gmail.com>
Co-authored-by: 谨欣 <echo.cmy@antgroup.com>
Co-authored-by: 严志勇 <yanzhiyong@tiansuixiansheng.com>
Co-authored-by: yanzhiyong <932374019@qq.com>

web/pages/construct/prompt/index.tsx

@@ -1,6 +1,6 @@
-import ConstructLayout from '@/new-components/layout/Construct';
 import { apiInterceptors, deletePrompt, getPromptList } from '@/client/api';
 import useUser from '@/hooks/use-user';
+import ConstructLayout from '@/new-components/layout/Construct';
 import { IPrompt, PromptListResponse } from '@/types/prompt';
 import { PlusOutlined } from '@ant-design/icons';
 import { useRequest } from 'ahooks';
@@ -9,8 +9,9 @@ import { App, Button, Popconfirm, Segmented, Space, Table, Typography } from 'an
 import type { ColumnsType } from 'antd/es/table';
 import { TFunction } from 'i18next';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+
 import styles from './styles.module.css';
 
 const LangMap = { zh: '中文', en: 'English' };
@@ -23,7 +24,7 @@ const DeleteBtn: React.FC<{ record: IPrompt; refresh: () => void }> = ({ record,
 
   // 删除prompt
   const { run: deletePromptRun, loading: deleteLoading } = useRequest(
-    async (record) => {
+    async record => {
       await deletePrompt({
         ...record,
       });
@@ -42,7 +43,7 @@ const DeleteBtn: React.FC<{ record: IPrompt; refresh: () => void }> = ({ record,
   }
 
   return (
-    <Popconfirm title="确认删除吗？" onConfirm={async () => await deletePromptRun(record)}>
+    <Popconfirm title='确认删除吗？' onConfirm={async () => await deletePromptRun(record)}>
       <Button loading={deleteLoading}>{t('Delete')}</Button>
     </Popconfirm>
   );
@@ -70,7 +71,7 @@ const Prompt = () => {
     },
     {
       manual: true,
-      onSuccess: (data) => {
+      onSuccess: data => {
         setPromptList(data!);
       },
     },
@@ -102,26 +103,26 @@ const Prompt = () => {
       title: t('language'),
       dataIndex: 'prompt_language',
       key: 'prompt_language',
-      render: (lang) => (lang ? LangMap[lang as keyof typeof LangMap] : '-'),
+      render: lang => (lang ? LangMap[lang as keyof typeof LangMap] : '-'),
       width: '10%',
     },
     {
       title: t('Prompt_Info_Content'),
       dataIndex: 'content',
       key: 'content',
-      render: (content) => <Typography.Paragraph ellipsis={{ rows: 2, tooltip: true }}>{content}</Typography.Paragraph>,
+      render: content => <Typography.Paragraph ellipsis={{ rows: 2, tooltip: true }}>{content}</Typography.Paragraph>,
     },
     {
       title: t('Operation'),
       dataIndex: 'operate',
       key: 'operate',
       render: (_, record) => (
-        <Space align="center">
+        <Space align='center'>
           <Button
             onClick={() => {
               handleEdit(record);
             }}
-            type="primary"
+            type='primary'
           >
             {t('Edit')}
           </Button>
@@ -149,12 +150,12 @@ const Prompt = () => {
   return (
     <ConstructLayout>
       <div className={`px-6 py-2 ${styles['prompt-container']} md:p-6 h-[90vh] overflow-y-auto`}>
-        <div className="flex justify-between items-center mb-6">
-          <div className="flex items-center gap-4">
+        <div className='flex justify-between items-center mb-6'>
+          <div className='flex items-center gap-4'>
             <Segmented
-              className="backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 border-2 border-white rounded-lg shadow p-1 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60"
+              className='backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 border-2 border-white rounded-lg shadow p-1 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60'
               options={items}
-              onChange={(type) => {
+              onChange={type => {
                 setPromptType(type as string);
               }}
               value={promptType}
@@ -167,13 +168,17 @@ const Prompt = () => {
               className="w-[230px] h-[40px] border-1 border-white backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60"
             /> */}
           </div>
-          <div className="flex items-center gap-4 h-10">
+          <div className='flex items-center gap-4 h-10'>
             {/* {promptType === 'common' && (
               <Button className="border-none  h-full" icon={<PlusOutlined />} disabled>
                 {t('Add')} Prompts {t('template')}
               </Button>
             )} */}
-            <Button className="border-none text-white bg-button-gradient h-full" onClick={handleAddBtn} icon={<PlusOutlined />}>
+            <Button
+              className='border-none text-white bg-button-gradient h-full'
+              onClick={handleAddBtn}
+              icon={<PlusOutlined />}
+            >
               {t('Add')} Prompts
             </Button>
           </div>
@@ -182,7 +187,7 @@ const Prompt = () => {
           columns={getColumns(t, handleEditBtn)}
           dataSource={promptList?.items || []}
           loading={loading}
-          rowKey={(record) => record.prompt_name}
+          rowKey={record => record.prompt_name}
           pagination={{
             pageSize: 6,
             total: promptList?.total_count,