@lxzy/code-snippet 0.0.5 → 0.0.7

package/src/pages/activityCenter/activitySystemManagement/addPages/components/CustomPage.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { Button } from 'antd';
+import ProTable from '@ant-design/pro-table';
+import axios from 'axios';
+import ChannelLinkModal from './ChannelLinkModal';
+
+const CustomPage: React.FC = () => {
+  const [channelLinkVisible, setChannelLinkVisible] = useState(false);
+  const [currentPage, setCurrentPage] = useState<any>(null);
+
+  return (
+    <div>
+      <ProTable
+        headerTitle={false}
+        search={{ labelWidth: 'auto' }}
+        toolBarRender={() => [
+          <Button key="relate" type="primary">关联自定义页面</Button>,
+          <Button key="add" type="primary">新建页面</Button>,
+        ]}
+        rowKey="id"
+        request={async (params) => {
+          const { data: result } = await axios.get('/api/activity/customPageList', { params });
+          return { data: result.data.list, total: result.data.total, success: result.success };
+        }}
+        columns={[
+          { title: '页面名称', dataIndex: 'name' },
+          { title: '页面路径', dataIndex: 'path' },
+          { title: '状态', dataIndex: 'status' },
+          { title: '关联活动', dataIndex: 'activity' },
+          { title: '是否可分享', dataIndex: 'canShare', render: (_, record) => (record.canShare ? '是' : '否') },
+          { title: '最近更新时间', dataIndex: 'updateTime' },
+          {
+            title: '操作',
+            valueType: 'option',
+            width: 300,
+            render: (_, record) => (
+              <>
+                <Button type="link" size="small">详情</Button>
+                <Button type="link" size="small">编辑</Button>
+                {record.status === '已通过' && <Button type="link" size="small">复制</Button>}
+                <Button type="link" danger size="small">删除</Button>
+                {record.status === '已通过' ? (
+                  <Button
+                    type="link"
+                    size="small"
+                    onClick={() => {
+                      setCurrentPage(record);
+                      setChannelLinkVisible(true);
+                    }}
+                  >
+                    设置渠道链接
+                  </Button>
+                ) : (
+                  <Button type="link" size="small">提审</Button>
+                )}
+              </>
+            ),
+          },
+        ]}
+        pagination={false}
+        options={false}
+      />
+
+      {channelLinkVisible && (
+        <ChannelLinkModal
+          visible={channelLinkVisible}
+          pageName={currentPage?.name || ''}
+          pageId={currentPage?.id}
+          onClose={() => {
+            setChannelLinkVisible(false);
+            setCurrentPage(null);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default CustomPage;

package/src/pages/activityCenter/activitySystemManagement/addPages/components/SystemPage.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button } from 'antd';
+import ProTable from '@ant-design/pro-table';
+import axios from 'axios';
+
+const SystemPage: React.FC = () => {
+  return (
+    <div>
+      <ProTable
+        headerTitle={false}
+        search={{ labelWidth: 'auto' }}
+        toolBarRender={() => [
+          <Button key="add" type="primary">
+            关联系统页面
+          </Button>,
+        ]}
+        rowKey="id"
+        request={async (params) => {
+          const { data: result } = await axios.get('/api/activity/systemPageList', { params });
+          return { data: result.data.list, total: result.data.total, success: result.success };
+        }}
+        columns={[
+          { title: '页面名称', dataIndex: 'name' },
+          { title: '页面路径', dataIndex: 'path' },
+          { title: '状态', dataIndex: 'status' },
+          { title: '最近更新时间', dataIndex: 'updateTime' },
+          {
+            title: '操作',
+            valueType: 'option',
+            render: () => <Button type="primary" danger size="small">删除</Button>,
+          },
+        ]}
+        pagination={false}
+        options={false}
+      />
+    </div>
+  );
+};
+
+export default SystemPage;

package/src/pages/activityCenter/activitySystemManagement/addPages/index.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { PageContainer } from '@ant-design/pro-layout';
+import SystemPage from './components/SystemPage';
+import CustomPage from './components/CustomPage';
+import CustomLink from './components/CustomLink';
+
+const AddPages: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('system');
+
+  const tabContent = {
+    system: <SystemPage />,
+    custom: <CustomPage />,
+    link: <CustomLink />,
+  };
+
+  return (
+    <PageContainer
+      title="春季内购会"
+      tabList={[
+        { tab: '系统页面', key: 'system' },
+        { tab: '自定义页面', key: 'custom' },
+        { tab: '自定义链接', key: 'link' },
+      ]}
+      tabActiveKey={activeTab}
+      onTabChange={(key) => setActiveTab(key)}
+    >
+      {tabContent[activeTab]}
+    </PageContainer>
+  );
+};
+
+export default AddPages;

package/src/pages/activityCenter/activitySystemManagement/index.tsx

@@ -0,0 +1,195 @@
+import React, { useRef, useState } from 'react';
+import { Button, DatePicker, message, Modal, Select, Space } from 'antd';
+import ProTable, { ActionType } from '@ant-design/pro-table';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import AddDrawer from './add';
+
+const ipTagOptions = ['品牌A', '品牌B', '品牌C', '品牌D'];
+
+const ActivitySystemManagement = () => {
+  const navigate = useNavigate();
+  const actionRef = useRef<ActionType>();
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const [editingItem, setEditingItem] = useState(null);
+
+  const handleAdd = () => {
+    setEditingItem(null);
+    setDrawerVisible(true);
+  };
+
+  const handleEdit = (record) => {
+    setEditingItem(record);
+    setDrawerVisible(true);
+  };
+
+  const handleDelete = (record) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: `确定要删除活动「${record.name}」吗？`,
+      onOk: async () => {
+        await axios.post('/api/activity/delete', { id: record.id });
+        message.success('删除成功');
+        actionRef.current?.reload();
+      },
+    });
+  };
+
+  return (
+    <>
+      <ProTable
+        headerTitle="活动系统管理"
+        options={false}
+        actionRef={actionRef}
+        rowKey="id"
+        search={{
+          labelWidth: 'auto',
+          defaultCollapsed: false,
+        }}
+        toolBarRender={() => [
+          <Button key="add" type="primary" onClick={handleAdd}>
+            新建活动
+          </Button>,
+        ]}
+        request={async (params) => {
+          const { data: result } = await axios.get('/api/activity/list', {
+            params,
+          });
+          return {
+            data: result.data.list,
+            total: result.data.total,
+            success: result.success,
+          };
+        }}
+        columns={[
+          { title: '活动id', dataIndex: 'id', search: false, width: 80 },
+          {
+            title: '活动名称',
+            dataIndex: 'name',
+            fieldProps: { placeholder: '请输入' },
+            width: 160,
+          },
+          {
+            title: '活动时间范围',
+            dataIndex: 'timeRange',
+            search: false,
+            width: 220,
+            render: (_, record) => (
+              <div>
+                <div>{record.startTime}</div>
+                <div>{record.endTime}</div>
+              </div>
+            ),
+          },
+          { title: '板块', dataIndex: 'section', search: false, width: 140 },
+          {
+            title: '活动状态',
+            dataIndex: 'status',
+            search: false,
+            width: 100,
+          },
+          {
+            title: '活动开始时间',
+            dataIndex: 'startTime',
+            hideInTable: true,
+            renderFormItem: () => (
+              <DatePicker
+                showTime
+                style={{ width: '100%' }}
+                placeholder="请选择"
+              />
+            ),
+          },
+          {
+            title: '活动结束时间',
+            dataIndex: 'endTime',
+            hideInTable: true,
+            renderFormItem: () => (
+              <DatePicker
+                showTime
+                style={{ width: '100%' }}
+                placeholder="请选择"
+              />
+            ),
+          },
+          {
+            title: '所属板块',
+            dataIndex: 'section',
+            hideInTable: true,
+            fieldProps: { placeholder: '请输入' },
+          },
+          {
+            title: 'ip标签',
+            dataIndex: 'ipTag',
+            hideInTable: true,
+            renderFormItem: () => (
+              <Select
+                mode="multiple"
+                placeholder="请选择"
+                options={ipTagOptions.map((t) => ({ label: t, value: t }))}
+              />
+            ),
+          },
+          {
+            title: '其他标签',
+            dataIndex: 'otherTag',
+            hideInTable: true,
+            fieldProps: { placeholder: '请输入' },
+          },
+          {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            search: false,
+            width: 180,
+          },
+          {
+            title: '操作',
+            valueType: 'option',
+            width: 220,
+            render: (_, record) => (
+              <Space>
+                <Button
+                  type="link"
+                  size="small"
+                  onClick={() => handleEdit(record)}
+                >
+                  编辑
+                </Button>
+                <Button
+                  type="link"
+                  size="small"
+                  onClick={() => navigate('/activityCenter/activitySystemManagement/addPages')}
+                >
+                  添加页面
+                </Button>
+                <Button
+                  type="link"
+                  size="small"
+                  danger
+                  onClick={() => handleDelete(record)}
+                >
+                  删除
+                </Button>
+              </Space>
+            ),
+          },
+        ]}
+      />
+      <AddDrawer
+        visible={drawerVisible}
+        editingItem={editingItem}
+        onClose={() => {
+          setDrawerVisible(false);
+          setEditingItem(null);
+        }}
+        onSuccess={() => {
+          setDrawerVisible(false);
+          setEditingItem(null);
+          actionRef.current?.reload();
+        }}
+      />
+    </>
+  );
+};
+
+export default ActivitySystemManagement;

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "importHelpers": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "baseUrl": "./",
+    "strict": false,
+    "noImplicitAny": false,
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "types": ["node"]
+  },
+  "include": ["mock/**/*", "src/**/*", "typings.d.ts", "vite.*.ts"],
+  "exclude": ["node_modules", "lib", "es", "dist", "typings"]
+}

package/typings.d.ts

@@ -0,0 +1,10 @@
+declare module '*.css';
+declare module '*.less';
+declare module '*.png';
+declare module '*.svg' {
+  export function ReactComponent(
+    props: React.SVGProps<SVGSVGElement>,
+  ): React.ReactElement;
+  const url: string;
+  export default url;
+}

package/vite.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { viteMockServe } from 'vite-plugin-mock';
+import path from 'path';
+
+export default defineConfig(({ command }) => ({
+  plugins: [
+    react(),
+    viteMockServe({
+      mockPath: 'mock',
+      enable: command === 'serve',
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '~antd': path.resolve(__dirname, './node_modules/antd'),
+    },
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+        math: 'always',
+      },
+    },
+  },
+  server: {
+    port: 8000,
+  },
+}));