@lxzy/code-snippet 0.0.8 → 0.0.10

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

@@ -1,39 +1,144 @@
-import React from 'react';
-import { Button } from 'antd';
+import React, { useRef, useState } from 'react';
+import { Button, Modal, Radio, Input, message, Space } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
 import ProTable from '@ant-design/pro-table';
+import { ModalForm } from '@ant-design/pro-form';
 import axios from 'axios';
 
-const CustomLink: React.FC = () => {
+const CustomLink = () => {
+  const actionRef = useRef<any>();
+  const [addVisible, setAddVisible] = useState(false);
+  const [editVisible, setEditVisible] = useState(false);
+  const [editingItem, setEditingItem] = useState(null);
+
+  const handleAdd = async (values) => {
+    await axios.post('/api/activity/customLink/add', values);
+    message.success('新增成功');
+    setAddVisible(false);
+    actionRef.current?.reload();
+    return true;
+  };
+
+  const handleEdit = async (values) => {
+    await axios.post('/api/activity/customLink/update', {
+      ...values,
+      id: editingItem?.id,
+    });
+    message.success('编辑成功');
+    setEditVisible(false);
+    setEditingItem(null);
+    actionRef.current?.reload();
+    return true;
+  };
+
+  const handleDelete = async (record) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: '确定要删除这条自定义链接吗？',
+      onOk: async () => {
+        await axios.post('/api/activity/customLink/delete', { id: record.id });
+        message.success('删除成功');
+        actionRef.current?.reload();
+      },
+    });
+  };
+
+  const getTypeName = (type: number) => {
+    return type === 1 ? '小程序' : 'H5链接';
+  };
+
   return (
     <div>
-      <ProTable
+      <ProTable<any>
         headerTitle={false}
         toolBarRender={() => [
-          <Button key="add" type="primary">新建自定义链接</Button>,
+          <Button
+            key="add"
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => setAddVisible(true)}
+          >
+            新建自定义链接
+          </Button>,
         ]}
+        actionRef={actionRef}
         rowKey="id"
         request={async (params) => {
           const { data: result } = await axios.get('/api/activity/customLinkList', { params });
           return { data: result.data.list, total: result.data.total, success: result.success };
         }}
         columns={[
-          { title: '跳转类型', dataIndex: 'type' },
+          { title: '跳转类型', dataIndex: 'type', render: (_, record) => getTypeName(record.type) },
           { title: '页面路径', dataIndex: 'path' },
           { title: '最近更新时间', dataIndex: 'updateTime' },
           {
             title: '操作',
             valueType: 'option',
-            render: () => (
-              <>
-                <Button type="link" size="small">编辑</Button>
-                <Button type="link" danger size="small">删除</Button>
-              </>
+            render: (_, record) => (
+              <Space>
+                <Button
+                  type="link"
+                  size="small"
+                  onClick={() => {
+                    setEditingItem(record);
+                    setEditVisible(true);
+                  }}
+                >
+                  编辑
+                </Button>
+                <Button type="link" danger size="small" onClick={() => handleDelete(record)}>
+                  删除
+                </Button>
+              </Space>
             ),
           },
         ]}
         pagination={false}
         options={false}
+        search={false}
       />
+
+      <ModalForm
+        title="新建自定义链接"
+        visible={addVisible}
+        onVisibleChange={setAddVisible}
+        onFinish={handleAdd}
+        modalProps={{ destroyOnClose: true }}
+      >
+        <div style={{ marginBottom: 24 }}>
+          <div style={{ marginBottom: 8, fontWeight: 500 }}><span style={{ color: '#ff4d4f' }}>*</span> 跳转类型</div>
+          <Radio.Group name="type" defaultValue={1}>
+            <Radio value={1}>小程序</Radio>
+            <Radio value={2}>H5链接</Radio>
+          </Radio.Group>
+        </div>
+        <div style={{ marginBottom: 24 }}>
+          <div style={{ marginBottom: 8, fontWeight: 500 }}><span style={{ color: '#ff4d4f' }}>*</span> 页面路径</div>
+          <Input name="path" placeholder="请输入页面路径" />
+        </div>
+      </ModalForm>
+
+      <ModalForm
+        title="编辑自定义链接"
+        visible={editVisible}
+        onVisibleChange={setEditVisible}
+        onFinish={handleEdit}
+        initialValues={editingItem ? { type: editingItem.type, path: editingItem.path } : {}}
+        key={editingItem?.id}
+        modalProps={{ destroyOnClose: true }}
+      >
+        <div style={{ marginBottom: 24 }}>
+          <div style={{ marginBottom: 8, fontWeight: 500 }}><span style={{ color: '#ff4d4f' }}>*</span> 跳转类型</div>
+          <Radio.Group name="type">
+            <Radio value={1}>小程序</Radio>
+            <Radio value={2}>H5链接</Radio>
+          </Radio.Group>
+        </div>
+        <div style={{ marginBottom: 24 }}>
+          <div style={{ marginBottom: 8, fontWeight: 500 }}><span style={{ color: '#ff4d4f' }}>*</span> 页面路径</div>
+          <Input name="path" placeholder="请输入页面路径" />
+        </div>
+      </ModalForm>
     </div>
   );
 };

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

