环境变量支持置顶 (#2822)

* Initial plan

* Add pin to top feature for environment variables

Co-authored-by: whyour <22700758+whyour@users.noreply.github.com>

* Format code with prettier

Co-authored-by: whyour <22700758+whyour@users.noreply.github.com>

* Add database migration for isPinned column in Envs table

Co-authored-by: whyour <22700758+whyour@users.noreply.github.com>

* Use snake_case naming (is_pinned) for database column

Co-authored-by: whyour <22700758+whyour@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: whyour <22700758+whyour@users.noreply.github.com>
Co-authored-by: whyour <imwhyour@gmail.com>

src/pages/env/index.tsx

@@ -1,47 +1,42 @@
-import intl from 'react-intl-universal';
-import React, {
-  useCallback,
-  useRef,
-  useState,
-  useEffect,
-  useMemo,
-} from 'react';
+import useTableScrollHeight from '@/hooks/useTableScrollHeight';
+import { SharedContext } from '@/layouts';
+import config from '@/utils/config';
+import { request } from '@/utils/http';
+import { exportJson } from '@/utils/index';
 import {
-  Button,
-  message,
-  Modal,
-  Table,
-  Tag,
-  Space,
-  Typography,
-  Tooltip,
-  Input,
-  UploadProps,
-  Upload,
-} from 'antd';
-import {
-  EditOutlined,
-  DeleteOutlined,
-  SyncOutlined,
   CheckCircleOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  PushpinFilled,
+  PushpinOutlined,
   StopOutlined,
   UploadOutlined,
 } from '@ant-design/icons';
-import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
-import { request } from '@/utils/http';
-import EnvModal from './modal';
-import EditNameModal from './editNameModal';
+import { useOutletContext } from '@umijs/max';
+import {
+  Button,
+  Input,
+  Modal,
+  Space,
+  Table,
+  Tag,
+  Tooltip,
+  Typography,
+  Upload,
+  UploadProps,
+  message,
+} from 'antd';
+import dayjs from 'dayjs';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import './index.less';
-import { exportJson } from '@/utils/index';
-import { useOutletContext } from '@umijs/max';
-import { SharedContext } from '@/layouts';
-import useTableScrollHeight from '@/hooks/useTableScrollHeight';
-import Copy from '../../components/copy';
+import intl from 'react-intl-universal';
 import { useVT } from 'virtualizedtableforantd4';
-import dayjs from 'dayjs';
+import Copy from '../../components/copy';
+import EditNameModal from './editNameModal';
+import './index.less';
+import EnvModal from './modal';
 
 const { Paragraph } = Typography;
 const { Search } = Input;
@@ -59,11 +54,15 @@ enum StatusColor {
 enum OperationName {
   '启用',
   '禁用',
+  '置顶',
+  '取消置顶',
 }
 
 enum OperationPath {
   'enable',
   'disable',
+  'pin',
+  'unpin',
 }
 
 const type = 'DragableBodyRow';
@@ -181,7 +180,7 @@ const Env = () => {
     {
       title: intl.get('操作'),
       key: 'action',
-      width: 120,
+      width: 160,
       render: (text: string, record: any, index: number) => {
         const isPc = !isPhone;
         return (
@@ -208,6 +207,23 @@ const Env = () => {
                 )}
               </a>
             </Tooltip>
+            <Tooltip
+              title={
+                isPc
+                  ? record.isPinned === 1
+                    ? intl.get('取消置顶')
+                    : intl.get('置顶')
+                  : ''
+              }
+            >
+              <a onClick={() => pinOrUnpinEnv(record, index)}>
+                {record.isPinned === 1 ? (
+                  <PushpinFilled />
+                ) : (
+                  <PushpinOutlined />
+                )}
+              </a>
+            </Tooltip>
             <Tooltip title={isPc ? intl.get('删除') : ''}>
               <a onClick={() => deleteEnv(record, index)}>
                 <DeleteOutlined />
@@ -305,6 +321,51 @@ const Env = () => {
     setIsModalVisible(true);
   };
 
+  const pinOrUnpinEnv = (record: any, index: number) => {
+    Modal.confirm({
+      title: `确认${
+        record.isPinned === 1 ? intl.get('取消置顶') : intl.get('置顶')
+      }`,
+      content: (
+        <>
+          {intl.get('确认')}
+          {record.isPinned === 1 ? intl.get('取消置顶') : intl.get('置顶')}
+          Env{' '}
+          <Paragraph
+            style={{ wordBreak: 'break-all', display: 'inline' }}
+            ellipsis={{ rows: 6, expandable: true }}
+            type="warning"
+            copyable
+          >
+            {record.name}: {record.value}
+          </Paragraph>{' '}
+          {intl.get('吗')}
+        </>
+      ),
+      onOk() {
+        request
+          .put(
+            `${config.apiPrefix}envs/${
+              record.isPinned === 1 ? 'unpin' : 'pin'
+            }`,
+            [record.id],
+          )
+          .then(({ code, data }) => {
+            if (code === 200) {
+              message.success(
+                `${
+                  record.isPinned === 1
+                    ? intl.get('取消置顶')
+                    : intl.get('置顶')
+                }${intl.get('成功')}`,
+              );
+              getEnvs();
+            }
+          });
+      },
+    });
+  };
+
   const deleteEnv = (record: any, index: number) => {
     Modal.confirm({
       title: intl.get('确认删除'),
@@ -589,6 +650,20 @@ const Env = () => {
             >
               {intl.get('批量禁用')}
             </Button>
+            <Button
+              type="primary"
+              onClick={() => operateEnvs(2)}
+              style={{ marginLeft: 8, marginBottom: 5 }}
+            >
+              {intl.get('批量置顶')}
+            </Button>
+            <Button
+              type="primary"
+              onClick={() => operateEnvs(3)}
+              style={{ marginLeft: 8, marginRight: 8 }}
+            >
+              {intl.get('批量取消置顶')}
+            </Button>
             <span style={{ marginLeft: 8 }}>
               {intl.get('已选择')}
               <a>{selectedRowIds?.length}</a>