@@ -4,9 +4,9 @@ import ProTable from '@ant-design/pro-table';
 import axios from 'axios';
 import ChannelLinkModal from './ChannelLinkModal';
 
-const CustomPage: React.FC = () => {
+const CustomPage = () => {
   const [channelLinkVisible, setChannelLinkVisible] = useState(false);
-  const [currentPage, setCurrentPage] = useState<any>(null);
+  const [currentPage, setCurrentPage] = useState(null);
 
   return (
     <div>

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

@@ -3,7 +3,7 @@ import { Button } from 'antd';
 import ProTable from '@ant-design/pro-table';
 import axios from 'axios';
 
-const SystemPage: React.FC = () => {
+const SystemPage = () => {
   return (
     <div>
       <ProTable

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

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import React, { useEffect, 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 AddPages = () => {
   const [activeTab, setActiveTab] = useState('system');
 
   const tabContent = {

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

@@ -1,14 +1,21 @@
-import React, { useRef, useState } from 'react';
-import { Button, DatePicker, message, Modal, Select, Space } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Button,
+  DatePicker,
+  message,
+  Modal,
+  notification,
+  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';
+import history from '@/umi';
 
 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);
@@ -158,7 +165,11 @@ const ActivitySystemManagement = () => {
                 <Button
                   type="link"
                   size="small"
-                  onClick={() => navigate('/activityCenter/activitySystemManagement/addPages')}
+                  onClick={() =>
+                    history.push(
+                      '/activityCenter/activitySystemManagement/addPages',
+                    )
+                  }
                 >
                   添加页面
                 </Button>

package/src/pages/home.tsx

@@ -0,0 +1,5 @@
+import React, { useState } from 'react';
+
+export default function Home() {
+  return <div>home</div>;
+}

package/src/umi/dispatcher.ts

@@ -0,0 +1,17 @@
+class Dispatcher {
+  data = {};
+  callbacks = {};
+
+  update(namespace) {
+    if (this.callbacks[namespace]) {
+      this.callbacks[namespace].forEach((cb) => cb(this.data[namespace]));
+    }
+  }
+
+  setData(namespace, data) {
+    this.data[namespace] = data;
+    this.update(namespace);
+  }
+}
+
+export default new Dispatcher();

package/src/umi/index.ts

@@ -0,0 +1,7 @@
+import { createHashHistory } from 'history-with-query';
+import { useModel, ModelProvider } from './useModel';
+
+const history = createHashHistory();
+
+export { history, useModel, ModelProvider };
+export default history;

package/src/umi/useModel.tsx

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import dispatcher from './dispatcher';
+
+function useModel(namespace) {
+  const [state, setState] = useState(() => dispatcher.data[namespace]);
+
+  useEffect(() => {
+    const handler = (data) => setState(data);
+    dispatcher.callbacks[namespace] = dispatcher.callbacks[namespace] || [];
+    dispatcher.callbacks[namespace].push(handler);
+    return () => {
+      dispatcher.callbacks[namespace] = dispatcher.callbacks[namespace].filter(
+        (h) => h !== handler,
+      );
+    };
+  }, [namespace]);
+
+  return state;
+}
+
+function Executor(props) {
+  const { hook, namespace } = props;
+  const data = hook();
+  useEffect(() => {
+    dispatcher.setData(namespace, data);
+  }, [data, namespace]);
+  return null;
+}
+
+function ModelProvider(props) {
+  const { children } = props;
+  const modules = import.meta.glob('/src/models/**/*.ts', { eager: true });
+  const modelList = Object.entries(modules)
+    .filter(([path, module]) => {
+      return module && module.default;
+    })
+    .map(([path, module]) => {
+      const namespace = path.replace(/^\/src\/models\//, '').replace(/\.ts$/, '');
+      return { namespace, hook: module.default };
+    });
+
+  return (
+    <>
+      {modelList.map(({ namespace, hook }) => (
+        <Executor key={namespace} hook={hook} namespace={namespace} />
+      ))}
+      {children}
+    </>
+  );
+}
+
+export { useModel, ModelProvider };

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": ["DOM", "ESNext", "DOM.Iterable"],
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "importHelpers": true,
     "jsx": "react-jsx",
@@ -12,12 +13,13 @@
     "strict": false,
     "noImplicitAny": false,
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["src/*"],
+      "umi": ["src/umi"]
     },
     "allowSyntheticDefaultImports": true,
-    "skipLibCheck": true,
-    "types": ["node"]
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "skipLibCheck": true
   },
-  "include": ["mock/**/*", "src/**/*", "typings.d.ts", "vite.*.ts"],
-  "exclude": ["node_modules", "lib", "es", "dist", "typings"]
+  "include": ["mock/**/*", "src/**/*", "routes/**/*", "typings.d.ts", "vite.*.ts"]
 }

package/vite.config.ts

@@ -4,8 +4,14 @@ import { viteMockServe } from 'vite-plugin-mock';
 import path from 'path';
 
 export default defineConfig(({ command }) => ({
+  define: {
+    'process.env': {},
+    'process.env.NODE_ENV': JSON.stringify(
+      command === 'serve' ? 'development' : 'production',
+    ),
+  },
   plugins: [
-    react(),
+    react({}),
     viteMockServe({
       mockPath: 'mock',
       enable: command === 'serve',
@@ -14,6 +20,7 @@ export default defineConfig(({ command }) => ({
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
+      umi: path.resolve(__dirname, './src/umi'),
       '~antd': path.resolve(__dirname, './node_modules/antd'),
     },
     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
@@ -23,10 +30,14 @@ export default defineConfig(({ command }) => ({
       less: {
         javascriptEnabled: true,
         math: 'always',
+        modifyVars: {
+          '@root-entry-name': 'default',
+        },
       },
     },
   },
   server: {
     port: 8000,
+    open: true,
   },
 }));

package/src/ly/chart/index.less

@@ -1,101 +0,0 @@
-.page {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #f5f7fa 0%, #e4ecf7 100%);
-  padding: 32px 24px;
-  box-sizing: border-box;
-}
-
-.header {
-  text-align: center;
-  margin-bottom: 24px;
-
-  h1 {
-    font-size: 28px;
-    font-weight: 700;
-    color: #1a1a2e;
-    margin: 0 0 8px;
-    letter-spacing: 2px;
-  }
-
-  p {
-    font-size: 14px;
-    color: #888;
-    margin: 0;
-  }
-}
-
-.toolbar {
-  max-width: 1400px;
-  margin: 0 auto 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 12px;
-  background: #fff;
-  border-radius: 12px;
-  padding: 14px 20px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
-}
-
-.toolbarLeft {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.toolbarRight {
-  display: flex;
-  align-items: center;
-}
-
-.label {
-  font-size: 14px;
-  color: #555;
-  font-weight: 500;
-}
-
-.info {
-  font-size: 13px;
-  color: #666;
-  background: #f0f5ff;
-  padding: 5px 14px;
-  border-radius: 6px;
-  border: 1px solid #d6e4ff;
-
-  strong {
-    color: #1677ff;
-    font-size: 15px;
-    margin: 0 2px;
-  }
-}
-
-.chartWrapper {
-  max-width: 1400px;
-  margin: 0 auto;
-  background: #fff;
-  border-radius: 16px;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
-  padding: 24px 16px 16px;
-}
-
-.chart {
-  width: 100%;
-  height: 520px;
-}
-
-.tips {
-  max-width: 1400px;
-  margin: 16px auto 0;
-  text-align: center;
-
-  span {
-    display: inline-block;
-    background: #fffbe6;
-    color: #ad6800;
-    font-size: 13px;
-    padding: 8px 20px;
-    border-radius: 8px;
-    border: 1px solid #ffe58f;
-  }
-}