a3:I[903690,["/chat-static/_next/static/immutable/chunks/2dv44dxappuuk.js","/chat-static/_next/static/immutable/chunks/1oa3bat8-m8-8.js","/chat-static/_next/static/immutable/chunks/3hhljswb3xr61.js","/chat-static/_next/static/immutable/chunks/0r3s70ucno8tj.js","/chat-static/_next/static/immutable/chunks/047caungpv2oe.js","/chat-static/_next/static/immutable/chunks/0ur16xcze8_1h.js","/chat-static/_next/static/immutable/chunks/37c0b4etzd24w.js","/chat-static/_next/static/immutable/chunks/17anht-a4gnim.js","/chat-static/_next/static/immutable/chunks/30wqhens5cioe.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/39d5rx2m7s5ra.js","/chat-static/_next/static/immutable/chunks/1pywt1h873bd3.js","/chat-static/_next/static/immutable/chunks/3h47h0tu6ra94.js","/chat-static/_next/static/immutable/chunks/3py7oec8qvsc4.js","/chat-static/_next/static/immutable/chunks/1nfwdr83o8uz6.js","/chat-static/_next/static/immutable/chunks/124-9p7b20n8-.js","/chat-static/_next/static/immutable/chunks/3i83l5x0zfxvu.js","/chat-static/_next/static/immutable/chunks/03sr8-zctjh6i.js","/chat-static/_next/static/immutable/chunks/0f2nmau4qedmf.js","/chat-static/_next/static/immutable/chunks/3ms522oj0w1q6.js","/chat-static/_next/static/immutable/chunks/1eb1rdocf1tga.js","/chat-static/_next/static/immutable/chunks/33g364dont6bc.js","/chat-static/_next/static/immutable/chunks/02yydb8nw8axw.js","/chat-static/_next/static/immutable/chunks/2dfjxmcoo1tp2.js","/chat-static/_next/static/immutable/chunks/1juzrssbfor2n.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/3r6d4w8uj6sbf.js","/chat-static/_next/static/immutable/chunks/0j-1w-w1bwtmq.js","/chat-static/_next/static/immutable/chunks/22zcd0a4pqnpj.js","/chat-static/_next/static/immutable/chunks/1w8d3y23yrgcx.js","/chat-static/_next/static/immutable/chunks/0ffu4on7pnel3.js","/chat-static/_next/static/immutable/chunks/010_gl05brgju.js","/chat-static/_next/static/immutable/chunks/2-ea-d4zcky46.js","/chat-static/_next/static/immutable/chunks/1313h03o0y7tq.js","/chat-static/_next/static/immutable/chunks/0-u2qi7_ipvhl.js","/chat-static/_next/static/immutable/chunks/0l--bazl3wxtg.js","/chat-static/_next/static/immutable/chunks/1_w1a0k3s_k4l.js","/chat-static/_next/static/immutable/chunks/2btv83pt9ymj7.js","/chat-static/_next/static/immutable/chunks/14xmhcwc5tega.js","/chat-static/_next/static/immutable/chunks/43u74n7ep_04-.js","/chat-static/_next/static/immutable/chunks/23pqwf8g6d7y_.js","/chat-static/_next/static/immutable/chunks/390wp66z9uy53.js","/chat-static/_next/static/immutable/chunks/22fm17k3ppj96.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/3af4iuglo00u7.js","/chat-static/_next/static/immutable/chunks/2nsejysme7n9p.js","/chat-static/_next/static/immutable/chunks/3ua-hupun3u5v.js","/chat-static/_next/static/immutable/chunks/16np61ungf97_.js","/chat-static/_next/static/immutable/chunks/0fgd-m5aeb97-.js","/chat-static/_next/static/immutable/chunks/1dyan6tyb3vqy.js","/chat-static/_next/static/immutable/chunks/0ilzxtsq9fh87.js"],"ExplicitChatIdProvider"] a4:I[838238,["/chat-static/_next/static/immutable/chunks/2dv44dxappuuk.js","/chat-static/_next/static/immutable/chunks/1oa3bat8-m8-8.js","/chat-static/_next/static/immutable/chunks/3hhljswb3xr61.js","/chat-static/_next/static/immutable/chunks/0r3s70ucno8tj.js","/chat-static/_next/static/immutable/chunks/047caungpv2oe.js","/chat-static/_next/static/immutable/chunks/0ur16xcze8_1h.js","/chat-static/_next/static/immutable/chunks/37c0b4etzd24w.js","/chat-static/_next/static/immutable/chunks/17anht-a4gnim.js","/chat-static/_next/static/immutable/chunks/30wqhens5cioe.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/39d5rx2m7s5ra.js","/chat-static/_next/static/immutable/chunks/1pywt1h873bd3.js","/chat-static/_next/static/immutable/chunks/3h47h0tu6ra94.js","/chat-static/_next/static/immutable/chunks/3py7oec8qvsc4.js","/chat-static/_next/static/immutable/chunks/1nfwdr83o8uz6.js","/chat-static/_next/static/immutable/chunks/124-9p7b20n8-.js","/chat-static/_next/static/immutable/chunks/3i83l5x0zfxvu.js","/chat-static/_next/static/immutable/chunks/03sr8-zctjh6i.js","/chat-static/_next/static/immutable/chunks/0f2nmau4qedmf.js","/chat-static/_next/static/immutable/chunks/3ms522oj0w1q6.js","/chat-static/_next/static/immutable/chunks/1eb1rdocf1tga.js","/chat-static/_next/static/immutable/chunks/33g364dont6bc.js","/chat-static/_next/static/immutable/chunks/02yydb8nw8axw.js","/chat-static/_next/static/immutable/chunks/2dfjxmcoo1tp2.js","/chat-static/_next/static/immutable/chunks/1juzrssbfor2n.js","/chat-static/_next/static/immutable/chunks/3_zne-oxp3ex8.js","/chat-static/_next/static/immutable/chunks/3r6d4w8uj6sbf.js","/chat-static/_next/static/immutable/chunks/0j-1w-w1bwtmq.js","/chat-static/_next/static/immutable/chunks/22zcd0a4pqnpj.js","/chat-static/_next/static/immutable/chunks/1w8d3y23yrgcx.js","/chat-static/_next/static/immutable/chunks/0ffu4on7pnel3.js","/chat-static/_next/static/immutable/chunks/010_gl05brgju.js","/chat-static/_next/static/immutable/chunks/2-ea-d4zcky46.js","/chat-static/_next/static/immutable/chunks/1313h03o0y7tq.js","/chat-static/_next/static/immutable/chunks/0-u2qi7_ipvhl.js","/chat-static/_next/static/immutable/chunks/0l--bazl3wxtg.js","/chat-static/_next/static/immutable/chunks/1_w1a0k3s_k4l.js","/chat-static/_next/static/immutable/chunks/2btv83pt9ymj7.js","/chat-static/_next/static/immutable/chunks/14xmhcwc5tega.js","/chat-static/_next/static/immutable/chunks/43u74n7ep_04-.js","/chat-static/_next/static/immutable/chunks/23pqwf8g6d7y_.js","/chat-static/_next/static/immutable/chunks/390wp66z9uy53.js","/chat-static/_next/static/immutable/chunks/22fm17k3ppj96.js","/chat-static/_next/static/immutable/chunks/0wa14r29vk-50.js","/chat-static/_next/static/immutable/chunks/3af4iuglo00u7.js","/chat-static/_next/static/immutable/chunks/2nsejysme7n9p.js","/chat-static/_next/static/immutable/chunks/3ua-hupun3u5v.js","/chat-static/_next/static/immutable/chunks/16np61ungf97_.js","/chat-static/_next/static/immutable/chunks/0fgd-m5aeb97-.js","/chat-static/_next/static/immutable/chunks/1dyan6tyb3vqy.js","/chat-static/_next/static/immutable/chunks/0ilzxtsq9fh87.js"],"SWRDataProvider"] a6:[] a7:[["b_OE6NTssF21u",null],["b_ZkDYgktRWBt",null],["b_YnnCNozbRk9",null],["b_lzhZg9qHggI",null],["b_9qFYJzerGhC",null],["b_7QFdvoPfrYR",null],["b_nH5S1vKKhqQ",null],["b_wcVag4Hc2LK",null],["b_pMrDBaVfoux",null],["b_0XSiNZz5xzy",null],["b_ToeMkOIHWzC",null],["b_wEeaMCuSOsy",null]] a8:[["b_OE6NTssF21u",{"templateVersionId":null,"templateCanonId":null}],["b_ZkDYgktRWBt",{"templateVersionId":null,"templateCanonId":null}],["b_YnnCNozbRk9",{"templateVersionId":null,"templateCanonId":null}],["b_lzhZg9qHggI",{"templateVersionId":null,"templateCanonId":null}],["b_9qFYJzerGhC",{"templateVersionId":null,"templateCanonId":null}],["b_7QFdvoPfrYR",{"templateVersionId":null,"templateCanonId":null}],["b_nH5S1vKKhqQ",{"templateVersionId":null,"templateCanonId":null}],["b_wcVag4Hc2LK",{"templateVersionId":null,"templateCanonId":null}],["b_pMrDBaVfoux",{"templateVersionId":null,"templateCanonId":null}],["b_0XSiNZz5xzy",{"templateVersionId":null,"templateCanonId":null}],["b_ToeMkOIHWzC",{"templateVersionId":null,"templateCanonId":null}],["b_wEeaMCuSOsy",{"templateVersionId":null,"templateCanonId":null}]] a9:[["nFxdHRRm4fw","$D2025-04-21T07:10:50.644Z"],["b_fvlihdRUKID","$D2025-04-21T07:12:32.109Z"],["b_Ow7rUatChFI","$D2025-04-21T07:35:04.873Z"],["b_weDsKZpwtm9","$D2025-04-21T07:36:10.968Z"],["b_ISmL4FwfzLA","$D2025-04-21T07:42:32.407Z"],["b_rp2vUoRXXtB","$D2025-04-21T07:49:05.429Z"],["b_RsJC3JccCWv","$D2025-05-07T12:00:07.749Z"],["b_F3ZofudLzOF","$D2025-05-07T12:23:41.276Z"],["b_frEX4ZRjmW8","$D2025-05-07T12:24:43.557Z"],["b_cvKHDSoPBhh","$D2025-05-07T12:31:40.821Z"],["b_glhNCTYnuGd","$D2025-05-07T12:33:51.837Z"],["b_pzCHsLmlQTb","$D2025-05-07T12:48:47.315Z"],["b_EvhfxR8kOe4","$D2025-05-07T12:50:57.934Z"],["b_jZGrRrVjEdP","$D2025-05-07T13:10:51.518Z"],["b_mE8QjM5vGzn","$D2025-05-07T13:21:50.818Z"],["b_1NS8Ea1tdFv","$D2025-05-07T13:30:53.937Z"],["b_QqlDqloiRAH","$D2025-05-07T13:34:34.879Z"],["b_dkjQrldDVK3","$D2025-05-07T22:01:39.523Z"],["b_rb9Bz4K81Qs","$D2025-05-07T22:07:14.345Z"],["b_rnVfCSLvxsu","$D2025-05-07T22:16:35.612Z"],["b_IZNX7UtMAPT","$D2025-05-13T23:22:06.480Z"],["b_donu47dWuyQ","$D2025-05-14T01:21:53.243Z"],["b_rH1VoRse5xM","$D2025-05-14T01:43:02.985Z"],["b_WTsYzIe8mIC","$D2025-05-14T02:35:41.722Z"],["b_dZMYE5zUKQ0","$D2025-05-14T03:04:32.715Z"],["b_kwWbzRh0v83","$D2025-05-24T11:22:52.059Z"],["b_MEjZc6j5O6l","$D2025-05-24T11:37:51.018Z"],["b_PU2wroPvpYM","$D2025-05-24T12:51:10.086Z"],["b_5lA0WavP1cS","$D2025-07-01T04:16:26.575Z"],["b_FUJjvLGSF3p","$D2025-07-18T12:36:53.873Z"],["b_sLfkDiW1EMO","$D2025-07-18T12:45:28.223Z"],["b_pkyeLBuWw61","$D2025-07-18T12:49:53.358Z"],["b_3ah5Qj0BifC","$D2025-07-18T12:53:20.411Z"],["b_wnf8ALLMVDV","$D2025-07-18T13:00:40.997Z"],["b_DDfdnrUgijF","$D2025-07-18T13:01:37.385Z"],["b_ufmyhnyUfyw","$D2025-07-18T13:13:17.829Z"],["b_FDnlEco36BO","$D2025-07-18T13:24:31.294Z"],["b_A0WU9UTqcjk","$D2025-07-18T13:29:56.179Z"],["b_LIBu0DnlUNv","$D2025-07-18T13:31:54.292Z"],["b_PP05aZoWpN3","$D2025-07-18T13:37:15.892Z"],["b_wlvLyp3PiG9","$D2025-07-18T13:52:32.616Z"],["b_d16N8j7njjr","$D2025-07-18T13:55:03.816Z"],["b_3exGirw5b08","$D2025-07-19T02:20:15.062Z"],["b_VydJt8nPQtV","$D2025-07-19T02:27:38.687Z"],["b_lDpEKD3j8N4","$D2025-07-19T02:36:20.443Z"],["b_nRiGxxWCfll","$D2025-07-19T02:55:08.806Z"],["b_KPLYMQRhLhv","$D2025-07-19T07:29:20.476Z"],["b_hEtslQJFKt1","$D2025-07-19T07:39:14.521Z"],["b_0iJ9FabPzZH","$D2025-07-20T23:55:02.479Z"],["b_3jN8KSxZg3P","$D2025-07-20T23:59:10.359Z"],["b_CYx92app9nz","$D2025-07-21T00:03:24.570Z"],["b_Hq0gjzVSBPR","$D2025-07-21T02:40:51.764Z"],["b_E6k1IwXmwyB","$D2025-07-21T02:41:11.042Z"],["b_FAGdnFUzFjB","$D2025-07-21T02:53:05.363Z"],["b_HZJd4Y3GQRW","$D2025-07-21T09:12:13.570Z"],["b_tnO5CwDWAMU","$D2025-07-21T09:30:03.764Z"],["b_cDqrMZtaX8N","$D2025-07-21T09:40:14.297Z"],["b_2oVb2qHaqRo","$D2025-07-21T09:48:27.258Z"],["b_JwYYdfdmeFs","$D2025-07-21T09:51:48.671Z"],["b_0pak4iBia32","$D2025-07-21T09:53:52.233Z"],["b_u0NhSORDRvK","$D2025-07-21T09:55:31.160Z"],["b_gPdKNtx51em","$D2025-07-21T11:50:31.831Z"],["b_Byycp87frWk","$D2025-07-21T11:54:19.895Z"],["b_JRbOmdzTMuP","$D2025-07-21T11:55:18.999Z"],["b_cie9VTNUHUd","$D2025-07-21T11:58:10.230Z"],["b_BapgQq9B5zi","$D2025-07-21T12:04:57.319Z"],["b_XhIZAiyp6TW","$D2025-07-21T12:19:54.597Z"],["b_CAHVqYxsIP0","$D2025-07-21T12:19:55.122Z"],["b_bySWJNyQqnz","$D2025-07-21T12:19:55.853Z"],["b_HwUIqoiRDHX","$D2025-07-21T12:19:56.697Z"],["b_4x6XSDnEJOH","$D2025-07-21T12:19:57.227Z"],["b_blkSgUkDJtf","$D2025-07-22T10:14:49.343Z"],["b_LqFK8rFDFaw","$D2025-07-22T10:29:51.154Z"],["b_drAlvCayRSG","$D2025-07-25T06:44:08.151Z"],["b_ZkQMew7n97S","$D2025-07-28T14:23:49.765Z"],["b_hEu9sgYEKF4","$D2025-07-28T14:50:06.546Z"],["b_smYxuF6cG4J","$D2025-07-28T15:00:03.175Z"],["b_I5J3B3NCrLs","$D2025-07-28T15:07:21.244Z"],["b_kYbC3RFsbA4","$D2025-08-08T01:07:32.543Z"],["b_VGFdl9lw1Iw","$D2025-08-08T01:13:46.722Z"],["b_8TlL8pM8RMy","$D2025-08-08T01:27:05.475Z"],["b_Ey1AagqWjrw","$D2025-08-08T02:06:05.345Z"],["b_I1XMNGp3TH4","$D2025-08-08T02:42:33.078Z"],["b_PfxRxeu6Hhg","$D2025-08-08T03:07:27.549Z"],["b_A5nZ1o1xMEh","$D2025-08-08T03:25:21.109Z"],["b_7GvmLz8BREi","$D2025-08-08T03:41:42.885Z"],["b_BNEgF4uU53M","$D2025-08-08T03:47:18.780Z"],["b_w5SdvQyAVRR","$D2025-08-08T04:06:09.315Z"],["b_8RpzFclmuxG","$D2025-08-08T04:12:25.508Z"],["b_oUTTuK86cun","$D2025-08-08T05:32:55.580Z"],["b_sZWYEG9EXRh","$D2025-08-08T05:41:09.519Z"],["b_dkesapC0psp","$D2025-08-08T05:50:11.684Z"],["b_Nk7tw3zmeuJ","$D2025-08-08T06:36:09.234Z"],["b_BPLeJcXZzVt","$D2025-08-08T07:18:55.782Z"],["b_W3ubsvWGSUF","$D2025-08-08T07:22:44.341Z"],["b_zPXlNvF2SIq","$D2025-08-08T08:06:30.774Z"],["b_rXKZbj0P3Al","$D2025-08-08T11:29:32.928Z"],["b_eSYK4kHaDq4","$D2025-08-08T11:32:29.105Z"],["b_mmHpoqIyvla","$D2025-08-08T11:35:37.045Z"],["b_fBxOYYadzEP","$D2025-08-08T11:40:43.139Z"],["b_1i3bQbErztM","$D2025-08-08T11:45:16.095Z"],["b_0o7TyvBgmIQ","$D2025-09-23T10:35:30.866Z"],["b_pQODvaneI0z","$D2025-09-23T10:35:54.431Z"],["b_vG49P8S410Q","$D2025-11-17T08:39:59.961Z"],["b_7aBXxJ7SRkN","$D2025-11-17T08:42:46.367Z"],["b_BoVxw3DHreX","$D2025-11-17T08:45:54.362Z"],["b_5vJ3UG7iAWn","$D2025-11-17T08:51:09.554Z"],["b_m81qG4SSUTv","$D2025-11-17T08:59:07.899Z"],["b_RM0kap2GIxJ","$D2025-11-21T02:12:34.962Z"],["b_GEERFWeByoY","$D2025-11-21T02:15:33.155Z"],["b_1uyQi3hzx23","$D2025-11-21T02:16:41.944Z"],["b_N9Qwez2rvjA","$D2025-11-21T02:18:10.742Z"],["b_XQip86NTNBU","$D2025-11-21T02:19:33.044Z"],["b_4xDlwh6lFcK","$D2025-11-21T02:19:50.351Z"],["b_fsvQdbLBgsi","$D2025-11-21T02:24:02.802Z"],["b_df1G1XiV1JP","$D2025-12-12T03:56:10.925Z"],["b_0Saw9slN0AB","$D2025-12-12T03:58:23.868Z"],["b_f4wPjzeBWW3","$D2025-12-12T04:01:19.043Z"],["b_kSVjU5JmWr4","$D2025-12-12T04:04:09.471Z"],["b_vYeSeQL5mYQ","$D2025-12-12T04:57:01.887Z"],["b_MKkM8UDbpxD","$D2025-12-12T05:00:26.136Z"],["b_iyyDU3PveT7","$D2025-12-12T05:02:30.735Z"],["b_iEjooHlTwqz","$D2025-12-12T07:34:39.307Z"],["b_7f5CLLFhdQe","$D2025-12-12T07:35:43.154Z"],["b_5qwgaNSwOTB","$D2025-12-12T07:37:19.434Z"],["b_sup2G0Dsrkc","$D2025-12-15T07:18:58.506Z"],["b_CF7PrgIfUz3","$D2025-12-16T03:10:54.729Z"],["b_DyIb2G3NGT0","$D2025-12-16T03:18:20.412Z"],["b_iUE7vptyJQo","$D2025-12-16T03:48:04.824Z"],["b_OE6NTssF21u","$D2025-12-16T06:33:04.735Z"],["b_Evmf1RvGgMb","$D2026-01-31T04:07:25.607Z"],["b_1TFBqY35EGc","$D2026-01-31T04:07:55.658Z"],["b_Pm5SEHUOpw5","$D2026-01-31T04:09:45.811Z"],["b_Ro2hqZwFKdX","$D2026-01-31T04:11:06.808Z"],["b_LaLt5GBLTIG","$D2026-01-31T04:11:33.998Z"],["b_xxbz1kfRGTJ","$D2026-01-31T04:12:32.157Z"],["b_dn5fxHGzBYg","$D2026-01-31T04:13:24.911Z"],["b_BgpokBO5SWN","$D2026-01-31T04:14:07.869Z"],["b_8acwpcPOdwi","$D2026-01-31T04:14:57.950Z"],["b_TSUVokwNpk0","$D2026-01-31T04:15:23.479Z"],["b_ysbrsNjjnNc","$D2026-01-31T04:16:01.586Z"],["b_QqqJ76Ntbdj","$D2026-01-31T04:16:45.152Z"],["b_ZkDYgktRWBt","$D2026-01-31T04:20:41.377Z"],["b_YnnCNozbRk9","$D2026-01-31T04:21:31.839Z"],["b_lzhZg9qHggI","$D2026-01-31T04:23:01.653Z"],["b_9qFYJzerGhC","$D2026-01-31T04:23:57.923Z"],["b_7QFdvoPfrYR","$D2026-01-31T04:25:49.776Z"],["b_nH5S1vKKhqQ","$D2026-01-31T04:27:09.754Z"],["b_wcVag4Hc2LK","$D2026-01-31T04:28:50.118Z"],["b_pMrDBaVfoux","$D2026-01-31T04:30:35.148Z"],["b_0XSiNZz5xzy","$D2026-01-31T04:32:17.355Z"],["b_ToeMkOIHWzC","$D2026-01-31T04:34:26.413Z"],["b_wEeaMCuSOsy","$D2026-01-31T04:37:02.948Z"]] aa:[["b_OE6NTssF21u",false],["b_ZkDYgktRWBt",false],["b_YnnCNozbRk9",false],["b_lzhZg9qHggI",false],["b_9qFYJzerGhC",false],["b_7QFdvoPfrYR",false],["b_nH5S1vKKhqQ",false],["b_wcVag4Hc2LK",false],["b_pMrDBaVfoux",false],["b_0XSiNZz5xzy",false],["b_ToeMkOIHWzC",false],["b_wEeaMCuSOsy",false]] ab:[["b_OE6NTssF21u",{"git":{"ref":"v0/fnvtk-5efaab9c","sha":"178a522f2d43b4d7f82891a14f5f524ee8423e88","type":"github","repoId":0,"repoName":"users","ownerName":"fnvtk","commitMessage":"feat: add missing dialogs and interaction components\n\nImplement all missing dialogs and bind them to respective actions."}}],["b_ZkDYgktRWBt","$undefined"],["b_YnnCNozbRk9","$undefined"],["b_lzhZg9qHggI","$undefined"],["b_9qFYJzerGhC","$undefined"],["b_7QFdvoPfrYR","$undefined"],["b_nH5S1vKKhqQ","$undefined"],["b_wcVag4Hc2LK","$undefined"],["b_pMrDBaVfoux",{"git":{"ref":"v0/fnvtk-5efaab9c","sha":"b17b488f8e2938adbf865f49dfcf1dfc26183e95","type":"github","repoId":0,"repoName":"users","ownerName":"fnvtk","commitMessage":"refactor: restructure navigation and module layout\n\nReorganize navigation and module structure based on new requirements."},"deploymentId":"dpl_Djn9MLYXZ2Zfpf1teMppdZVqyUxd"}],["b_0XSiNZz5xzy","$undefined"],["b_ToeMkOIHWzC","$undefined"],["b_wEeaMCuSOsy",{"git":{"ref":"v0/fnvtk-5efaab9c","sha":"121916652624a4f23b5ba816d10128109db4e3b0","type":"github","repoId":0,"repoName":"users","ownerName":"fnvtk","commitMessage":"refactor: overhaul system navigation based on 5 HTML docs\n\nReorganize modules, add AI Agent smart interaction, include prompt settings, enhance data output with subscriptions, and separate system monitoring."},"deploymentId":"dpl_8PKtf5VEpJLoz3imcwng1arKRHuQ"}]] ac:[["b_OE6NTssF21u",null],["b_ZkDYgktRWBt",null],["b_YnnCNozbRk9",null],["b_lzhZg9qHggI",null],["b_9qFYJzerGhC",null],["b_7QFdvoPfrYR",null],["b_nH5S1vKKhqQ",null],["b_wcVag4Hc2LK",null],["b_pMrDBaVfoux",null],["b_0XSiNZz5xzy",null],["b_ToeMkOIHWzC",null],["b_wEeaMCuSOsy",null]] ad:[["b_OE6NTssF21u",true],["b_ZkDYgktRWBt",true],["b_YnnCNozbRk9",true],["b_lzhZg9qHggI",true],["b_9qFYJzerGhC",true],["b_7QFdvoPfrYR",true],["b_nH5S1vKKhqQ",true],["b_wcVag4Hc2LK",true],["b_pMrDBaVfoux",true],["b_0XSiNZz5xzy",true],["b_ToeMkOIHWzC",true],["b_wEeaMCuSOsy",true]] ae:[["b_OE6NTssF21u",true],["b_ZkDYgktRWBt",true],["b_YnnCNozbRk9",true],["b_lzhZg9qHggI",true],["b_9qFYJzerGhC",true],["b_7QFdvoPfrYR",true],["b_nH5S1vKKhqQ",true],["b_wcVag4Hc2LK",true],["b_pMrDBaVfoux",true],["b_0XSiNZz5xzy",true],["b_ToeMkOIHWzC",true],["b_wEeaMCuSOsy",true]] af:[] b0:T29c83c,[V0_FILE]typescriptreact:file="app/components/Charts.tsx" isQuickEdit="true" isMerged="true" "use client" import { LineChart as RechartsLineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, } from "recharts" import { BarChart as RechartsBarChart, Bar } from "recharts" const lineData = [ { name: "周一", 新增微信号: 12 }, { name: "周二", 新增微信号: 19 }, { name: "周三", 新增微信号: 3 }, { name: "周四", 新增微信号: 5 }, { name: "周五", 新增微信号: 2 }, { name: "周六", 新增微信号: 3 }, { name: "周日", 新增微信号: 10 }, ] const barData = [ { name: "周一", 新增好友: 120 }, { name: "周二", 新增好友: 190 }, { name: "周三", 新增好友: 30 }, { name: "周四", 新增好友: 50 }, { name: "周五", 新增好友: 20 }, { name: "周六", 新增好友: 30 }, { name: "周日", 新增好友: 100 }, ] export function LineChart() { return ( ) } export function BarChart() { return ( ) } [V0_FILE]typescriptreact:file="app/components/CircleSync/TaskSetup.tsx" isMerged="true" "use client" import { useState } from "react" import { Card } from "../ui/card" import { Button } from "../ui/button" import { Input } from "../ui/input" import { Switch } from "../ui/switch" import { Label } from "../ui/label" import { ChevronLeft, ChevronRight, Plus, Minus } from "lucide-react" interface TaskSetupProps { onNext?: () => void onPrev?: () => void step: number } export function TaskSetup({ onNext, onPrev, step }: TaskSetupProps) { const [syncCount, setSyncCount] = useState(5) const [startTime, setStartTime] = useState("06:00") const [endTime, setEndTime] = useState("23:59") const [isEnabled, setIsEnabled] = useState(true) const [accountType, setAccountType] = useState("business") // business or personal return (

朋友圈同步任务

是否启用

任务名称

允许发布的时间段

setStartTime(e.target.value)} className="w-32" /> 至 setEndTime(e.target.value)} className="w-32" />

每日同步数量

{syncCount} 条朋友圈

账号类型

{step > 1 ? ( ) : (

)}

) } [V0_FILE]typescriptreact:file="app/components/CircleSync/DeviceSelector.tsx" isMerged="true" "use client" import { useState } from "react" import { Card } from "../ui/card" import { Button } from "../ui/button" import { Input } from "../ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table" import { ChevronLeft, ChevronRight, Search, Plus } from "lucide-react" interface Device { id: string imei: string status: "online" | "offline" friendStatus: string } const mockDevices: Device[] = [ { id: "1", imei: "123456789012345", status: "online", friendStatus: "正常", }, { id: "2", imei: "987654321098765", status: "offline", friendStatus: "异常", }, ] export function DeviceSelector({ onNext, onPrev }) { const [selectedDevices, setSelectedDevices] = useState([]) return (

选择推送设备

} />

选择设备IMEI/备注/手机号在线状态加友状态操作 {mockDevices.map((device) => ( { if (e.target.checked) { setSelectedDevices([...selectedDevices, device.id]) } else { setSelectedDevices(selectedDevices.filter((id) => id !== device.id)) } }} /> {device.imei} {device.status === "online" ? "在线" : "离线"} {device.friendStatus} ))}

) } [V0_FILE]typescriptreact:file="app/components/CircleSync/ContentSelector.tsx" isMerged="true" "use client" import { useState } from "react" import { Card } from "../ui/card" import { Button } from "../ui/button" import { Input } from "../ui/input" import { ChevronLeft, Search, Plus } from "lucide-react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table" interface ContentLibrary { id: string name: string type: string count: number } const mockLibraries: ContentLibrary[] = [ { id: "1", name: "卡若朋友圈", type: "朋友圈", count: 307, }, { id: "2", name: "业务推广内容", type: "朋友圈", count: 156, }, ] export function ContentSelector({ onPrev, onFinish }) { const [selectedLibraries, setSelectedLibraries] = useState([]) return (

选择内容库

} />

选择内容库名称类型内容数量操作 {mockLibraries.map((library) => ( { if (e.target.checked) { setSelectedLibraries([...selectedLibraries, library.id]) } else { setSelectedLibraries(selectedLibraries.filter((id) => id !== library.id)) } }} /> {library.name} {library.type} {library.count} ))}

) } [V0_FILE]typescriptreact:file="app/components/ui/preview-dialog.tsx" isMerged="true" "use client" import * as React from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./dialog" import { Button } from "./button" import { Eye } from "lucide-react" interface PreviewDialogProps { children: React.ReactNode title?: string } export function PreviewDialog({ children, title = "预览效果" }: PreviewDialogProps) { const [open, setOpen] = React.useState(false) return ( <> ) } [V0_FILE]typescriptreact:file="components/ui/preview-dialog.tsx" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./dialog" import { Button } from "./button" import { Eye } from "lucide-react" interface PreviewDialogProps { children: React.ReactNode title?: string } export function PreviewDialog({ children, title = "预览效果" }: PreviewDialogProps) { const [open, setOpen] = React.useState(false) return ( <> ) } [V0_FILE]typescriptreact:file="components/Charts.tsx" isMerged="true" "use client" import { Line } from "@ant-design/plots" interface LineChartProps { data: { date: string; value: number }[] xField: string yField: string } export function LineChart({ data, xField, yField }: LineChartProps) { const config = { data, xField, yField, smooth: true, color: "#1677ff", point: { size: 4, shape: "circle", style: { fill: "#1677ff", stroke: "#fff", lineWidth: 2, }, }, tooltip: { showMarkers: false, }, state: { active: { style: { shadowBlur: 4, stroke: "#000", fill: "red", }, }, }, interactions: [ { type: "marker-active", }, ], } return } [V0_FILE]typescriptreact:file="app/components/ui/use-toast.tsx" isMerged="true" "use client" import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 1 const TOAST_REMOVE_DELAY = 1000000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_VALUE return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: ToasterToast["id"] } | { type: ActionType["REMOVE_TOAST"] toastId?: ToasterToast["id"] } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: "REMOVE_TOAST", toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: Action): State => { switch (action.type) { case "ADD_TOAST": return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case "UPDATE_TOAST": return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case "DISMISS_TOAST": { const { toastId } = action // ! Side effects ! - This could be extracted into a dismissToast() action, // but I'll keep it here for simplicity if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case "REMOVE_TOAST": if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...props, id }, }) const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, []) // Removed unnecessary dependency: [state] return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="pages/_app.tsx" isMerged="true" import "@/styles/globals.css" import type { AppProps } from "next/app" export default function App({ Component, pageProps }: AppProps) { return } [V0_FILE]typescriptreact:file="app/group-sync/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Plus, Trash2, RefreshCw, MoreVertical, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Checkbox } from "@/components/ui/checkbox" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { format } from "date-fns" import "regenerator-runtime/runtime" interface GroupSync { id: string name: string targetGroup: string contentLib: string creator: string sentCount: number lastSyncTime: Date createTime: Date syncStatus: "pending" | "running" | "completed" enabled: boolean } const mockData: GroupSync[] = [ { id: "1", name: "每日早安问候", targetGroup: "业务交流群1", contentLib: "早安问候语库", creator: "张三", sentCount: 156, lastSyncTime: new Date(), createTime: new Date(), syncStatus: "running", enabled: true, }, { id: "2", name: "周末营销推广", targetGroup: "产品推广群", contentLib: "营销文案库", creator: "李四", sentCount: 89, lastSyncTime: new Date(), createTime: new Date(), syncStatus: "completed", enabled: true, }, ] export default function GroupSyncPage() { const [selectedItems, setSelectedItems] = useState([]) const [searchQuery, setSearchQuery] = useState("") const toggleSelectAll = () => { if (selectedItems.length === mockData.length) { setSelectedItems([]) } else { setSelectedItems(mockData.map((item) => item.id)) } } const toggleSelectItem = (id: string) => { if (selectedItems.includes(id)) { setSelectedItems(selectedItems.filter((item) => item !== id)) } else { setSelectedItems([...selectedItems, id]) } } return (

社群同步

ID 社群同步名称推送社群内容库新建人已推送条数上次推送时间创建时间循环推送启用操作 {mockData.map((item) => ( toggleSelectItem(item.id)} /> {item.id} {item.name} {item.targetGroup} {item.contentLib} {item.creator} {item.sentCount} {format(item.lastSyncTime, "yyyy-MM-dd HH:mm:ss")} {format(item.createTime, "yyyy-MM-dd HH:mm:ss")} {item.syncStatus === "running" ? "进行中" : item.syncStatus === "pending" ? "待执行" : "已完成"} 编辑删除查看详情 ))}

) } [V0_FILE]json:file="tsconfig.json" isMerged="true" { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]typescriptreact:file="app/content/new/page.tsx" isMerged="true" "use client" import { useState } from "react" import { ChevronLeft, X } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Textarea } from "@/components/ui/textarea" import { useRouter } from "next/navigation" import { DateRangePicker } from "@/components/ui/date-range-picker" import { WechatFriendSelector } from "@/components/WechatFriendSelector" import { WechatGroupSelector } from "@/components/WechatGroupSelector" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" interface WechatFriend { id: string nickname: string wechatId: string avatar: string gender: "male" | "female" customer: string } interface WechatGroup { id: string name: string memberCount: number avatar: string owner: string customer: string } export default function NewContentLibraryPage() { const router = useRouter() const [formData, setFormData] = useState({ name: "", sourceType: "friends" as "friends" | "groups", keywordsInclude: "", keywordsExclude: "", startDate: "", endDate: "", selectedFriends: [] as WechatFriend[], selectedGroups: [] as WechatGroup[], useAI: false, aiPrompt: "", enabled: true, }) const [isWechatFriendSelectorOpen, setIsWechatFriendSelectorOpen] = useState(false) const [isWechatGroupSelectorOpen, setIsWechatGroupSelectorOpen] = useState(false) const removeFriend = (friendId: string) => { setFormData((prev) => ({ ...prev, selectedFriends: prev.selectedFriends.filter((friend) => friend.id !== friendId), })) } const removeGroup = (groupId: string) => { setFormData((prev) => ({ ...prev, selectedGroups: prev.selectedGroups.filter((group) => group.id !== groupId), })) } return (

新建内容库

内容库名称 setFormData({ ...formData, name: e.target.value })} placeholder="请输入内容库名称" required className="mt-1.5" />

数据来源配置 setFormData({ ...formData, sourceType: value })} className="mt-1.5" > 选择微信好友选择聊天群 {formData.selectedFriends.length > 0 && (

{formData.selectedFriends.map((friend) => (

{friend.nickname}

))}

)} {formData.selectedGroups.length > 0 && (

{formData.selectedGroups.map((group) => (

{group.name}

))}

)}

关键字设置

关键字匹配

setFormData({ ...formData, keywordsInclude: e.target.value })}
                        placeholder="如果设置了关键字，系统只会采集含有关键字的内容。多个关键字，用半角的','隔开。"
                        className="mt-1.5 min-h-[100px]"
                      />
                    </div>

<div>
                      <Label htmlFor="keywordsExclude" className="text-base">
                        关键字排除
                      </Label>
                      <Textarea
                        id="keywordsExclude"
                        value={formData.keywordsExclude}
                        onChange={(e) => setFormData({ ...formData, keywordsExclude: e.target.value })}
                        placeholder="如果设置了关键字，匹配到关键字的，系统将不会采集。多个关键字，用半角的','隔开。"
                        className="mt-1.5 min-h-[100px]"
                      />
                    </div>
                  </div>
                </AccordionContent>
              </AccordionItem>
            </Accordion>

<div className="flex items-center justify-between">
              <div>
                <Label className="text-base">是否启用AI</Label>
                <p className="text-sm text-gray-500 mt-1">
                  当启用AI之后，该内容库下的所有内容，都会通过AI重新生成内容。
                </p>
              </div>
              <Switch
                checked={formData.useAI}
                onCheckedChange={(checked) => setFormData({ ...formData, useAI: checked })}
              />
            </div>

{formData.useAI && (
              <div>
                <Label htmlFor="aiPrompt" className="text-base">
                  AI 提示词
                </Label>
                <Textarea
                  id="aiPrompt"
                  value={formData.aiPrompt}
                  onChange={(e) => setFormData({ ...formData, aiPrompt: e.target.value })}
                  placeholder="请输入 AI 提示词"
                  className="mt-1.5 min-h-[100px]"
                />
              </div>
            )}

<div>
              <Label className="text-base">时间限制</Label>
              <DateRangePicker
                className="mt-1.5"
                onChange={(range) => {
                  if (range?.from) {
                    setFormData({
                      ...formData,
                      startDate: range.from.toISOString(),
                      endDate: range.to?.toISOString() || "",
                    })
                  }
                }}
              />
            </div>

<div className="flex items-center justify-between">
              <Label className="text-base required">是否启用</Label>
              <Switch
                checked={formData.enabled}
                onCheckedChange={(checked) => setFormData({ ...formData, enabled: checked })}
              />
            </div>
          </div>
        </Card>

<div className="flex gap-4">
          <Button type="button" variant="outline" className="flex-1" onClick={() => router.back()}>
            取消
          </Button>
          <Button type="submit" className="flex-1">
            保存
          </Button>
        </div>
      </div>

<WechatFriendSelector
        open={isWechatFriendSelectorOpen}
        onOpenChange={setIsWechatFriendSelectorOpen}
        selectedFriends={formData.selectedFriends}
        onSelect={(friends) => setFormData({ ...formData, selectedFriends: friends })}
      />

<WechatGroupSelector
        open={isWechatGroupSelectorOpen}
        onOpenChange={setIsWechatGroupSelectorOpen}
        selectedGroups={formData.selectedGroups}
        onSelect={(groups) => setFormData({ ...formData, selectedGroups: groups })}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/content/new/device-selector.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Search, Plus } from "lucide-react"

interface Device {
  id: string
  name: string
  account: string
  status: "online" | "offline"
}

const mockDevices: Device[] = [
  {
    id: "1",
    name: "iPhone 13 Pro",
    account: "wxid_abc123",
    status: "online",
  },
  {
    id: "2",
    name: "Huawei P40",
    account: "wxid_xyz789",
    status: "offline",
  },
]

interface DeviceSelectorProps {
  selectedDevices: string[]
  onChange: (devices: string[]) => void
}

export function DeviceSelector({ selectedDevices, onChange }: DeviceSelectorProps) {
  const [searchQuery, setSearchQuery] = useState("")

const toggleSelectAll = () => {
    if (selectedDevices.length === mockDevices.length) {
      onChange([])
    } else {
      onChange(mockDevices.map((device) => device.id))
    }
  }

const toggleDevice = (deviceId: string) => {
    if (selectedDevices.includes(deviceId)) {
      onChange(selectedDevices.filter((id) => id !== deviceId))
    } else {
      onChange([...selectedDevices, deviceId])
    }
  }

return (
    <Card className="p-4">
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
            <Input
              placeholder="搜索设备"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-9"
            />
          </div>
          <Button className="ml-2" size="sm">
            <Plus className="w-4 h-4 mr-2" />
            添加设备
          </Button>
        </div>

<div className="rounded-md border overflow-hidden">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-12">
                  <Checkbox checked={selectedDevices.length === mockDevices.length} onCheckedChange={toggleSelectAll} />
                </TableHead>
                <TableHead>设备名称</TableHead>
                <TableHead>微信账号</TableHead>
                <TableHead>状态</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {mockDevices.map((device) => (
                <TableRow key={device.id}>
                  <TableCell>
                    <Checkbox
                      checked={selectedDevices.includes(device.id)}
                      onCheckedChange={() => toggleDevice(device.id)}
                    />
                  </TableCell>
                  <TableCell>{device.name}</TableCell>
                  <TableCell>{device.account}</TableCell>
                  <TableCell>
                    <span
                      className={`inline-flex items-center px-2 py-1 rounded-full text-xs ${
                        device.status === "online" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                      }`}
                    >
                      {device.status === "online" ? "在线" : "离线"}
                    </span>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/poster-selector.tsx" isMerged="true"
"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Check } from "lucide-react"

interface PosterTemplate {
  id: string
  title: string
  type: "领取" | "了解"
  imageUrl: string
}

interface PosterSelectorProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSelect: (template: PosterTemplate) => void
}

const templates: PosterTemplate[] = [
  {
    id: "1",
    title: "点击领取",
    type: "领取",
    imageUrl: "/placeholder.svg?height=400&width=300",
  },
  {
    id: "2",
    title: "点击了解",
    type: "了解",
    imageUrl: "/placeholder.svg?height=400&width=300",
  },
  // ... 其他模板
]

export function PosterSelector({ open, onOpenChange, onSelect }: PosterSelectorProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl">
        <DialogHeader>
          <DialogTitle>选择海报</DialogTitle>
        </DialogHeader>

<div>
          <h3 className="text-sm text-gray-500 mb-4">点击下方海报使用该模板</h3>
          <div className="grid grid-cols-3 gap-6">
            {templates.map((template) => (
              <div
                key={template.id}
                className="group relative cursor-pointer"
                onClick={() => {
                  onSelect(template)
                  onOpenChange(false)
                }}
              >
                <div className="aspect-[3/4] rounded-lg overflow-hidden bg-gray-100">
                  <img
                    src={template.imageUrl || "/placeholder.svg"}
                    alt={template.title}
                    className="w-full h-full object-cover transition-transform group-hover:scale-105"
                  />
                </div>
                <div className="absolute inset-0 flex items-center justify-center opacity-0 bg-black/50 group-hover:opacity-100 transition-opacity">
                  <Check className="w-8 h-8 text-white" />
                </div>
                <div className="mt-2 text-center">
                  <div className="font-medium">{template.title}</div>
                  <div className="text-sm text-gray-500">{template.type}类型</div>
                </div>
              </div>
            ))}
          </div>
        </div>

<div className="flex justify-end space-x-2 mt-4">
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            关闭
          </Button>
          <Button>新建海报</Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/poster-selector.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Check } from "lucide-react"

interface PosterTemplate {
  id: string
  title: string
  type: "领取" | "了解"
  imageUrl: string
}

interface PosterSelectorProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSelect: (template: PosterTemplate) => void
}

<div className="flex justify-end space-x-2 mt-4">
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            关闭
          </Button>
          <Button>新建海报</Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/scenarios/api/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Plus, Filter, Search, RefreshCw, MoreVertical, Clock, Copy, Code } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import Link from "next/link"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { toast } from "@/components/ui/use-toast"
import { useRouter } from "next/navigation"
import type { Device } from "@/components/device-grid"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge" // Import Badge component

interface Task {
  id: string
  name: string
  status: "running" | "paused" | "completed"
  stats: {
    devices: number
    customersPerDevice: number
    totalCalls: number
    successCalls: number
    errorCalls: number
    successRate: number
  }
  lastUpdated: string
  executionTime: string
  nextExecutionTime: string
  trend: { date: string; calls: number; success: number }[]
  deviceList: Device[]
  apiInfo: {
    endpoint: string
    method: string
    token: string
  }
}

// 生成随机数据的辅助函数
function generateRandomStats() {
  const devices = Math.floor(Math.random() * 16) + 5
  const customersPerDevice = Math.floor(Math.random() * 11) + 10
  const totalCalls = Math.floor(Math.random() * 1000) + 500
  const successCalls = Math.floor(totalCalls * (Math.random() * 0.3 + 0.6))
  const errorCalls = totalCalls - successCalls

return {
    devices,
    customersPerDevice,
    totalCalls,
    successCalls,
    errorCalls,
    successRate: Math.round((successCalls / totalCalls) * 100),
  }
}

export default function ApiPage() {
  const [tasks, setTasks] = useState<Task[]>([
    {
      id: "1",
      name: "APP加友接口",
      status: "running",
      stats: generateRandomStats(),
      lastUpdated: "2024-02-09 15:30",
      executionTime: "2024-02-09 17:24:10",
      nextExecutionTime: "2024-02-09 17:25:36",
      trend: Array.from({ length: 7 }, (_, i) => ({
        date: `2024-02-${String(i + 1).padStart(2, "0")}`,
        calls: Math.floor(Math.random() * 100) + 50,
        success: Math.floor(Math.random() * 80) + 40,
      })),
      deviceList: [],
      apiInfo: {
        endpoint: "https://api.ckb.quwanzhi.com/api/open/task/addFriend",
        method: "POST",
        token: "ckb_token_xxxxx",
      },
    },
  ])

const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null)
  const [isApiDocsOpen, setIsApiDocsOpen] = useState(false)
  const router = useRouter()

const toggleTaskStatus = (taskId: string) => {
    setTasks(
      tasks.map((task) => {
        if (task.id === taskId) {
          return {
            ...task,
            status: task.status === "running" ? "paused" : "running",
          }
        }
        return task
      }),
    )
  }

const copyTask = (taskId: string) => {
    const taskToCopy = tasks.find((task) => task.id === taskId)
    if (taskToCopy) {
      const newTask = {
        ...taskToCopy,
        id: `${Date.now()}`,
        name: `${taskToCopy.name} (副本)`,
        stats: generateRandomStats(),
        status: "paused" as const,
        lastUpdated: new Date().toLocaleString(),
      }
      setTasks([...tasks, newTask])
      toast({
        title: "复制成功",
        description: "已创建计划副本",
      })
    }
  }

const handleTaskClick = (taskId: string) => {
    router.push(`/scenarios/api/${taskId}/edit`)
  }

const selectedTask = tasks.find((task) => task.id === selectedTaskId)

return (
    <div className="flex-1 bg-gradient-to-b from-violet-50 to-white">
      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
        <div className="flex items-center justify-between p-4">
          <h1 className="text-xl font-semibold text-violet-600">API获客</h1>
          <div className="flex items-center space-x-2">
            <Link href="/scenarios/api/new">
              <Button className="bg-violet-600 hover:bg-violet-700">
                <Plus className="h-4 w-4 mr-2" />
                新建计划
              </Button>
            </Link>
          </div>
        </div>
      </header>

<div className="space-y-4">
          {tasks.map((task) => (
            <Card
              key={task.id}
              className="p-6 hover:shadow-lg transition-all cursor-pointer"
              onClick={() => handleTaskClick(task.id)}
            >
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center space-x-3">
                  <h3 className="font-medium text-lg">{task.name}</h3>
                  <Button
                    variant="ghost"
                    size="sm"
                    className={`px-2 py-1 text-xs rounded-full ${
                      task.status === "running"
                        ? "bg-green-50 text-green-600"
                        : task.status === "paused"
                          ? "bg-yellow-50 text-yellow-600"
                          : "bg-gray-50 text-gray-600"
                    }`}
                    onClick={(e) => {
                      e.stopPropagation()
                      toggleTaskStatus(task.id)
                    }}
                  >
                    {task.status === "running" ? "进行中" : task.status === "paused" ? "已暂停" : "已完成"}
                  </Button>
                </div>
                <div className="flex items-center space-x-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={(e) => {
                      e.stopPropagation()
                      setIsApiDocsOpen(true)
                    }}
                  >
                    <Code className="w-4 h-4 mr-2" />
                    查看文档
                  </Button>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon" onClick={(e) => e.stopPropagation()}>
                        <MoreVertical className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem onClick={() => router.push(`/scenarios/api/${task.id}/edit`)}>
                        编辑计划
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={() => copyTask(task.id)}>
                        <Copy className="w-4 h-4 mr-2" />
                        复制计划
                      </DropdownMenuItem>
                      <DropdownMenuItem>查看详情</DropdownMenuItem>
                      <DropdownMenuItem className="text-red-600">删除计划</DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              </div>

<div className="grid grid-cols-4 gap-4 mb-4">
                <div className="text-center p-3 bg-violet-50 rounded-lg">
                  <div className="text-sm text-gray-500">总调用次数</div>
                  <div className="text-lg font-semibold text-violet-600">{task.stats.totalCalls}</div>
                </div>
                <div className="text-center p-3 bg-violet-50 rounded-lg">
                  <div className="text-sm text-gray-500">成功调用</div>
                  <div className="text-lg font-semibold text-violet-600">{task.stats.successCalls}</div>
                </div>
                <div className="text-center p-3 bg-violet-50 rounded-lg">
                  <div className="text-sm text-gray-500">失败调用</div>
                  <div className="text-lg font-semibold text-violet-600">{task.stats.errorCalls}</div>
                </div>
                <div className="text-center p-3 bg-violet-50 rounded-lg">
                  <div className="text-sm text-gray-500">成功率</div>
                  <div className="text-lg font-semibold text-violet-600">{task.stats.successRate}%</div>
                </div>
              </div>

<div className="flex items-center justify-between text-sm border-t pt-4">
                  <div className="flex items-center space-x-2 text-gray-500">
                    <Clock className="w-4 h-4" />
                    <span>上次执行: {task.executionTime}</span>
                  </div>
                  <div className="flex items-center space-x-2 text-gray-500">
                    <Clock className="w-4 h-4" />
                    <span>下次执��: {task.nextExecutionTime}</span>
                  </div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>

<Dialog open={isApiDocsOpen} onOpenChange={setIsApiDocsOpen}>
        <DialogContent className="max-w-4xl">
          <DialogHeader>
            <DialogTitle>API 文档</DialogTitle>
          </DialogHeader>
          <Tabs defaultValue="overview" className="mt-4">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="overview">概述</TabsTrigger>
              <TabsTrigger value="endpoints">接口列表</TabsTrigger>
              <TabsTrigger value="examples">示例代码</TabsTrigger>
            </TabsList>
            <TabsContent value="overview" className="p-4">
              <div className="space-y-4">
                <h3 className="text-lg font-medium">概述</h3>
                <p className="text-sm text-gray-600">本接口文档依照REST标准，请求头需要添加token作为鉴权。</p>
                <div className="bg-gray-50 p-4 rounded-lg">
                  <p className="text-sm font-medium">基础域名</p>
                  <code className="text-sm text-violet-600">https://api.ckb.quwanzhi.com</code>
                </div>
              </div>
            </TabsContent>
            <TabsContent value="endpoints" className="p-4">
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-medium mb-4">手机微信号加友接口</h3>
                  <div className="space-y-2">
                    <div className="flex items-center space-x-2">
                      <Badge variant="outline">POST</Badge> {/* Badge component used here */}
                      <code className="text-sm">/api/open/task/addFriend</code>
                    </div>
                    <div className="bg-gray-50 p-4 rounded-lg">
                      <p className="text-sm font-medium mb-2">请求参数</p>
                      <table className="w-full text-sm">
                        <thead>
                          <tr className="text-left">
                            <th>名称</th>
                            <th>类型</th>
                            <th>是否必填</th>
                            <th>说明</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>phone</td>
                            <td>string</td>
                            <td>是</td>
                            <td>手机或微信号</td>
                          </tr>
                          <tr>
                            <td>tags</td>
                            <td>string</td>
                            <td>否</td>
                            <td>标签</td>
                          </tr>
                          <tr>
                            <td>taskId</td>
                            <td>int</td>
                            <td>是</td>
                            <td>计划任务ID</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>
            <TabsContent value="examples" className="p-4">
              <div className="space-y-4">
                <h3 className="text-lg font-medium">请求示例</h3>
                <div className="bg-gray-900 text-gray-100 p-4 rounded-lg">
                  <pre className="text-sm">
                    {JSON.stringify(
                      {
                        phone: "18956545898",
                        taskId: 593,
                        tags: "90后,女生,美女",
                      },
                      null,
                      2,
                    )}
                  </pre>
                </div>
                <h3 className="text-lg font-medium">返回示例</h3>
                <div className="bg-gray-900 text-gray-100 p-4 rounded-lg">
                  <pre className="text-sm">
                    {JSON.stringify(
                      {
                        code: 10000,
                        data: null,
                        message: "操作成功",
                      },
                      null,
                      2,
                    )}
                  </pre>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescript:file="hooks/useDeviceStatusPolling.ts" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import type { Device } from "@/components/device-grid"

interface DeviceStatus {
  status: "online" | "offline"
  battery: number
}

async function fetchDeviceStatuses(deviceIds: string[]): Promise<Record<string, DeviceStatus>> {
  // 模拟API调用
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return deviceIds.reduce(
    (acc, id) => {
      acc[id] = {
        status: Math.random() > 0.3 ? "online" : "offline",
        battery: Math.floor(Math.random() * 100),
      }
      return acc
    },
    {} as Record<string, DeviceStatus>,
  )
}

export function useDeviceStatusPolling(devices: Device[]) {
  const [statuses, setStatuses] = useState<Record<string, DeviceStatus>>({})

useEffect(() => {
    const pollStatus = async () => {
      try {
        const newStatuses = await fetchDeviceStatuses(devices.map((d) => d.id))
        setStatuses((prevStatuses) => ({ ...prevStatuses, ...newStatuses }))
      } catch (error) {
        console.error("Failed to fetch device statuses:", error)
      }
    }

pollStatus() // 立即执行一次
    const intervalId = setInterval(pollStatus, 30000) // 每30秒更新一次

return () => clearInterval(intervalId)
  }, [devices])

return statuses
}
[V0_FILE]typescript:file="app/hooks/useDeviceStatusPolling.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import type { Device } from "@/components/device-grid"

interface DeviceStatus {
  status: "online" | "offline"
  battery: number
}

export function useDeviceStatusPolling(devices: Device[]) {
  const [statuses, setStatuses] = useState<Record<string, DeviceStatus>>({})

pollStatus() // 立即执行一次
    const intervalId = setInterval(pollStatus, 30000) // 每30秒更新一次

return () => clearInterval(intervalId)
  }, [devices])

return statuses
}
[V0_FILE]typescript:file="lib/tutorials.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import type { PageTutorial, TutorialVideo } from "@/types/tutorial"

// 模拟后台配置的教程视频数据
export const tutorialConfig: PageTutorial[] = [
  {
    pageId: "home",
    videos: [
      {
        id: "home-intro",
        title: "存客宝使用介绍",
        description: "了解存客宝的主要功能和基本操作流程",
        url: "/videos/home-intro.mp4",
        thumbnailUrl: "/placeholder.svg?height=360&width=640",
      },
    ],
  },
  {
    pageId: "scenarios/xiaohongshu",
    videos: [
      {
        id: "xiaohongshu-intro",
        title: "小红书获客功能介绍",
        description: "学习如何使用小红书场景获取精准客户",
        url: "/videos/xiaohongshu-intro.mp4",
        thumbnailUrl: "/placeholder.svg?height=360&width=640",
      },
      {
        id: "xiaohongshu-setup",
        title: "小红书获客配置教程",
        description: "详细了解小红书获客的各项配置选项",
        url: "/videos/xiaohongshu-setup.mp4",
        thumbnailUrl: "/placeholder.svg?height=360&width=640",
      },
    ],
  },
  {
    pageId: "scenarios/douyin",
    videos: [
      {
        id: "douyin-intro",
        title: "抖音获客功能介绍",
        description: "学习如何使用抖音场景获取精准客户",
        url: "/videos/douyin-intro.mp4",
        thumbnailUrl: "/placeholder.svg?height=360&width=640",
      },
    ],
  },
  // ... 其他页面的视频配置
]

export function getPageTutorials(path: string): TutorialVideo[] {
  // 移除开头的斜杠并标准化路径
  const normalizedPath = path.replace(/^\/+/, "")

// 查找匹配的页面教程
  const pageTutorial = tutorialConfig.find((config) => normalizedPath.startsWith(config.pageId))

return pageTutorial?.videos || []
}
[V0_FILE]typescript:file="components/AIAssistant.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { usePathname } from "next/navigation"
import { Dialog, DialogContent } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Video, Play } from "lucide-react"
import { getPageTutorials } from "@/lib/tutorials"
import type { TutorialVideo } from "@/types/tutorial"

export function AIAssistant() {
  const pathname = usePathname()
  const [isOpen, setIsOpen] = useState(false)
  const [tutorials, setTutorials] = useState<TutorialVideo[]>([])
  const [selectedVideo, setSelectedVideo] = useState<TutorialVideo | null>(null)

useEffect(() => {
    // 获取当前页面的教程视频
    const pageTutorials = getPageTutorials(pathname)
    setTutorials(pageTutorials)
    setSelectedVideo(pageTutorials[0] || null)
  }, [pathname])

const handleOpenDialog = () => {
    setIsOpen(true)
  }

return (
    <>
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <Button
          size="icon"
          className="fixed bottom-20 right-4 h-12 w-12 rounded-full shadow-lg bg-white hover:bg-gray-50 border z-50"
          onClick={handleOpenDialog}
        >
          <Video className="h-5 w-5 text-gray-600" />
        </Button>
        <DialogContent className="sm:max-w-[640px] p-0">
          <ScrollArea className="h-[480px]">
            <div className="space-y-4">
              {selectedVideo ? (
                <div>
                  <div className="aspect-video bg-gray-900 relative">
                    <img
                      src={selectedVideo.thumbnailUrl || "/placeholder.svg"}
                      alt={selectedVideo.title}
                      className="absolute inset-0 w-full h-full object-cover"
                    />
                    <div className="absolute inset-0 flex items-center justify-center">
                      <Button
                        size="icon"
                        variant="ghost"
                        className="w-16 h-16 rounded-full bg-white/10 hover:bg-white/20"
                      >
                        <Play className="h-8 w-8 text-white" />
                      </Button>
                    </div>
                  </div>
                  <div className="p-4">
                    <h3 className="text-lg font-semibold">{selectedVideo.title}</h3>
                    <p className="text-sm text-gray-500 mt-1">{selectedVideo.description}</p>
                  </div>
                </div>
              ) : (
                <div className="text-center py-8 text-gray-500">暂无该页面的教程视频</div>
              )}

{tutorials.length > 1 && (
                <div className="p-4 border-t">
                  <h4 className="font-medium mb-4">更多教程视频</h4>
                  <div className="grid grid-cols-2 gap-4">
                    {tutorials
                      .filter((video) => video.id !== selectedVideo?.id)
                      .map((video) => (
                        <div
                          key={video.id}
                          className="cursor-pointer hover:opacity-80"
                          onClick={() => setSelectedVideo(video)}
                        >
                          <div className="aspect-video bg-gray-100 rounded-lg relative overflow-hidden">
                            <img
                              src={video.thumbnailUrl || "/placeholder.svg"}
                              alt={video.title}
                              className="absolute inset-0 w-full h-full object-cover"
                            />
                            <div className="absolute inset-0 flex items-center justify-center">
                              <Play className="h-6 w-6 text-white" />
                            </div>
                          </div>
                          <h5 className="text-sm font-medium mt-2">{video.title}</h5>
                        </div>
                      ))}
                  </div>
                </div>
              )}
            </div>
          </ScrollArea>
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescript:file="components/device-grid.tsx" isMerged="true"
"use client"

import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Smartphone, Battery, Users, MessageCircle } from "lucide-react"
import { Checkbox } from "@/components/ui/checkbox"

export interface Device {
  id: string
  imei: string
  name: string
  remark: string
  status: "online" | "offline"
  battery: number
  wechatId: string
  friendCount: number
  todayAdded: number
  messageCount: number
  lastActive: string
  addFriendStatus: "normal" | "abnormal"
}

interface DeviceGridProps {
  devices: Device[]
  selectable?: boolean
  selectedDevices?: string[]
  onSelect?: (deviceIds: string[]) => void
  deviceStatuses?: Record<string, { status: "online" | "offline"; battery: number }>
}

export function DeviceGrid({ devices, selectable, selectedDevices, onSelect, deviceStatuses }: DeviceGridProps) {
  return (
    <div className="grid grid-cols-2 gap-4">
      {devices.map((device) => {
        const currentStatus = deviceStatuses?.[device.id] || device
        return (
          <Card
            key={device.id}
            className={`p-4 relative ${selectable && selectedDevices?.includes(device.id) ? "ring-2 ring-blue-500" : ""}`}
          >
            {selectable && (
              <div className="absolute top-2 left-2">
                <Checkbox
                  checked={selectedDevices?.includes(device.id)}
                  onCheckedChange={(checked) => {
                    if (checked) {
                      onSelect?.([...(selectedDevices ?? []), device.id])
                    } else {
                      onSelect?.(selectedDevices?.filter((id) => id !== device.id) ?? [])
                    }
                  }}
                />
              </div>
            )}
            <div className="flex flex-col space-y-4">
              <div className="flex items-center justify-between">
                <Badge variant={currentStatus.status === "online" ? "success" : "secondary"}>
                  {currentStatus.status === "online" ? "在线" : "离线"}
                </Badge>
                <div className="flex items-center space-x-2">
                  <Battery className={`w-4 h-4 ${currentStatus.battery < 20 ? "text-red-500" : "text-green-500"}`} />
                  <span className="text-sm">{currentStatus.battery}%</span>
                </div>
              </div>

<div className="space-y-2">
                <div className="flex items-center space-x-2">
                  <Smartphone className="w-4 h-4 text-gray-400" />
                  <div>
                    <div className="text-sm font-medium">{device.name}</div>
                    <div className="text-xs text-gray-500">IMEI-{device.imei}</div>
                  </div>
                </div>
                {device.remark && <div className="text-xs text-gray-500">备注: {device.remark}</div>}
              </div>

<div className="grid grid-cols-2 gap-2">
                <div className="flex items-center space-x-1">
                  <Users className="w-4 h-4 text-gray-400" />
                  <span className="text-sm">{device.friendCount}</span>
                </div>
                <div className="flex items-center space-x-1">
                  <MessageCircle className="w-4 h-4 text-gray-400" />
                  <span className="text-sm">{device.messageCount}</span>
                </div>
              </div>

<div className="text-xs text-gray-500">
                <div>微信号：{device.wechatId}</div>
                <div>今日添加：{device.todayAdded}</div>
                <div>
                  加友状态：
                  <Badge variant={device.addFriendStatus === "normal" ? "success" : "destructive"}>
                    {device.addFriendStatus === "normal" ? "正常" : "异常"}
                  </Badge>
                </div>
              </div>
            </div>
          </Card>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/VideoTutorialButton.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Play, Video } from "lucide-react"
import { usePathname } from "next/navigation"
import { getPageTutorials } from "@/lib/tutorials"

export function VideoTutorialButton() {
  const [isOpen, setIsOpen] = useState(false)
  const pathname = usePathname()
  const tutorials = getPageTutorials(pathname)

const handleOpenDialog = () => {
    setIsOpen(true)
  }

return (
    <>
      <Button
        size="icon"
        className="fixed bottom-20 right-4 h-12 w-12 rounded-full shadow-lg bg-white hover:bg-gray-50 border z-50"
        onClick={handleOpenDialog}
      >
        <Video className="h-5 w-5 text-gray-600" />
      </Button>
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogContent className="sm:max-w-[640px] p-0">
          <DialogHeader>
            <DialogTitle className="p-4 border-b">视频教程</DialogTitle>
          </DialogHeader>
          <div className="p-4">
            {tutorials.length > 0 ? (
              <div className="space-y-4">
                {tutorials.map((tutorial) => (
                  <div key={tutorial.id} className="flex items-center space-x-4">
                    <div className="w-24 h-16 bg-gray-200 rounded-lg relative overflow-hidden">
                      <img
                        src={tutorial.thumbnailUrl || "/placeholder.svg"}
                        alt={tutorial.title}
                        className="absolute inset-0 w-full h-full object-cover"
                      />
                      <div className="absolute inset-0 flex items-center justify-center">
                        <Play className="w-8 h-8 text-white" />
                      </div>
                    </div>
                    <div className="flex-1">
                      <h3 className="font-medium">{tutorial.title}</h3>
                      <p className="text-sm text-gray-500">{tutorial.description}</p>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center py-8 text-gray-500">暂无该页面的教程视频</div>
            )}
          </div>
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/devices/[id]/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ChevronLeft, Smartphone, Battery, Wifi, MessageCircle, Users, Settings, History } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { ScrollArea } from "@/components/ui/scroll-area"

interface WechatAccount {
  id: string
  avatar: string
  nickname: string
  wechatId: string
  gender: "male" | "female"
  status: "normal" | "abnormal"
  addFriendStatus: "enabled" | "disabled"
  friendCount: number
  lastActive: string
}

interface Device {
  id: string
  imei: string
  name: string
  status: "online" | "offline"
  battery: number
  lastActive: string
  historicalIds: string[]
  wechatAccounts: WechatAccount[]
  features: {
    autoAddFriend: boolean
    autoReply: boolean
    contentSync: boolean
    aiChat: boolean
  }
  history: {
    time: string
    action: string
    operator: string
  }[]
}

export default function DeviceDetailPage() {
  const params = useParams()
  const router = useRouter()
  const [device, setDevice] = useState<Device | null>(null)
  const [activeTab, setActiveTab] = useState("info")

useEffect(() => {
    // 模拟API调用
    const mockDevice: Device = {
      id: params.id as string,
      imei: "sd123123",
      name: "设备 1",
      status: "online",
      battery: 85,
      lastActive: "2024-02-09 15:30:45",
      historicalIds: ["vx412321", "vfbadasd"],
      wechatAccounts: [
        {
          id: "1",
          avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-q2rVrFbfDdAbSnT3ZTNE7gfn3QCbvr.png",
          nickname: "老张",
          wechatId: "wxid_abc123",
          gender: "male",
          status: "normal",
          addFriendStatus: "enabled",
          friendCount: 523,
          lastActive: "2024-02-09 15:20:33",
        },
        {
          id: "2",
          avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-q2rVrFbfDdAbSnT3ZTNE7gfn3QCbvr.png",
          nickname: "老李",
          wechatId: "wxid_xyz789",
          gender: "male",
          status: "abnormal",
          addFriendStatus: "disabled",
          friendCount: 245,
          lastActive: "2024-02-09 14:15:22",
        },
      ],
      features: {
        autoAddFriend: true,
        autoReply: true,
        contentSync: false,
        aiChat: true,
      },
      history: [
        {
          time: "2024-02-09 15:30:45",
          action: "开启自动加好友",
          operator: "系统",
        },
        {
          time: "2024-02-09 14:20:33",
          action: "添加微信号",
          operator: "管理员",
        },
      ],
    }
    setDevice(mockDevice)
  }, [params.id])

if (!device) {
    return <div>加载中...</div>
  }

return (
    <div className="flex-1 bg-gray-50 min-h-screen">
      <div className="max-w-[390px] mx-auto bg-white">
        <header className="sticky top-0 z-10 bg-white border-b">
          <div className="flex items-center justify-between p-4">
            <div className="flex items-center space-x-3">
              <Button variant="ghost" size="icon" onClick={() => router.back()}>
                <ChevronLeft className="h-5 w-5" />
              </Button>
              <h1 className="text-lg font-medium">设备详情</h1>
            </div>
            <Button variant="ghost" size="icon">
              <Settings className="h-5 w-5" />
            </Button>
          </div>
        </header>

<div className="p-4 space-y-4">
          <Card className="p-4">
            <div className="flex items-center space-x-4">
              <div className="p-3 bg-blue-50 rounded-lg">
                <Smartphone className="h-6 w-6 text-blue-600" />
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between">
                  <h2 className="font-medium truncate">{device.name}</h2>
                  <Badge variant={device.status === "online" ? "success" : "secondary"}>
                    {device.status === "online" ? "在线" : "离线"}
                  </Badge>
                </div>
                <div className="text-sm text-gray-500 mt-1">IMEI: {device.imei}</div>
                <div className="text-sm text-gray-500">历史ID: {device.historicalIds.join(", ")}</div>
              </div>
            </div>
            <div className="mt-4 grid grid-cols-2 gap-4">
              <div className="flex items-center space-x-2">
                <Battery className={`w-4 h-4 ${device.battery < 20 ? "text-red-500" : "text-green-500"}`} />
                <span className="text-sm">{device.battery}%</span>
              </div>
              <div className="flex items-center space-x-2">
                <Wifi className="w-4 h-4 text-blue-500" />
                <span className="text-sm">{device.status === "online" ? "已连接" : "未连接"}</span>
              </div>
            </div>
            <div className="mt-2 text-sm text-gray-500">最后活跃：{device.lastActive}</div>
          </Card>

<TabsContent value="info">
              <Card className="p-4 space-y-4">
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>自动加好友</Label>
                      <div className="text-sm text-gray-500">自动通过好友验证</div>
                    </div>
                    <Switch checked={device.features.autoAddFriend} />
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>自动回复</Label>
                      <div className="text-sm text-gray-500">自动回复好友消息</div>
                    </div>
                    <Switch checked={device.features.autoReply} />
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>朋友圈同步</Label>
                      <div className="text-sm text-gray-500">自动同步朋友圈内容</div>
                    </div>
                    <Switch checked={device.features.contentSync} />
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <Label>AI会话</Label>
                      <div className="text-sm text-gray-500">启用AI智能对话</div>
                    </div>
                    <Switch checked={device.features.aiChat} />
                  </div>
                </div>
              </Card>
            </TabsContent>

<TabsContent value="accounts">
              <Card className="p-4">
                <ScrollArea className="h-[calc(100vh-300px)]">
                  <div className="space-y-4">
                    {device.wechatAccounts.map((account) => (
                      <div key={account.id} className="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg">
                        <img
                          src={account.avatar || "/placeholder.svg"}
                          alt={account.nickname}
                          className="w-12 h-12 rounded-full"
                        />
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center justify-between">
                            <div className="font-medium truncate">{account.nickname}</div>
                            <Badge variant={account.status === "normal" ? "success" : "destructive"}>
                              {account.status === "normal" ? "正常" : "异常"}
                            </Badge>
                          </div>
                          <div className="text-sm text-gray-500 mt-1">微信号: {account.wechatId}</div>
                          <div className="text-sm text-gray-500">性别: {account.gender === "male" ? "男" : "女"}</div>
                          <div className="flex items-center justify-between mt-2">
                            <span className="text-sm text-gray-500">好友数: {account.friendCount}</span>
                            <Badge variant={account.addFriendStatus === "enabled" ? "outline" : "secondary"}>
                              {account.addFriendStatus === "enabled" ? "可加友" : "已停用"}
                            </Badge>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </ScrollArea>
              </Card>
            </TabsContent>

<TabsContent value="history">
              <Card className="p-4">
                <ScrollArea className="h-[calc(100vh-300px)]">
                  <div className="space-y-4">
                    {device.history.map((record, index) => (
                      <div key={index} className="flex items-start space-x-3">
                        <div className="p-2 bg-blue-50 rounded-full">
                          <History className="w-4 h-4 text-blue-600" />
                        </div>
                        <div className="flex-1">
                          <div className="text-sm font-medium">{record.action}</div>
                          <div className="text-xs text-gray-500 mt-1">
                            操作人: {record.operator} · {record.time}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </ScrollArea>
              </Card>
            </TabsContent>
          </Tabs>

<div className="grid grid-cols-2 gap-4">
            <Card className="p-4">
              <div className="flex items-center space-x-2 text-gray-500">
                <Users className="w-4 h-4" />
                <span className="text-sm">好友总数</span>
              </div>
              <div className="text-2xl font-bold text-blue-600 mt-2">
                {device?.wechatAccounts?.reduce((sum, account) => sum + account.friendCount, 0)}
              </div>
            </Card>
            <Card className="p-4">
              <div className="flex items-center space-x-2 text-gray-500">
                <MessageCircle className="w-4 h-4" />
                <span className="text-sm">消息数量</span>
              </div>
              <div className="text-2xl font-bold text-blue-600 mt-2">5,678</div>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/traffic-pool/components/date-range-picker.tsx" isMerged="true"
"use client"
import { CalendarIcon } from "lucide-react"
import type { DateRange } from "react-day-picker"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { format } from "date-fns"

interface DateRangePickerProps {
  className?: string
  value?: DateRange
  onChange?: (date: DateRange | undefined) => void
}

export function DateRangePicker({ className, value, onChange }: DateRangePickerProps) {
  return (
    <div className={cn("grid gap-2", className)}>
      <Popover>
        <PopoverTrigger asChild>
          <Button
            id="date"
            variant={"outline"}
            className={cn("w-[300px] justify-start text-left font-normal", !value && "text-muted-foreground")}
          >
            <CalendarIcon className="mr-2 h-4 w-4" />
            {value?.from ? (
              value.to ? (
                <>
                  {format(value.from, "LLL dd, y")} - {format(value.to, "LLL dd, y")}
                </>
              ) : (
                format(value.from, "LLL dd, y")
              )
            ) : (
              <span>选择日期范围</span>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          <Calendar
            initialFocus
            mode="range"
            defaultMonth={value?.from}
            selected={value}
            onSelect={onChange}
            numberOfMonths={2}
          />
        </PopoverContent>
      </Popover>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/traffic-pool/components/pool-usage-chart.tsx" isMerged="true"
"use client"

import { Card } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"

interface PoolUsageChartProps {
  deviceStats: {
    [key: string]: number
  }
  poolLimit: number
}

export function PoolUsageChart({ deviceStats, poolLimit }: PoolUsageChartProps) {
  return (
    <Card className="p-3">
      <h3 className="text-sm font-medium mb-2">设备流量池使用情况</h3>
      <div className="space-y-3">
        {Object.entries(deviceStats).map(([device, count]) => (
          <div key={device} className="space-y-1">
            <div className="flex justify-between text-xs">
              <span>设备{device}</span>
              <span className="text-gray-500">
                {count}/{poolLimit}
              </span>
            </div>
            <Progress value={(count / poolLimit) * 100} />
          </div>
        ))}
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/BindDouyinQRCode.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { QrCode } from "lucide-react"

export function BindDouyinQRCode() {
  const [isOpen, setIsOpen] = useState(false)

return (
    <>
      <Button variant="ghost" size="icon" onClick={() => setIsOpen(true)}>
        <QrCode className="h-4 w-4" />
      </Button>
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>绑定抖音号</DialogTitle>
          </DialogHeader>
          <div className="flex flex-col items-center p-4">
            <div className="w-64 h-64 bg-gray-100 rounded-lg flex items-center justify-center">
              <img src="/placeholder.svg?height=256&width=256" alt="抖音二维码" className="w-full h-full" />
            </div>
            <p className="mt-4 text-sm text-gray-600">请使用抖音APP扫描二维码进行绑定</p>
          </div>
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/BindDouyinQRCode.tsx" isQuickEdit="true" isMerged="true"
"use client"

export function BindDouyinQRCode() {
  const [isOpen, setIsOpen] = useState(false)

return (
    <>
      <Button variant="ghost" size="icon" onClick={() => setIsOpen(true)}>
        <QrCode className="h-4 w-4" />
      </Button>
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>绑定抖音号</DialogTitle>
          </DialogHeader>
          <div className="flex flex-col items-center p-4">
            <div className="w-64 h-64 bg-gray-100 rounded-lg flex items-center justify-center">
              <img src="/placeholder.svg?height=256&width=256" alt="抖音二维码" className="w-full h-full" />
            </div>
            <p className="mt-4 text-sm text-gray-600">请使用抖音APP扫描二维码进行绑定</p>
          </div>
        </DialogContent>
      </Dialog>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/components/TrafficTeamSettings.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Plus, Pencil, Trash2 } from "lucide-react"

interface TrafficTeam {
  id: string
  name: string
  commission: number
}

interface TrafficTeamSettingsProps {
  formData: any
  onChange: (data: any) => void
}

export function TrafficTeamSettings({ formData, onChange }: TrafficTeamSettingsProps) {
  const [teams, setTeams] = useState<TrafficTeam[]>(formData.trafficTeams || [])
  const [isAddTeamOpen, setIsAddTeamOpen] = useState(false)
  const [editingTeam, setEditingTeam] = useState<TrafficTeam | null>(null)
  const [newTeam, setNewTeam] = useState<Partial<TrafficTeam>>({
    name: "",
    commission: 0,
  })

const handleAddTeam = () => {
    if (!newTeam.name) return

if (editingTeam) {
      setTeams(teams.map((team) => (team.id === editingTeam.id ? { ...team, ...newTeam } : team)))
    } else {
      setTeams([
        ...teams,
        {
          id: Date.now().toString(),
          name: newTeam.name,
          commission: newTeam.commission || 0,
        },
      ])
    }

setIsAddTeamOpen(false)
    setNewTeam({ name: "", commission: 0 })
    setEditingTeam(null)
    onChange({ ...formData, trafficTeams: teams })
  }

const handleEditTeam = (team: TrafficTeam) => {
    setEditingTeam(team)
    setNewTeam(team)
    setIsAddTeamOpen(true)
  }

const handleDeleteTeam = (teamId: string) => {
    setTeams(teams.filter((team) => team.id !== teamId))
    onChange({ ...formData, trafficTeams: teams.filter((team) => team.id !== teamId) })
  }

return (
    <Card className="p-6">
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <h2 className="text-lg font-semibold">打粉团队设置</h2>
          <Button onClick={() => setIsAddTeamOpen(true)}>
            <Plus className="h-4 w-4 mr-2" />
            添加团队
          </Button>
        </div>

<div className="border rounded-lg">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>团队名称</TableHead>
                <TableHead>佣金比例</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {teams.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={3} className="text-center py-8 text-gray-500">
                    暂无数据
                  </TableCell>
                </TableRow>
              ) : (
                teams.map((team) => (
                  <TableRow key={team.id}>
                    <TableCell>{team.name}</TableCell>
                    <TableCell>{team.commission}%</TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end space-x-2">
                        <Button variant="ghost" size="sm" onClick={() => handleEditTeam(team)}>
                          <Pencil className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="sm" onClick={() => handleDeleteTeam(team.id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>
      </div>

<Dialog open={isAddTeamOpen} onOpenChange={setIsAddTeamOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{editingTeam ? "编辑团队" : "添加团队"}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>团队名称</Label>
              <Input
                value={newTeam.name}
                onChange={(e) => setNewTeam({ ...newTeam, name: e.target.value })}
                placeholder="请输入团队名称"
              />
            </div>
            <div className="space-y-2">
              <Label>佣金比例 (%)</Label>
              <Input
                type="number"
                value={newTeam.commission}
                onChange={(e) => setNewTeam({ ...newTeam, commission: Number(e.target.value) })}
                placeholder="请输入佣金比例"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsAddTeamOpen(false)}>
              取消
            </Button>
            <Button onClick={handleAddTeam}>{editingTeam ? "保存" : "添加"}</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/TrafficTeamSettings.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Plus, Pencil, Trash2 } from "lucide-react"

interface TrafficTeam {
  id: string
  name: string
  commission: number
}

interface TrafficTeamSettingsProps {
  formData: any
  onChange: (data: any) => void
}

const handleAddTeam = () => {
    if (!newTeam.name) return

setIsAddTeamOpen(false)
    setNewTeam({ name: "", commission: 0 })
    setEditingTeam(null)
    onChange({ ...formData, trafficTeams: teams })
  }

const handleEditTeam = (team: TrafficTeam) => {
    setEditingTeam(team)
    setNewTeam(team)
    setIsAddTeamOpen(true)
  }

const handleDeleteTeam = (teamId: string) => {
    setTeams(teams.filter((team) => team.id !== teamId))
    onChange({ ...formData, trafficTeams: teams.filter((team) => team.id !== teamId) })
  }

<Dialog open={isAddTeamOpen} onOpenChange={setIsAddTeamOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{editingTeam ? "编辑团队" : "添加团队"}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>团队名称</Label>
              <Input
                value={newTeam.name}
                onChange={(e) => setNewTeam({ ...newTeam, name: e.target.value })}
                placeholder="请输入团队名称"
              />
            </div>
            <div className="space-y-2">
              <Label>佣金比例 (%)</Label>
              <Input
                type="number"
                value={newTeam.commission}
                onChange={(e) => setNewTeam({ ...newTeam, commission: Number(e.target.value) })}
                placeholder="请输入佣金比例"
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsAddTeamOpen(false)}>
              取消
            </Button>
            <Button onClick={handleAddTeam}>{editingTeam ? "保存" : "添加"}</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/device-grid.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Checkbox } from "@/components/ui/checkbox"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Battery, Smartphone, MessageCircle, Users, Clock } from "lucide-react"

export interface Device {
  id: string
  imei: string
  name: string
  status: "online" | "offline"
  battery: number
  wechatId: string
  friendCount: number
  todayAdded: number
  messageCount: number
  lastActive: string
  addFriendStatus: "normal" | "abnormal"
}

interface DeviceGridProps {
  devices: Device[]
  selectable?: boolean
  selectedDevices?: string[]
  onSelect?: (deviceIds: string[]) => void
  itemsPerRow?: number
}

export function DeviceGrid({
  devices,
  selectable = false,
  selectedDevices = [],
  onSelect,
  itemsPerRow = 2,
}: DeviceGridProps) {
  const [selectedDevice, setSelectedDevice] = useState<Device | null>(null)

const handleSelectAll = () => {
    if (selectedDevices.length === devices.length) {
      onSelect?.([])
    } else {
      onSelect?.(devices.map((d) => d.id))
    }
  }

return (
    <div className="space-y-4">
      {selectable && (
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <Checkbox
              checked={selectedDevices.length === devices.length && devices.length > 0}
              onCheckedChange={handleSelectAll}
            />
            <span className="text-sm">全选</span>
          </div>
          <span className="text-sm text-gray-500">已选择 {selectedDevices.length} 个设备</span>
        </div>
      )}

<div className={`grid grid-cols-${itemsPerRow} gap-4`}>
        {devices.map((device) => (
          <Card
            key={device.id}
            className={`p-4 hover:shadow-md transition-all cursor-pointer ${
              selectedDevices.includes(device.id) ? "ring-2 ring-primary" : ""
            }`}
            onClick={() => {
              if (selectable) {
                const newSelection = selectedDevices.includes(device.id)
                  ? selectedDevices.filter((id) => id !== device.id)
                  : [...selectedDevices, device.id]
                onSelect?.(newSelection)
              } else {
                setSelectedDevice(device)
              }
            }}
          >
            <div className="flex items-start space-x-3">
              {selectable && (
                <Checkbox
                  checked={selectedDevices.includes(device.id)}
                  className="mt-1"
                  onClick={(e) => e.stopPropagation()}
                />
              )}
              <div className="flex-1 space-y-2">
                <div className="flex items-center justify-between">
                  <div className="font-medium">{device.name}</div>
                  <Badge variant={device.status === "online" ? "success" : "secondary"}>
                    {device.status === "online" ? "在线" : "离线"}
                  </Badge>
                </div>

<div className="grid grid-cols-2 gap-2 text-sm text-gray-500">
                  <div className="flex items-center space-x-1">
                    <Battery className={`w-4 h-4 ${device.battery < 20 ? "text-red-500" : "text-green-500"}`} />
                    <span>{device.battery}%</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <Users className="w-4 h-4" />
                    <span>{device.friendCount}</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <MessageCircle className="w-4 h-4" />
                    <span>{device.messageCount}</span>
                  </div>
                  <div className="flex items-center space-x-1">
                    <Clock className="w-4 h-4" />
                    <span>+{device.todayAdded}</span>
                  </div>
                </div>

<div className="text-sm text-gray-500">
                  <div>IMEI: {device.imei}</div>
                  <div>微信号: {device.wechatId}</div>
                </div>

<Badge variant={device.addFriendStatus === "normal" ? "outline" : "destructive"} className="mt-2">
                  {device.addFriendStatus === "normal" ? "加友正常" : "加友异常"}
                </Badge>
              </div>
            </div>
          </Card>
        ))}
      </div>

<Dialog open={!!selectedDevice} onOpenChange={() => setSelectedDevice(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>设备详情</DialogTitle>
          </DialogHeader>
          {selectedDevice && (
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-3">
                  <div className="p-3 bg-gray-100 rounded-lg">
                    <Smartphone className="w-6 h-6" />
                  </div>
                  <div>
                    <h3 className="font-medium">{selectedDevice.name}</h3>
                    <p className="text-sm text-gray-500">IMEI: {selectedDevice.imei}</p>
                  </div>
                </div>
                <Badge variant={selectedDevice.status === "online" ? "success" : "secondary"}>
                  {selectedDevice.status === "online" ? "在线" : "离线"}
                </Badge>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                  <div className="text-sm text-gray-500">电池电量</div>
                  <div className="flex items-center space-x-2">
                    <Battery className={`w-5 h-5 ${selectedDevice.battery < 20 ? "text-red-500" : "text-green-500"}`} />
                    <span className="font-medium">{selectedDevice.battery}%</span>
                  </div>
                </div>
                <div className="space-y-1">
                  <div className="text-sm text-gray-500">好友数量</div>
                  <div className="flex items-center space-x-2">
                    <Users className="w-5 h-5 text-blue-500" />
                    <span className="font-medium">{selectedDevice.friendCount}</span>
                  </div>
                </div>
                <div className="space-y-1">
                  <div className="text-sm text-gray-500">今日新增</div>
                  <div className="flex items-center space-x-2">
                    <Users className="w-5 h-5 text-green-500" />
                    <span className="font-medium">+{selectedDevice.todayAdded}</span>
                  </div>
                </div>
                <div className="space-y-1">
                  <div className="text-sm text-gray-500">消息数量</div>
                  <div className="flex items-center space-x-2">
                    <MessageCircle className="w-5 h-5 text-purple-500" />
                    <span className="font-medium">{selectedDevice.messageCount}</span>
                  </div>
                </div>
              </div>

<div className="space-y-2">
                <div className="text-sm text-gray-500">微信账号</div>
                <div className="font-medium">{selectedDevice.wechatId}</div>
              </div>

<div className="space-y-2">
                <div className="text-sm text-gray-500">最后活跃</div>
                <div className="font-medium">{selectedDevice.lastActive}</div>
              </div>

<div className="space-y-2">
                <div className="text-sm text-gray-500">加友状态</div>
                <Badge variant={selectedDevice.addFriendStatus === "normal" ? "outline" : "destructive"}>
                  {selectedDevice.addFriendStatus === "normal" ? "加友正常" : "加友异常"}
                </Badge>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/WechatFriendSelector.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Search } from "lucide-react"
import { Checkbox } from "@/components/ui/checkbox"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

interface WechatFriend {
  id: string
  nickname: string
  wechatId: string
  avatar: string
  gender: "male" | "female"
  customer: string
}

interface WechatFriendSelectorProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  selectedFriends: WechatFriend[]
  onSelect: (friends: WechatFriend[]) => void
}

export function WechatFriendSelector({ open, onOpenChange, selectedFriends, onSelect }: WechatFriendSelectorProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [friends, setFriends] = useState<WechatFriend[]>([])
  const [loading, setLoading] = useState(false)

useEffect(() => {
    if (open) {
      fetchFriends()
    }
  }, [open])

const fetchFriends = async () => {
    setLoading(true)
    // 模拟从API获取好友列表
    await new Promise((resolve) => setTimeout(resolve, 1000))
    const mockFriends = Array.from({ length: 20 }, (_, i) => ({
      id: `friend-${i}`,
      nickname: `好友${i + 1}`,
      wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
      avatar: `/placeholder.svg?height=40&width=40&text=${i + 1}`,
      gender: Math.random() > 0.5 ? "male" : "female",
      customer: `客户${i + 1}`,
    }))
    setFriends(mockFriends)
    setLoading(false)
  }

const filteredFriends = friends.filter(
    (friend) =>
      friend.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
      friend.wechatId.toLowerCase().includes(searchQuery.toLowerCase()),
  )

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>选择微信好友</DialogTitle>
        </DialogHeader>
        <div className="relative">
          <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
          <Input
            placeholder="搜索好友"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9"
          />
        </div>
        <div className="mt-4 space-y-2 max-h-[400px] overflow-y-auto">
          {loading ? (
            <div className="text-center py-4">加载中...</div>
          ) : filteredFriends.length === 0 ? (
            <div className="text-center py-4">未找到匹配的好友</div>
          ) : (
            filteredFriends.map((friend) => (
              <div key={friend.id} className="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg">
                <Checkbox
                  checked={selectedFriends.some((f) => f.id === friend.id)}
                  onCheckedChange={(checked) => {
                    if (checked) {
                      onSelect([...selectedFriends, friend])
                    } else {
                      onSelect(selectedFriends.filter((f) => f.id !== friend.id))
                    }
                  }}
                />
                <Avatar>
                  <AvatarImage src={friend.avatar} />
                  <AvatarFallback>{friend.nickname[0]}</AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <div className="font-medium">{friend.nickname}</div>
                  <div className="text-sm text-gray-500">
                    <div>{friend.wechatId}</div>
                    <div>归属客户：{friend.customer}</div>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>
        <div className="flex justify-end space-x-2 mt-4">
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button onClick={() => onOpenChange(false)}>确定</Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/WechatGroupSelector.tsx" isMerged="true"
"use client"

interface WechatGroup {
  id: string
  name: string
  memberCount: number
  avatar: string
  owner: string
  customer: string
}

interface WechatGroupSelectorProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  selectedGroups: WechatGroup[]
  onSelect: (groups: WechatGroup[]) => void
}

export function WechatGroupSelector({ open, onOpenChange, selectedGroups, onSelect }: WechatGroupSelectorProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [groups, setGroups] = useState<WechatGroup[]>([])
  const [loading, setLoading] = useState(false)

useEffect(() => {
    if (open) {
      fetchGroups()
    }
  }, [open])

const fetchGroups = async () => {
    setLoading(true)
    // 模拟从API获取群聊列表
    await new Promise((resolve) => setTimeout(resolve, 1000))
    const mockGroups = Array.from({ length: 10 }, (_, i) => ({
      id: `group-${i}`,
      name: `群聊${i + 1}`,
      memberCount: Math.floor(Math.random() * 400) + 100,
      avatar: `/placeholder.svg?height=40&width=40&text=群${i + 1}`,
      owner: `群主${i + 1}`,
      customer: `客户${i + 1}`,
    }))
    setGroups(mockGroups)
    setLoading(false)
  }

const filteredGroups = groups.filter((group) => group.name.toLowerCase().includes(searchQuery.toLowerCase()))

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>选择聊天群</DialogTitle>
        </DialogHeader>
        <div className="relative">
          <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
          <Input
            placeholder="搜索群聊"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9"
          />
        </div>
        <div className="mt-4 space-y-2 max-h-[400px] overflow-y-auto">
          {loading ? (
            <div className="text-center py-4">加载中...</div>
          ) : filteredGroups.length === 0 ? (
            <div className="text-center py-4">未找到匹配的群聊</div>
          ) : (
            filteredGroups.map((group) => (
              <div key={group.id} className="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg">
                <Checkbox
                  checked={selectedGroups.some((g) => g.id === group.id)}
                  onCheckedChange={(checked) => {
                    if (checked) {
                      onSelect([...selectedGroups, group])
                    } else {
                      onSelect(selectedGroups.filter((g) => g.id !== group.id))
                    }
                  }}
                />
                <img src={group.avatar || "/placeholder.svg"} alt={group.name} className="w-10 h-10 rounded-lg" />
                <div className="flex-1">
                  <div className="font-medium">{group.name}</div>
                  <div className="text-sm text-gray-500">
                    <div>群主：{group.owner}</div>
                    <div>归属客户：{group.customer}</div>
                    <div>{group.memberCount}人</div>
                  </div>
                </div>
              </div>
            ))
          )}
        </div>
        <div className="flex justify-end space-x-2 mt-4">
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button onClick={() => onOpenChange(false)}>确定</Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="components/ui/date-range-picker.tsx" isMerged="true"
"use client"

import { CalendarIcon } from "lucide-react"
import type { DateRange } from "react-day-picker"
import { cn } from "@/lib/utils"
import { Button } from "./button"
import { Calendar } from "./calendar"
import { Popover, PopoverContent, PopoverTrigger } from "./popover"
import { format } from "date-fns"
import { zhCN } from "date-fns/locale"

interface DateRangePickerProps {
  className?: string
  value?: DateRange
  onChange?: (date: DateRange | undefined) => void
}

export function DateRangePicker({ className, value, onChange }: DateRangePickerProps) {
  return (
    <div className={cn("grid gap-2", className)}>
      <Popover>
        <PopoverTrigger asChild>
          <Button
            id="date"
            variant={"outline"}
            className={cn("w-[300px] justify-start text-left font-normal", !value && "text-muted-foreground")}
          >
            <CalendarIcon className="mr-2 h-4 w-4" />
            {value?.from ? (
              value.to ? (
                <>
                  {format(value.from, "yyyy年MM月dd日", { locale: zhCN })} -{" "}
                  {format(value.to, "yyyy年MM月dd日", { locale: zhCN })}
                </>
              ) : (
                format(value.from, "yyyy年MM月dd日", { locale: zhCN })
              )
            ) : (
              <span>选择日期范围</span>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          <Calendar
            initialFocus
            mode="range"
            defaultMonth={value?.from}
            selected={value}
            onSelect={onChange}
            numberOfMonths={2}
            locale={zhCN}
          />
        </PopoverContent>
      </Popover>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/wechat-accounts/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronLeft, Filter, Search, RefreshCw, ArrowRightLeft, AlertCircle } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { useRouter } from "next/navigation"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { toast } from "@/components/ui/use-toast"
import { Progress } from "@/components/ui/progress"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

interface WechatAccount {
  id: string
  avatar: string
  nickname: string
  wechatId: string
  deviceId: string
  deviceName: string
  friendCount: number
  todayAdded: number
  remainingAdds: number
  maxDailyAdds: number
  status: "normal" | "abnormal"
  lastActive: string
}

const generateRandomWechatAccounts = (count: number): WechatAccount[] => {
  return Array.from({ length: count }, (_, index) => ({
    id: `account-${index + 1}`,
    avatar:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02jn_e7fcc2a4-3560-478d-911a-4ccd69c6392g.jpg-a8zVtwxMuSrPWN9dfWH93EBY0yM3Dh.jpeg",
    nickname: `卡若-${["25vig", "zok7e", "ip9ob", "2kna3"][index % 4]}`,
    wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
    deviceId: `device-${Math.floor(index / 3) + 1}`,
    deviceName: `设备${Math.floor(index / 3) + 1}`,
    friendCount: Math.floor(Math.random() * (6300 - 520)) + 520,
    todayAdded: Math.floor(Math.random() * 15),
    remainingAdds: Math.floor(Math.random() * 10) + 5,
    maxDailyAdds: 20,
    status: Math.random() > 0.2 ? "normal" : "abnormal",
    lastActive: new Date(Date.now() - Math.random() * 86400000).toLocaleString(),
  }))
}

export default function WechatAccountsPage() {
  const router = useRouter()
  const [accounts] = useState<WechatAccount[]>(generateRandomWechatAccounts(42))
  const [searchQuery, setSearchQuery] = useState("")
  const [currentPage, setCurrentPage] = useState(1)
  const [isTransferDialogOpen, setIsTransferDialogOpen] = useState(false)
  const [selectedAccount, setSelectedAccount] = useState<WechatAccount | null>(null)
  const accountsPerPage = 10

const filteredAccounts = accounts.filter(
    (account) =>
      account.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
      account.wechatId.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const paginatedAccounts = filteredAccounts.slice((currentPage - 1) * accountsPerPage, currentPage * accountsPerPage)

const totalPages = Math.ceil(filteredAccounts.length / accountsPerPage)

const handleTransferFriends = (account: WechatAccount) => {
    setSelectedAccount(account)
    setIsTransferDialogOpen(true)
  }

const handleConfirmTransfer = () => {
    if (!selectedAccount) return

toast({
      title: "好友转移计划已创建",
      description: "请在场景获客中查看详情",
    })
    setIsTransferDialogOpen(false)
    router.push("/scenarios")
  }

return (
    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
        <div className="flex items-center p-4">
          <Button variant="ghost" size="icon" onClick={() => router.back()}>
            <ChevronLeft className="h-5 w-5" />
          </Button>
          <h1 className="ml-2 text-lg font-medium">微信号</h1>
        </div>
      </header>

<div className="p-4">
        <Card className="p-4 mb-4">
          <div className="flex items-center space-x-4">
            <div className="relative flex-1">
              <Search className="w-4 h-4 absolute left-3 top-3 text-gray-400" />
              <Input
                className="pl-9"
                placeholder="搜索微信号/昵称"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
            <Button variant="outline" size="icon">
              <Filter className="h-4 w-4" />
            </Button>
            <Button variant="outline" size="icon">
              <RefreshCw className="h-4 w-4" />
            </Button>
          </div>
        </Card>

<div className="grid gap-3">
          {paginatedAccounts.map((account) => (
            <Card
              key={account.id}
              className="p-4 hover:shadow-lg transition-all cursor-pointer"
              onClick={() => router.push(`/wechat-accounts/${account.id}`)}
            >
              <div className="flex items-start space-x-4">
                <Avatar className="h-12 w-12 ring-2 ring-offset-2 ring-blue-500/20">
                  <AvatarImage src={account.avatar} />
                  <AvatarFallback>{account.nickname[0]}</AvatarFallback>
                </Avatar>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                      <h3 className="font-medium truncate">{account.nickname}</h3>
                      <Badge variant={account.status === "normal" ? "success" : "destructive"}>
                        {account.status === "normal" ? "正常" : "异常"}
                      </Badge>
                    </div>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={(e) => {
                        e.stopPropagation()
                        handleTransferFriends(account)
                      }}
                    >
                      <ArrowRightLeft className="h-4 w-4 mr-2" />
                      好友转移
                    </Button>
                  </div>
                  <div className="mt-1 text-sm text-gray-500 space-y-1">
                    <div>微信号：{account.wechatId}</div>
                    <div className="flex items-center justify-between">
                      <div>好友数量：{account.friendCount}</div>
                      <div className="text-green-600">今日新增：+{account.todayAdded}</div>
                    </div>
                    <div className="space-y-1">
                      <div className="flex items-center justify-between text-sm">
                        <div className="flex items-center space-x-1">
                          <span>今日可添加：</span>
                          <span className="font-medium">{account.remainingAdds}</span>
                          <TooltipProvider>
                            <Tooltip>
                              <TooltipTrigger>
                                <AlertCircle className="h-4 w-4 text-gray-400" />
                              </TooltipTrigger>
                              <TooltipContent>
                                <p>每日最多添加 {account.maxDailyAdds} 个好友</p>
                              </TooltipContent>
                            </Tooltip>
                          </TooltipProvider>
                        </div>
                        <span className="text-sm text-gray-500">
                          {account.todayAdded}/{account.maxDailyAdds}
                        </span>
                      </div>
                      <Progress value={(account.todayAdded / account.maxDailyAdds) * 100} className="h-2" />
                    </div>
                    <div className="flex items-center justify-between text-xs text-gray-500 pt-2">
                      <div>所属设备：{account.deviceName}</div>
                      <div>最后活跃：{account.lastActive}</div>
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          ))}
        </div>

<div className="mt-4 flex justify-center">
          <Pagination>
            <PaginationContent>
              <PaginationItem>
                <PaginationPrevious
                  href="#"
                  onClick={(e) => {
                    e.preventDefault()
                    setCurrentPage((prev) => Math.max(1, prev - 1))
                  }}
                />
              </PaginationItem>
              {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
                <PaginationItem key={page}>
                  <PaginationLink
                    href="#"
                    isActive={currentPage === page}
                    onClick={(e) => {
                      e.preventDefault()
                      setCurrentPage(page)
                    }}
                  >
                    {page}
                  </PaginationLink>
                </PaginationItem>
              ))}
              <PaginationItem>
                <PaginationNext
                  href="#"
                  onClick={(e) => {
                    e.preventDefault()
                    setCurrentPage((prev) => Math.min(totalPages, prev + 1))
                  }}
                />
              </PaginationItem>
            </PaginationContent>
          </Pagination>
        </div>
      </div>

<Dialog open={isTransferDialogOpen} onOpenChange={setIsTransferDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>好友转移确认</DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <p className="text-sm text-gray-500">
              确认要将 {selectedAccount?.nickname} 的 {selectedAccount?.friendCount}{" "}
              个好友转移到场景获客吗？系统将自动创建一个获客计划。
            </p>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsTransferDialogOpen(false)}>
              取消
            </Button>
            <Button onClick={handleConfirmTransfer}>确认转移</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/content/[id]/materials/new/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft, Plus, X } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { toast } from "@/components/ui/use-toast"

export default function NewMaterialPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [content, setContent] = useState("")
  const [newTag, setNewTag] = useState("")
  const [tags, setTags] = useState<string[]>([])

const handleAddTag = () => {
    if (newTag && !tags.includes(newTag)) {
      setTags([...tags, newTag])
      setNewTag("")
    }
  }

const handleRemoveTag = (tagToRemove: string) => {
    setTags(tags.filter((tag) => tag !== tagToRemove))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!content) {
      toast({
        title: "错误",
        description: "请输入素材内容",
        variant: "destructive",
      })
      return
    }
    try {
      // 模拟保存新素材
      await new Promise((resolve) => setTimeout(resolve, 1000))
      toast({
        title: "成功",
        description: "新素材已创建",
      })
      router.push(`/content/${params.id}/materials`)
    } catch (error) {
      console.error("Failed to create new material:", error)
      toast({
        title: "错误",
        description: "创建新素材失败",
        variant: "destructive",
      })
    }
  }

<div className="p-4">
        <Card className="p-4">
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <Label htmlFor="content">素材内容</Label>
              <Textarea
                id="content"
                value={content}
                onChange={(e) => setContent(e.target.value)}
                placeholder="请输入素材内容"
                className="mt-1"
                rows={5}
              />
            </div>

<div>
              <Label htmlFor="tags">标签</Label>
              <div className="flex items-center mt-1">
                <Input
                  id="tags"
                  value={newTag}
                  onChange={(e) => setNewTag(e.target.value)}
                  placeholder="输入标签"
                  className="flex-1"
                />
                <Button type="button" onClick={handleAddTag} className="ml-2">
                  <Plus className="h-4 w-4" />
                  添加
                </Button>
              </div>
              <div className="flex flex-wrap gap-2 mt-2">
                {tags.map((tag, index) => (
                  <Badge key={index} variant="secondary" className="flex items-center">
                    {tag}
                    <Button
                      type="button"
                      variant="ghost"
                      size="sm"
                      className="h-4 w-4 ml-1 p-0"
                      onClick={() => handleRemoveTag(tag)}
                    >
                      <X className="h-3 w-3" />
                    </Button>
                  </Badge>
                ))}
              </div>
            </div>

<Button type="submit" className="w-full">
              保存素材
            </Button>
          </form>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/content/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronLeft, Filter, Search, RefreshCw, Plus, Edit, Trash2, Eye, MoreVertical } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { useRouter } from "next/navigation"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import Image from "next/image"

interface ContentLibrary {
  id: string
  name: string
  source: "friends" | "groups"
  targetAudience: {
    id: string
    nickname: string
    avatar: string
  }[]
  creator: string
  itemCount: number
  lastUpdated: string
  enabled: boolean
}

export default function ContentLibraryPage() {
  const router = useRouter()
  const [libraries, setLibraries] = useState<ContentLibrary[]>([
    {
      id: "129",
      name: "微信好友广告",
      source: "friends",
      targetAudience: [
        { id: "1", nickname: "张三", avatar: "/placeholder.svg?height=40&width=40" },
        { id: "2", nickname: "李四", avatar: "/placeholder.svg?height=40&width=40" },
        { id: "3", nickname: "王五", avatar: "/placeholder.svg?height=40&width=40" },
      ],
      creator: "海尼",
      itemCount: 0,
      lastUpdated: "2024-02-09 12:30",
      enabled: false,
    },
    {
      id: "127",
      name: "开发群",
      source: "groups",
      targetAudience: [{ id: "4", nickname: "开发群1", avatar: "/placeholder.svg?height=40&width=40" }],
      creator: "karuo",
      itemCount: 0,
      lastUpdated: "2024-02-09 12:30",
      enabled: true,
    },
  ])

const [searchQuery, setSearchQuery] = useState("")
  const [activeTab, setActiveTab] = useState("all")

const handleCreateNew = () => {
    // 模拟创建新内容库
    const newId = Date.now().toString()
    const newLibrary = {
      id: newId,
      name: "新内容库",
      source: "friends" as const,
      targetAudience: [],
      creator: "当前用户",
      itemCount: 0,
      lastUpdated: new Date().toISOString(),
      enabled: true,
    }
    setLibraries([newLibrary, ...libraries])
    router.push(`/content/${newId}`)
  }

const handleEdit = (id: string) => {
    router.push(`/content/${id}`)
  }

const handleDelete = (id: string) => {
    // 实现删除功能
    setLibraries(libraries.filter((lib) => lib.id !== id))
  }

const handleViewMaterials = (id: string) => {
    router.push(`/content/${id}/materials`)
  }

const filteredLibraries = libraries.filter(
    (library) =>
      (activeTab === "all" || library.source === activeTab) &&
      (library.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        library.targetAudience.some((target) => target.nickname.toLowerCase().includes(searchQuery.toLowerCase()))),
  )

<div className="p-4 space-y-4">
        <Card className="p-4">
          <div className="space-y-4">
            <div className="flex items-center space-x-2">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="搜索内容库..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-9"
                />
              </div>
              <Button variant="outline" size="icon">
                <Filter className="h-4 w-4" />
              </Button>
              <Button variant="outline" size="icon">
                <RefreshCw className="h-4 w-4" />
              </Button>
            </div>

<div className="space-y-3">
              {filteredLibraries.map((library) => (
                <Card key={library.id} className="p-4">
                  <div className="flex items-start justify-between">
                    <div className="space-y-1">
                      <div className="flex items-center space-x-2">
                        <h3 className="font-medium">{library.name}</h3>
                        <Badge variant={library.enabled ? "success" : "secondary"}>
                          {library.enabled ? "已启用" : "已停用"}
                        </Badge>
                      </div>
                      <div className="text-sm text-gray-500">
                        <div className="flex items-center space-x-1">
                          <span>来源：</span>
                          <div className="flex -space-x-2 overflow-hidden">
                            {library.targetAudience.slice(0, 3).map((target) => (
                              <Image
                                key={target.id}
                                src={target.avatar || "/placeholder.svg"}
                                alt={target.nickname}
                                width={24}
                                height={24}
                                className="inline-block h-6 w-6 rounded-full ring-2 ring-white"
                              />
                            ))}
                            {library.targetAudience.length > 3 && (
                              <span className="flex items-center justify-center w-6 h-6 text-xs font-medium text-white bg-gray-400 rounded-full ring-2 ring-white">
                                +{library.targetAudience.length - 3}
                              </span>
                            )}
                          </div>
                        </div>
                        <div>创建人：{library.creator}</div>
                        <div>内容数量：{library.itemCount}</div>
                        <div>更新时间：{library.lastUpdated}</div>
                      </div>
                    </div>
                    <div className="flex space-x-2">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="sm">
                            <MoreVertical className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem onClick={() => handleEdit(library.id)}>
                            <Edit className="h-4 w-4 mr-2" />
                            编辑
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleDelete(library.id)}>
                            <Trash2 className="h-4 w-4 mr-2" />
                            删除
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleViewMaterials(library.id)}>
                            <Eye className="h-4 w-4 mr-2" />
                            查看素材
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/content/[id]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft, Save } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Textarea } from "@/components/ui/textarea"
import { DateRangePicker } from "@/components/ui/date-range-picker"
import { WechatFriendSelector } from "@/components/WechatFriendSelector"
import { WechatGroupSelector } from "@/components/WechatGroupSelector"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { toast } from "@/components/ui/use-toast"

interface ContentLibrary {
  id: string
  name: string
  sourceType: "friends" | "groups"
  keywordsInclude: string
  keywordsExclude: string
  startDate: string
  endDate: string
  selectedFriends: any[]
  selectedGroups: any[]
  useAI: boolean
  aiPrompt: string
  enabled: boolean
}

export default function ContentLibraryPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [library, setLibrary] = useState<ContentLibrary | null>(null)
  const [isWechatFriendSelectorOpen, setIsWechatFriendSelectorOpen] = useState(false)
  const [isWechatGroupSelectorOpen, setIsWechatGroupSelectorOpen] = useState(false)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    const fetchLibrary = async () => {
      setIsLoading(true)
      try {
        // 模拟从API获取内容库数据
        await new Promise((resolve) => setTimeout(resolve, 500))
        const data = {
          id: params.id,
          name: "示例内容库",
          sourceType: "friends",
          keywordsInclude: "关键词1,关键词2",
          keywordsExclude: "排除词1,排除词2",
          startDate: "2024-01-01",
          endDate: "2024-12-31",
          selectedFriends: [
            { id: "1", nickname: "张三", avatar: "/placeholder.svg?height=40&width=40" },
            { id: "2", nickname: "李四", avatar: "/placeholder.svg?height=40&width=40" },
          ],
          selectedGroups: [],
          useAI: true,
          aiPrompt: "AI提示词示例",
          enabled: true,
        }
        setLibrary(data)
      } catch (error) {
        console.error("Failed to fetch library data:", error)
        toast({
          title: "错误",
          description: "获取内容库数据失败",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }
    fetchLibrary()
  }, [params.id])

const handleSave = async () => {
    if (!library) return
    try {
      // 模拟保存到API
      await new Promise((resolve) => setTimeout(resolve, 500))
      toast({
        title: "成功",
        description: "内容库已保存",
      })
      // 这里应该调用一个函数来更新外部展示的数据
      // updateExternalDisplay(library)
    } catch (error) {
      console.error("Failed to save library:", error)
      toast({
        title: "错误",
        description: "保存内容库失败",
        variant: "destructive",
      })
    }
  }

if (isLoading) {
    return <div className="flex justify-center items-center h-screen">加载中...</div>
  }

if (!library) {
    return <div className="flex justify-center items-center h-screen">内容库不存在</div>
  }

return (
    <div className="flex-1 bg-gray-50 min-h-screen pb-16">
      <header className="sticky top-0 z-10 bg-white border-b">
        <div className="flex items-center justify-between p-4">
          <div className="flex items-center space-x-3">
            <Button variant="ghost" size="icon" onClick={() => router.back()}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="text-lg font-medium">内容库详情</h1>
          </div>
          <Button onClick={handleSave}>
            <Save className="h-4 w-4 mr-2" />
            保存
          </Button>
        </div>
      </header>

<div className="p-4 space-y-4">
        <Card className="p-4">
          <div className="space-y-4">
            <div>
              <Label htmlFor="name" className="text-base required">
                内容库名称
              </Label>
              <Input
                id="name"
                value={library.name}
                onChange={(e) => setLibrary({ ...library, name: e.target.value })}
                placeholder="请输入内容库名称"
                required
                className="mt-1.5"
              />
            </div>

<div>
              <Label className="text-base">数据来源配置</Label>
              <Tabs
                value={library.sourceType}
                onValueChange={(value: "friends" | "groups") => setLibrary({ ...library, sourceType: value })}
                className="mt-1.5"
              >
                <TabsList className="grid w-full grid-cols-2">
                  <TabsTrigger value="friends">选择微信好友</TabsTrigger>
                  <TabsTrigger value="groups">选择聊天群</TabsTrigger>
                </TabsList>
                <TabsContent value="friends" className="mt-4">
                  <Button variant="outline" className="w-full" onClick={() => setIsWechatFriendSelectorOpen(true)}>
                    选择微信好友
                  </Button>
                  {library.selectedFriends.length > 0 && (
                    <div className="mt-2 space-y-2">
                      {library.selectedFriends.map((friend) => (
                        <div key={friend.id} className="flex items-center justify-between bg-gray-100 p-2 rounded-md">
                          <span>{friend.nickname}</span>
                        </div>
                      ))}
                    </div>
                  )}
                </TabsContent>
                <TabsContent value="groups" className="mt-4">
                  <Button variant="outline" className="w-full" onClick={() => setIsWechatGroupSelectorOpen(true)}>
                    选择聊天群
                  </Button>
                  {library.selectedGroups.length > 0 && (
                    <div className="mt-2 space-y-2">
                      {library.selectedGroups.map((group) => (
                        <div key={group.id} className="flex items-center justify-between bg-gray-100 p-2 rounded-md">
                          <span>{group.name}</span>
                        </div>
                      ))}
                    </div>
                  )}
                </TabsContent>
              </Tabs>
            </div>

<Accordion type="single" collapsible>
              <AccordionItem value="keywords">
                <AccordionTrigger>关键字设置</AccordionTrigger>
                <AccordionContent>
                  <div className="space-y-4">
                    <div>
                      <Label htmlFor="keywordsInclude" className="text-base">
                        关键字匹配
                      </Label>
                      <Textarea
                        id="keywordsInclude"
                        value={library.keywordsInclude}
                        onChange={(e) => setLibrary({ ...library, keywordsInclude: e.target.value })}
                        placeholder="如果设置了关键字，系统只会采集含有关键字的内容。多个关键字，用半角的','隔开。"
                        className="mt-1.5 min-h-[100px]"
                      />
                    </div>

<div>
                      <Label htmlFor="keywordsExclude" className="text-base">
                        关键字排除
                      </Label>
                      <Textarea
                        id="keywordsExclude"
                        value={library.keywordsExclude}
                        onChange={(e) => setLibrary({ ...library, keywordsExclude: e.target.value })}
                        placeholder="如果设置了关键字，匹配到关键字的，系统将不会采集。多个关键字，用半角的','隔开。"
                        className="mt-1.5 min-h-[100px]"
                      />
                    </div>
                  </div>
                </AccordionContent>
              </AccordionItem>
            </Accordion>

<div className="flex items-center justify-between">
              <div>
                <Label className="text-base">是否启用AI</Label>
                <p className="text-sm text-gray-500 mt-1">
                  当启用AI之后，该内容库下的所有内容，都会通过AI重新生成内容。
                </p>
              </div>
              <Switch
                checked={library.useAI}
                onCheckedChange={(checked) => setLibrary({ ...library, useAI: checked })}
              />
            </div>

{library.useAI && (
              <div>
                <Label htmlFor="aiPrompt" className="text-base">
                  AI 提示词
                </Label>
                <Textarea
                  id="aiPrompt"
                  value={library.aiPrompt}
                  onChange={(e) => setLibrary({ ...library, aiPrompt: e.target.value })}
                  placeholder="请输入 AI 提示词"
                  className="mt-1.5 min-h-[100px]"
                />
              </div>
            )}

<div>
              <Label className="text-base">时间限制</Label>
              <DateRangePicker
                className="mt-1.5"
                onChange={(range) => {
                  if (range?.from) {
                    setLibrary({
                      ...library,
                      startDate: range.from.toISOString(),
                      endDate: range.to?.toISOString() || "",
                    })
                  }
                }}
              />
            </div>

<div className="flex items-center justify-between">
              <Label className="text-base required">是否启用</Label>
              <Switch
                checked={library.enabled}
                onCheckedChange={(checked) => setLibrary({ ...library, enabled: checked })}
              />
            </div>
          </div>
        </Card>
      </div>

<WechatFriendSelector
        open={isWechatFriendSelectorOpen}
        onOpenChange={setIsWechatFriendSelectorOpen}
        selectedFriends={library.selectedFriends}
        onSelect={(friends) => setLibrary({ ...library, selectedFriends: friends })}
      />

<WechatGroupSelector
        open={isWechatGroupSelectorOpen}
        onOpenChange={setIsWechatGroupSelectorOpen}
        selectedGroups={library.selectedGroups}
        onSelect={(groups) => setLibrary({ ...library, selectedGroups: groups })}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronLeft, Plus, Filter, Search, RefreshCw, MoreVertical, Clock, Edit, Trash2, Eye } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import Link from "next/link"
import { Badge } from "@/components/ui/badge"
import { useRouter } from "next/navigation"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Switch } from "@/components/ui/switch"

interface SyncTask {
  id: string
  name: string
  status: "running" | "paused"
  deviceCount: number
  contentLib: string
  syncCount: number
  lastSyncTime: string
  createTime: string
  creator: string
}

export default function MomentsSyncPage() {
  const router = useRouter()
  const [tasks, setTasks] = useState<SyncTask[]>([
    {
      id: "1",
      name: "同步卡若主号",
      deviceCount: 2,
      contentLib: "卡若朋友圈",
      syncCount: 307,
      lastSyncTime: "2025-02-06 13:12:35",
      createTime: "2024-11-20 19:04:14",
      creator: "karuo",
      status: "running",
    },
    {
      id: "2",
      name: "暗黑4业务",
      deviceCount: 1,
      contentLib: "暗黑4代练",
      syncCount: 622,
      lastSyncTime: "2024-03-04 14:09:35",
      createTime: "2024-03-04 14:29:04",
      creator: "lkdie",
      status: "paused",
    },
  ])

const handleDelete = (taskId: string) => {
    setTasks(tasks.filter((task) => task.id !== taskId))
  }

const handleEdit = (taskId: string) => {
    router.push(`/workspace/moments-sync/${taskId}/edit`)
  }

const handleView = (taskId: string) => {
    router.push(`/workspace/moments-sync/${taskId}`)
  }

const toggleTaskStatus = (taskId: string) => {
    setTasks(
      tasks.map((task) =>
        task.id === taskId ? { ...task, status: task.status === "running" ? "paused" : "running" } : task,
      ),
    )
  }

<div className="space-y-4">
          {tasks.map((task) => (
            <Card key={task.id} className="p-4">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center space-x-2">
                  <h3 className="font-medium">{task.name}</h3>
                  <Badge variant={task.status === "running" ? "success" : "secondary"}>
                    {task.status === "running" ? "进行中" : "已暂停"}
                  </Badge>
                </div>
                <div className="flex items-center space-x-2">
                  <Switch checked={task.status === "running"} onCheckedChange={() => toggleTaskStatus(task.id)} />
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="sm">
                        <MoreVertical className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent>
                      <DropdownMenuItem onClick={() => handleView(task.id)}>
                        <Eye className="h-4 w-4 mr-2" />
                        查看
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={() => handleEdit(task.id)}>
                        <Edit className="h-4 w-4 mr-2" />
                        编辑
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={() => handleDelete(task.id)}>
                        <Trash2 className="h-4 w-4 mr-2" />
                        删除
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              </div>

<div className="grid grid-cols-2 gap-4 mb-4">
                <div className="text-sm text-gray-500">
                  <div>推送设备：{task.deviceCount} 个</div>
                  <div>内容库：{task.contentLib}</div>
                </div>
                <div className="text-sm text-gray-500">
                  <div>已同步：{task.syncCount} 条</div>
                  <div>创建人：{task.creator}</div>
                </div>
              </div>

<div className="flex items-center justify-between text-xs text-gray-500 border-t pt-4">
                <div className="flex items-center">
                  <Clock className="w-4 h-4 mr-1" />
                  上次同步：{task.lastSyncTime}
                </div>
                <div>创建时间：{task.createTime}</div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/[id]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"

export default function ViewMomentsSyncTask({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [task, setTask] = useState<SyncTask | null>(null)

useEffect(() => {
    // Fetch task data from API
    // For now, we'll use mock data
    setTask({
      id: params.id,
      name: "同步卡若主号",
      deviceCount: 2,
      contentLib: "卡若朋友圈",
      syncCount: 307,
      lastSyncTime: "2025-02-06 13:12:35",
      createTime: "2024-11-20 19:04:14",
      creator: "karuo",
      status: "running",
    })
  }, [params.id])

const toggleTaskStatus = () => {
    if (task) {
      setTask({ ...task, status: task.status === "running" ? "paused" : "running" })
    }
  }

if (!task) {
    return <div>Loading...</div>
  }

<div className="p-4">
        <Card className="p-6">
          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center space-x-2">
              <h2 className="text-2xl font-bold">{task.name}</h2>
              <Badge variant={task.status === "running" ? "success" : "secondary"}>
                {task.status === "running" ? "进行中" : "已暂停"}
              </Badge>
            </div>
            <Switch checked={task.status === "running"} onCheckedChange={toggleTaskStatus} />
          </div>

<div className="grid grid-cols-2 gap-6 mb-6">
            <div>
              <h3 className="text-lg font-semibold mb-2">任务详情</h3>
              <div className="space-y-2">
                <p>推送设备：{task.deviceCount} 个</p>
                <p>内容库：{task.contentLib}</p>
                <p>已同步：{task.syncCount} 条</p>
                <p>创建人：{task.creator}</p>
              </div>
            </div>
            <div>
              <h3 className="text-lg font-semibold mb-2">时间信息</h3>
              <div className="space-y-2">
                <p>创建时间：{task.createTime}</p>
                <p>上次同步：{task.lastSyncTime}</p>
              </div>
            </div>
          </div>

<div className="border-t pt-4">
            <h3 className="text-lg font-semibold mb-2">同步内容预览</h3>
            {/* Add content preview here */}
            <p className="text-gray-500">暂无内容预览</p>
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/[id]/edit/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import { StepIndicator } from "../../components/step-indicator"
import { BasicSettings } from "../../components/basic-settings"
import { DeviceSelectionDialog } from "../../components/device-selection-dialog"
import { Input } from "@/components/ui/input"

export default function EditMomentsSyncPage() {
  const router = useRouter()
  const [currentStep, setCurrentStep] = useState(1)
  const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
  const [formData, setFormData] = useState({
    taskName: "同步卡若主号",
    startTime: "06:00",
    endTime: "23:59",
    syncCount: 5,
    accountType: "business" as const,
    enabled: true,
    selectedDevices: [] as string[],
    selectedLibraries: [] as string[],
  })

const handleUpdateFormData = (data: Partial<typeof formData>) => {
    setFormData((prev) => ({ ...prev, ...data }))
  }

const handleNext = () => {
    setCurrentStep((prev) => Math.min(prev + 1, 3))
  }

const handlePrev = () => {
    setCurrentStep((prev) => Math.max(prev - 1, 1))
  }

const handleComplete = () => {
    console.log("Form submitted:", formData)
    router.push("/workspace/moments-sync")
  }

return (
    <div className="min-h-screen bg-[#F8F9FA] pb-20">
      <header className="sticky top-0 z-10 bg-white">
        <div className="flex items-center h-14 px-4">
          <Button variant="ghost" size="icon" onClick={() => router.back()} className="hover:bg-gray-50">
            <ChevronLeft className="h-6 w-6" />
          </Button>
          <h1 className="ml-2 text-lg font-medium">编辑朋友圈同步</h1>
        </div>
      </header>

<div className="mt-8">
          {currentStep === 1 && (
            <BasicSettings formData={formData} onChange={handleUpdateFormData} onNext={handleNext} />
          )}

{currentStep === 2 && (
            <div className="space-y-6 px-6">
              <div className="relative">
                <Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
                <Input
                  placeholder="选择设备"
                  className="h-12 pl-11 rounded-xl border-gray-200 text-base"
                  onClick={() => setDeviceDialogOpen(true)}
                  readOnly
                />
              </div>

{formData.selectedDevices.length > 0 && (
                <div className="text-base text-gray-500">已选设备：{formData.selectedDevices.length} 个</div>
              )}

<DeviceSelectionDialog
                open={deviceDialogOpen}
                onOpenChange={setDeviceDialogOpen}
                selectedDevices={formData.selectedDevices}
                onSelect={(devices) => {
                  handleUpdateFormData({ selectedDevices: devices })
                  setDeviceDialogOpen(false)
                }}
              />
            </div>
          )}

{currentStep === 3 && (
            <div className="space-y-6 px-6">
              <div className="relative">
                <Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
                <Input placeholder="选择内容库" className="h-12 pl-11 rounded-xl border-gray-200 text-base" />
              </div>

<nav className="fixed bottom-0 left-0 right-0 h-16 bg-white border-t flex items-center justify-around px-6">
        <button className="flex flex-col items-center text-blue-600">
          <span className="text-sm mt-1">首页</span>
        </button>
        <button className="flex flex-col items-center text-gray-400">
          <span className="text-sm mt-1">场景获客</span>
        </button>
        <button className="flex flex-col items-center text-gray-400">
          <span className="text-sm mt-1">工作台</span>
        </button>
        <button className="flex flex-col items-center text-gray-400">
          <span className="text-sm mt-1">我的</span>
        </button>
      </nav>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/new/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { ChevronLeft, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import { StepIndicator } from "../components/step-indicator"
import { BasicSettings } from "../components/basic-settings"
import { DeviceSelectionDialog } from "../components/device-selection-dialog"
import { Input } from "@/components/ui/input"
import { toast } from "@/components/ui/use-toast"

export default function NewMomentsSyncPage() {
  const router = useRouter()
  const [currentStep, setCurrentStep] = useState(1)
  const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
  const [formData, setFormData] = useState({
    taskName: "",
    startTime: "06:00",
    endTime: "23:59",
    syncCount: 5,
    accountType: "business" as const,
    enabled: true,
    selectedDevices: [] as string[],
    selectedLibraries: [] as string[],
  })

const handleUpdateFormData = (data: Partial<typeof formData>) => {
    setFormData((prev) => ({ ...prev, ...data }))
  }

const handleNext = () => {
    setCurrentStep((prev) => Math.min(prev + 1, 3))
  }

const handlePrev = () => {
    setCurrentStep((prev) => Math.max(prev - 1, 1))
  }

const handleComplete = async () => {
    console.log("Form submitted:", formData)
    await new Promise((resolve) => setTimeout(resolve, 1000))
    toast({
      title: "创建成���",
      description: "朋友圈同步任务已创建并开始执行",
    })
    router.push("/workspace/moments-sync")
  }

return (
    <div className="min-h-screen bg-[#F8F9FA] pb-20">
      <header className="sticky top-0 z-10 bg-white">
        <div className="flex items-center h-14 px-4">
          <Button variant="ghost" size="icon" onClick={() => router.back()} className="hover:bg-gray-50">
            <ChevronLeft className="h-6 w-6" />
          </Button>
          <h1 className="ml-2 text-lg font-medium">新建朋友圈同步</h1>
        </div>
      </header>

<div className="mt-8">
          {currentStep === 1 && (
            <BasicSettings formData={formData} onChange={handleUpdateFormData} onNext={handleNext} />
          )}

{formData.selectedDevices.length > 0 && (
                <div className="text-base text-gray-500">已选设备：{formData.selectedDevices.length} 个</div>
              )}

<nav className="fixed bottom-0 left-0 right-0 h-16 bg-white border-t flex items-center justify-around px-6">
        <button className="flex flex-col items-center text-blue-600">
          <span className="text-sm mt-1">首页</span>
        </button>
        <button className="flex flex-col items-center text-gray-400">
          <span className="text-sm mt-1">场景获客</span>
        </button>
        <button className="flex flex-col items-center text-gray-400">
          <span className="text-sm mt-1">工作台</span>
        </button>
        <button className="flex flex-col items-center text-gray-400">
          <span className="text-sm mt-1">我的</span>
        </button>
      </nav>
    </div>
  )
}
[V0_FILE]typescript:file="app/workspace/moments-sync/components/tag-editor.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { toast } from "@/components/ui/use-toast"
import type { Tag } from "@/types/content"

interface TagEditorProps {
  tagId?: string
  initialData?: Tag
}

export function TagEditor({ tagId, initialData }: TagEditorProps) {
  const router = useRouter()
  const [formData, setFormData] = useState<Partial<Tag["settings"]>>({
    syncInterval: 1,
    timeRange: {
      start: "06:00",
      end: "23:59",
    },
    dailyLimit: 5,
    accountType: "business",
    enabled: true,
  })

useEffect(() => {
    if (initialData) {
      setFormData(initialData.settings)
    }
  }, [initialData])

const handleSave = async () => {
    try {
      // Here you would typically save the changes to your backend
      await new Promise((resolve) => setTimeout(resolve, 1000))
      toast({
        title: tagId ? "标签已更新" : "标签已创建",
        description: "设置已成功保存",
      })
      router.back()
    } catch (error) {
      toast({
        title: "保存失败",
        description: "无法保存标签设置",
        variant: "destructive",
      })
    }
  }

return (
    <Card className="p-6">
      <div className="space-y-6">
        <div>
          <Label htmlFor="taskName">任务名称</Label>
          <Input
            id="taskName"
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            placeholder="请输入任务名称"
            className="mt-2"
          />
        </div>

<div>
          <Label>允许发布时间段</Label>
          <div className="flex items-center space-x-2 mt-2">
            <Input
              type="time"
              value={formData.timeRange?.start}
              onChange={(e) =>
                setFormData({
                  ...formData,
                  timeRange: { ...formData.timeRange, start: e.target.value },
                })
              }
              className="w-32"
            />
            <span>至</span>
            <Input
              type="time"
              value={formData.timeRange?.end}
              onChange={(e) =>
                setFormData({
                  ...formData,
                  timeRange: { ...formData.timeRange, end: e.target.value },
                })
              }
              className="w-32"
            />
          </div>
        </div>

<div>
          <Label>每日同步数量</Label>
          <div className="flex items-center space-x-4 mt-2">
            <Button
              variant="outline"
              onClick={() => setFormData({ ...formData, dailyLimit: Math.max(1, (formData.dailyLimit || 1) - 1) })}
            >
              -
            </Button>
            <span className="w-12 text-center">{formData.dailyLimit}</span>
            <Button
              variant="outline"
              onClick={() => setFormData({ ...formData, dailyLimit: (formData.dailyLimit || 0) + 1 })}
            >
              +
            </Button>
            <span className="text-gray-500">条朋友圈</span>
          </div>
        </div>

<div>
          <Label>账号类型</Label>
          <div className="flex space-x-4 mt-2">
            <Button
              variant={formData.accountType === "business" ? "default" : "outline"}
              onClick={() => setFormData({ ...formData, accountType: "business" })}
              className="w-24"
            >
              业务号
            </Button>
            <Button
              variant={formData.accountType === "personal" ? "default" : "outline"}
              onClick={() => setFormData({ ...formData, accountType: "personal" })}
              className="w-24"
            >
              人设号
            </Button>
          </div>
        </div>

<div className="flex items-center justify-between">
          <Label>是否启用</Label>
          <Switch
            checked={formData.enabled}
            onCheckedChange={(checked) => setFormData({ ...formData, enabled: checked })}
          />
        </div>

<div className="flex justify-end space-x-2">
          <Button variant="outline" onClick={() => router.back()}>
            取消
          </Button>
          <Button onClick={handleSave}>保存</Button>
        </div>
      </div>
    </Card>
  )
}
[V0_FILE]typescript:file="app/workspace/moments-sync/components/content-viewer.tsx" isMerged="true"
"use client"

interface ContentViewerProps {
  tagId: string
}

export function ContentViewer({ tagId }: ContentViewerProps) {
  const [contents, setContents] = useState<ContentItem[]>([
    {
      id: "399401",
      title: "一���理想安全驾这件事情，刻在DNA里...",
      type: "text",
      content: "一在理想安全驾这件事情，刻在DNA里...",
      images: [
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02jo_5c61b35b-a919-4520-b653-a5910dea594g.jpg-83VfgjQ3qC7mwDhby6rsZeRwVM6maz.jpeg",
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02jo_5c61b35b-a919-4520-b653-a5910dea594g.jpg-83VfgjQ3qC7mwDhby6rsZeRwVM6maz.jpeg",
        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02jo_5c61b35b-a919-4520-b653-a5910dea594g.jpg-83VfgjQ3qC7mwDhby6rsZeRwVM6maz.jpeg",
      ],
      createTime: "2025-02-16 08:50:36",
      publishTime: "2025-02-15 23:37:49",
      status: "published",
    },
  ])

return (
    <div className="space-y-4">
      <div className="flex items-center space-x-2">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
          <Input placeholder="搜索内容..." className="pl-9" />
        </div>
        <Button variant="outline" size="icon">
          <Filter className="h-4 w-4" />
        </Button>
        <Button variant="outline" size="icon">
          <RefreshCw className="h-4 w-4" />
        </Button>
      </div>

<Table>
        <TableHeader>
          <TableRow>
            <TableHead>ID</TableHead>
            <TableHead>内容类型</TableHead>
            <TableHead>内容</TableHead>
            <TableHead>图片</TableHead>
            <TableHead>视频</TableHead>
            <TableHead>推送时间</TableHead>
            <TableHead>内容发布时间</TableHead>
            <TableHead>状态</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {contents.map((content) => (
            <TableRow key={content.id}>
              <TableCell>{content.id}</TableCell>
              <TableCell>{content.type === "text" ? "图文" : content.type}</TableCell>
              <TableCell className="max-w-[200px] truncate">{content.content}</TableCell>
              <TableCell>
                {content.images && (
                  <div className="flex space-x-1">
                    {content.images.map((img, index) => (
                      <img
                        key={index}
                        src={img || "/placeholder.svg"}
                        alt={`图片 ${index + 1}`}
                        className="w-10 h-10 object-cover rounded"
                      />
                    ))}
                  </div>
                )}
              </TableCell>
              <TableCell>{content.video ? "有" : "-"}</TableCell>
              <TableCell>{content.createTime}</TableCell>
              <TableCell>{content.publishTime}</TableCell>
              <TableCell>
                <span
                  className={`px-2 py-1 rounded-full text-xs ${
                    content.status === "published"
                      ? "bg-green-100 text-green-800"
                      : content.status === "failed"
                        ? "bg-red-100 text-red-800"
                        : "bg-yellow-100 text-yellow-800"
                  }`}
                >
                  {content.status === "published" ? "已发布" : content.status === "failed" ? "失败" : "待发布"}
                </span>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/ui/dialog.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="app/components/ui/input.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
  return (
    <input
      type={type}
      className={cn(
        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="app/components/ui/select.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
      className,
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className,
      )}
      position={position}
      {...props}
    >
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>
    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator }
[V0_FILE]typescriptreact:file="app/components/ui/checkbox.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

import { cn } from "@/lib/utils"

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescriptreact:file="app/components/ui/use-toast.ts" isMerged="true"
"use client"

import * as React from "react"

import type { ToastActionElement, ToastProps } from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_VALUE
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescriptreact:file="app/components/ui/pagination.tsx" isMerged="true"
import * as React from "react"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"

import { cn } from "@/lib/utils"
import { type ButtonProps, buttonVariants } from "@/components/ui/button"

const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
  <nav
    role="navigation"
    aria-label="pagination"
    className={cn("mx-auto flex w-full justify-center", className)}
    {...props}
  />
)
Pagination.displayName = "Pagination"

const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
  ({ className, ...props }, ref) => (
    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
  ),
)
PaginationContent.displayName = "PaginationContent"

const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
  <li ref={ref} className={cn("", className)} {...props} />
))
PaginationItem.displayName = "PaginationItem"

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<ButtonProps, "size"> &
  React.ComponentProps<"a">

const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
  <a
    aria-current={isActive ? "page" : undefined}
    className={cn(
      buttonVariants({
        variant: isActive ? "outline" : "ghost",
        size,
      }),
      className,
    )}
    {...props}
  />
)
PaginationLink.displayName = "PaginationLink"

const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1 pl-2.5", className)} {...props}>
    <ChevronLeft className="h-4 w-4" />
    <span>Previous</span>
  </PaginationLink>
)
PaginationPrevious.displayName = "PaginationPrevious"

const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1 pr-2.5", className)} {...props}>
    <span>Next</span>
    <ChevronRight className="h-4 w-4" />
  </PaginationLink>
)
PaginationNext.displayName = "PaginationNext"

const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
  <span aria-hidden className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}>
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </span>
)
PaginationEllipsis.displayName = "PaginationEllipsis"

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}
[V0_FILE]typescriptreact:file="app/components/ui/label.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="app/components/ui/table.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
  ({ className, ...props }, ref) => (
    <div className="relative w-full overflow-auto">
      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
    </div>
  ),
)
Table.displayName = "Table"

const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
)
TableHeader.displayName = "TableHeader"

const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
  ),
)
TableBody.displayName = "TableBody"

const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tfoot ref={ref} className={cn("bg-primary font-medium text-primary-foreground", className)} {...props} />
  ),
)
TableFooter.displayName = "TableFooter"

const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
  ({ className, ...props }, ref) => (
    <tr
      ref={ref}
      className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)}
      {...props}
    />
  ),
)
TableRow.displayName = "TableRow"

const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <th
      ref={ref}
      className={cn(
        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
        className,
      )}
      {...props}
    />
  ),
)
TableHead.displayName = "TableHead"

const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
  ),
)
TableCell.displayName = "TableCell"

const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
  ({ className, ...props }, ref) => (
    <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
  ),
)
TableCaption.displayName = "TableCaption"

export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
[V0_FILE]typescriptreact:file="app/components/ui/badge.tsx" isQuickEdit="true" isMerged="true"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="app/lib/utils.ts" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescriptreact:file="app/components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="app/components/ui/switch.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="app/components/ui/tabs.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className,
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className,
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className,
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="app/components/ui/accordion.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
))
AccordionItem.displayName = "AccordionItem"

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className,
      )}
      {...props}
    >
      {children}
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className={cn(
      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
      className,
    )}
    {...props}
  >
    <div className="pb-4 pt-0">{children}</div>
  </AccordionPrimitive.Content>
))
AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescriptreact:file="app/components/ui/dropdown-menu.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
      inset && "pl-8",
      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName

const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.SubContent
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className,
    )}
    {...props}
  />
))
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName

const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <DropdownMenuPrimitive.Portal>
    <DropdownMenuPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className,
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
      className,
    )}
    {...props}
  />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName

const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <DropdownMenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName

const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <DropdownMenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <DropdownMenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </DropdownMenuPrimitive.ItemIndicator>
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName

const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
    ref={ref}
    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
    {...props}
  />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName

const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescriptreact:file="app/components/ui/scroll-area.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
    <ScrollBar />
    <ScrollAreaPrimitive.Corner />
  </ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
  <ScrollAreaPrimitive.ScrollAreaScrollbar
    ref={ref}
    orientation={orientation}
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" && "h-2.5 border-t border-t-transparent p-[1px]",
      className,
    )}
    {...props}
  >
    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
  </ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="app/components/ui/progress.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
[V0_FILE]typescriptreact:file="app/components/ui/avatar.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

import { cn } from "@/lib/utils"

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="app/components/ui/tooltip.tsx" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

interface TooltipProps {
  children: React.ReactNode
  content: React.ReactNode
  className?: string
  delayDuration?: number
  side?: "top" | "right" | "bottom" | "left"
}

const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
  ({ children, content, className, delayDuration = 200, side = "top" }, ref) => {
    const [isVisible, setIsVisible] = React.useState(false)
    const [position, setPosition] = React.useState({ top: 0, left: 0 })
    const tooltipRef = React.useRef<HTMLDivElement>(null)
    const timeoutRef = React.useRef<NodeJS.Timeout>()

const handleMouseEnter = (e: React.MouseEvent) => {
      timeoutRef.current = setTimeout(() => {
        const rect = (e.target as HTMLElement).getBoundingClientRect()
        const tooltipRect = tooltipRef.current?.getBoundingClientRect()

if (tooltipRect) {
          let top = 0
          let left = 0

switch (side) {
            case "top":
              top = rect.top - tooltipRect.height - 8
              left = rect.left + (rect.width - tooltipRect.width) / 2
              break
            case "bottom":
              top = rect.bottom + 8
              left = rect.left + (rect.width - tooltipRect.width) / 2
              break
            case "left":
              top = rect.top + (rect.height - tooltipRect.height) / 2
              left = rect.left - tooltipRect.width - 8
              break
            case "right":
              top = rect.top + (rect.height - tooltipRect.height) / 2
              left = rect.right + 8
              break
          }

setPosition({ top, left })
          setIsVisible(true)
        }
      }, delayDuration)
    }

const handleMouseLeave = () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current)
      }
      setIsVisible(false)
    }

React.useEffect(() => {
      return () => {
        if (timeoutRef.current) {
          clearTimeout(timeoutRef.current)
        }
      }
    }, [])

return (
      <div className="relative inline-block" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} ref={ref}>
        {children}
        {isVisible && (
          <div
            ref={tooltipRef}
            className={cn(
              "fixed z-50 px-2 py-1 text-xs text-primary-foreground bg-primary rounded-md shadow-sm scale-90 animate-in fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
              className,
            )}
            style={{
              top: position.top,
              left: position.left,
              transition: "opacity 150ms ease-in-out, transform 150ms ease-in-out",
            }}
          >
            {content}
          </div>
        )}
      </div>
    )
  },
)
Tooltip.displayName = "Tooltip"

// 为了保持 API 兼容性，我们导出相同的组件名称
export const TooltipProvider = ({ children }: { children: React.ReactNode }) => children
export const TooltipTrigger = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (
  <div ref={ref} {...props} />
))
TooltipTrigger.displayName = "TooltipTrigger"

export const TooltipContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (
  <div ref={ref} {...props} />
))
TooltipContent.displayName = "TooltipContent"

export { Tooltip }
[V0_FILE]typescriptreact:file="app/components/ui/collapsible.tsx" isMerged="true"
"use client"

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="app/components/ui/radio-group.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, children, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="app/components/ui/calendar.tsx" isMerged="true"
"use client"

import type * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
        day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside: "text-muted-foreground opacity-50",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }
[V0_FILE]typescriptreact:file="app/components/ui/popover.tsx" isMerged="true"
"use client"
import * as PopoverPrimitive from "@radix-ui/react-popover"

const Popover = PopoverPrimitive.Root

const PopoverTrigger
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/[id]/edit/step-indicator.tsx" isMerged="true"
interface StepIndicatorProps {
  currentStep: number
}

export function StepIndicator({ currentStep }: StepIndicatorProps) {
  const steps = [
    { number: 1, title: "步骤 1", subtitle: "基础设置" },
    { number: 2, title: "步骤 2", subtitle: "设备选择" },
    { number: 3, title: "步骤 3", subtitle: "选择内容库" },
  ]

return (
    <div className="flex justify-between relative">
      {steps.map((step, index) => (
        <div key={step.number} className="flex flex-col items-center relative z-10">
          <div
            className={`w-8 h-8 rounded-full flex items-center justify-center text-sm
              ${currentStep >= step.number ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-400"}`}
          >
            {step.number}
          </div>
          <div className={`text-xs mt-2 ${currentStep >= step.number ? "text-blue-600" : "text-gray-400"}`}>
            {step.title}
          </div>
          <div className={`text-xs ${currentStep >= step.number ? "text-gray-600" : "text-gray-400"}`}>
            {step.subtitle}
          </div>
        </div>
      ))}
      <div className="absolute top-4 left-0 right-0 h-[1px] bg-gray-200 -z-10">
        <div
          className="h-full bg-blue-600 transition-all duration-300"
          style={{ width: `${((currentStep - 1) / (steps.length - 1)) * 100}%` }}
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/[id]/edit/steps/basic-settings.tsx" isMerged="true"
"use client"

import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Plus, Minus } from "lucide-react"

interface BasicSettingsProps {
  formData: {
    taskName: string
    startTime: string
    endTime: string
    syncCount: number
    accountType: string
    enabled: boolean
  }
  onChange: (data: Partial<BasicSettingsProps["formData"]>) => void
  onNext: () => void
}

export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
  return (
    <div className="space-y-6">
      <div>
        <div className="text-sm mb-2">任务名称</div>
        <Input
          value={formData.taskName}
          onChange={(e) => onChange({ taskName: e.target.value })}
          placeholder="请输入任务名称"
        />
      </div>

<div>
        <div className="text-sm mb-2">允许发布时间段</div>
        <div className="flex items-center space-x-3">
          <Input
            type="time"
            value={formData.startTime}
            onChange={(e) => onChange({ startTime: e.target.value })}
            className="w-32"
          />
          <span className="text-gray-500">至</span>
          <Input
            type="time"
            value={formData.endTime}
            onChange={(e) => onChange({ endTime: e.target.value })}
            className="w-32"
          />
        </div>
      </div>

<div>
        <div className="text-sm mb-2">每日同步数量</div>
        <div className="flex items-center space-x-4">
          <Button
            variant="outline"
            size="icon"
            onClick={() => onChange({ syncCount: Math.max(1, formData.syncCount - 1) })}
          >
            <Minus className="h-4 w-4" />
          </Button>
          <span className="w-8 text-center">{formData.syncCount}</span>
          <Button variant="outline" size="icon" onClick={() => onChange({ syncCount: formData.syncCount + 1 })}>
            <Plus className="h-4 w-4" />
          </Button>
          <span className="text-gray-500">条朋友圈</span>
        </div>
      </div>

<div>
        <div className="text-sm mb-2">账号类型</div>
        <div className="flex space-x-4">
          <Button
            variant={formData.accountType === "business" ? "default" : "outline"}
            onClick={() => onChange({ accountType: "business" })}
            className="flex-1"
          >
            业务号
          </Button>
          <Button
            variant={formData.accountType === "personal" ? "default" : "outline"}
            onClick={() => onChange({ accountType: "personal" })}
            className="flex-1"
          >
            人设号
          </Button>
        </div>
      </div>

<div className="flex items-center justify-between">
        <span className="text-sm">是否启用</span>
        <Switch checked={formData.enabled} onCheckedChange={(checked) => onChange({ enabled: checked })} />
      </div>

<Button onClick={onNext} className="w-full mt-8">
        下一步
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/[id]/edit/steps/device-selection.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Search } from "lucide-react"

interface DeviceSelectionProps {
  selectedDevices: string[]
  onChange: (devices: string[]) => void
  onNext: () => void
  onPrev: () => void
}

export function DeviceSelection({ selectedDevices, onChange, onNext, onPrev }: DeviceSelectionProps) {
  return (
    <div className="space-y-4">
      <div className="relative">
        <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
        <Input placeholder="选择设备" className="pl-9" />
      </div>

<div className="min-h-[300px] flex items-center justify-center text-gray-400">选择设备组件将在这里实现</div>

<div className="flex space-x-3 mt-8">
        <Button variant="outline" onClick={onPrev} className="flex-1">
          上一步
        </Button>
        <Button onClick={onNext} className="flex-1">
          下一步
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/[id]/edit/steps/content-library-selection.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Search } from "lucide-react"

interface ContentLibrarySelectionProps {
  selectedLibraries: string[]
  onChange: (libraries: string[]) => void
  onComplete: () => void
  onPrev: () => void
}

export function ContentLibrarySelection({
  selectedLibraries,
  onChange,
  onComplete,
  onPrev,
}: ContentLibrarySelectionProps) {
  return (
    <div className="space-y-4">
      <div className="relative">
        <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
        <Input placeholder="选择内容库" className="pl-9" />
      </div>

<div className="min-h-[300px] flex items-center justify-center text-gray-400">选择内容库组件将在这里实现</div>

<div className="flex space-x-3 mt-8">
        <Button variant="outline" onClick={onPrev} className="flex-1">
          上一步
        </Button>
        <Button onClick={onComplete} className="flex-1">
          完成
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/components/step-indicator.tsx" isMerged="true"
"use client"

interface Step {
  id: number
  title: string
  subtitle: string
}

interface StepIndicatorProps {
  currentStep: number
  steps?: Step[]
}

export function StepIndicator({
  currentStep,
  steps = [
    { id: 1, title: "步骤 1", subtitle: "基础设置" },
    { id: 2, title: "步骤 2", subtitle: "设备选择" },
    { id: 3, title: "步骤 3", subtitle: "选择内容库" },
  ],
}: StepIndicatorProps) {
  return (
    <div className="relative flex justify-between px-6">
      {steps.map((step) => (
        <div
          key={step.id}
          className={`flex flex-col items-center relative z-10 transition-colors ${
            currentStep >= step.id ? "text-blue-600" : "text-gray-400"
          }`}
        >
          <div
            className={`w-8 h-8 rounded-full flex items-center justify-center transition-all ${
              currentStep >= step.id
                ? "bg-blue-600 text-white shadow-sm"
                : "bg-white border border-gray-200 text-gray-400"
            }`}
          >
            {step.id}
          </div>
          <div className="text-xs mt-2 font-medium">{step.subtitle}</div>
        </div>
      ))}
      <div className="absolute top-4 left-0 right-0 h-[1px] bg-gray-100 -z-10">
        <div
          className="absolute top-0 left-0 h-full bg-blue-600 transition-all duration-300"
          style={{ width: `${((currentStep - 1) / (steps.length - 1)) * 100}%` }}
        />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/components/device-selection-dialog.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Search, RefreshCw } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ScrollArea } from "@/components/ui/scroll-area"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

interface Device {
  id: string
  name: string
  imei: string
  wxid: string
  status: "online" | "offline"
  usedInPlans: number
}

interface DeviceSelectionDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  selectedDevices: string[]
  onSelect: (devices: string[]) => void
}

export function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onSelect }: DeviceSelectionDialogProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")

// 模拟设备数据
  const devices: Device[] = [
    {
      id: "1",
      name: "设备 1",
      imei: "IMEI-radz6ewal",
      wxid: "wxid_98179ujy",
      status: "offline",
      usedInPlans: 0,
    },
    {
      id: "2",
      name: "设备 2",
      imei: "IMEI-i6iszi6d",
      wxid: "wxid_viqnaic8",
      status: "online",
      usedInPlans: 2,
    },
    {
      id: "3",
      name: "设备 3",
      imei: "IMEI-01z2izj97",
      wxid: "wxid_9sb23gxr",
      status: "online",
      usedInPlans: 2,
    },
    {
      id: "4",
      name: "设备 4",
      imei: "IMEI-x6o9rpcr0",
      wxid: "wxid_k0gxzbit",
      status: "online",
      usedInPlans: 1,
    },
  ]

const matchesStatus =
      statusFilter === "all" ||
      (statusFilter === "online" && device.status === "online") ||
      (statusFilter === "offline" && device.status === "offline")

return matchesSearch && matchesStatus
  })

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
        <DialogHeader>
          <DialogTitle>选择设备</DialogTitle>
        </DialogHeader>

<div className="flex items-center space-x-4 my-4">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
            <Input
              placeholder="搜索设备IMEI/备注/微信号"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-9"
            />
          </div>
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="w-32">
              <SelectValue placeholder="全部状态" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部状态</SelectItem>
              <SelectItem value="online">在线</SelectItem>
              <SelectItem value="offline">离线</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="icon">
            <RefreshCw className="h-4 w-4" />
          </Button>
        </div>

<ScrollArea className="flex-1 -mx-6 px-6">
          <RadioGroup value={selectedDevices[0]} onValueChange={(value) => onSelect([value])}>
            {filteredDevices.map((device) => (
              <label
                key={device.id}
                className="flex items-start space-x-3 p-4 rounded-lg hover:bg-gray-50 cursor-pointer"
              >
                <RadioGroupItem value={device.id} id={device.id} className="mt-1" />
                <div className="flex-1">
                  <div className="flex items-center justify-between">
                    <span className="font-medium">{device.name}</span>
                    <Badge variant={device.status === "online" ? "success" : "secondary"}>
                      {device.status === "online" ? "在线" : "离线"}
                    </Badge>
                  </div>
                  <div className="text-sm text-gray-500 mt-1">
                    <div>IMEI: {device.imei}</div>
                    <div>微信号: {device.wxid}</div>
                  </div>
                  {device.usedInPlans > 0 && (
                    <div className="text-sm text-orange-500 mt-1">已用于 {device.usedInPlans} 个计划</div>
                  )}
                </div>
              </label>
            ))}
          </RadioGroup>
        </ScrollArea>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/components/basic-settings.tsx" isMerged="true"
"use client"

import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Plus, Minus, Clock, HelpCircle } from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

interface BasicSettingsProps {
  formData: {
    taskName: string
    startTime: string
    endTime: string
    syncCount: number
    accountType: "business" | "personal"
    enabled: boolean
  }
  onChange: (data: Partial<BasicSettingsProps["formData"]>) => void
  onNext: () => void
}

export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
  return (
    <div className="space-y-8 px-6">
      <div>
        <div className="text-base font-medium mb-2">任务名称</div>
        <Input
          value={formData.taskName}
          onChange={(e) => onChange({ taskName: e.target.value })}
          placeholder="请输入任务名称"
          className="h-12 border-0 border-b border-gray-200 rounded-none focus-visible:ring-0 focus-visible:border-blue-600 px-0 text-base"
        />
      </div>

<div>
        <div className="text-base font-medium mb-2">允许发布时间段</div>
        <div className="flex items-center space-x-4">
          <div className="relative flex-1">
            <Input
              type="time"
              value={formData.startTime}
              onChange={(e) => onChange({ startTime: e.target.value })}
              className="h-12 pl-10 rounded-xl border-gray-200 text-base"
            />
            <Clock className="absolute left-3 top-4 h-4 w-4 text-gray-400" />
          </div>
          <span className="text-gray-500">至</span>
          <div className="relative flex-1">
            <Input
              type="time"
              value={formData.endTime}
              onChange={(e) => onChange({ endTime: e.target.value })}
              className="h-12 pl-10 rounded-xl border-gray-200 text-base"
            />
            <Clock className="absolute left-3 top-4 h-4 w-4 text-gray-400" />
          </div>
        </div>
      </div>

<div>
        <div className="text-base font-medium mb-2">每日同步数量</div>
        <div className="flex items-center space-x-5">
          <Button
            variant="outline"
            size="lg"
            onClick={() => onChange({ syncCount: Math.max(1, formData.syncCount - 1) })}
            className="h-12 w-12 rounded-xl"
          >
            <Minus className="h-5 w-5" />
          </Button>
          <span className="w-8 text-center text-lg font-medium">{formData.syncCount}</span>
          <Button
            variant="outline"
            size="lg"
            onClick={() => onChange({ syncCount: formData.syncCount + 1 })}
            className="h-12 w-12 rounded-xl"
          >
            <Plus className="h-5 w-5" />
          </Button>
          <span className="text-gray-500">条朋友圈</span>
        </div>
      </div>

<div>
        <div className="text-base font-medium mb-2">账号类型</div>
        <div className="flex space-x-4">
          <div className="flex-1 relative">
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="ghost"
                    onClick={() => onChange({ accountType: "business" })}
                    className={`w-full h-12 justify-between rounded-lg ${
                      formData.accountType === "business"
                        ? "bg-blue-600 hover:bg-blue-600 text-white"
                        : "bg-white hover:bg-gray-50"
                    }`}
                  >
                    业务号
                    <HelpCircle
                      className={`h-4 w-4 ${formData.accountType === "business" ? "text-white/70" : "text-gray-400"}`}
                    />
                  </Button>
                </TooltipTrigger>
                <TooltipContent className="max-w-[300px]">
                  <p>
                    业务号能够循环推送内容库中的内容。当内容库所有内容循环推送完毕后，若有新内容则优先推送新内容，若无新内容则继续循环推送。
                  </p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </div>
          <div className="flex-1 relative">
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button
                    variant="ghost"
                    onClick={() => onChange({ accountType: "personal" })}
                    className={`w-full h-12 justify-between rounded-lg ${
                      formData.accountType === "personal"
                        ? "bg-blue-600 hover:bg-blue-600 text-white"
                        : "bg-white hover:bg-gray-50"
                    }`}
                  >
                    人设号
                    <HelpCircle
                      className={`h-4 w-4 ${formData.accountType === "personal" ? "text-white/70" : "text-gray-400"}`}
                    />
                  </Button>
                </TooltipTrigger>
                <TooltipContent>
                  <p>用于实时更新同步，有新动态时进行同步，无动态则不同步。</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </div>
        </div>
      </div>

<div className="flex items-center justify-between py-2">
        <span className="text-base font-medium">是否启用</span>
        <Switch
          checked={formData.enabled}
          onCheckedChange={(checked) => onChange({ enabled: checked })}
          className="data-[state=checked]:bg-blue-600 h-7 w-12"
        />
      </div>

<Button
        onClick={onNext}
        className="w-full h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base font-medium shadow-sm"
      >
        下一步
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/auto-group/components/new-plan-form.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Plus, X } from "lucide-react"
import { cn } from "@/lib/utils"

interface NewPlanFormProps {
  onClose: () => void
}

export function NewPlanForm({ onClose }: NewPlanFormProps) {
  const [step, setStep] = useState(1)
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    name: "",
    customerType: "",
    startDate: "",
    endDate: "",
    groupSize: 38,
    welcomeMessage: "欢迎进群",
    specificWechatIds: [] as string[],
    keywords: [] as string[],
    tags: [] as string[],
    deviceId: "",
    operatorId: "",
  })

const [tempInput, setTempInput] = useState({
    wechatId: "",
    keyword: "",
    tag: "",
  })

const handleAddWechatId = () => {
    if (tempInput.wechatId && !formData.specificWechatIds.includes(tempInput.wechatId)) {
      setFormData({
        ...formData,
        specificWechatIds: [...formData.specificWechatIds, tempInput.wechatId],
      })
      setTempInput({ ...tempInput, wechatId: "" })
    }
  }

const handleAddKeyword = () => {
    if (tempInput.keyword && !formData.keywords.includes(tempInput.keyword)) {
      setFormData({
        ...formData,
        keywords: [...formData.keywords, tempInput.keyword],
      })
      setTempInput({ ...tempInput, keyword: "" })
    }
  }

const handleAddTag = () => {
    if (tempInput.tag && !formData.tags.includes(tempInput.tag)) {
      setFormData({
        ...formData,
        tags: [...formData.tags, tempInput.tag],
      })
      setTempInput({ ...tempInput, tag: "" })
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    try {
      // TODO: 实现提交逻辑
      await new Promise((resolve) => setTimeout(resolve, 1000))
      onClose()
    } catch (error) {
      console.error(error)
    } finally {
      setLoading(false)
    }
  }

return (
    <DialogContent className="sm:max-w-[600px]">
      <DialogHeader>
        <DialogTitle>新建自动拉群计划</DialogTitle>
      </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-6">
        {step === 1 && (
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="name" className="text-base">
                计划名称<span className="text-red-500">*</span>
              </Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                placeholder="请输入计划名称"
                className="w-full"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="customerType" className="text-base">
                建群客户类型
              </Label>
              <Select
                value={formData.customerType}
                onValueChange={(value) => setFormData({ ...formData, customerType: value })}
              >
                <SelectTrigger>
                  <SelectValue placeholder="选择客户类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="high_value">高价值客户</SelectItem>
                  <SelectItem value="regular">普通客户</SelectItem>
                  <SelectItem value="potential">潜在客户</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="startDate" className="text-base">
                  开始日期
                </Label>
                <Input
                  id="startDate"
                  type="date"
                  value={formData.startDate}
                  onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="endDate" className="text-base">
                  结束日期
                </Label>
                <Input
                  id="endDate"
                  type="date"
                  value={formData.endDate}
                  onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
                />
              </div>
            </div>

<div className="space-y-2">
              <Label className="text-base">群人数设置</Label>
              <div className="flex items-center space-x-4">
                <Button
                  type="button"
                  variant="outline"
                  size="icon"
                  onClick={() => setFormData({ ...formData, groupSize: Math.max(1, formData.groupSize - 1) })}
                >
                  -
                </Button>
                <span className="w-12 text-center">{formData.groupSize}</span>
                <Button
                  type="button"
                  variant="outline"
                  size="icon"
                  onClick={() => setFormData({ ...formData, groupSize: formData.groupSize + 1 })}
                >
                  +
                </Button>
                <span>人/群</span>
              </div>
            </div>
          </div>
        )}

{step === 2 && (
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="welcomeMessage" className="text-base">
                入群欢迎语
              </Label>
              <Textarea
                id="welcomeMessage"
                value={formData.welcomeMessage}
                onChange={(e) => setFormData({ ...formData, welcomeMessage: e.target.value })}
                placeholder="请输入欢迎语"
                className="min-h-[100px]"
              />
            </div>

<div className="space-y-2">
              <Label className="text-base">指定微信号</Label>
              <div className="flex items-center space-x-2">
                <Input
                  value={tempInput.wechatId}
                  onChange={(e) => setTempInput({ ...tempInput, wechatId: e.target.value })}
                  placeholder="输入微信号"
                />
                <Button type="button" variant="outline" size="icon" onClick={handleAddWechatId}>
                  <Plus className="h-4 w-4" />
                </Button>
              </div>
              <div className="flex flex-wrap gap-2 mt-2">
                {formData.specificWechatIds.map((id) => (
                  <Badge key={id} variant="secondary" className="flex items-center gap-1">
                    {id}
                    <X
                      className="h-3 w-3 cursor-pointer"
                      onClick={() =>
                        setFormData({
                          ...formData,
                          specificWechatIds: formData.specificWechatIds.filter((i) => i !== id),
                        })
                      }
                    />
                  </Badge>
                ))}
              </div>
            </div>

<div className="space-y-2">
              <Label className="text-base">关键词筛选</Label>
              <div className="flex items-center space-x-2">
                <Input
                  value={tempInput.keyword}
                  onChange={(e) => setTempInput({ ...tempInput, keyword: e.target.value })}
                  placeholder="输入关键词"
                />
                <Button type="button" variant="outline" size="icon" onClick={handleAddKeyword}>
                  <Plus className="h-4 w-4" />
                </Button>
              </div>
              <div className="flex flex-wrap gap-2 mt-2">
                {formData.keywords.map((keyword) => (
                  <Badge key={keyword} variant="secondary" className="flex items-center gap-1">
                    {keyword}
                    <X
                      className="h-3 w-3 cursor-pointer"
                      onClick={() =>
                        setFormData({
                          ...formData,
                          keywords: formData.keywords.filter((k) => k !== keyword),
                        })
                      }
                    />
                  </Badge>
                ))}
              </div>
            </div>
          </div>
        )}

<div className="flex justify-between pt-4">
          {step > 1 && (
            <Button type="button" variant="outline" onClick={() => setStep(step - 1)}>
              上一步
            </Button>
          )}
          <div className="flex justify-end space-x-2">
            <Button type="button" variant="outline" onClick={onClose}>
              取消
            </Button>
            {step < 2 ? (
              <Button type="button" onClick={() => setStep(step + 1)} className="bg-blue-500 hover:bg-blue-600">
                下一步
              </Button>
            ) : (
              <Button
                type="submit"
                disabled={loading}
                className={cn("bg-blue-500 hover:bg-blue-600", loading && "opacity-50 cursor-not-allowed")}
              >
                {loading ? "创建中..." : "确定"}
              </Button>
            )}
          </div>
        </div>
      </form>
    </DialogContent>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/auto-group/components/device-selector.tsx" isMerged="true"
"use client"

interface DeviceSelectorProps {
  selectedDevices: string[]
  onChange: (devices: string[]) => void
}

export function DeviceSelector({ selectedDevices, onChange }: DeviceSelectorProps) {
  const [open, setOpen] = useState(false)

return (
    <div className="mt-1.5">
      <Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)} className="h-9">
        <Plus className="h-4 w-4 mr-2" />
        选择设备
      </Button>

<div className="flex justify-end space-x-4">
            <Button variant="outline" onClick={() => setOpen(false)}>
              取消
            </Button>
            <Button onClick={() => setOpen(false)} className="bg-blue-600 hover:bg-blue-700">
              确定
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/auto-group/components/wechat-account-selector.tsx" isMerged="true"
"use client"

interface WechatAccountSelectorProps {
  selectedAccounts: string[]
  onChange: (accounts: string[]) => void
}

export function WechatAccountSelector({ selectedAccounts, onChange }: WechatAccountSelectorProps) {
  const [open, setOpen] = useState(false)

return (
    <div className="mt-1.5 space-x-2">
      <Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)} className="h-9">
        <Plus className="h-4 w-4 mr-2" />
        选择客户
      </Button>

<Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)} className="h-9">
        <Plus className="h-4 w-4 mr-2" />
        外部账号
      </Button>

<Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-w-4xl">
          <DialogHeader>
            <DialogTitle>选择微信账号</DialogTitle>
          </DialogHeader>

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Search, RefreshCw, Users } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Avatar } from "@/components/ui/avatar"
import { Checkbox } from "@/components/ui/checkbox"

interface Friend {
  id: string
  name: string
  wxid: string
  avatar: string
  selected?: boolean
}

interface GroupAssistantProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onCreateGroup: (friends: Friend[]) => void
}

export function GroupAssistant({ open, onOpenChange, onCreateGroup }: GroupAssistantProps) {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedTag, setSelectedTag] = useState("")
  const [friends, setFriends] = useState<Friend[]>([])
  const [loading, setLoading] = useState(false)

const handleRefresh = async () => {
    setLoading(true)
    // TODO: 刷新好友列表
    setLoading(false)
  }

const handleCreateGroup = () => {
    const selectedFriends = friends.filter((f) => f.selected)
    onCreateGroup(selectedFriends)
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl h-[80vh] flex flex-col">
        <DialogHeader>
          <DialogTitle>建群助手</DialogTitle>
        </DialogHeader>

<div className="flex space-x-4 mb-4">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
            <Input
              placeholder="请输入好友信息筛选"
              className="pl-9"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          <Select value={selectedTag} onValueChange={setSelectedTag}>
            <SelectTrigger className="w-32">
              <SelectValue placeholder="好友分组" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部好友</SelectItem>
              <SelectItem value="new">新好友</SelectItem>
              <SelectItem value="business">商务合作</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" onClick={handleRefresh} disabled={loading}>
            <RefreshCw className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`} />
            刷新
          </Button>
        </div>

<div className="flex-1 overflow-auto border rounded-md">
          {friends.length === 0 ? (
            <div className="flex flex-col items-center justify-center h-full text-gray-500">
              <Users className="h-12 w-12 mb-2" />
              <p>暂无好友数据</p>
              <Button variant="link" onClick={handleRefresh} disabled={loading}>
                点击刷新
              </Button>
            </div>
          ) : (
            <div className="divide-y">
              {friends.map((friend) => (
                <div key={friend.id} className="flex items-center space-x-4 p-4 hover:bg-gray-50">
                  <Checkbox
                    checked={friend.selected}
                    onCheckedChange={(checked) => {
                      setFriends(friends.map((f) => (f.id === friend.id ? { ...f, selected: !!checked } : f)))
                    }}
                  />
                  <Avatar className="h-10 w-10">
                    <img src={friend.avatar || "/placeholder.svg"} alt={friend.name} />
                  </Avatar>
                  <div className="flex-1">
                    <div className="font-medium">{friend.name}</div>
                    <div className="text-sm text-gray-500">{friend.wxid}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

<div className="flex items-center justify-between pt-4">
          <div className="text-sm text-gray-500">已选择 {friends.filter((f) => f.selected).length} 个好友</div>
          <div className="space-x-4">
            <Button variant="outline" onClick={() => onOpenChange(false)}>
              取消
            </Button>
            <Button
              onClick={handleCreateGroup}
              disabled={friends.filter((f) => f.selected).length === 0}
              className="bg-blue-600 hover:bg-blue-700"
            >
              创建群聊
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/auto-group/components/columns.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type { ColumnDef } from "@tanstack/react-table"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { Eye, Edit, Trash } from "lucide-react"

export type Plan = {
  id: string
  name: string
  groupCount: number
  groupSize: number
  totalFriends: number
  tags: string[]
  deviceId: string
  operator: string
  timeRange: string
  contacts: string[]
  status: "running" | "paused" | "completed"
}

export const columns: ColumnDef<Plan>[] = [
  {
    accessorKey: "id",
    header: "序号",
    cell: ({ row }) => row.index + 1,
  },
  {
    accessorKey: "name",
    header: "计划名称",
  },
  {
    accessorKey: "groupCount",
    header: "已建群数量",
  },
  {
    accessorKey: "groupSize",
    header: "建群人数标准",
    cell: ({ row }) => `${row.original.groupSize}/群`,
  },
  {
    accessorKey: "totalFriends",
    header: "微信客户数量",
  },
  {
    accessorKey: "tags",
    header: "群标签",
    cell: ({ row }) => (
      <div className="flex gap-1">
        {row.original.tags.map((tag) => (
          <Badge key={tag} variant="secondary">
            {tag}
          </Badge>
        ))}
      </div>
    ),
  },
  {
    accessorKey: "deviceId",
    header: "执行设备ID",
  },
  {
    accessorKey: "operator",
    header: "执行客服号",
  },
  {
    accessorKey: "timeRange",
    header: "执行时间",
  },
  {
    accessorKey: "contacts",
    header: "关联微信",
    cell: ({ row }) => (
      <div className="flex gap-1">
        {row.original.contacts.map((contact) => (
          <Badge key={contact} variant="outline">
            {contact}
          </Badge>
        ))}
      </div>
    ),
  },
  {
    accessorKey: "status",
    header: "状态",
    cell: ({ row }) => {
      const status = row.original.status
      const statusMap = {
        running: { label: "执行中", color: "bg-green-500" },
        paused: { label: "已暂停", color: "bg-yellow-500" },
        completed: { label: "已完成", color: "bg-gray-500" },
      }
      return (
        <div className="flex items-center">
          <div className={`w-2 h-2 rounded-full mr-2 ${statusMap[status].color}`} />
          {statusMap[status].label}
        </div>
      )
    },
  },
  {
    id: "actions",
    header: "操作",
    cell: ({ row }) => {
      const plan = row.original
      return (
        <div className="flex items-center space-x-2">
          <Button variant="ghost" size="icon">
            <Eye className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="icon">
            <Edit className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="icon" className="text-red-500 hover:text-red-600">
            <Trash className="h-4 w-4" />
          </Button>
          <Switch
            checked={plan.status === "running"}
            onCheckedChange={() => {
              // TODO: 更新计划状态
            }}
          />
        </div>
      )
    },
  },
]
[V0_FILE]typescriptreact:file="app/workspace/auto-group/components/data-table.tsx" isMerged="true"
"use client"

import {
  type ColumnDef,
  flexRender,
  getCoreRowModel,
  useReactTable,
  getPaginationRowModel,
  getFilteredRowModel,
  type ColumnFiltersState,
} from "@tanstack/react-table"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { useState } from "react"
import { Search } from "lucide-react"

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[]
  data: TData[]
}

export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])

const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnFiltersChange: setColumnFilters,
    state: {
      columnFilters,
    },
  })

return (
    <div className="space-y-4">
      <div className="flex items-center gap-4">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
          <Input
            placeholder="搜索计划名称..."
            value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
            onChange={(event) => table.getColumn("name")?.setFilterValue(event.target.value)}
            className="pl-9"
          />
        </div>
      </div>

<div className="rounded-md border">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <TableHead key={header.id}>
                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                  </TableHead>
                ))}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell colSpan={columns.length} className="h-24 text-center">
                  暂无数据
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>

<div className="flex items-center justify-end space-x-2">
        <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
          上一页
        </Button>
        <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
          下一页
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/auto-group/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { PlusCircle, Settings, Users, RefreshCcw } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Dialog } from "@/components/ui/dialog"
import { NewPlanForm } from "./components/new-plan-form"

interface Plan {
  id: string
  name: string
  groupCount: number
  groupSize: number
  totalFriends: number
  tags: string[]
  status: "running" | "stopped" | "completed"
  lastUpdated: string
}

const mockPlans: Plan[] = [
  {
    id: "1",
    name: "品牌推广群",
    groupCount: 6,
    groupSize: 38,
    totalFriends: 228,
    tags: ["品牌", "推广"],
    status: "running",
    lastUpdated: "2024-02-24 10:30",
  },
  {
    id: "2",
    name: "客户服务群",
    groupCount: 4,
    groupSize: 50,
    totalFriends: 200,
    tags: ["客服", "售后"],
    status: "stopped",
    lastUpdated: "2024-02-23 15:45",
  },
]

export default function AutoGroupPage() {
  const [newPlanOpen, setNewPlanOpen] = useState(false)

const getStatusColor = (status: Plan["status"]) => {
    switch (status) {
      case "running":
        return "bg-green-500/10 text-green-500"
      case "stopped":
        return "bg-red-500/10 text-red-500"
      case "completed":
        return "bg-blue-500/10 text-blue-500"
      default:
        return "bg-gray-500/10 text-gray-500"
    }
  }

const getStatusText = (status: Plan["status"]) => {
    switch (status) {
      case "running":
        return "运行中"
      case "stopped":
        return "已停止"
      case "completed":
        return "已完成"
      default:
        return status
    }
  }

return (
    <div className="container p-4 mx-auto max-w-md">
      <div className="flex flex-col space-y-4">
        <div className="flex items-center justify-between">
          <h1 className="text-xl font-semibold">微信自动拉群</h1>
          <Button onClick={() => setNewPlanOpen(true)} className="bg-blue-500 hover:bg-blue-600">
            <PlusCircle className="w-4 h-4 mr-2" />
            新建计划
          </Button>
        </div>

<TabsContent value="active" className="mt-4">
            <ScrollArea className="h-[calc(100vh-200px)]">
              <div className="space-y-4">
                {mockPlans.map((plan) => (
                  <Card key={plan.id} className="border border-gray-100">
                    <CardHeader className="pb-2">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-lg font-medium">{plan.name}</CardTitle>
                        <Badge className={getStatusColor(plan.status)}>{getStatusText(plan.status)}</Badge>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <div className="grid grid-cols-2 gap-2 text-sm text-gray-500">
                        <div className="flex items-center">
                          <Users className="w-4 h-4 mr-2" />
                          已建群数：{plan.groupCount}
                        </div>
                        <div className="flex items-center">
                          <Settings className="w-4 h-4 mr-2" />
                          群规模：{plan.groupSize}
                        </div>
                        <div className="flex items-center">
                          <RefreshCcw className="w-4 h-4 mr-2" />
                          更新时间：{plan.lastUpdated}
                        </div>
                      </div>
                      <div className="mt-3 flex flex-wrap gap-2">
                        {plan.tags.map((tag) => (
                          <Badge key={tag} variant="secondary" className="text-xs">
                            {tag}
                          </Badge>
                        ))}
                      </div>
                      <div className="mt-4 flex justify-end space-x-2">
                        <Button variant="outline" size="sm">
                          编辑
                        </Button>
                        <Button variant="destructive" size="sm" className="bg-red-500 hover:bg-red-600">
                          停止
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </ScrollArea>
          </TabsContent>

<TabsContent value="completed">
            <div className="h-[calc(100vh-200px)] flex items-center justify-center text-gray-500">暂无已完成的计划</div>
          </TabsContent>
        </Tabs>
      </div>

<Dialog open={newPlanOpen} onOpenChange={setNewPlanOpen}>
        <NewPlanForm onClose={() => setNewPlanOpen(false)} />
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/auto-group/components/StepByStepPlanForm.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Plus, Minus, X } from "lucide-react"
import { DeviceSelector } from "./device-selector"
import { WechatAccountSelector } from "./wechat-account-selector"

interface StepByStepPlanFormProps {
  onClose: () => void
}

export function StepByStepPlanForm({ onClose }: StepByStepPlanFormProps) {
  const [step, setStep] = useState(1)
  const [formData, setFormData] = useState({
    name: "",
    customerType: "",
    startDate: "",
    endDate: "",
    groupSize: 38,
    welcomeMessage: "欢迎进群",
    devices: [] as string[],
    wechatAccounts: [] as string[],
  })

const handleNext = () => {
    setStep(step + 1)
  }

const handlePrevious = () => {
    setStep(step - 1)
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: 提交表单数据
    onClose()
  }

return (
    <DialogContent className="max-w-2xl">
      <DialogHeader>
        <div className="flex items-center justify-between">
          <DialogTitle>新建计划 - 步骤 {step}/4</DialogTitle>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="h-4 w-4" />
          </Button>
        </div>
      </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-6">
        {step === 1 && (
          <>
            <div>
              <Label htmlFor="name" className="text-base">
                计划名称<span className="text-red-500">*</span>
              </Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                placeholder="请输入任务名称"
                className="mt-1.5"
              />
            </div>

<div>
              <Label htmlFor="customerType" className="text-base">
                建群客户类型
              </Label>
              <Input
                id="customerType"
                value={formData.customerType}
                onChange={(e) => setFormData({ ...formData, customerType: e.target.value })}
                placeholder="选择客户标签"
                className="mt-1.5"
              />
            </div>
          </>
        )}

{step === 2 && (
          <>
            <div>
              <Label className="text-base">执行期限</Label>
              <div className="flex items-center space-x-4 mt-1.5">
                <Input
                  type="date"
                  value={formData.startDate}
                  onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
                />
                <span>至</span>
                <Input
                  type="date"
                  value={formData.endDate}
                  onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
                />
              </div>
            </div>

<div>
              <Label className="text-base">建群人数设置</Label>
              <div className="flex items-center space-x-4 mt-1.5">
                <Button
                  type="button"
                  variant="outline"
                  size="icon"
                  onClick={() => setFormData({ ...formData, groupSize: Math.max(1, formData.groupSize - 1) })}
                >
                  <Minus className="h-4 w-4" />
                </Button>
                <span className="w-12 text-center">{formData.groupSize}</span>
                <Button
                  type="button"
                  variant="outline"
                  size="icon"
                  onClick={() => setFormData({ ...formData, groupSize: formData.groupSize + 1 })}
                >
                  <Plus className="h-4 w-4" />
                </Button>
                <span>人</span>
              </div>
            </div>
          </>
        )}

{step === 3 && (
          <>
            <div>
              <Label htmlFor="welcomeMessage" className="text-base">
                招呼语
              </Label>
              <Input
                id="welcomeMessage"
                value={formData.welcomeMessage}
                onChange={(e) => setFormData({ ...formData, welcomeMessage: e.target.value })}
                placeholder="欢迎进群"
                className="mt-1.5"
              />
            </div>

<div>
              <Label className="text-base">建群设备</Label>
              <DeviceSelector
                selectedDevices={formData.devices}
                onChange={(devices) => setFormData({ ...formData, devices })}
              />
            </div>
          </>
        )}

{step === 4 && (
          <div>
            <Label className="text-base">关联微信</Label>
            <WechatAccountSelector
              selectedAccounts={formData.wechatAccounts}
              onChange={(accounts) => setFormData({ ...formData, wechatAccounts: accounts })}
            />
          </div>
        )}

<div className="flex justify-between space-x-4 pt-4">
          {step > 1 && (
            <Button type="button" variant="outline" onClick={handlePrevious}>
              上一步
            </Button>
          )}
          {step < 4 ? (
            <Button type="button" onClick={handleNext} className="bg-blue-600 hover:bg-blue-700">
              下一步
            </Button>
          ) : (
            <Button type="submit" className="bg-blue-600 hover:bg-blue-700">
              完成
            </Button>
          )}
        </div>
      </form>
    </DialogContent>
  )
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { Eye, EyeOff, Phone } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { useRouter } from "next/navigation"
import { WeChatIcon } from "@/components/icons/wechat-icon"
import { AppleIcon } from "@/components/icons/apple-icon"
import { useToast } from "@/components/ui/use-toast"

// 使用环境变量获取API域名
const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "https://api.example.com"

// 定义登录响应类型
interface LoginResponse {
  code: number
  message: string
  data?: {
    token: string
  }
}

interface LoginForm {
  phone: string
  password: string
  verificationCode: string
  agreeToTerms: boolean
}

export default function LoginPage() {
  const [showPassword, setShowPassword] = useState(false)
  const [activeTab, setActiveTab] = useState<"password" | "verification">("password")
  const [isLoading, setIsLoading] = useState(false)
  const [form, setForm] = useState<LoginForm>({
    phone: "",
    password: "",
    verificationCode: "",
    agreeToTerms: false,
  })

const router = useRouter()
  const { toast } = useToast()

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setForm((prev) => ({ ...prev, [name]: value }))
  }

const handleCheckboxChange = (checked: boolean) => {
    setForm((prev) => ({ ...prev, agreeToTerms: checked }))
  }

const validateForm = () => {
    if (!form.phone) {
      toast({
        variant: "destructive",
        title: "请输入手机号",
        description: "手机号不能为空",
      })
      return false
    }

if (!form.agreeToTerms) {
      toast({
        variant: "destructive",
        title: "请同意用户协议",
        description: "需要同意用户协议和隐私政策才能继续",
      })
      return false
    }

if (activeTab === "password" && !form.password) {
      toast({
        variant: "destructive",
        title: "请输入密码",
        description: "密码不能为空",
      })
      return false
    }

if (activeTab === "verification" && !form.verificationCode) {
      toast({
        variant: "destructive",
        title: "请输入验证码",
        description: "验证码不能为空",
      })
      return false
    }

return true
  }

const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault()

if (!validateForm()) return

setIsLoading(true)
    try {
      // 创建FormData对象
      const formData = new FormData()
      formData.append("phone", form.phone)

if (activeTab === "password") {
        formData.append("password", form.password)
      } else {
        formData.append("verificationCode", form.verificationCode)
      }

// 发送登录请求
      const response = await fetch(`${API_BASE_URL}/auth/login`, {
        method: "POST",
        body: formData,
        // 不需要设置Content-Type，浏览器会自动设置为multipart/form-data并添加boundary
      })

const result: LoginResponse = await response.json()

if (result.code === 10000 && result.data?.token) {
        // 保存token到localStorage
        localStorage.setItem("token", result.data.token)

// 成功后跳转
        router.push("/profile")

toast({
          title: "登录成功",
          description: "欢迎回来！",
        })
      } else {
        throw new Error(result.message || "登录失败")
      }
    } catch (error) {
      toast({
        variant: "destructive",
        title: "登录失败",
        description: error instanceof Error ? error.message : "请稍后重试",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleSendVerificationCode = async () => {
    if (!form.phone) {
      toast({
        variant: "destructive",
        title: "请输入手机号",
        description: "发送验证码需要手机号",
      })
      return
    }

setIsLoading(true)
    try {
      // 创建FormData对象
      const formData = new FormData()
      formData.append("phone", form.phone)

// 发送验证码请求
      const response = await fetch(`${API_BASE_URL}/auth/send-code`, {
        method: "POST",
        body: formData,
      })

const result = await response.json()

if (result.code === 10000) {
        toast({
          title: "验证码已发送",
          description: "请查看手机短信",
        })
      } else {
        throw new Error(result.message || "发送失败")
      }
    } catch (error) {
      toast({
        variant: "destructive",
        title: "发送失败",
        description: error instanceof Error ? error.message : "请稍后重试",
      })
    } finally {
      setIsLoading(false)
    }
  }

useEffect(() => {
    // 检查是否已登录
    const token = localStorage.getItem("token")
    if (token) {
      router.push("/profile")
    }
  }, [router])

return (
    <div className="min-h-screen bg-white text-gray-900 flex flex-col px-4 py-8">
      <div className="max-w-md w-full mx-auto space-y-8">
        <Tabs
          defaultValue="password"
          className="w-full"
          onValueChange={(v) => setActiveTab(v as "password" | "verification")}
        >
          <TabsList className="w-full bg-transparent border-b border-gray-200">
            <TabsTrigger
              value="verification"
              className="flex-1 data-[state=active]:border-blue-500 data-[state=active]:text-blue-500 border-b-2 border-transparent"
            >
              验证码登录
            </TabsTrigger>
            <TabsTrigger
              value="password"
              className="flex-1 data-[state=active]:border-blue-500 data-[state=active]:text-blue-500 border-b-2 border-transparent"
            >
              密码登录
            </TabsTrigger>
          </TabsList>

<div className="mt-8">
            <p className="text-gray-600 mb-6">你所在地区仅支持 手机号 / 微信 / Apple 登录</p>

<TabsContent value="password" className="m-0">
                <div className="relative">
                  <Input
                    type={showPassword ? "text" : "password"}
                    name="password"
                    value={form.password}
                    onChange={handleInputChange}
                    placeholder="密码"
                    className="pr-12 border-gray-300 text-gray-900 h-12"
                    disabled={isLoading}
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500"
                  >
                    {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                  </button>
                </div>
              </TabsContent>

<TabsContent value="verification" className="m-0">
                <div className="flex gap-3">
                  <Input
                    type="text"
                    name="verificationCode"
                    value={form.verificationCode}
                    onChange={handleInputChange}
                    placeholder="验证码"
                    className="border-gray-300 text-gray-900 h-12"
                    disabled={isLoading}
                  />
                  <Button
                    type="button"
                    variant="outline"
                    className="w-32 h-12 border-gray-300 text-gray-600 hover:text-gray-900"
                    onClick={handleSendVerificationCode}
                    disabled={isLoading}
                  >
                    发送验证码
                  </Button>
                </div>
              </TabsContent>

<div className="flex items-center space-x-2">
                <Checkbox
                  id="terms"
                  checked={form.agreeToTerms}
                  onCheckedChange={handleCheckboxChange}
                  className="border-gray-300 data-[state=checked]:bg-blue-500"
                  disabled={isLoading}
                />
                <label htmlFor="terms" className="text-sm text-gray-600">
                  已阅读并同意
                  <a href="#" className="text-blue-500 mx-1">
                    用户协议
                  </a>
                  与
                  <a href="#" className="text-blue-500 ml-1">
                    隐私政策
                  </a>
                </label>
              </div>

<Button
                type="submit"
                className="w-full h-12 bg-blue-500 hover:bg-blue-600 text-white"
                disabled={isLoading}
              >
                {isLoading ? "登录中..." : "登录"}
              </Button>

<div className="space-y-3">
                <Button
                  type="button"
                  variant="outline"
                  className="w-full h-12 border-gray-300 text-gray-700 hover:bg-gray-50"
                  disabled={isLoading}
                >
                  <WeChatIcon className="w-6 h-6 mr-2 text-[#07C160]" />
                  使用微信登录
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  className="w-full h-12 border-gray-300 text-gray-700 hover:bg-gray-50"
                  disabled={isLoading}
                >
                  <AppleIcon className="w-6 h-6 mr-2" />
                  使用 Apple 登录
                </Button>
              </div>
            </form>

<div className="mt-8 text-center">
              <a href="#" className="text-sm text-gray-500">
                联系我们
              </a>
            </div>
          </div>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/auto-group/components/group-preview.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { Users, AlertCircle, CheckCircle2 } from "lucide-react"

interface Friend {
  id: string
  nickname: string
  wechatId: string
  tags: string[]
}

interface GroupPreviewProps {
  groupIndex: number
  members: Friend[]
  isCreating: boolean
  isCompleted: boolean
  onRetry?: () => void
}

export function GroupPreview({ groupIndex, members, isCreating, isCompleted, onRetry }: GroupPreviewProps) {
  const [expanded, setExpanded] = useState(false)

return (
    <Card className="w-full">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg font-medium">
            群 {groupIndex + 1}
            <Badge variant={isCompleted ? "success" : isCreating ? "default" : "secondary"} className="ml-2">
              {isCompleted ? "已完成" : isCreating ? "创建中" : "等待中"}
            </Badge>
          </CardTitle>
          <div className="flex items-center space-x-2">
            <Users className="w-4 h-4 text-gray-500" />
            <span className="text-sm text-gray-500">{members.length}/38</span>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        {isCreating && !isCompleted && (
          <div className="mb-4">
            <Progress value={Math.round((members.length / 38) * 100)} />
          </div>
        )}

{expanded ? (
          <div className="space-y-2">
            <div className="grid grid-cols-2 gap-2">
              {members.map((member) => (
                <div key={member.id} className="text-sm flex items-center space-x-2 bg-gray-50 p-2 rounded">
                  <span className="truncate">{member.nickname}</span>
                  {member.tags.length > 0 && (
                    <Badge variant="outline" className="text-xs">
                      {member.tags[0]}
                    </Badge>
                  )}
                </div>
              ))}
            </div>
            <Button variant="ghost" size="sm" className="w-full mt-2" onClick={() => setExpanded(false)}>
              收起
            </Button>
          </div>
        ) : (
          <Button variant="ghost" size="sm" className="w-full" onClick={() => setExpanded(true)}>
            查看成员 ({members.length})
          </Button>
        )}

{!isCompleted && members.length < 38 && (
          <div className="mt-4 flex items-center text-amber-500 text-sm">
            <AlertCircle className="w-4 h-4 mr-2" />
            群人数不足38人
            {onRetry && (
              <Button variant="ghost" size="sm" className="ml-2 text-blue-500" onClick={onRetry}>
                继续拉人
              </Button>
            )}
          </div>
        )}

{isCompleted && (
          <div className="mt-4 flex items-center text-green-500 text-sm">
            <CheckCircle2 className="w-4 h-4 mr-2" />
            群创建完成
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/auto-group/components/group-creation-progress.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { GroupPreview } from "./group-preview"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { AlertCircle, CheckCircle2 } from "lucide-react"

interface GroupCreationProgressProps {
  planId: string
  onComplete: () => void
}

export function GroupCreationProgress({ planId, onComplete }: GroupCreationProgressProps) {
  const [groups, setGroups] = useState<any[]>([])
  const [currentGroupIndex, setCurrentGroupIndex] = useState(0)
  const [status, setStatus] = useState<"preparing" | "creating" | "completed">("preparing")
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    // 模拟获取分组数据
    const mockGroups = Array.from({ length: 5 }).map((_, index) => ({
      id: `group-${index}`,
      members: Array.from({ length: Math.floor(Math.random() * 10) + 30 }).map((_, mIndex) => ({
        id: `member-${index}-${mIndex}`,
        nickname: `用户${mIndex + 1}`,
        wechatId: `wx_${mIndex}`,
        tags: [`标签${(mIndex % 3) + 1}`],
      })),
    }))
    setGroups(mockGroups)
    setStatus("creating")
  }, [])

useEffect(() => {
    if (status === "creating" && currentGroupIndex < groups.length) {
      const timer = setTimeout(() => {
        if (currentGroupIndex === groups.length - 1) {
          setStatus("completed")
          onComplete()
        } else {
          setCurrentGroupIndex((prev) => prev + 1)
        }
      }, 3000)
      return () => clearTimeout(timer)
    }
  }, [status, currentGroupIndex, groups.length, onComplete])

const handleRetryGroup = (groupIndex: number) => {
    // 模拟重试逻辑
    setGroups((prev) =>
      prev.map((group, index) => {
        if (index === groupIndex) {
          return {
            ...group,
            members: [
              ...group.members,
              {
                id: `retry-member-${Date.now()}`,
                nickname: `补充用户${group.members.length + 1}`,
                wechatId: `wx_retry_${Date.now()}`,
                tags: ["新加入"],
              },
            ],
          }
        }
        return group
      }),
    )
  }

return (
    <div className="space-y-4">
      <Card>
        <CardHeader className="pb-2">
          <div className="flex items-center justify-between">
            <CardTitle className="text-lg font-medium">
              建群进度
              <Badge className="ml-2">
                {status === "preparing" ? "准备中" : status === "creating" ? "创建中" : "已完成"}
              </Badge>
            </CardTitle>
            <div className="text-sm text-gray-500">
              {currentGroupIndex + 1}/{groups.length}组
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <Progress value={Math.round(((currentGroupIndex + 1) / groups.length) * 100)} className="h-2" />
        </CardContent>
      </Card>

{error && (
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

<ScrollArea className="h-[calc(100vh-300px)]">
        <div className="space-y-4">
          {groups.map((group, index) => (
            <GroupPreview
              key={group.id}
              groupIndex={index}
              members={group.members}
              isCreating={status === "creating" && index === currentGroupIndex}
              isCompleted={status === "completed" || index < currentGroupIndex}
              onRetry={() => handleRetryGroup(index)}
            />
          ))}
        </div>
      </ScrollArea>

{status === "completed" && (
        <Alert>
          <CheckCircle2 className="h-4 w-4" />
          <AlertDescription>所有群组已创建完成</AlertDescription>
        </Alert>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/auto-group/components/auto-group-service.ts" isMerged="true"
export interface Friend {
  id: string
  nickname: string
  wechatId: string
  tags: string[]
}

export interface GroupConfig {
  size: number
  specificWechatIds: string[]
  keywords: string[]
  tags: string[]
}

export class AutoGroupService {
  static async createGroups(friends: Friend[], config: GroupConfig) {
    // 1. 过滤好友
    const filteredFriends = this.filterFriends(friends, config)

// 2. 分组
    const groups = this.groupFriends(filteredFriends, config)

return groups
  }

private static filterFriends(friends: Friend[], config: GroupConfig) {
    return friends.filter((friend) => {
      // 关键词匹配
      const matchesKeywords =
        config.keywords.length === 0 ||
        config.keywords.some((keyword) => friend.nickname.includes(keyword) || friend.wechatId.includes(keyword))

// 标签匹配
      const matchesTags = config.tags.length === 0 || config.tags.some((tag) => friend.tags.includes(tag))

return matchesKeywords && matchesTags
    })
  }

private static groupFriends(friends: Friend[], config: GroupConfig) {
    const groups: Friend[][] = []
    let currentGroup: Friend[] = []

// 添加指定的微信号到每个组
    const specificFriends = friends.filter((f) => config.specificWechatIds.includes(f.wechatId))

// 剩余好友
    const remainingFriends = friends.filter((f) => !config.specificWechatIds.includes(f.wechatId))

// 分组
    for (const friend of remainingFriends) {
      if (currentGroup.length >= config.size - specificFriends.length) {
        groups.push([...specificFriends, ...currentGroup])
        currentGroup = []
      }
      currentGroup.push(friend)
    }

// 处理最后一组
    if (currentGroup.length > 0) {
      groups.push([...specificFriends, ...currentGroup])
    }

return groups
  }

static async checkGroupSize(groupId: string): Promise<number> {
    // 模拟检查群大小的API调用
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(Math.floor(Math.random() * 10) + 30)
      }, 1000)
    })
  }

static async addMembersToGroup(groupId: string, members: Friend[]): Promise<boolean> {
    // 模拟添加成员的API调用
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(true)
      }, 2000)
    })
  }
}
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/[id]/view/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronLeft, Edit2, RefreshCw } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

interface MomentContent {
  id: string
  type: string
  content: string
  images: string[]
  publishTime: string
  pushTime: string
  status: "已发送" | "待发送" | "已终止"
}

const mockData: MomentContent[] = [
  {
    id: "399401",
    type: "图文",
    content: "一定要把安全意识这件事情，刻在DNA里......",
    images: [
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Z8LxL98X5Bwm5Jr5ke3755Qd97PSYC.png",
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Z8LxL98X5Bwm5Jr5ke3755Qd97PSYC.png",
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Z8LxL98X5Bwm5Jr5ke3755Qd97PSYC.png",
    ],
    publishTime: "2025-02-15 23:37:49",
    pushTime: "2025-02-16 08:50:36",
    status: "已发送",
  },
]

export default function MomentsSyncViewPage() {
  const [syncName] = useState("同步卡若主号")

return (
    <div className="min-h-screen bg-gray-50">
      <header className="sticky top-0 z-10 bg-white border-b">
        <div className="flex items-center justify-between h-14 px-4">
          <div className="flex items-center">
            <Button variant="ghost" size="icon" onClick={() => window.history.back()}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="ml-2 text-lg font-medium">{syncName}</h1>
          </div>
          <div className="flex items-center space-x-2">
            <Button variant="outline" size="sm">
              <Edit2 className="h-4 w-4 mr-2" />
              编辑
            </Button>
            <Button variant="outline" size="sm">
              <RefreshCw className="h-4 w-4 mr-2" />
              刷新
            </Button>
          </div>
        </div>
      </header>

<div className="p-4 max-w-7xl mx-auto space-y-6">
        <Card className="p-6">
          <h2 className="text-lg font-medium mb-4">基本信息</h2>
          <div className="space-y-4">
            <div className="flex items-center">
              <span className="text-gray-500 w-32">朋友圈同步名称：</span>
              <span>{syncName}</span>
            </div>
          </div>
        </Card>

<Card className="p-6">
          <h2 className="text-lg font-medium mb-4">推送日志</h2>
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[100px]">ID</TableHead>
                  <TableHead>内容类型</TableHead>
                  <TableHead>内容</TableHead>
                  <TableHead>图片</TableHead>
                  <TableHead>推送时间</TableHead>
                  <TableHead>内容发布时间</TableHead>
                  <TableHead>状态</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {mockData.map((item) => (
                  <TableRow key={item.id}>
                    <TableCell>{item.id}</TableCell>
                    <TableCell>{item.type}</TableCell>
                    <TableCell className="max-w-[300px] truncate">{item.content}</TableCell>
                    <TableCell>
                      <div className="flex space-x-2">
                        {item.images.map((img, index) => (
                          <img
                            key={index}
                            src={img || "/placeholder.svg"}
                            alt={`Content ${index + 1}`}
                            className="w-16 h-16 object-cover rounded"
                          />
                        ))}
                      </div>
                    </TableCell>
                    <TableCell>{item.pushTime}</TableCell>
                    <TableCell>{item.publishTime}</TableCell>
                    <TableCell>
                      <span
                        className={`px-2 py-1 rounded-full text-xs ${
                          item.status === "已发送"
                            ? "bg-green-100 text-green-800"
                            : item.status === "待发送"
                              ? "bg-blue-100 text-blue-800"
                              : "bg-red-100 text-red-800"
                        }`}
                      >
                        {item.status}
                      </span>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]plaintext:file="app/scenarios/new/steps/DeviceSelection" isMerged="true"
[V0_FILE]plaintext:file="app/scenarios/new/steps/TrafficChannelSettings" isMerged="true"
"use client"

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Plus, Pencil, Trash2, Link2 } from "lucide-react"
import { toast } from "@/components/ui/use-toast"

interface Channel {
  id: string
  name: string
  type: "team" | "other"
  link?: string
}

interface TrafficChannelSettingsProps {
  formData: any
  onChange: (data: any) => void
  onNext: () => void
  onPrev: () => void
}

function isValidUrl(string: string) {
  try {
    new URL(string)
    return true
  } catch (_) {
    return false
  }
}

export function TrafficChannelSettings({ formData, onChange, onNext, onPrev }: TrafficChannelSettingsProps) {
  const [channels, setChannels] = useState<Channel[]>(formData.channels || [])
  const [isAddChannelOpen, setIsAddChannelOpen] = useState(false)
  const [editingChannel, setEditingChannel] = useState<Channel | null>(null)
  const [newChannel, setNewChannel] = useState<Partial<Channel>>({
    name: "",
    type: "team",
    link: "",
  })

const handleAddChannel = () => {
    if (!newChannel.name) return
    if (newChannel.link && !isValidUrl(newChannel.link)) {
      toast({
        title: "错误",
        description: "请输入有效的URL",
        variant: "destructive",
      })
      return
    }

if (editingChannel) {
      setChannels(
        channels.map((channel) => (channel.id === editingChannel.id ? { ...channel, ...newChannel } : channel)),
      )
    } else {
      setChannels([
        ...channels,
        {
          id: Date.now().toString(),
          name: newChannel.name,
          type: newChannel.type || "team",
          link: newChannel.link,
        } as Channel,
      ])
    }

setIsAddChannelOpen(false)
    setNewChannel({ name: "", type: "team", link: "" })
    setEditingChannel(null)
    onChange({ ...formData, channels })
  }

const handleEditChannel = (channel: Channel) => {
    setEditingChannel(channel)
    setNewChannel(channel)
    setIsAddChannelOpen(true)
  }

const handleDeleteChannel = (channelId: string) => {
    setChannels(channels.filter((channel) => channel.id !== channelId))
    onChange({ ...formData, channels: channels.filter((channel) => channel.id !== channelId) })
  }

return (
    <Card className="p-6">
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <h2 className="text-lg font-semibold">流量通道设置</h2>
          <Button onClick={() => setIsAddChannelOpen(true)}>
            <Plus className="h-4 w-4 mr-2" />
            添加通道
          </Button>
        </div>

<div className="border rounded-lg">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>通道名称</TableHead>
                <TableHead>类型</TableHead>
                <TableHead>链接</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {channels.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={4} className="text-center py-8 text-gray-500">
                    暂无数据
                  </TableCell>
                </TableRow>
              ) : (
                channels.map((channel) => (
                  <TableRow key={channel.id}>
                    <TableCell>{channel.name}</TableCell>
                    <TableCell>{channel.type === "team" ? "打粉团队" : "其他"}</TableCell>
                    <TableCell>
                      {channel.link && (
                        <div className="flex items-center space-x-2">
                          <Link2 className="h-4 w-4" />
                          <span className="text-blue-600">{channel.link}</span>
                        </div>
                      )}
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end space-x-2">
                        <Button variant="ghost" size="sm" onClick={() => handleEditChannel(channel)}>
                          <Pencil className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="sm" onClick={() => handleDeleteChannel(channel.id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>

<Dialog open={isAddChannelOpen} onOpenChange={setIsAddChannelOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{editingChannel ? "编辑通道" : "添加通道"}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label>通道名称</Label>
              <Input
                value={newChannel.name}
                onChange={(e) => setNewChannel({ ...newChannel, name: e.target.value })}
                placeholder="请输入通道名称"
              />
            </div>
            <div className="space-y-2">
              <Label>通道类型</Label>
              <Select
                value={newChannel.type}
                onValueChange={(value) => setNewChannel({ ...newChannel, type: value as "team" | "other" })}
              >
                <SelectTrigger>
                  <SelectValue placeholder="选择通道类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="team">打粉团队</SelectItem>
                  <SelectItem value="other">其他</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>通道链接（选填）</Label>
              <Input
                value={newChannel.link}
                onChange={(e) => setNewChannel({ ...newChannel, link: e.target.value })}
                placeholder="请输入通道链接"
              />
              {newChannel.link && !isValidUrl(newChannel.link) && (
                <p className="text-sm text-red-500">请输入有效的URL</p>
              )}
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsAddChannelOpen(false)}>
              取消
            </Button>
            <Button onClick={handleAddChannel}>{editingChannel ? "保存" : "添加"}</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/scenarios/[channel]/devices/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ChevronLeft, Filter, Search, RefreshCw } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Checkbox } from "@/components/ui/checkbox"
import { toast } from "@/components/ui/use-toast"
import type { Device } from "@/types/device"

export default function ScenarioDevicesPage({ params }: { params: { channel: string } }) {
  const router = useRouter()
  const [devices, setDevices] = useState<Device[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [currentPage, setCurrentPage] = useState(1)
  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
  const devicesPerPage = 10
  const maxDevices = 5

// 获取渠道中文名称
  const getChannelName = (channel: string) => {
    const channelMap: Record<string, string> = {
      douyin: "抖音",
      kuaishou: "快手",
      xiaohongshu: "小红书",
      weibo: "微博",
    }
    return channelMap[channel] || channel
  }

const channelName = getChannelName(params.channel)

useEffect(() => {
    // 模拟API调用
    const fetchDevices = async () => {
      const mockDevices = Array.from({ length: 15 }, (_, i) => ({
        id: `device-${i + 1}`,
        imei: `sd${123123 + i}`,
        name: `设备 ${i + 1}`,
        remark: `${channelName}获客设备 ${i + 1}`,
        status: Math.random() > 0.2 ? "online" : "offline",
        battery: Math.floor(Math.random() * 100),
        wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
        friendCount: Math.floor(Math.random() * 1000),
        todayAdded: Math.floor(Math.random() * 50),
        messageCount: Math.floor(Math.random() * 200),
        lastActive: new Date(Date.now() - Math.random() * 86400000).toLocaleString(),
        addFriendStatus: Math.random() > 0.2 ? "normal" : "abnormal",
      }))
      setDevices(mockDevices)
    }

fetchDevices()
  }, [channelName])

const handleRefresh = () => {
    toast({
      title: "刷新成功",
      description: "设备列表已更新",
    })
  }

const handleSelectAll = () => {
    if (selectedDevices.length === devices.length || selectedDevices.length === maxDevices) {
      setSelectedDevices([])
    } else {
      const newSelection = devices.slice(0, maxDevices).map((d) => d.id)
      setSelectedDevices(newSelection)
    }
  }

const handleDeviceSelect = (deviceId: string) => {
    if (selectedDevices.includes(deviceId)) {
      setSelectedDevices(selectedDevices.filter((id) => id !== deviceId))
    } else {
      if (selectedDevices.length >= maxDevices) {
        toast({
          title: "选择超出限制",
          description: `最多可选择${maxDevices}个设备`,
          variant: "destructive",
        })
        return
      }
      setSelectedDevices([...selectedDevices, deviceId])
    }
  }

const handleSave = async () => {
    try {
      // 这里应该是实际的API调用来保存选中的设备
      await new Promise((resolve) => setTimeout(resolve, 1000))
      toast({
        title: "保存成功",
        description: "已更新计划设备",
      })
      router.back()
    } catch (error) {
      toast({
        title: "保存失败",
        description: "更新设备失败，请重试",
        variant: "destructive",
      })
    }
  }

const filteredDevices = devices.filter((device) => {
    const matchesSearch =
      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
      device.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesStatus = statusFilter === "all" || device.status === statusFilter
    return matchesSearch && matchesStatus
  })

const paginatedDevices = filteredDevices.slice((currentPage - 1) * devicesPerPage, currentPage * devicesPerPage)

<div className="p-4 space-y-4">
        <Card className="p-4">
          <div className="space-y-3">
            <div className="flex items-center space-x-2">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="搜索设备IMEI/备注"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-9"
                />
              </div>
              <Button variant="outline" size="icon">
                <Filter className="h-4 w-4" />
              </Button>
              <Button variant="outline" size="icon" onClick={handleRefresh}>
                <RefreshCw className="h-4 w-4" />
              </Button>
            </div>

<div className="flex items-center justify-between">
              <div className="flex items-center space-x-4">
                <Select value={statusFilter} onValueChange={setStatusFilter}>
                  <SelectTrigger className="w-[120px]">
                    <SelectValue placeholder="全部状态" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部状态</SelectItem>
                    <SelectItem value="online">在线</SelectItem>
                    <SelectItem value="offline">离线</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="text-sm text-gray-500">
                已选择 {selectedDevices.length}/{maxDevices} 个设备
              </div>
            </div>

<div className="flex items-center space-x-2">
              <Checkbox
                checked={
                  selectedDevices.length > 0 &&
                  (selectedDevices.length === devices.length || selectedDevices.length === maxDevices)
                }
                onCheckedChange={handleSelectAll}
              />
              <span className="text-sm">全选</span>
            </div>

<div className="space-y-2">
              {paginatedDevices.length === 0 ? (
                <div className="text-center py-8 text-gray-500">暂无设备</div>
              ) : (
                paginatedDevices.map((device) => (
                  <Card
                    key={device.id}
                    className={`p-3 hover:shadow-md transition-shadow cursor-pointer ${
                      selectedDevices.includes(device.id) ? "ring-2 ring-primary" : ""
                    }`}
                    onClick={() => handleDeviceSelect(device.id)}
                  >
                    <div className="flex items-center space-x-3">
                      <Checkbox
                        checked={selectedDevices.includes(device.id)}
                        className="mt-1"
                        onClick={(e) => {
                          e.stopPropagation()
                          handleDeviceSelect(device.id)
                        }}
                      />
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center justify-between mb-1">
                          <div className="font-medium truncate">{device.name}</div>
                          <Badge variant={device.status === "online" ? "success" : "secondary"}>
                            {device.status === "online" ? "在线" : "离线"}
                          </Badge>
                        </div>
                        <div className="text-sm text-gray-500">IMEI: {device.imei}</div>
                        <div className="text-sm text-gray-500">微信号: {device.wechatId}</div>
                        <div className="flex items-center justify-between mt-1 text-sm">
                          <span className="text-gray-500">好友数: {device.friendCount}</span>
                          <span className="text-gray-500">今日新增: +{device.todayAdded}</span>
                        </div>
                      </div>
                    </div>
                  </Card>
                ))
              )}
            </div>

{filteredDevices.length > devicesPerPage && (
              <div className="flex justify-between items-center pt-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
                  disabled={currentPage === 1}
                >
                  上一页
                </Button>
                <span className="text-sm text-gray-500">
                  第 {currentPage} / {Math.ceil(filteredDevices.length / devicesPerPage)} 页
                </span>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() =>
                    setCurrentPage((prev) => Math.min(Math.ceil(filteredDevices.length / devicesPerPage), prev + 1))
                  }
                  disabled={currentPage === Math.ceil(filteredDevices.length / devicesPerPage)}
                >
                  下一页
                </Button>
              </div>
            )}
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/scenarios/new/steps/PosterEditor.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Card, CardFooter } from "@/components/ui/card"
import {
  Upload,
  PenTool,
  Type,
  QrCode,
  ChevronRight,
  ArrowRight,
  Smartphone,
  Monitor,
  Tablet,
  Save,
  Share2,
  Eye,
} from "lucide-react"
import { Switch } from "@/components/ui/switch"
import { cn } from "@/lib/utils"

const DEFAULT_TEMPLATES = [
  {
    id: "register",
    name: "点击报名",
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%80%9B%E6%A8%BA%EE%85%B9%E7%80%B9%E6%BF%87%E6%8D%A3%E9%8E%B6_%E9%90%90%E7%91%B0%E5%9A%AE%E9%8E%B6%E3%83%A5%E6%82%95-vJDCYhJ9ENr8jN3YGP9jVeQ5Ub3czl.gif",
    color: "#d32121",
    textColor: "#ffffff",
  },
  {
    id: "claim",
    name: "点击领取",
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%80%9B%E6%A8%BA%EE%85%B9%E7%80%B9%E6%BF%87%E6%8D%A3%E9%8E%B6_%E9%90%90%E7%91%B0%E5%9A%AE%E6%A3%B0%E5%97%97%E5%BD%871-cskUmYR6oO0n4uHdZVeB4naKUSUilb.gif",
    color: "#d32121",
    textColor: "#ffffff",
  },
  {
    id: "consult",
    name: "点击咨询",
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%80%9B%E6%A8%BA%EE%85%B9%E7%80%B9%E6%BF%87%E6%8D%A3%E9%8E%B6_%E9%90%90%E7%91%B0%E5%9A%AE%E9%8D%9C%E3%84%A8%EE%87%97-OUtJxwRbr4ydYRjt8FLOCMELC16Vw6.gif",
    color: "#d32121",
    textColor: "#ffffff",
  },
  {
    id: "checkin",
    name: "点击签到",
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%80%9B%E6%A8%BA%EE%85%B9%E7%80%B9%E6%BF%87%E6%8D%A3%E9%8E%B6_%E9%90%90%E7%91%B0%E5%9A%AE%E7%BB%9B%E6%83%A7%E5%9F%8C-bYcTocSdNrcykfBXmt51q6D4Yzh26h.gif",
    color: "#d32121",
    textColor: "#ffffff",
  },
  {
    id: "cooperation",
    name: "点击合作",
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%80%9B%E6%A8%BA%EE%85%B9%E7%80%B9%E6%BF%87%E6%8D%A3%E9%8E%B6_%E9%90%90%E7%91%B0%E5%9A%AE%E9%8D%9A%E5%A0%9C%E7%B6%94-kisPT3kV9A0aB7YpxO6AHUZ8aHvFLT.gif",
    color: "#d32121",
    textColor: "#ffffff",
  },
  {
    id: "learn",
    name: "点击了解",
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%80%9B%E6%A8%BA%EE%85%B9%E7%80%B9%E6%BF%87%E6%8D%A3%E9%8E%B6_%E9%90%90%E7%91%B0%E5%9A%AE%E6%B5%9C%E5%97%9A%D0%92-iE654sFFuO1PuvwmccV67yVLQZoLcx.gif",
    color: "#d32121",
    textColor: "#ffffff",
  },
  {
    id: "claim_static",
    name: "点击领取(静态)",
    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%80%9B%E6%A8%BA%EE%85%B9%E7%80%B9%E6%BF%87%E6%8D%A3%E9%8E%B6_%E9%90%90%E7%91%B0%E5%9A%AE%E6%A3%B0%E5%97%97%E5%BD%87-jO6FPRCCzz6Irkm5suKeNkUDd98Y0f.png",
    color: "#d32121",
    textColor: "#ffffff",
  },
]

export function PosterEditor({
  onChange,
  initialValue = null,
}: {
  onChange: (value: any) => void
  initialValue?: any
}) {
  const [selectedTemplate, setSelectedTemplate] = useState(initialValue?.template || DEFAULT_TEMPLATES[0])
  const [customText, setCustomText] = useState(initialValue?.customText || selectedTemplate.name)
  const [mainColor, setMainColor] = useState(initialValue?.mainColor || selectedTemplate.color)
  const [textColor, setTextColor] = useState(initialValue?.textColor || selectedTemplate.textColor)
  const [hasQrCode, setHasQrCode] = useState(initialValue?.hasQrCode || false)
  const [qrCodeUrl, setQrCodeUrl] = useState(initialValue?.qrCodeUrl || "")
  const [offerText, setOfferText] = useState(initialValue?.offerText || "")
  const [previewDevice, setPreviewDevice] = useState("mobile")
  const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false)

const canvasRef = useRef<HTMLCanvasElement>(null)

// 当任何相关状态变化时更新父组件
  useEffect(() => {
    onChange({
      template: selectedTemplate,
      customText,
      mainColor,
      textColor,
      hasQrCode,
      qrCodeUrl,
      offerText,
    })
  }, [selectedTemplate, customText, mainColor, textColor, hasQrCode, qrCodeUrl, offerText, onChange])

// 预览海报的渲染
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

// 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height)

// 获取原始海报图像
    const img = new Image()
    img.crossOrigin = "anonymous"
    img.src = selectedTemplate.src

img.onload = () => {
      // 绘制原始海报
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

// 自定义文本
      if (customText !== selectedTemplate.name) {
        // 首先绘制一个半透明背景，盖住原文字
        ctx.fillStyle = "rgba(255, 255, 255, 0.85)"
        ctx.fillRect(20, 30, canvas.width - 40, 150)

// 绘制自定义文字
        ctx.fillStyle = mainColor
        ctx.font = "bold 42px sans-serif"
        ctx.textAlign = "center"
        ctx.textBaseline = "middle"
        ctx.fillText(customText, canvas.width / 2, 100)
      }

// 如果添加了二维码
      if (hasQrCode) {
        // 添加一个二维码占位背景
        ctx.fillStyle = "#ffffff"
        ctx.fillRect(canvas.width - 120, canvas.height - 120, 100, 100)
        ctx.strokeStyle = "#dddddd"
        ctx.lineWidth = 1
        ctx.strokeRect(canvas.width - 120, canvas.height - 120, 100, 100)

// 添加二维码图标占位
        ctx.fillStyle = "#888888"
        ctx.fillRect(canvas.width - 100, canvas.height - 100, 60, 60)

// 添加"扫码获取"文本
        ctx.fillStyle = "#333333"
        ctx.font = "14px sans-serif"
        ctx.textAlign = "center"
        ctx.fillText("扫码获取", canvas.width - 70, canvas.height - 20)
      }

// 如果添加了优惠文本
      if (offerText) {
        // 添加一个醒目的优惠信息标签
        ctx.fillStyle = "#ffeb3b"
        ctx.beginPath()
        ctx.moveTo(0, canvas.height - 200)
        ctx.lineTo(200, canvas.height - 200)
        ctx.lineTo(170, canvas.height - 150)
        ctx.lineTo(0, canvas.height - 150)
        ctx.closePath()
        ctx.fill()

// 添加优惠文本
        ctx.fillStyle = "#d32121"
        ctx.font = "bold 18px sans-serif"
        ctx.textAlign = "left"
        ctx.fillText(offerText, 15, canvas.height - 175)
      }
    }
  }, [selectedTemplate, customText, mainColor, hasQrCode, offerText])

return (
    <div className="flex flex-col gap-6">
      <h2 className="text-lg font-medium">海报编辑器</h2>

<TabsContent value="design" className="space-y-4 pt-4">
          <div>
            <Label>选择模板</Label>
            <div className="mt-2 flex justify-between">
              <div className="w-24 h-40 bg-gray-100 rounded relative overflow-hidden">
                {selectedTemplate && (
                  <img
                    src={selectedTemplate.src || "/placeholder.svg"}
                    alt={selectedTemplate.name}
                    className="object-cover w-full h-full"
                  />
                )}
              </div>

<div className="ml-4 flex-1 flex flex-col justify-between">
                <div>
                  <h4 className="font-medium">{selectedTemplate?.name || "请选择模板"}</h4>
                  <p className="text-sm text-gray-500 mt-1">点击右侧按钮选择其他模板</p>
                </div>

<Dialog open={isTemplateDialogOpen} onOpenChange={setIsTemplateDialogOpen}>
                  <DialogTrigger asChild>
                    <Button variant="outline" className="mt-2">
                      更换模板
                      <ChevronRight className="ml-1 h-4 w-4" />
                    </Button>
                  </DialogTrigger>
                  <DialogContent className="max-w-3xl">
                    <DialogHeader>
                      <DialogTitle>选择海报模板</DialogTitle>
                    </DialogHeader>

<div className="grid grid-cols-3 gap-4 max-h-[60vh] overflow-y-auto p-2">
                      {DEFAULT_TEMPLATES.map((template) => (
                        <Card
                          key={template.id}
                          className={cn(
                            "overflow-hidden cursor-pointer transition-all transform hover:scale-105",
                            selectedTemplate.id === template.id && "ring-2 ring-blue-500",
                          )}
                          onClick={() => {
                            setSelectedTemplate(template)
                            setCustomText(template.name)
                            setMainColor(template.color)
                            setTextColor(template.textColor)
                            setIsTemplateDialogOpen(false)
                          }}
                        >
                          <div className="aspect-[9/16] bg-gray-100 relative">
                            <img
                              src={template.src || "/placeholder.svg"}
                              alt={template.name}
                              className="w-full h-full object-cover"
                            />
                          </div>
                          <CardFooter className="p-2">
                            <p className="text-sm text-center w-full">{template.name}</p>
                          </CardFooter>
                        </Card>
                      ))}

<Card className="overflow-hidden cursor-pointer transition-all transform hover:scale-105">
                        <div className="aspect-[9/16] bg-gray-100 flex flex-col items-center justify-center text-gray-500">
                          <Upload className="h-8 w-8 mb-2" />
                          <p className="text-sm">上传自定义模板</p>
                        </div>
                        <CardFooter className="p-2">
                          <p className="text-sm text-center w-full">自定义上传</p>
                        </CardFooter>
                      </Card>
                    </div>
                  </DialogContent>
                </Dialog>
              </div>
            </div>
          </div>

<div className="grid grid-cols-2 gap-4">
            <div>
              <Label htmlFor="mainColor">主色调</Label>
              <div className="flex mt-2">
                <div className="w-10 h-8 rounded-l border" style={{ backgroundColor: mainColor }}></div>
                <Input
                  id="mainColor"
                  type="text"
                  value={mainColor}
                  onChange={(e) => setMainColor(e.target.value)}
                  className="rounded-l-none"
                />
              </div>
            </div>

<div>
              <Label htmlFor="textColor">文字颜色</Label>
              <div className="flex mt-2">
                <div className="w-10 h-8 rounded-l border" style={{ backgroundColor: textColor }}></div>
                <Input
                  id="textColor"
                  type="text"
                  value={textColor}
                  onChange={(e) => setTextColor(e.target.value)}
                  className="rounded-l-none"
                />
              </div>
            </div>
          </div>

<div className="flex items-center justify-between">
            <Button variant="outline" size="sm">
              重置样式
            </Button>
            <Button variant="outline" size="sm">
              保存为模板
            </Button>
          </div>
        </TabsContent>

<TabsContent value="content" className="space-y-4 pt-4">
          <div>
            <Label htmlFor="customText">海报文字</Label>
            <Input
              id="customText"
              value={customText}
              onChange={(e) => setCustomText(e.target.value)}
              className="mt-2"
            />
          </div>

<div>
            <Label htmlFor="offerText">优惠信息(选填)</Label>
            <Input
              id="offerText"
              value={offerText}
              onChange={(e) => setOfferText(e.target.value)}
              className="mt-2"
              placeholder="例如: 限时8.5折 | 新人专享"
            />
            <p className="text-xs text-gray-500 mt-1">添加醒目的优惠信息，提升用户点击欲望</p>
          </div>

<div>
            <Label>推荐措辞</Label>
            <div className="flex flex-wrap gap-2 mt-2">
              {["限时特惠", "新人专享", "首单立减", "买一送一", "折扣优惠", "免费领取"].map((tag) => (
                <Button key={tag} variant="outline" size="sm" onClick={() => setOfferText(tag)}>
                  {tag}
                </Button>
              ))}
            </div>
          </div>
        </TabsContent>

<TabsContent value="interactive" className="space-y-4 pt-4">
          <div className="flex items-center justify-between">
            <div className="flex-1">
              <Label htmlFor="qrcode-switch" className="cursor-pointer">
                添加二维码
              </Label>
              <p className="text-xs text-gray-500 mt-1">添加二维码提高用户转化率</p>
            </div>
            <Switch id="qrcode-switch" checked={hasQrCode} onCheckedChange={setHasQrCode} />
          </div>

{hasQrCode && (
            <div>
              <Label htmlFor="qrcode-url">二维码链接(选填)</Label>
              <Input
                id="qrcode-url"
                value={qrCodeUrl}
                onChange={(e) => setQrCodeUrl(e.target.value)}
                className="mt-2"
                placeholder="输入链接或小程序路径"
              />
              <div className="mt-3 flex justify-between items-center">
                <p className="text-sm">上传自定义二维码</p>
                <Button variant="outline" size="sm" className="flex items-center">
                  <Upload className="h-3 w-3 mr-1" />
                  上传
                </Button>
              </div>
            </div>
          )}

<div className="border-t pt-4 mt-4">
            <h4 className="font-medium mb-2">点击行为</h4>
            <Select defaultValue="form">
              <SelectTrigger>
                <SelectValue placeholder="选择点击行为" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="form">填写表单</SelectItem>
                <SelectItem value="qrcode">扫码添加</SelectItem>
                <SelectItem value="call">拨打电话</SelectItem>
                <SelectItem value="link">访问链接</SelectItem>
              </SelectContent>
            </Select>
            <p className="text-xs text-gray-500 mt-2">设置用户点击海报后的行为</p>
          </div>
        </TabsContent>

<TabsContent value="preview" className="space-y-4 pt-4">
          <div className="flex justify-center space-x-2">
            <Button
              variant={previewDevice === "mobile" ? "default" : "outline"}
              size="sm"
              onClick={() => setPreviewDevice("mobile")}
              className="flex items-center"
            >
              <Smartphone className="h-4 w-4 mr-1" />
              手机
            </Button>
            <Button
              variant={previewDevice === "tablet" ? "default" : "outline"}
              size="sm"
              onClick={() => setPreviewDevice("tablet")}
              className="flex items-center"
            >
              <Tablet className="h-4 w-4 mr-1" />
              平板
            </Button>
            <Button
              variant={previewDevice === "desktop" ? "default" : "outline"}
              size="sm"
              onClick={() => setPreviewDevice("desktop")}
              className="flex items-center"
            >
              <Monitor className="h-4 w-4 mr-1" />
              电脑
            </Button>
          </div>

<div className="flex justify-center gap-2 mt-4">
            <Button variant="outline" size="sm" className="flex items-center">
              <Save className="h-4 w-4 mr-1" />
              保存
            </Button>
            <Button variant="outline" size="sm" className="flex items-center">
              <Share2 className="h-4 w-4 mr-1" />
              分享
            </Button>
            <Button className="flex items-center">
              确认使用
              <ArrowRight className="h-4 w-4 ml-1" />
            </Button>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/scenarios/[channel]/edit/[id]/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { ChevronLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { BasicSettings } from "../../../new/steps/BasicSettings"
import { FriendRequestSettings } from "../../../new/steps/FriendRequestSettings"
import { MessageSettings } from "../../../new/steps/MessageSettings"
import { TagSettings } from "../../../new/steps/TagSettings"
import { useRouter } from "next/navigation"
import { toast } from "@/components/ui/use-toast"

const steps = [
  { id: 1, title: "步骤一", subtitle: "基础设置" },
  { id: 2, title: "步骤二", subtitle: "好友申请设置" },
  { id: 3, title: "步骤三", subtitle: "消息设置" },
  { id: 4, title: "步骤四", subtitle: "流量标签设置" },
]

export default function EditAcquisitionPlan({ params }: { params: { channel: string; id: string } }) {
  const router = useRouter()
  const [currentStep, setCurrentStep] = useState(1)
  const [loading, setLoading] = useState(true)
  const [formData, setFormData] = useState({
    planName: "",
    accounts: [],
    dailyLimit: 10,
    enabled: true,
    remarkType: "phone",
    remarkKeyword: "",
    greeting: "",
    addFriendTimeStart: "09:00",
    addFriendTimeEnd: "18:00",
    addFriendInterval: 1,
    maxDailyFriends: 20,
    messageInterval: 1,
    messageContent: "",
  })

useEffect(() => {
    // 模拟从API获取计划数据
    const fetchPlanData = async () => {
      try {
        // 这里应该是实际的API调用
        const mockData = {
          planName: "测试计划",
          accounts: ["account1"],
          dailyLimit: 15,
          enabled: true,
          remarkType: "phone",
          remarkKeyword: "测试",
          greeting: "你好",
          addFriendTimeStart: "09:00",
          addFriendTimeEnd: "18:00",
          addFriendInterval: 2,
          maxDailyFriends: 25,
          messageInterval: 2,
          messageContent: "欢迎",
        }
        setFormData(mockData)
        setLoading(false)
      } catch (error) {
        toast({
          title: "加载失败",
          description: "获取计划数据失败，请重试",
          variant: "destructive",
        })
        setLoading(false)
      }
    }

fetchPlanData()
  }, [])

const handleSave = async () => {
    try {
      // 这里应该是实际的API调用
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast({
        title: "保存成功",
        description: "获客计划已更新",
      })
      router.push(`/scenarios/${params.channel}`)
    } catch (error) {
      toast({
        title: "保存失败",
        description: "更新计划失败，请重试",
        variant: "destructive",
      })
    }
  }

const handlePrev = () => {
    setCurrentStep((prevStep) => Math.max(prevStep - 1, 1))
  }

const handleNext = () => {
    if (isStepValid()) {
      if (currentStep === steps.length) {
        handleSave()
      } else {
        setCurrentStep((prevStep) => Math.min(prevStep + 1, steps.length))
      }
    }
  }

const isStepValid = () => {
    switch (currentStep) {
      case 1:
        if (!formData.planName.trim() || formData.accounts.length === 0) {
          toast({
            title: "请完善信息",
            description: "请填写计划名称并选择至少一个账号",
            variant: "destructive",
          })
          return false
        }
        return true
      case 2:
        if (!formData.greeting.trim()) {
          toast({
            title: "请完善信息",
            description: "请填写好友申请信息",
            variant: "destructive",
          })
          return false
        }
        return true
      case 3:
        if (!formData.messageContent.trim()) {
          toast({
            title: "请完善信息",
            description: "请填写消息内容",
            variant: "destructive",
          })
          return false
        }
        return true
      case 4:
        return true
      default:
        return true
    }
  }

if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-2 text-gray-600">加载中...</p>
        </div>
      </div>
    )
  }

const renderStepContent = () => {
    switch (currentStep) {
      case 1:
        return <BasicSettings formData={formData} onChange={setFormData} onNext={handleNext} isEdit />
      case 2:
        return (
          <FriendRequestSettings formData={formData} onChange={setFormData} onNext={handleNext} onPrev={handlePrev} />
        )
      case 3:
        return <MessageSettings formData={formData} onChange={setFormData} onNext={handleNext} onPrev={handlePrev} />
      case 4:
        return <TagSettings formData={formData} onChange={setFormData} onNext={handleSave} onPrev={handlePrev} />
      default:
        return null
    }
  }

return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-[390px] mx-auto bg-white min-h-screen flex flex-col">
        <header className="sticky top-0 z-10 bg-white border-b">
          <div className="flex items-center h-14 px-4">
            <Button variant="ghost" size="icon" onClick={() => router.back()}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="ml-2 text-lg font-medium">编辑获客计划</h1>
          </div>
        </header>

<div className="flex-1 flex flex-col">
          <div className="px-4 py-6">
            <div className="relative flex justify-between">
              {steps.map((step) => (
                <div
                  key={step.id}
                  className={cn(
                    "flex flex-col items-center relative z-10",
                    currentStep >= step.id ? "text-blue-600" : "text-gray-400",
                  )}
                >
                  <div
                    className={cn(
                      "w-8 h-8 rounded-full flex items-center justify-center border-2 transition-colors",
                      currentStep >= step.id
                        ? "border-blue-600 bg-blue-600 text-white"
                        : "border-gray-300 bg-white text-gray-400",
                    )}
                  >
                    {step.id}
                  </div>
                  <div className="text-xs mt-1">{step.title}</div>
                  <div className="text-xs mt-0.5 font-medium">{step.subtitle}</div>
                </div>
              ))}
              <div className="absolute top-4 left-0 right-0 h-0.5 bg-gray-200 -z-10">
                <div
                  className="absolute top-0 left-0 h-full bg-blue-600 transition-all duration-300"
                  style={{ width: `${((currentStep - 1) / (steps.length - 1)) * 100}%` }}
                />
              </div>
            </div>
          </div>

<div className="flex-1 px-4 pb-20">{renderStepContent()}</div>

<div className="sticky bottom-0 left-0 right-0 bg-white border-t p-4">
            <div className="flex justify-between max-w-[390px] mx-auto">
              {currentStep > 1 && (
                <Button variant="outline" onClick={handlePrev}>
                  上一步
                </Button>
              )}
              <Button className={cn("min-w-[120px]", currentStep === 1 ? "w-full" : "ml-auto")} onClick={handleNext}>
                {currentStep === steps.length ? "保存" : "下一步"}
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/scenarios/[channel]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Clock, ChevronLeft, MoreVertical, Copy, Pencil, Trash2 } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
import { useRouter } from "next/navigation"
import { Badge } from "@/components/ui/badge"
import { toast } from "@/components/ui/use-toast"
import { BindDouyinQRCode } from "@/components/BindDouyinQRCode"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import Link from "next/link"
import { PlanSettingsDialog } from "@/components/acquisition/PlanSettingsDialog"

// 获取渠道中文名称
const getChannelName = (channel: string) => {
  const channelMap: Record<string, string> = {
    douyin: "抖音",
    kuaishou: "快手",
    xiaohongshu: "小红书",
    weibo: "微博",
  }
  return channelMap[channel] || channel
}

interface Task {
  id: string
  name: string
  status: "running" | "paused" | "completed"
  stats: {
    devices: number
    acquired: number
    added: number
  }
  lastUpdated: string
  executionTime: string
  nextExecutionTime: string
  trend: { date: string; customers: number }[]
}

interface DeviceStats {
  active: number
}

export default function ChannelPage({ params }: { params: { channel: string } }) {
  const router = useRouter()
  const channel = params.channel
  const channelName = getChannelName(params.channel)

const [tasks, setTasks] = useState<Task[]>([
    {
      id: "1",
      name: `${channelName}直播获客计划`,
      status: "running",
      stats: {
        devices: 5,
        acquired: 31,
        added: 25,
      },
      lastUpdated: "2024-02-09 15:30",
      executionTime: "2024-02-09 17:24:10",
      nextExecutionTime: "2024-02-09 17:25:36",
      trend: Array.from({ length: 7 }, (_, i) => ({
        date: `2月${String(i + 1)}日`,
        customers: Math.floor(Math.random() * 30) + 30,
      })),
    },
    {
      id: "2",
      name: `${channelName}评论区获客计划`,
      status: "paused",
      stats: {
        devices: 3,
        acquired: 15,
        added: 12,
      },
      lastUpdated: "2024-02-09 14:00",
      executionTime: "2024-02-09 16:30:00",
      nextExecutionTime: "2024-02-09 16:45:00",
      trend: Array.from({ length: 7 }, (_, i) => ({
        date: `2月${String(i + 1)}日`,
        customers: Math.floor(Math.random() * 20) + 20,
      })),
    },
  ])

const [deviceStats, setDeviceStats] = useState<DeviceStats>({
    active: 5,
  })

const [isPlanSettingsOpen, setIsPlanSettingsOpen] = useState(false)
  const [selectedPlanId, setSelectedPlanId] = useState<string>("")

const toggleTaskStatus = (taskId: string) => {
    setTasks(
      tasks.map((task) => {
        if (task.id === taskId) {
          const newStatus = task.status === "running" ? "paused" : "running"
          return { ...task, status: newStatus }
        }
        return task
      }),
    )
  }

const handleEditPlan = (taskId: string) => {
    console.log(`编辑计划: ${taskId}`)
    console.log(`跳转到: /scenarios/${channel}/edit/${taskId}`)
    router.push(`/scenarios/${channel}/edit/${taskId}`)
  }

const handleCopyPlan = (taskId: string) => {
    const taskToCopy = tasks.find((task) => task.id === taskId)
    if (taskToCopy) {
      const newTask = {
        ...taskToCopy,
        id: `${Date.now()}`,
        name: `${taskToCopy.name} (副本)`,
        status: "paused" as const,
      }
      setTasks([...tasks, newTask])
      toast({
        title: "计划已复制",
        description: `已成功复制"${taskToCopy.name}"`,
      })
    }
  }

const handleDeletePlan = (taskId: string) => {
    const taskToDelete = tasks.find((t) => t.id === taskId)
    if (taskToDelete) {
      setTasks(tasks.filter((t) => t.id !== taskId))
      toast({
        title: "计划已删除",
        description: `已成功删除"${taskToDelete.name}"`,
      })
    }
  }

// 计算通过率
  const calculatePassRate = (acquired: number, added: number) => {
    if (acquired === 0) return 0
    return Math.round((added / acquired) * 100)
  }

return (
    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
        <div className="flex items-center p-4">
          <div className="flex items-center space-x-3">
            <Button variant="ghost" size="icon" onClick={() => router.back()}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="text-xl font-semibold text-blue-600">{channelName}获客</h1>
          </div>
        </div>
      </header>

<div className="p-4 max-w-7xl mx-auto">
        {tasks.map((task) => {
          const { devices: deviceCount, acquired: acquiredCount, added: addedCount } = task.stats
          const passRate = calculatePassRate(acquiredCount, addedCount)

return (
            <Card key={task.id} className="p-6 hover:shadow-lg transition-all mb-4 bg-white/80 backdrop-blur-sm">
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center space-x-3">
                  <h3 className="font-medium text-lg">{task.name}</h3>
                  <Badge
                    variant={task.status === "running" ? "success" : "secondary"}
                    className="cursor-pointer hover:opacity-80"
                    onClick={() => {
                      setSelectedPlanId(task.id)
                      setIsPlanSettingsOpen(true)
                    }}
                  >
                    {task.status === "running" ? "进行中" : "已暂停"}
                  </Badge>
                  {params.channel === "douyin" && <BindDouyinQRCode />}
                </div>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-gray-100 rounded-full z-10">
                      <MoreVertical className="h-4 w-4" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-48 z-50">
                    <DropdownMenuItem
                      onClick={(e) => {
                        e.stopPropagation()
                        handleEditPlan(task.id)
                      }}
                      className="cursor-pointer hover:bg-blue-50"
                    >
                      <Pencil className="w-4 h-4 mr-2" />
                      编辑计划
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      onClick={(e) => {
                        e.stopPropagation()
                        handleCopyPlan(task.id)
                      }}
                      className="cursor-pointer hover:bg-blue-50"
                    >
                      <Copy className="w-4 h-4 mr-2" />
                      复制计划
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      onClick={(e) => {
                        e.stopPropagation()
                        handleDeletePlan(task.id)
                      }}
                      className="text-red-600 cursor-pointer hover:bg-red-50"
                    >
                      <Trash2 className="w-4 h-4 mr-2" />
                      删除计划
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>

<div className="grid grid-cols-4 gap-2 mb-4">
                <Link href={`/scenarios/${channel}/devices`}>
                  <Card className="p-2 hover:bg-gray-50 transition-colors cursor-pointer">
                    <div className="text-sm text-gray-500 mb-1">设备数</div>
                    <div className="text-2xl font-semibold">{deviceCount}</div>
                  </Card>
                </Link>

<Link href={`/scenarios/${channel}/acquired`}>
                  <Card className="p-2 hover:bg-gray-50 transition-colors cursor-pointer">
                    <div className="text-sm text-gray-500 mb-1">已获客</div>
                    <div className="text-2xl font-semibold">{acquiredCount}</div>
                  </Card>
                </Link>

<Link href={`/scenarios/${channel}/added`}>
                  <Card className="p-2 hover:bg-gray-50 transition-colors cursor-pointer">
                    <div className="text-sm text-gray-500 mb-1">已添加</div>
                    <div className="text-2xl font-semibold">{addedCount}</div>
                  </Card>
                </Link>

<Card className="p-2">
                  <div className="text-sm text-gray-500 mb-1">通过率</div>
                  <div className="text-2xl font-semibold">{passRate}%</div>
                </Card>
              </div>

<div className="flex items-center justify-between text-sm border-t pt-4 text-gray-500">
                <div className="flex items-center space-x-2">
                  <Clock className="w-4 h-4" />
                  <span>上次执行：{task.executionTime}</span>
                </div>
                <div className="flex items-center space-x-2">
                  <Clock className="w-4 h-4" />
                  <span>下次执行：{task.nextExecutionTime}</span>
                </div>
              </div>
            </Card>
          )
        })}
      </div>
      <PlanSettingsDialog open={isPlanSettingsOpen} onOpenChange={setIsPlanSettingsOpen} planId={selectedPlanId} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/scenarios/[channel]/traffic/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ChevronLeft, Search, Filter, RefreshCw } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

interface TrafficUser {
  id: string
  avatar: string
  nickname: string
  wechatId: string
  phone: string
  region: string
  note: string
  status: "pending" | "added" | "failed"
  addTime: string
  source: string
  tags: string[]
}

export default function ChannelTrafficPage({
  params,
  searchParams,
}: {
  params: { channel: string }
  searchParams: { type?: string }
}) {
  const router = useRouter()
  const [users, setUsers] = useState<TrafficUser[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState(searchParams.type || "all")
  const [currentPage, setCurrentPage] = useState(1)
  const itemsPerPage = 10

const getChannelName = (channel: string) => {
    const channelMap: Record<string, string> = {
      douyin: "抖音",
      kuaishou: "快手",
      xiaohongshu: "小红书",
      weibo: "微博",
    }
    return channelMap[channel] || channel
  }

const channelName = getChannelName(params.channel)

useEffect(() => {
    const fetchUsers = async () => {
      // 模拟API调用
      const mockUsers = Array.from({ length: 50 }, (_, i) => ({
        id: `user-${i + 1}`,
        avatar: "/placeholder.svg?height=40&width=40",
        nickname: `用户${i + 1}`,
        wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
        phone: `1${["3", "5", "7", "8", "9"][Math.floor(Math.random() * 5)]}${Array.from({ length: 9 }, () =>
          Math.floor(Math.random() * 10),
        ).join("")}`,
        region: ["广东", "浙江", "江苏", "北京", "上海"][Math.floor(Math.random() * 5)],
        note: ["感兴趣", "需要了解", "想购买", "咨询价格"][Math.floor(Math.random() * 4)],
        status: searchParams.type === "added" ? "added" : ["pending", "added", "failed"][Math.floor(Math.random() * 3)],
        addTime: new Date(Date.now() - Math.random() * 86400000 * 7).toLocaleString(),
        source: params.channel,
        tags: ["意向客户", "高活跃度", "新用户"][Math.floor(Math.random() * 3)].split(" "),
      }))
      setUsers(mockUsers)
    }

fetchUsers()
  }, [params.channel, searchParams.type])

const filteredUsers = users.filter((user) => {
    const matchesSearch =
      user.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.wechatId.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.phone.includes(searchQuery)
    const matchesStatus = statusFilter === "all" || user.status === statusFilter
    return matchesSearch && matchesStatus
  })

const paginatedUsers = filteredUsers.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)

const totalPages = Math.ceil(filteredUsers.length / itemsPerPage)

<div className="p-4 space-y-4">
        <Card className="p-4">
          <div className="space-y-4">
            <div className="flex items-center space-x-2">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
                <Input
                  placeholder="搜索用户"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pl-9"
                />
              </div>
              <Button variant="outline" size="icon">
                <Filter className="h-4 w-4" />
              </Button>
              <Button variant="outline" size="icon">
                <RefreshCw className="h-4 w-4" />
              </Button>
            </div>

<div className="space-y-4">
              {paginatedUsers.map((user) => (
                <Card key={user.id} className="p-4">
                  <div className="flex items-start space-x-4">
                    <img
                      src={user.avatar || "/placeholder.svg"}
                      alt={user.nickname}
                      className="w-12 h-12 rounded-full"
                    />
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center justify-between">
                        <div className="font-medium truncate">{user.nickname}</div>
                        <Badge
                          variant={
                            user.status === "added" ? "success" : user.status === "failed" ? "destructive" : "secondary"
                          }
                        >
                          {user.status === "added" ? "已添加" : user.status === "failed" ? "已失败" : "待处理"}
                        </Badge>
                      </div>
                      <div className="mt-1 text-sm text-gray-500">
                        <div>微信号: {user.wechatId}</div>
                        <div>手机号: {user.phone}</div>
                        <div>地区: {user.region}</div>
                        <div>添加时间: {user.addTime}</div>
                      </div>
                      <div className="mt-2 flex flex-wrap gap-2">
                        {user.tags.map((tag, index) => (
                          <Badge key={index} variant="outline">
                            {tag}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </div>
                </Card>
              ))}
            </div>

{totalPages > 1 && (
              <Pagination>
                <PaginationContent>
                  <PaginationItem>
                    <PaginationPrevious
                      href="#"
                      onClick={(e) => {
                        e.preventDefault()
                        setCurrentPage((prev) => Math.max(1, prev - 1))
                      }}
                    />
                  </PaginationItem>
                  {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
                    <PaginationItem key={page}>
                      <PaginationLink
                        href="#"
                        isActive={currentPage === page}
                        onClick={(e) => {
                          e.preventDefault()
                          setCurrentPage(page)
                        }}
                      >
                        {page}
                      </PaginationLink>
                    </PaginationItem>
                  ))}
                  <PaginationItem>
                    <PaginationNext
                      href="#"
                      onClick={(e) => {
                        e.preventDefault()
                        setCurrentPage((prev) => Math.min(totalPages, prev + 1))
                      }}
                    />
                  </PaginationItem>
                </PaginationContent>
              </Pagination>
            )}
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/scenarios/[channel]/acquired/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronLeft } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { useRouter } from "next/navigation"

// 获取渠道中文名称
const getChannelName = (channel: string) => {
  const channelMap: Record<string, string> = {
    douyin: "抖音",
    kuaishou: "快手",
    xiaohongshu: "小红书",
    weibo: "微博",
  }
  return channelMap[channel] || channel
}

interface Customer {
  id: string
  nickname: string
  avatar: string
  tags: string[]
  acquiredTime: string
  source: string
}

export default function AcquiredCustomersPage({ params }: { params: { channel: string } }) {
  const router = useRouter()
  const channelName = getChannelName(params.channel)

const [customers] = useState<Customer[]>(
    Array.from({ length: 31 }, (_, i) => ({
      id: `customer-${i + 1}`,
      nickname: `用户${i + 1}`,
      avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=" + (i + 1),
      tags: ["直播间", "高互动", Math.random() > 0.5 ? "潜在客户" : "意向客户"],
      acquiredTime: new Date(Date.now() - Math.random() * 86400000 * 7).toLocaleString(),
      source: Math.random() > 0.5 ? "直播间" : "评论区",
    })),
  )

const [currentPage, setCurrentPage] = useState(1)
  const itemsPerPage = 10
  const totalPages = Math.ceil(customers.length / itemsPerPage)
  const currentCustomers = customers.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)

return (
    <div className="min-h-screen bg-gray-50">
      <header className="sticky top-0 z-10 bg-white border-b">
        <div className="flex items-center justify-between p-4">
          <div className="flex items-center space-x-3">
            <Button variant="ghost" size="icon" onClick={() => router.back()}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="text-lg font-medium">{channelName}已获客用户</h1>
          </div>
          <div className="text-sm text-gray-500">共 {customers.length} 位用户</div>
        </div>
      </header>

<div className="p-4 space-y-4">
        {currentCustomers.map((customer) => (
          <Card key={customer.id} className="p-4">
            <div className="flex items-start space-x-4">
              <img
                src={customer.avatar || "/placeholder.svg"}
                alt={customer.nickname}
                className="w-12 h-12 rounded-full"
              />
              <div className="flex-1">
                <div className="flex items-center justify-between">
                  <h3 className="font-medium">{customer.nickname}</h3>
                  <span className="text-sm text-gray-500">{customer.acquiredTime}</span>
                </div>
                <div className="mt-2 flex flex-wrap gap-2">
                  {customer.tags.map((tag, index) => (
                    <Badge key={index} variant="secondary">
                      {tag}
                    </Badge>
                  ))}
                </div>
                <div className="mt-2 text-sm text-gray-500">来源：{customer.source}</div>
              </div>
            </div>
          </Card>
        ))}

{totalPages > 1 && (
          <div className="flex justify-between items-center pt-4">
            <Button
              variant="outline"
              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
              disabled={currentPage === 1}
            >
              上一页
            </Button>
            <span className="text-sm text-gray-500">
              第 {currentPage} / {totalPages} 页
            </span>
            <Button
              variant="outline"
              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
              disabled={currentPage === totalPages}
            >
              下一页
            </Button>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/scenarios/[channel]/added/page.tsx" isMerged="true"
"use client"

// 获取渠道中文名称
const getChannelName = (channel: string) => {
  const channelMap: Record<string, string> = {
    douyin: "抖音",
    kuaishou: "快手",
    xiaohongshu: "小红书",
    weibo: "微博",
  }
  return channelMap[channel] || channel
}

interface AddedCustomer {
  id: string
  nickname: string
  avatar: string
  tags: string[]
  addedTime: string
  source: string
  wechatId: string
}

export default function AddedCustomersPage({ params }: { params: { channel: string } }) {
  const router = useRouter()
  const channelName = getChannelName(params.channel)

const [customers] = useState<AddedCustomer[]>(
    Array.from({ length: 25 }, (_, i) => ({
      id: `customer-${i + 1}`,
      nickname: `用户${i + 1}`,
      avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=" + (i + 1),
      tags: ["已添加", Math.random() > 0.5 ? "高意向" : "待跟进", "直播间"],
      addedTime: new Date(Date.now() - Math.random() * 86400000 * 7).toLocaleString(),
      source: Math.random() > 0.5 ? "直播间" : "评论区",
      wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
    })),
  )

return (
    <div className="min-h-screen bg-gray-50">
      <header className="sticky top-0 z-10 bg-white border-b">
        <div className="flex items-center justify-between p-4">
          <div className="flex items-center space-x-3">
            <Button variant="ghost" size="icon" onClick={() => router.back()}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="text-lg font-medium">{channelName}已添加好友</h1>
          </div>
          <div className="text-sm text-gray-500">共 {customers.length} 位好友</div>
        </div>
      </header>

<div className="p-4 space-y-4">
        {currentCustomers.map((customer) => (
          <Card key={customer.id} className="p-4">
            <div className="flex items-start space-x-4">
              <img
                src={customer.avatar || "/placeholder.svg"}
                alt={customer.nickname}
                className="w-12 h-12 rounded-full"
              />
              <div className="flex-1">
                <div className="flex items-center justify-between">
                  <h3 className="font-medium">{customer.nickname}</h3>
                  <span className="text-sm text-gray-500">{customer.addedTime}</span>
                </div>
                <div className="mt-1 text-sm text-gray-500">微信号：{customer.wechatId}</div>
                <div className="mt-2 flex flex-wrap gap-2">
                  {customer.tags.map((tag, index) => (
                    <Badge key={index} variant="secondary">
                      {tag}
                    </Badge>
                  ))}
                </div>
                <div className="mt-2 text-sm text-gray-500">来源：{customer.source}</div>
              </div>
            </div>
          </Card>
        ))}

{totalPages > 1 && (
          <div className="flex justify-between items-center pt-4">
            <Button
              variant="outline"
              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
              disabled={currentPage === 1}
            >
              上一页
            </Button>
            <span className="text-sm text-gray-500">
              第 {currentPage} / {totalPages} 页
            </span>
            <Button
              variant="outline"
              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
              disabled={currentPage === totalPages}
            >
              下一页
            </Button>
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="app/components/device-selection-dialog.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Search, Filter, RefreshCw } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { toast } from "@/components/ui/use-toast"

interface Device {
  id: string
  name: string
  imei: string
  status: "online" | "offline"
  wechatId: string
  friendCount: number
  battery: number
  avatar?: string
}

interface DeviceSelectionDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  selectedDevices: string[]
  onSelect: (deviceIds: string[]) => void
  excludeUsedDevices?: boolean
  planId?: string
}

export function DeviceSelectionDialog({
  open,
  onOpenChange,
  selectedDevices,
  onSelect,
  excludeUsedDevices = false,
  planId,
}: DeviceSelectionDialogProps) {
  const [devices, setDevices] = useState<Device[]>([])
  const [filteredDevices, setFilteredDevices] = useState<Device[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [selected, setSelected] = useState<string[]>(selectedDevices || [])
  const [currentPage, setCurrentPage] = useState(1)
  const devicesPerPage = 5

useEffect(() => {
    const fetchDevices = async () => {
      // 模拟API调用获取设备列表
      const mockDevices: Device[] = Array.from({ length: 20 }, (_, i) => ({
        id: `device-${i + 1}`,
        name: `设备 ${i + 1}`,
        imei: `sd${123123 + i}`,
        status: Math.random() > 0.2 ? "online" : "offline",
        wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
        friendCount: Math.floor(Math.random() * 1000),
        battery: Math.floor(Math.random() * 100),
        avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=" + (i + 1),
      }))

if (excludeUsedDevices && planId) {
        const availableDevices = mockDevices.filter((device) => !device.id.includes("-even"))
        setDevices(availableDevices)
        setFilteredDevices(availableDevices)
      } else {
        setDevices(mockDevices)
        setFilteredDevices(mockDevices)
      }
    }

if (open) {
      fetchDevices()
      setSelected(selectedDevices || [])
    }
  }, [open, selectedDevices, excludeUsedDevices, planId])

useEffect(() => {
    const filtered = devices.filter((device) => {
      const matchesSearch =
        device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
        device.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
      const matchesStatus = statusFilter === "all" || device.status === statusFilter
      return matchesSearch && matchesStatus
    })
    setFilteredDevices(filtered)
    setCurrentPage(1)
  }, [searchQuery, statusFilter, devices])

const handleSelect = (deviceId: string) => {
    let newSelected: string[]

if (selected.includes(deviceId)) {
      // 如果已选中，则取消选择
      newSelected = selected.filter((id) => id !== deviceId)
    } else {
      // 如果未选中，检查是否超过限制
      if (selected.length >= 5) {
        toast({
          title: "选择超出限制",
          description: "最多可选择5个设备",
          variant: "destructive",
        })
        return
      }
      newSelected = [...selected, deviceId]
    }

setSelected(newSelected)
    onSelect(newSelected) // 直接触发选择回调
  }

const handleRefresh = () => {
    const refreshedDevices = devices.map((device) => ({
      ...device,
      status: Math.random() > 0.2 ? "online" : "offline",
      battery: Math.floor(Math.random() * 100),
    }))
    setDevices(refreshedDevices)
    setFilteredDevices(refreshedDevices)
  }

// 分页逻辑
  const totalPages = Math.ceil(filteredDevices.length / devicesPerPage)
  const startIndex = (currentPage - 1) * devicesPerPage
  const currentDevices = filteredDevices.slice(startIndex, startIndex + devicesPerPage)

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[700px] max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>选择设备</DialogTitle>
        </DialogHeader>

<div className="space-y-4">
          <div className="flex items-center space-x-2">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
              <Input
                placeholder="搜索设备IMEI/备注/微信号"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-9"
              />
            </div>
            <Button variant="outline" size="icon">
              <Filter className="h-4 w-4" />
            </Button>
            <Button variant="outline" size="icon" onClick={handleRefresh}>
              <RefreshCw className="h-4 w-4" />
            </Button>
          </div>

<div className="flex items-center justify-between">
            <Select value={statusFilter} onValueChange={setStatusFilter}>
              <SelectTrigger className="w-[120px]">
                <SelectValue placeholder="全部状态" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">全部状态</SelectItem>
                <SelectItem value="online">在线</SelectItem>
                <SelectItem value="offline">离线</SelectItem>
              </SelectContent>
            </Select>
            <div className="text-sm text-gray-500">已选择 {selected.length}/5 个设备</div>
          </div>

<div className="space-y-2">
            {currentDevices.length === 0 ? (
              <div className="text-center py-8 text-gray-500">暂无符合条件的设备</div>
            ) : (
              currentDevices.map((device) => (
                <Card
                  key={device.id}
                  className={`p-3 hover:shadow-md transition-shadow cursor-pointer ${
                    selected.includes(device.id) ? "ring-2 ring-primary" : ""
                  }`}
                  onClick={() => handleSelect(device.id)}
                >
                  <div className="flex items-center space-x-3">
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center justify-between mb-1">
                        <div className="font-medium truncate">{device.name}</div>
                        <Badge variant={device.status === "online" ? "success" : "secondary"}>
                          {device.status === "online" ? "在线" : "离线"}
                        </Badge>
                      </div>
                      <div className="text-sm text-gray-500">IMEI: {device.imei}</div>
                      <div className="text-sm text-gray-500">微信号: {device.wechatId}</div>
                      <div className="flex items-center justify-between mt-1 text-sm">
                        <span className="text-gray-500">好友数: {device.friendCount}</span>
                        <span className="text-gray-500">电量: {device.battery}%</span>
                      </div>
                    </div>
                  </div>
                </Card>
              ))
            )}
          </div>

{totalPages > 1 && (
            <div className="flex justify-center space-x-2 mt-4">
              <Button
                variant="outline"
                size="sm"
                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
                disabled={currentPage === 1}
              >
                上一页
              </Button>
              <span className="flex items-center px-2">
                {currentPage} / {totalPages}
              </span>
              <Button
                variant="outline"
                size="sm"
                onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
                disabled={currentPage === totalPages}
              >
                下一页
              </Button>
            </div>
          )}
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="lib/utils.ts" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export function formatNumber(num: number): string {
  return new Intl.NumberFormat("zh-CN").format(num)
}

export function formatPercent(num: number): string {
  return new Intl.NumberFormat("zh-CN", {
    style: "percent",
    minimumFractionDigits: 1,
    maximumFractionDigits: 1,
  }).format(num / 100)
}

export function formatDate(date: Date | string): string {
  if (typeof date === "string") {
    date = new Date(date)
  }
  return new Intl.DateTimeFormat("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  }).format(date)
}

export function getGrowthClass(value: number): string {
  if (value > 0) return "text-green-500"
  if (value < 0) return "text-red-500"
  return "text-gray-500"
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
  },
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]typescript:file="components/ui/dialog.tsx" isMerged="true"
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { Cross2Icon } from "@radix-ui/react-icons"

import { cn } from "@/lib/utils"

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <Cross2Icon className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogTrigger,
  DialogClose,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
  ),
)
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
  ),
)
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
  ),
)
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
)
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
  ),
)
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

export { Input }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

import { cn } from "@/lib/utils"

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className,
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className,
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { CheckIcon } from "@radix-ui/react-icons"

import { cn } from "@/lib/utils"

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
      <CheckIcon className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescript:file="components/ui/use-toast.ts" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"

import type { ToastActionElement, ToastProps } from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_VALUE
  return count.toString()
}

type ActionType = typeof actionTypes

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescript:file="components/ui/pagination.tsx" isMerged="true"
import * as React from "react"
import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"

import { cn } from "@/lib/utils"
import { type ButtonProps, buttonVariants } from "@/components/ui/button"

type PaginationLinkProps = {
  isActive?: boolean
} & Pick<ButtonProps, "size"> &
  React.ComponentProps<"a">

const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1 pl-2.5", className)} {...props}>
    <ChevronLeftIcon className="h-4 w-4" />
    <span>Previous</span>
  </PaginationLink>
)
PaginationPrevious.displayName = "PaginationPrevious"

const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
  <PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1 pr-2.5", className)} {...props}>
    <span>Next</span>
    <ChevronRightIcon className="h-4 w-4" />
  </PaginationLink>
)
PaginationNext.displayName = "PaginationNext"

const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
  <span aria-hidden className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}>
    <DotsHorizontalIcon className="h-4 w-4" />
    <span className="sr-only">More pages</span>
  </span>
)
PaginationEllipsis.displayName = "PaginationEllipsis"

export {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
}
[V0_FILE]typescript:file="components/ui/label.tsx" isMerged="true"
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")

export { Label }
[V0_FILE]typescriptreact:file="components/ui/table.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }
[V0_FILE]typescript:file="components/ui/textarea.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescript:file="components/ui/switch.tsx" isMerged="true"
import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescript:file="components/ui/accordion.tsx" isMerged="true"
import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDownIcon } from "@radix-ui/react-icons"

import { cn } from "@/lib/utils"

const Accordion = AccordionPrimitive.Root

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className,
      )}
      {...props}
    >
      {children}
      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Content
    ref={ref}
    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
    {...props}
  >
    <div className={cn("pb-4 pt-0", className)}>{children}</div>
  </AccordionPrimitive.Content>
))
AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
[V0_FILE]typescript:file="components/ui/scroll-area.tsx" isMerged="true"
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

export { ScrollArea, ScrollBar }
[V0_FILE]typescriptreact:file="components/ui/progress.tsx" isEdit="true" isMerged="true"
import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = React.forwardRef<
  React.ElementRef<typeof ProgressPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => (
  <ProgressPrimitive.Root
    ref={ref}
    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
    {...props}
  >
    <ProgressPrimitive.Indicator
      className="h-full w-full flex-1 bg-primary transition-all"
      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
    />
  </ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName

export { Progress }
[V0_FILE]typescript:file="components/ui/avatar.tsx" isMerged="true"
import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

import { cn } from "@/lib/utils"

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/tooltip.tsx" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"

import { cn } from "@/lib/utils"

const TooltipProvider = TooltipPrimitive.Provider

const Tooltip = TooltipPrimitive.Root

const TooltipTrigger = TooltipPrimitive.Trigger

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, align = "center", side = "top", ...props }, ref) => (
  <TooltipPrimitive.Portal>
    <TooltipPrimitive.Content
      ref={ref}
      sideOffset={sideOffset}
      align={align}
      side={side}
      className={cn(
        "z-50 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className,
      )}
      {...props}
    />
  </TooltipPrimitive.Portal>
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, Tooltip as TooltipRoot }
[V0_FILE]typescript:file="components/ui/calendar.tsx" isMerged="true"
import type * as React from "react"
import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
import { DayPicker } from "react-day-picker"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: cn(
          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent",
          props.mode === "range"
            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
            : "[&:has([aria-selected])]:rounded-md",
        ),
        day: cn(buttonVariants({ variant: "ghost" }), "h-8 w-8 p-0 font-normal aria-selected:opacity-100"),
        day_range_start: "day-range-start",
        day_range_end: "day-range-end",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside: "text-muted-foreground opacity-50",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
        IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }
[V0_FILE]typescript:file="components/ui/popover.tsx" isMerged="true"
import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"

import { cn } from "@/lib/utils"

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className,
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescript:file="components/ui/radio-group.tsx" isMerged="true"
import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { CircleIcon } from "@radix-ui/react-icons"

import { cn } from "@/lib/utils"

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <CircleIcon className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescript:file="components/icons/wechat-icon.tsx" isMerged="true"
import type React from "react"

export function WeChatIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" height="24" width="24" {...props}>
      <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.81-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.595-6.348zM5.959 5.48c.609 0 1.104.498 1.104 1.112 0 .612-.495 1.11-1.104 1.11-.612 0-1.108-.498-1.108-1.11 0-.614.496-1.112 1.108-1.112zm5.315 0c.61 0 1.107.498 1.107 1.112 0 .612-.497 1.11-1.107 1.11-.611 0-1.105-.498-1.105-1.11 0-.614.494-1.112 1.105-1.112z" />
      <path d="M23.002 15.816c0-3.309-3.136-6-7-6-3.863 0-7 2.691-7 6 0 3.31 3.137 6 7 6 .814 0 1.601-.099 2.338-.285a.7.7 0 0 1 .579.08l1.5.87a.267.267 0 0 0 .135.044c.13 0 .236-.108.236-.241 0-.06-.023-.118-.038-.17l-.309-1.167a.476.476 0 0 1 .172-.534c1.645-1.17 2.387-2.835 2.387-4.597zm-9.498-1.19c-.497 0-.9-.407-.9-.908a.905.905 0 0 1 .9-.91c.498 0 .9.408.9.91 0 .5-.402.908-.9.908zm4.998 0c-.497 0-.9-.407-.9-.908a.905.905 0 0 1 .9-.91c.498 0 .9.408.9.91 0 .5-.402.908-.9.908z" />
    </svg>
  )
}

export default WeChatIcon
[V0_FILE]typescript:file="components/icons/apple-icon.tsx" isMerged="true"
import type React from "react"

export function AppleIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" height="24" width="24" {...props}>
      <path d="M14.94 5.19A4.38 4.38 0 0016 2a4.44 4.44 0 00-3 1.52 4.17 4.17 0 00-1 3.09 3.69 3.69 0 002.94-1.42zm2.52 7.44a4.51 4.51 0 012.16-3.81 4.66 4.66 0 00-3.66-2c-1.56-.16-3 .91-3.83.91s-2-.89-3.3-.87a4.92 4.92 0 00-4.14 2.53C2.93 12.45 4.24 17 6 19.47c.8 1.21 1.8 2.58 3.12 2.53s1.75-.82 3.28-.82 2 .82 3.3.79 2.22-1.24 3.06-2.45a11 11 0 001.38-2.85 4.41 4.41 0 01-2.68-4.04z" />
    </svg>
  )
}

export default AppleIcon
[V0_FILE]typescript:file="api/scenarios.ts" isMerged="true"
import type {
  ApiResponse,
  CreateScenarioParams,
  UpdateScenarioParams,
  QueryScenarioParams,
  ScenarioBase,
  ScenarioStats,
  AcquisitionRecord,
  PaginatedResponse,
} from "@/types/scenario"

const API_BASE = "/api/scenarios"

// 获客场景API
export const scenarioApi = {
  // 创建场景
  async create(params: CreateScenarioParams): Promise<ApiResponse<ScenarioBase>> {
    const response = await fetch(`${API_BASE}`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(params),
    })
    return response.json()
  },

// 更新场景
  async update(params: UpdateScenarioParams): Promise<ApiResponse<ScenarioBase>> {
    const response = await fetch(`${API_BASE}/${params.id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(params),
    })
    return response.json()
  },

// 获取场景详情
  async getById(id: string): Promise<ApiResponse<ScenarioBase>> {
    const response = await fetch(`${API_BASE}/${id}`)
    return response.json()
  },

// 查询场景列表
  async query(params: QueryScenarioParams): Promise<ApiResponse<PaginatedResponse<ScenarioBase>>> {
    const queryString = new URLSearchParams({
      ...params,
      dateRange: params.dateRange ? JSON.stringify(params.dateRange) : "",
    }).toString()

const response = await fetch(`${API_BASE}?${queryString}`)
    return response.json()
  },

// 删除场景
  async delete(id: string): Promise<ApiResponse<void>> {
    const response = await fetch(`${API_BASE}/${id}`, {
      method: "DELETE",
    })
    return response.json()
  },

// 启动场景
  async start(id: string): Promise<ApiResponse<void>> {
    const response = await fetch(`${API_BASE}/${id}/start`, {
      method: "POST",
    })
    return response.json()
  },

// 暂停场景
  async pause(id: string): Promise<ApiResponse<void>> {
    const response = await fetch(`${API_BASE}/${id}/pause`, {
      method: "POST",
    })
    return response.json()
  },

// 获取场景统计数据
  async getStats(id: string): Promise<ApiResponse<ScenarioStats>> {
    const response = await fetch(`${API_BASE}/${id}/stats`)
    return response.json()
  },

// 获取获客记录
  async getRecords(id: string, page = 1, pageSize = 20): Promise<ApiResponse<PaginatedResponse<AcquisitionRecord>>> {
    const response = await fetch(`${API_BASE}/${id}/records?page=${page}&pageSize=${pageSize}`)
    return response.json()
  },

// 导出获客记录
  async exportRecords(id: string, dateRange?: { start: string; end: string }): Promise<Blob> {
    const queryString = dateRange ? `?start=${dateRange.start}&end=${dateRange.end}` : ""
    const response = await fetch(`${API_BASE}/${id}/records/export${queryString}`)
    return response.blob()
  },

// 批量更新标签
  async updateTags(id: string, customerIds: string[], tags: string[]): Promise<ApiResponse<void>> {
    const response = await fetch(`${API_BASE}/${id}/tags`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ customerIds, tags }),
    })
    return response.json()
  },
}
[V0_FILE]typescript:file="api/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { CreateScenarioParams, QueryScenarioParams, ScenarioBase, ApiResponse } from "@/types/scenario"

// 获客场景路由处理
export async function POST(request: Request) {
  try {
    const body: CreateScenarioParams = await request.json()

// TODO: 实现创建场景的具体逻辑
    const scenario: ScenarioBase = {
      id: "generated-id",
      ...body,
      status: "draft",
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
      creator: "current-user-id",
    }

const response: ApiResponse<ScenarioBase> = {
      code: 0,
      message: "创建成功",
      data: scenario,
    }

return NextResponse.json(response)
  } catch (error) {
    return NextResponse.json(
      {
        code: 500,
        message: "创建失败",
        data: null,
      },
      { status: 500 },
    )
  }
}

export async function GET(request: Request) {
  try {
    const { searchParams } = new URL(request.url)
    const params: QueryScenarioParams = {
      type: searchParams.get("type") as any,
      status: searchParams.get("status") as any,
      keyword: searchParams.get("keyword") || undefined,
      dateRange: searchParams.get("dateRange") ? JSON.parse(searchParams.get("dateRange")!) : undefined,
      page: Number(searchParams.get("page")) || 1,
      pageSize: Number(searchParams.get("pageSize")) || 20,
    }

// TODO: 实现查询场景列表的具体逻辑

return NextResponse.json({
      code: 0,
      message: "查询成功",
      data: {
        items: [],
        total: 0,
        page: params.page,
        pageSize: params.pageSize,
        totalPages: 0,
      },
    })
  } catch (error) {
    return NextResponse.json(
      {
        code: 500,
        message: "查询失败",
        data: null,
      },
      { status: 500 },
    )
  }
}
[V0_FILE]typescript:file="api/devices.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import type {
  ApiResponse,
  Device,
  DeviceStats,
  DeviceTaskRecord,
  PaginatedResponse,
  QueryDeviceParams,
  CreateDeviceParams,
  UpdateDeviceParams,
  DeviceStatus, // Added DeviceStatus import
} from "@/types/device"

const API_BASE = "/api/devices"

// 设备管理API
export const deviceApi = {
  // 创建设备
  async create(params: CreateDeviceParams): Promise<ApiResponse<Device>> {
    const response = await fetch(`${API_BASE}`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(params),
    })
    return response.json()
  },

// 更新设备
  async update(params: UpdateDeviceParams): Promise<ApiResponse<Device>> {
    const response = await fetch(`${API_BASE}/${params.id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(params),
    })
    return response.json()
  },

// 获取设备详情
  async getById(id: string): Promise<ApiResponse<Device>> {
    const response = await fetch(`${API_BASE}/${id}`)
    return response.json()
  },

// 查询设备列表
  async query(params: QueryDeviceParams): Promise<ApiResponse<PaginatedResponse<Device>>> {
    const queryString = new URLSearchParams({
      ...params,
      tags: params.tags ? JSON.stringify(params.tags) : "",
      dateRange: params.dateRange ? JSON.stringify(params.dateRange) : "",
    }).toString()

const response = await fetch(`${API_BASE}?${queryString}`)
    return response.json()
  },

// 删除设备
  async delete(id: string): Promise<ApiResponse<void>> {
    const response = await fetch(`${API_BASE}/${id}`, {
      method: "DELETE",
    })
    return response.json()
  },

// 重启设备
  async restart(id: string): Promise<ApiResponse<void>> {
    const response = await fetch(`${API_BASE}/${id}/restart`, {
      method: "POST",
    })
    return response.json()
  },

// 解绑设备
  async unbind(id: string): Promise<ApiResponse<void>> {
    const response = await fetch(`${API_BASE}/${id}/unbind`, {
      method: "POST",
    })
    return response.json()
  },

// 获取设备统计数据
  async getStats(id: string): Promise<ApiResponse<DeviceStats>> {
    const response = await fetch(`${API_BASE}/${id}/stats`)
    return response.json()
  },

// 获取设备任务记录
  async getTaskRecords(id: string, page = 1, pageSize = 20): Promise<ApiResponse<PaginatedResponse<DeviceTaskRecord>>> {
    const response = await fetch(`${API_BASE}/${id}/tasks?page=${page}&pageSize=${pageSize}`)
    return response.json()
  },

// 批量更新设备标签
  async updateTags(ids: string[], tags: string[]): Promise<ApiResponse<void>> {
    const response = await fetch(`${API_BASE}/tags`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ deviceIds: ids, tags }),
    })
    return response.json()
  },

// 批量导出设备数据
  async exportDevices(ids: string[]): Promise<Blob> {
    const response = await fetch(`${API_BASE}/export`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ deviceIds: ids }),
    })
    return response.blob()
  },

// 检查设备在线状态
  async checkStatus(ids: string[]): Promise<ApiResponse<Record<string, DeviceStatus>>> {
    const response = await fetch(`${API_BASE}/status`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ deviceIds: ids }),
    })
    return response.json()
  },
}
[V0_FILE]typescript:file="app/api/devices/route.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import type {
  CreateDeviceParams,
  QueryDeviceParams,
  Device,
  ApiResponse,
  DeviceStatus, // Ensure DeviceStatus is imported correctly
  DeviceType,
} from "@/types/device"

// 设备管理路由处理
export async function POST(request: Request) {
  try {
    const body: CreateDeviceParams = await request.json()

// TODO: 实现创建设备的具体逻辑
    const device: Device = {
      id: "generated-id",
      ...body,
      status: DeviceStatus.OFFLINE, // Using DeviceStatus from the import
      lastOnlineTime: new Date().toISOString(),
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    }

const response: ApiResponse<Device> = {
      code: 0,
      message: "创建成功",
      data: device,
    }

export async function GET(request: Request) {
  try {
    const { searchParams } = new URL(request.url)
    const params: QueryDeviceParams = {
      keyword: searchParams.get("keyword") || undefined,
      status: (searchParams.get("status") as DeviceStatus) || undefined, // Using DeviceStatus from the import
      type: (searchParams.get("type") as DeviceType) || undefined,
      tags: searchParams.get("tags") ? JSON.parse(searchParams.get("tags")!) : undefined,
      dateRange: searchParams.get("dateRange") ? JSON.parse(searchParams.get("dateRange")!) : undefined,
      page: Number(searchParams.get("page")) || 1,
      pageSize: Number(searchParams.get("pageSize")) || 20,
    }

// TODO: 实现查询设备列表的具体逻辑

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  ChevronLeft,
  Smartphone,
  Users,
  Star,
  Clock,
  MessageSquare,
  Shield,
  Info,
  UserPlus,
  Search,
  Filter,
  Tag,
  ChevronRight,
} from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Progress } from "@/components/ui/progress"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Tooltip as UITooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

interface RestrictionRecord {
  id: string
  date: string
  reason: string
  recoveryTime: string
  type: "friend_limit" | "marketing" | "spam" | "other"
}

interface FriendTag {
  id: string
  name: string
  color: string
}

interface WechatFriend {
  id: string
  avatar: string
  nickname: string
  wechatId: string
  remark: string
  addTime: string
  lastInteraction: string
  tags: FriendTag[]
  region: string
  source: string
  notes: string
}

interface WechatAccountDetail {
  id: string
  avatar: string
  nickname: string
  wechatId: string
  deviceId: string
  deviceName: string
  friendCount: number
  todayAdded: number
  status: "normal" | "abnormal"
  lastActive: string
  messageCount: number
  activeRate: number
  // 新增和修改的字段
  accountAge: {
    years: number
    months: number
  }
  totalChats: number
  chatFrequency: number // 每日平均聊天次数
  restrictionRecords: RestrictionRecord[]
  isVerified: boolean
  firstMomentDate: string
  accountWeight: number
  weightFactors: {
    restrictionFactor: number
    verificationFactor: number
    ageFactor: number
    activityFactor: number
  }
  weeklyStats: {
    date: string
    friends: number
    messages: number
  }[]
  friends: WechatFriend[]
}

export default function WechatAccountDetailPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [account, setAccount] = useState<WechatAccountDetail | null>(null)
  const [showRestrictions, setShowRestrictions] = useState(false)
  const [showTransferConfirm, setShowTransferConfirm] = useState(false)
  const [showFriendDetail, setShowFriendDetail] = useState(false)
  const [selectedFriend, setSelectedFriend] = useState<WechatFriend | null>(null)
  const [searchQuery, setSearchQuery] = useState("")
  const [currentPage, setCurrentPage] = useState(1)
  const [activeTab, setActiveTab] = useState("overview")
  const friendsPerPage = 10

useEffect(() => {
    // 模拟API调用获取账号详情
    const fetchAccount = async () => {
      // 生成随机标签
      const generateRandomTags = (count: number) => {
        const tagPool = [
          { name: "潜在客户", color: "bg-blue-100 text-blue-800" },
          { name: "高意向", color: "bg-green-100 text-green-800" },
          { name: "已成交", color: "bg-purple-100 text-purple-800" },
          { name: "需跟进", color: "bg-yellow-100 text-yellow-800" },
          { name: "活跃用户", color: "bg-indigo-100 text-indigo-800" },
          { name: "沉默用户", color: "bg-gray-100 text-gray-800" },
          { name: "企业客户", color: "bg-red-100 text-red-800" },
          { name: "个人用户", color: "bg-pink-100 text-pink-800" },
          { name: "新增好友", color: "bg-emerald-100 text-emerald-800" },
          { name: "老客户", color: "bg-amber-100 text-amber-800" },
        ]

return Array.from({ length: Math.floor(Math.random() * count) + 1 }, () => {
          const randomTag = tagPool[Math.floor(Math.random() * tagPool.length)]
          return {
            id: `tag-${Math.random().toString(36).substring(2, 9)}`,
            name: randomTag.name,
            color: randomTag.color,
          }
        })
      }

// 生成随机好友
      const friendCount = Math.floor(Math.random() * (300 - 150)) + 150
      const generateFriends = (count: number) => {
        return Array.from({ length: count }, (_, i) => {
          const firstName = ["张", "王", "李", "赵", "陈", "刘", "杨", "黄", "周", "吴"][Math.floor(Math.random() * 10)]
          const secondName = ["小", "大", "明", "华", "强", "伟", "芳", "娜", "秀", "英"][
            Math.floor(Math.random() * 10)
          ]
          const lastName = ["明", "华", "强", "伟", "芳", "娜", "秀", "英", "军", "杰"][Math.floor(Math.random() * 10)]
          const nickname = firstName + secondName + lastName

// 生成随机的添加时间（过去1年内）
          const addDate = new Date()
          addDate.setDate(addDate.getDate() - Math.floor(Math.random() * 365))

// 生成随机的最后互动时间（过去30天内）
          const lastDate = new Date()
          lastDate.setDate(lastDate.getDate() - Math.floor(Math.random() * 30))

return {
            id: `friend-${i}`,
            avatar: `/placeholder.svg?height=40&width=40&text=${nickname[0]}`,
            nickname,
            wechatId: `wxid_${Math.random().toString(36).substring(2, 9)}`,
            remark:
              Math.random() > 0.5
                ? `${nickname}（${["同事", "客户", "朋友", "同学"][Math.floor(Math.random() * 4)]}）`
                : "",
            addTime: addDate.toISOString().split("T")[0],
            lastInteraction: lastDate.toISOString().split("T")[0],
            tags: generateRandomTags(3),
            region: ["广东", "北京", "上海", "浙江", "江苏", "四川", "湖北", "福建", "山东", "河南"][
              Math.floor(Math.random() * 10)
            ],
            source: ["抖音", "小红书", "朋友介绍", "搜索添加", "群聊", "附近的人", "名片分享"][
              Math.floor(Math.random() * 7)
            ],
            notes:
              Math.random() > 0.7
                ? ["对产品很感兴趣", "需要进一步跟进", "已购买过产品", "价格敏感", "需要更多信息"][
                    Math.floor(Math.random() * 5)
                  ]
                : "",
          }
        })
      }

const friends = generateFriends(friendCount)

const mockAccount: WechatAccountDetail = {
        id: params.id,
        avatar:
          "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02jn_e7fcc2a4-3560-478d-911a-4ccd69c6392g.jpg-a8zVtwxMuSrPWN9dfWH93EBY0yM3Dh.jpeg",
        nickname: "卡若-25vig",
        wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
        deviceId: "device-1",
        deviceName: "设备1",
        friendCount: friends.length,
        todayAdded: 12,
        status: "normal",
        lastActive: new Date().toLocaleString(),
        messageCount: 1234,
        activeRate: 87,
        accountAge: {
          years: 2,
          months: 8,
        },
        totalChats: 15234,
        chatFrequency: 42,
        restrictionRecords: [
          {
            id: "1",
            date: "2024-02-25",
            reason: "添加好友过于频繁",
            recoveryTime: "2024-02-26",
            type: "friend_limit",
          },
          {
            id: "2",
            date: "2024-01-15",
            reason: "营销内容违规",
            recoveryTime: "2024-01-16",
            type: "marketing",
          },
        ],
        isVerified: true,
        firstMomentDate: "2021-06-15",
        accountWeight: 85,
        weightFactors: {
          restrictionFactor: 0.8,
          verificationFactor: 1.0,
          ageFactor: 0.9,
          activityFactor: 0.85,
        },
        weeklyStats: Array.from({ length: 7 }, (_, i) => ({
          date: `Day ${i + 1}`,
          friends: Math.floor(Math.random() * 50) + 50,
          messages: Math.floor(Math.random() * 100) + 100,
        })),
        friends: friends,
      }
      setAccount(mockAccount)
    }

fetchAccount()
  }, [params.id])

if (!account) {
    return <div>加载中...</div>
  }

const getWeightColor = (weight: number) => {
    if (weight >= 80) return "text-green-600"
    if (weight >= 60) return "text-yellow-600"
    return "text-red-600"
  }

const getWeightDescription = (weight: number) => {
    if (weight >= 80) return "账号状态良好"
    if (weight >= 60) return "账号状态一般"
    return "账号状态较差"
  }

const calculateMaxDailyAdds = (weight: number) => {
    const baseLimit = 20
    return Math.floor(baseLimit * (weight / 100))
  }

const getRestrictionTypeColor = (type: string) => {
    switch (type) {
      case "friend_limit":
        return "text-yellow-600"
      case "marketing":
        return "text-red-600"
      case "spam":
        return "text-orange-600"
      default:
        return "text-gray-600"
    }
  }

const formatAccountAge = (age: { years: number; months: number }) => {
    if (age.years === 0) {
      return `${age.months}个月`
    }
    if (age.months === 0) {
      return `${age.years}年`
    }
    return `${age.years}年${age.months}个月`
  }

const handleTransferFriends = () => {
    setShowTransferConfirm(true)
  }

const confirmTransferFriends = () => {
    setShowTransferConfirm(false)
    // 跳转到新建计划的订单导入场景
    router.push(`/scenarios/new?type=order&source=${account.wechatId}`)
  }

const handleFriendClick = (friend: WechatFriend) => {
    setSelectedFriend(friend)
    setShowFriendDetail(true)
  }

// 过滤好友
  const filteredFriends = account.friends.filter(
    (friend) =>
      friend.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
      friend.wechatId.toLowerCase().includes(searchQuery.toLowerCase()) ||
      friend.remark.toLowerCase().includes(searchQuery.toLowerCase()) ||
      friend.tags.some((tag) => tag.name.toLowerCase().includes(searchQuery.toLowerCase())),
  )

// 分页
  const totalPages = Math.ceil(filteredFriends.length / friendsPerPage)
  const paginatedFriends = filteredFriends.slice((currentPage - 1) * friendsPerPage, currentPage * friendsPerPage)

return (
    <TooltipProvider>
      <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen pb-16">
        <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
          <div className="flex items-center p-4">
            <Button variant="ghost" size="icon" onClick={() => router.back()}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="ml-2 text-lg font-medium">账号详情</h1>
          </div>
        </header>

<div className="p-4 space-y-4">
          <Card className="p-6">
            <div className="flex items-center space-x-4">
              <div className="relative">
                <Avatar className="h-16 w-16 ring-4 ring-offset-2 ring-blue-500/20">
                  <AvatarImage src={account.avatar} />
                  <AvatarFallback>{account.nickname[0]}</AvatarFallback>
                </Avatar>
                {account.isVerified && (
                  <Badge variant="success" className="absolute -top-2 -right-2 px-2 py-0.5 text-xs">
                    已认证
                  </Badge>
                )}
              </div>
              <div className="flex-1">
                <div className="flex items-center space-x-2">
                  <h2 className="text-xl font-semibold">{account.nickname}</h2>
                  <Badge variant={account.status === "normal" ? "success" : "destructive"}>
                    {account.status === "normal" ? "正常" : "异常"}
                  </Badge>
                </div>
                <p className="text-sm text-gray-500 mt-1">微信号：{account.wechatId}</p>
                <div className="flex gap-2 mt-2">
                  <Button variant="outline" onClick={() => router.push(`/devices/${account.deviceId}`)}>
                    <Smartphone className="w-4 h-4 mr-2" />
                    {account.deviceName}
                  </Button>
                  <Button variant="outline" onClick={handleTransferFriends}>
                    <UserPlus className="w-4 h-4 mr-2" />
                    好友转移
                  </Button>
                </div>
              </div>
            </div>
          </Card>

<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="overview">账号概览</TabsTrigger>
              <TabsTrigger value="friends">好友列表 ({account.friendCount})</TabsTrigger>
            </TabsList>

<TabsContent value="overview" className="space-y-4 mt-4">
              {/* 账号基础信息 */}
              <div className="grid grid-cols-2 gap-4">
                <Card className="p-4">
                  <div className="flex items-center space-x-2 text-gray-500 mb-2">
                    <Clock className="w-4 h-4" />
                    <span className="text-sm">账号年龄</span>
                  </div>
                  <div className="text-2xl font-bold text-blue-600">{formatAccountAge(account.accountAge)}</div>
                  <div className="text-sm text-gray-500 mt-1">注册时间：{account.firstMomentDate}</div>
                </Card>

<Card className="p-4">
                  <div className="flex items-center space-x-2 text-gray-500 mb-2">
                    <MessageSquare className="w-4 h-4" />
                    <span className="text-sm">活跃程度</span>
                  </div>
                  <div className="text-2xl font-bold text-blue-600">{account.chatFrequency}次/天</div>
                  <div className="text-sm text-gray-500 mt-1">总聊天数：{account.totalChats.toLocaleString()}</div>
                </Card>
              </div>

{/* 账号权重评估 */}
              <Card className="p-4">
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center space-x-2">
                    <Star className="w-4 h-4 text-yellow-500" />
                    <span className="font-medium">账号权重评估</span>
                  </div>
                  <div className={`flex items-center space-x-2 ${getWeightColor(account.accountWeight)}`}>
                    <span className="text-2xl font-bold">{account.accountWeight}</span>
                    <span className="text-sm">分</span>
                  </div>
                </div>
                <p className="text-sm text-gray-500 mb-4">{getWeightDescription(account.accountWeight)}</p>
                <div className="space-y-3">
                  <div className="flex items-center justify-between text-sm">
                    <span>账号年龄</span>
                    <Progress value={account.weightFactors.ageFactor * 100} className="w-32" />
                    <span>{(account.weightFactors.ageFactor * 100).toFixed(0)}%</span>
                  </div>
                  <div className="flex items-center justify-between text-sm">
                    <span>活跃度</span>
                    <Progress value={account.weightFactors.activityFactor * 100} className="w-32" />
                    <span>{(account.weightFactors.activityFactor * 100).toFixed(0)}%</span>
                  </div>
                  <div className="flex items-center justify-between text-sm">
                    <span>限制影响</span>
                    <Progress value={account.weightFactors.restrictionFactor * 100} className="w-32" />
                    <span>{(account.weightFactors.restrictionFactor * 100).toFixed(0)}%</span>
                  </div>
                  <div className="flex items-center justify-between text-sm">
                    <span>实名认证</span>
                    <Progress value={account.weightFactors.verificationFactor * 100} className="w-32" />
                    <span>{(account.weightFactors.verificationFactor * 100).toFixed(0)}%</span>
                  </div>
                </div>
              </Card>

{/* 添加好友统计 */}
              <Card className="p-4">
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center space-x-2">
                    <Users className="w-4 h-4 text-blue-500" />
                    <span className="font-medium">添加好友统计</span>
                  </div>
                  <UITooltip>
                    <TooltipTrigger>
                      <Info className="w-4 h-4 text-gray-400" />
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>根据账号权重计算每日可添加好友数量</p>
                    </TooltipContent>
                  </UITooltip>
                </div>
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-500">今日已添加</span>
                    <span className="text-xl font-bold text-blue-600">{account.todayAdded}</span>
                  </div>
                  <div>
                    <div className="flex justify-between text-sm mb-2">
                      <span className="text-gray-500">添加进度</span>
                      <span>
                        {account.todayAdded}/{calculateMaxDailyAdds(account.accountWeight)}
                      </span>
                    </div>
                    <Progress
                      value={(account.todayAdded / calculateMaxDailyAdds(account.accountWeight)) * 100}
                      className="h-2"
                    />
                  </div>
                  <div className="text-sm text-gray-500">
                    根据当前账号权重({account.accountWeight}分)，每日最多可添加{" "}
                    <span className="font-medium text-blue-600">{calculateMaxDailyAdds(account.accountWeight)}</span>{" "}
                    个好友
                  </div>
                </div>
              </Card>

{/* 限制记录 */}
              <Card className="p-4">
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center space-x-2">
                    <Shield className="w-4 h-4 text-red-500" />
                    <span className="font-medium">限制记录</span>
                  </div>
                  <Badge variant="outline" className="cursor-pointer" onClick={() => setShowRestrictions(true)}>
                    共 {account.restrictionRecords.length} 次
                  </Badge>
                </div>
                <div className="space-y-2">
                  {account.restrictionRecords.slice(0, 2).map((record) => (
                    <div key={record.id} className="text-sm">
                      <div className="flex items-center justify-between">
                        <span className={getRestrictionTypeColor(record.type)}>{record.reason}</span>
                        <span className="text-gray-500">{record.date}</span>
                      </div>
                    </div>
                  ))}
                </div>
              </Card>
            </TabsContent>

<TabsContent value="friends" className="space-y-4 mt-4">
              <Card className="p-4">
                <div className="space-y-4">
                  {/* 搜索栏 */}
                  <div className="flex items-center space-x-2">
                    <div className="relative flex-1">
                      <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
                      <Input
                        placeholder="搜索好友昵称/微信号/备注/标签"
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="pl-9"
                      />
                    </div>
                    <Button variant="outline" size="icon">
                      <Filter className="h-4 w-4" />
                    </Button>
                  </div>

{/* 好友列表 */}
                  <div className="space-y-2">
                    {paginatedFriends.length === 0 ? (
                      <div className="text-center py-8 text-gray-500">未找到匹配的好友</div>
                    ) : (
                      paginatedFriends.map((friend) => (
                        <div
                          key={friend.id}
                          className="flex items-center p-3 border rounded-lg hover:bg-gray-50 cursor-pointer"
                          onClick={() => handleFriendClick(friend)}
                        >
                          <Avatar className="h-10 w-10 mr-3">
                            <AvatarImage src={friend.avatar} />
                            <AvatarFallback>{friend.nickname[0]}</AvatarFallback>
                          </Avatar>
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center justify-between">
                              <div className="font-medium truncate">
                                {friend.nickname}
                                {friend.remark && <span className="text-gray-500 ml-1">({friend.remark})</span>}
                              </div>
                              <ChevronRight className="h-4 w-4 text-gray-400" />
                            </div>
                            <div className="text-sm text-gray-500 truncate">{friend.wechatId}</div>
                            <div className="flex flex-wrap gap-1 mt-1">
                              {friend.tags.slice(0, 3).map((tag) => (
                                <span key={tag.id} className={`text-xs px-2 py-0.5 rounded-full ${tag.color}`}>
                                  {tag.name}
                                </span>
                              ))}
                              {friend.tags.length > 3 && (
                                <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-800">
                                  +{friend.tags.length - 3}
                                </span>
                              )}
                            </div>
                          </div>
                        </div>
                      ))
                    )}
                  </div>

{/* 分页 */}
                  {totalPages > 1 && (
                    <Pagination>
                      <PaginationContent>
                        <PaginationItem>
                          <PaginationPrevious
                            href="#"
                            onClick={(e) => {
                              e.preventDefault()
                              setCurrentPage((prev) => Math.max(1, prev - 1))
                            }}
                          />
                        </PaginationItem>
                        {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                          let pageNumber
                          if (totalPages <= 5) {
                            pageNumber = i + 1
                          } else if (currentPage <= 3) {
                            pageNumber = i + 1
                          } else if (currentPage >= totalPages - 2) {
                            pageNumber = totalPages - 4 + i
                          } else {
                            pageNumber = currentPage - 2 + i
                          }
                          return (
                            <PaginationItem key={pageNumber}>
                              <PaginationLink
                                href="#"
                                isActive={currentPage === pageNumber}
                                onClick={(e) => {
                                  e.preventDefault()
                                  setCurrentPage(pageNumber)
                                }}
                              >
                                {pageNumber}
                              </PaginationLink>
                            </PaginationItem>
                          )
                        })}
                        <PaginationItem>
                          <PaginationNext
                            href="#"
                            onClick={(e) => {
                              e.preventDefault()
                              setCurrentPage((prev) => Math.min(totalPages, prev + 1))
                            }}
                          />
                        </PaginationItem>
                      </PaginationContent>
                    </Pagination>
                  )}
                </div>
              </Card>
            </TabsContent>
          </Tabs>

{/* 限制记录详情弹窗 */}
          <Dialog open={showRestrictions} onOpenChange={setShowRestrictions}>
            <DialogContent className="max-w-md">
              <DialogHeader>
                <DialogTitle>限制记录详情</DialogTitle>
                <DialogDescription>每次限制恢复时间为24小时</DialogDescription>
              </DialogHeader>
              <ScrollArea className="max-h-[400px]">
                <div className="space-y-4">
                  {account.restrictionRecords.map((record) => (
                    <div key={record.id} className="border-b pb-4 last:border-0">
                      <div className="flex justify-between items-start">
                        <div className={`text-sm ${getRestrictionTypeColor(record.type)}`}>{record.reason}</div>
                        <Badge variant="outline">{record.date}</Badge>
                      </div>
                      <div className="text-sm text-gray-500 mt-1">恢复时间：{record.recoveryTime}</div>
                    </div>
                  ))}
                </div>
              </ScrollArea>
            </DialogContent>
          </Dialog>

{/* 好友转移确认弹窗 */}
          <Dialog open={showTransferConfirm} onOpenChange={setShowTransferConfirm}>
            <DialogContent className="max-w-md">
              <DialogHeader>
                <DialogTitle>好友转移确认</DialogTitle>
                <DialogDescription>即将导出该微信号的好友列表，用于创建新的获客计划</DialogDescription>
              </DialogHeader>
              <div className="py-4">
                <div className="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg">
                  <Avatar className="h-10 w-10">
                    <AvatarImage src={account.avatar} />
                    <AvatarFallback>{account.nickname[0]}</AvatarFallback>
                  </Avatar>
                  <div>
                    <div className="font-medium">{account.nickname}</div>
                    <div className="text-sm text-gray-500">{account.wechatId}</div>
                  </div>
                </div>
                <div className="mt-4 text-sm text-gray-500">
                  <p>• 将导出该账号下的所有好友信息</p>
                  <p>• 好友信息将用于创建新的订单获客计划</p>
                  <p>• 导出过程中请勿关闭页面</p>
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" onClick={() => setShowTransferConfirm(false)}>
                  取消
                </Button>
                <Button onClick={confirmTransferFriends}>确认转移</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>

{/* 好友详情弹窗 */}
          <Dialog open={showFriendDetail} onOpenChange={setShowFriendDetail}>
            <DialogContent className="max-w-md">
              <DialogHeader>
                <DialogTitle>好友详情</DialogTitle>
              </DialogHeader>
              {selectedFriend && (
                <div className="space-y-4">
                  <div className="flex items-center space-x-3">
                    <Avatar className="h-16 w-16">
                      <AvatarImage src={selectedFriend.avatar} />
                      <AvatarFallback>{selectedFriend.nickname[0]}</AvatarFallback>
                    </Avatar>
                    <div>
                      <div className="text-xl font-medium">{selectedFriend.nickname}</div>
                      <div className="text-sm text-gray-500">{selectedFriend.wechatId}</div>
                      {selectedFriend.remark && (
                        <div className="text-sm text-gray-500">备注: {selectedFriend.remark}</div>
                      )}
                    </div>
                  </div>

<div className="grid grid-cols-2 gap-4">
                    <div className="space-y-1">
                      <div className="text-sm text-gray-500">添加时间</div>
                      <div className="font-medium">{selectedFriend.addTime}</div>
                    </div>
                    <div className="space-y-1">
                      <div className="text-sm text-gray-500">最近互动</div>
                      <div className="font-medium">{selectedFriend.lastInteraction}</div>
                    </div>
                    <div className="space-y-1">
                      <div className="text-sm text-gray-500">地区</div>
                      <div className="font-medium">{selectedFriend.region}</div>
                    </div>
                    <div className="space-y-1">
                      <div className="text-sm text-gray-500">来源</div>
                      <div className="font-medium">{selectedFriend.source}</div>
                    </div>
                  </div>

<div className="space-y-2">
                    <div className="text-sm text-gray-500 flex items-center">
                      <Tag className="h-4 w-4 mr-1" />
                      标签
                    </div>
                    <div className="flex flex-wrap gap-2">
                      {selectedFriend.tags.map((tag) => (
                        <span key={tag.id} className={`text-sm px-2 py-1 rounded-full ${tag.color}`}>
                          {tag.name}
                        </span>
                      ))}
                      {selectedFriend.tags.length === 0 && <span className="text-sm text-gray-500">暂无标签</span>}
                    </div>
                  </div>

{selectedFriend.notes && (
                    <div className="space-y-2">
                      <div className="text-sm text-gray-500">备注信息</div>
                      <div className="p-3 bg-gray-50 rounded-lg text-sm">{selectedFriend.notes}</div>
                    </div>
                  )}

<div className="flex justify-end space-x-2">
                    <Button variant="outline" onClick={() => setShowFriendDetail(false)}>
                      关闭
                    </Button>
                    <Button
                      onClick={() => {
                        setShowFriendDetail(false)
                        router.push(`/traffic-pool?source=${selectedFriend.wechatId}`)
                      }}
                    >
                      添加到流量池
                    </Button>
                  </div>
                </div>
              )}
            </DialogContent>
          </Dialog>
        </div>
      </div>
    </TooltipProvider>
  )
}
[V0_FILE]typescriptreact:file="app/traffic-pool/page.tsx" isMerged="true"
"use client"

export default function TrafficPoolPage() {
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")

// 模拟场景分类数据
  const categories = [
    { id: "all", name: "所有场景" },
    { id: "user-assets", name: "用户资产" },
    { id: "street-vendor", name: "地摊相关" },
    { id: "fandeng", name: "樊登读书" },
    { id: "wow", name: "魔兽世界" },
    { id: "other", name: "其他场景" },
  ]

// 模拟流量池数据
  const pools = [
    {
      id: "1",
      name: "私域池",
      description: "已转化为私域用户的高价值流量池",
      userCount: 12500,
      categories: ["用户资产", "樊登读书"],
      conversionRate: 32,
      status: "active",
      growth: "+15%",
    },
    {
      id: "2",
      name: "公域池",
      description: "尚未转化的公域流量用户池",
      userCount: 45600,
      categories: ["地摊相关"],
      conversionRate: 8,
      status: "active",
      growth: "+23%",
    },
    {
      id: "3",
      name: "游戏池",
      description: "游戏相关用户的流量池",
      userCount: 28900,
      categories: ["魔兽世界"],
      conversionRate: 15,
      status: "active",
      growth: "+8%",
    },
    {
      id: "4",
      name: "休眠池",
      description: "长期未活跃的休眠用户池",
      userCount: 9800,
      categories: ["用户资产", "地摊相关", "樊登读书", "魔兽世界"],
      conversionRate: 3,
      status: "inactive",
      growth: "-5%",
    },
  ]

// 过滤流量池
  const filteredPools = pools.filter((pool) => {
    const matchesSearch =
      pool.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      pool.description.toLowerCase().includes(searchQuery.toLowerCase())

const matchesCategory =
      selectedCategory === "all" ||
      pool.categories.some((cat) => {
        const categoryObj = categories.find((c) => c.name === cat)
        return categoryObj && categoryObj.id === selectedCategory
      })

return matchesSearch && matchesCategory
  })

// 模拟用户数据
  const poolUsers = [
    { id: "1", name: "张三", source: "微信", joinDate: "2023-05-15", category: "用户资产", value: "高" },
    { id: "2", name: "李四", source: "抖音", joinDate: "2023-04-10", category: "地摊相关", value: "中" },
    { id: "3", name: "王五", source: "小红书", joinDate: "2023-03-05", category: "樊登读书", value: "低" },
    { id: "4", name: "赵六", source: "官网", joinDate: "2023-02-20", category: "魔兽世界", value: "高" },
    { id: "5", name: "钱七", source: "微信", joinDate: "2023-01-15", category: "用户资产", value: "中" },
  ]

return (
    <div className="container mx-auto py-6 space-y-8">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">流量池管理</h1>
          <p className="text-muted-foreground">按场景分类管理您的流量池和用户资源</p>
        </div>
        <div className="flex gap-2">
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            创建新流量池
          </Button>
        </div>
      </div>

<div className="flex flex-col md:flex-row gap-4 items-center">
        <div className="relative w-full md:max-w-sm">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            type="search"
            placeholder="搜索流量池..."
            className="pl-8"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>

<Select value={selectedCategory} onValueChange={setSelectedCategory}>
          <SelectTrigger className="w-full md:w-[180px]">
            <SelectValue placeholder="选择场景分类" />
          </SelectTrigger>
          <SelectContent>
            {categories.map((category) => (
              <SelectItem key={category.id} value={category.id}>
                {category.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

<TabsContent value="grid" className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredPools.map((pool) => (
              <Card key={pool.id} className={`${pool.status === "inactive" ? "border-dashed opacity-70" : ""}`}>
                <CardHeader className="pb-2">
                  <div className="flex justify-between items-start">
                    <div>
                      <CardTitle>{pool.name}</CardTitle>
                      <CardDescription>{pool.description}</CardDescription>
                    </div>
                    <Badge
                      className={pool.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}
                    >
                      {pool.status === "active" ? "活跃" : "休眠"}
                    </Badge>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="flex justify-between items-center">
                      <div className="flex items-center">
                        <Users className="h-4 w-4 mr-2 text-muted-foreground" />
                        <span className="text-sm font-medium">用户数量</span>
                      </div>
                      <div className="flex items-center">
                        <span className="font-bold">{pool.userCount.toLocaleString()}</span>
                        <span
                          className={`text-xs ml-2 ${pool.growth.startsWith("+") ? "text-green-600" : "text-red-600"}`}
                        >
                          {pool.growth}
                        </span>
                      </div>
                    </div>
                    <div className="flex justify-between items-center">
                      <div className="flex items-center">
                        <ArrowRight className="h-4 w-4 mr-2 text-muted-foreground" />
                        <span className="text-sm font-medium">转化率</span>
                      </div>
                      <span className="font-bold">{pool.conversionRate}%</span>
                    </div>
                    <div>
                      <span className="text-sm font-medium">包含场景</span>
                      <div className="flex flex-wrap gap-2 mt-2">
                        {pool.categories.map((category, index) => (
                          <Badge key={index} variant="outline" className="bg-blue-50">
                            {category}
                          </Badge>
                        ))}
                      </div>
                    </div>
                    <div className="pt-4 flex justify-end gap-2">
                      <Button variant="outline" size="sm">
                        查看详情
                      </Button>
                      <Button size="sm">管理用户</Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </TabsContent>

<TabsContent value="list" className="space-y-6">
          <Card>
            <CardContent className="p-0">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>流量池名称</TableHead>
                    <TableHead>用户数量</TableHead>
                    <TableHead>转化率</TableHead>
                    <TableHead>场景分类</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead className="text-right">操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredPools.map((pool) => (
                    <TableRow key={pool.id}>
                      <TableCell>
                        <div>
                          <p className="font-medium">{pool.name}</p>
                          <p className="text-sm text-muted-foreground">{pool.description}</p>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center">
                          <span>{pool.userCount.toLocaleString()}</span>
                          <span
                            className={`text-xs ml-2 ${pool.growth.startsWith("+") ? "text-green-600" : "text-red-600"}`}
                          >
                            {pool.growth}
                          </span>
                        </div>
                      </TableCell>
                      <TableCell>{pool.conversionRate}%</TableCell>
                      <TableCell>
                        <div className="flex flex-wrap gap-1">
                          {pool.categories.map((category, index) => (
                            <Badge key={index} variant="outline" className="bg-blue-50">
                              {category}
                            </Badge>
                          ))}
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge
                          className={
                            pool.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                          }
                        >
                          {pool.status === "active" ? "活跃" : "休眠"}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button variant="outline" size="sm">
                            查看
                          </Button>
                          <Button size="sm">管理</Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="analytics" className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>流量池用户分布</CardTitle>
                <CardDescription>按场景分类的用户分布情况</CardDescription>
              </CardHeader>
              <CardContent className="h-80 flex items-center justify-center">
                <div className="text-center text-muted-foreground flex flex-col items-center">
                  <BarChart className="h-10 w-10 mb-2" />
                  <p>流量池用户分布图表</p>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>转化率分析</CardTitle>
                <CardDescription>各流量池的转化率对比</CardDescription>
              </CardHeader>
              <CardContent className="h-80 flex items-center justify-center">
                <div className="text-center text-muted-foreground flex flex-col items-center">
                  <BarChart className="h-10 w-10 mb-2" />
                  <p>转化率对比图表</p>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>

<Card>
        <CardHeader>
          <CardTitle>流量池用户列表</CardTitle>
          <CardDescription>所有流量池中的用户</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>用户名</TableHead>
                <TableHead>来源</TableHead>
                <TableHead>加入日期</TableHead>
                <TableHead>场景分类</TableHead>
                <TableHead>用户价值</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {poolUsers.map((user) => (
                <TableRow key={user.id}>
                  <TableCell className="font-medium">{user.name}</TableCell>
                  <TableCell>{user.source}</TableCell>
                  <TableCell>{user.joinDate}</TableCell>
                  <TableCell>
                    <Badge variant="outline" className="bg-blue-50">
                      {user.category}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <Badge
                      className={
                        user.value === "高"
                          ? "bg-green-100 text-green-800"
                          : user.value === "中"
                            ? "bg-yellow-100 text-yellow-800"
                            : "bg-red-100 text-red-800"
                      }
                    >
                      {user.value}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <Button variant="outline" size="sm">
                      查看详情
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/traffic-pool/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const DropdownMenu = DropdownMenuPrimitive.Root

const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger

const DropdownMenuGroup = DropdownMenuPrimitive.Group

const DropdownMenuPortal = DropdownMenuPrimitive.Portal

const DropdownMenuSub = DropdownMenuPrimitive.Sub

const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
}
[V0_FILE]typescript:file="app/api/acquisition/[planId]/orders/route.ts" isMerged="true"
import { NextResponse } from "next/server"
import type { OrderFormData } from "@/types/acquisition"

export async function POST(request: Request, { params }: { params: { planId: string } }) {
  try {
    const data: OrderFormData = await request.json()

// 这里应该添加实际的数据库存储逻辑
    console.log("Received order:", data, "for plan:", params.planId)

// 模拟成功响应
    return NextResponse.json({
      success: true,
      message: "订单已成功提交",
    })
  } catch (error) {
    return NextResponse.json({ success: false, message: "订单提交失败" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="components/acquisition/PlanSettingsDialog.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { toast } from "@/components/ui/use-toast"
import { Copy, QrCode } from "lucide-react"

interface PlanSettingsDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  planId: string
}

export function PlanSettingsDialog({ open, onOpenChange, planId }: PlanSettingsDialogProps) {
  const [rewardType, setRewardType] = useState<"disabled" | "onSubmit" | "onApprove">("onSubmit")
  const [rewardAmount, setRewardAmount] = useState("5.00")
  const [selectedWorker, setSelectedWorker] = useState("")

// 生成订单填写链接
  const orderFormUrl =
    typeof window !== "undefined" ? `${window.location.origin}/orders/submit/${planId}` : `/orders/submit/${planId}`

const handleCopyLink = (url: string) => {
    if (typeof navigator !== "undefined") {
      navigator.clipboard.writeText(url)
      toast({
        title: "链接已复制",
        description: "已将链接复制到剪贴板",
      })
    }
  }

const handleSave = () => {
    // 这里添加保存设置的逻辑
    toast({
      title: "设置已保存",
      description: "获客计划设置已更新",
    })
    onOpenChange(false)
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>获客计划设置</DialogTitle>
        </DialogHeader>

<div className="space-y-6">
          <div className="space-y-4">
            <Label>何时收益</Label>
            <RadioGroup value={rewardType} onValueChange={(value: any) => setRewardType(value)}>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="disabled" id="disabled" />
                <Label htmlFor="disabled">禁用</Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="onSubmit" id="onSubmit" />
                <Label htmlFor="onSubmit">表单录入时</Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="onApprove" id="onApprove" />
                <Label htmlFor="onApprove">好友通过时</Label>
              </div>
            </RadioGroup>
          </div>

<div className="space-y-2">
            <Label>每条收益</Label>
            <div className="flex items-center space-x-2">
              <Button
                variant="outline"
                size="icon"
                onClick={() => setRewardAmount((prev) => (Number(prev) - 1).toFixed(2))}
              >
                -
              </Button>
              <Input
                type="number"
                value={rewardAmount}
                onChange={(e) => setRewardAmount(e.target.value)}
                className="w-24 text-center"
                step="0.01"
              />
              <Button
                variant="outline"
                size="icon"
                onClick={() => setRewardAmount((prev) => (Number(prev) + 1).toFixed(2))}
              >
                +
              </Button>
              <span className="text-gray-500">元</span>
            </div>
          </div>

<div className="space-y-2">
            <Label>Web入口</Label>
            <div className="flex items-center space-x-2">
              <Input value={orderFormUrl} readOnly />
              <Button variant="outline" size="icon" onClick={() => handleCopyLink(orderFormUrl)}>
                <Copy className="h-4 w-4" />
              </Button>
            </div>
          </div>

<div className="space-y-2">
            <Label>小程序入口</Label>
            <div className="flex flex-col items-center p-4 border rounded-md">
              <QrCode className="w-32 h-32 text-gray-400 mb-2" />
              <p className="text-sm text-gray-500 text-center">扫描二维码或复制链接访问订单填写页面</p>
              <Button variant="outline" size="sm" className="mt-2" onClick={() => handleCopyLink(orderFormUrl)}>
                <Copy className="h-4 w-4 mr-2" />
                复制链接
              </Button>
            </div>
          </div>
        </div>

<DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button onClick={handleSave}>保存</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescript:file="app/orders/submit/[planId]/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/components/ui/use-toast"
import type { OrderFormData } from "@/types/acquisition"

export default function OrderSubmitPage({ params }: { params: { planId: string } }) {
  const [formData, setFormData] = useState<OrderFormData>({
    customerName: "",
    phone: "",
    wechatId: "",
    source: "",
    amount: undefined,
    orderDate: new Date().toISOString().split("T")[0],
    remark: "",
  })

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

try {
      const response = await fetch(`/api/acquisition/${params.planId}/orders`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      })

const data = await response.json()

if (data.success) {
        toast({
          title: "提交成功",
          description: "订单信息已成功提交",
        })
        // 重置表单
        setFormData({
          customerName: "",
          phone: "",
          wechatId: "",
          source: "",
          amount: undefined,
          orderDate: new Date().toISOString().split("T")[0],
          remark: "",
        })
      } else {
        throw new Error(data.message)
      }
    } catch (error) {
      toast({
        title: "提交失败",
        description: "订单提交失败，请稍后重试",
        variant: "destructive",
      })
    }
  }

return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-md mx-auto">
        <Card className="p-6">
          <h1 className="text-2xl font-semibold mb-6">订单信息录入</h1>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <Label htmlFor="customerName">客户姓名</Label>
              <Input
                id="customerName"
                value={formData.customerName}
                onChange={(e) => setFormData((prev) => ({ ...prev, customerName: e.target.value }))}
                required
              />
            </div>

<div>
              <Label htmlFor="phone">手机号码</Label>
              <Input
                id="phone"
                value={formData.phone}
                onChange={(e) => setFormData((prev) => ({ ...prev, phone: e.target.value }))}
                required
              />
            </div>

<div>
              <Label htmlFor="wechatId">微信号</Label>
              <Input
                id="wechatId"
                value={formData.wechatId}
                onChange={(e) => setFormData((prev) => ({ ...prev, wechatId: e.target.value }))}
                required
              />
            </div>

<div>
              <Label htmlFor="source">来源</Label>
              <Input
                id="source"
                value={formData.source}
                onChange={(e) => setFormData((prev) => ({ ...prev, source: e.target.value }))}
                required
              />
            </div>

<div>
              <Label htmlFor="amount">订单金额</Label>
              <Input
                id="amount"
                type="number"
                step="0.01"
                value={formData.amount || ""}
                onChange={(e) => setFormData((prev) => ({ ...prev, amount: Number(e.target.value) }))}
              />
            </div>

<div>
              <Label htmlFor="orderDate">下单日期</Label>
              <Input
                id="orderDate"
                type="date"
                value={formData.orderDate}
                onChange={(e) => setFormData((prev) => ({ ...prev, orderDate: e.target.value }))}
                required
              />
            </div>

<div>
              <Label htmlFor="remark">备注</Label>
              <Textarea
                id="remark"
                value={formData.remark}
                onChange={(e) => setFormData((prev) => ({ ...prev, remark: e.target.value }))}
              />
            </div>

<Button type="submit" className="w-full">
              提交订单
            </Button>
          </form>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/AuthProvider.tsx" isMerged="true"
"use client"

import { createContext, useContext, useEffect, useState, type ReactNode } from "react"
import { useRouter } from "next/navigation"

interface AuthContextType {
  isAuthenticated: boolean
  token: string | null
  login: (token: string) => void
  logout: () => void
}

const AuthContext = createContext<AuthContextType>({
  isAuthenticated: false,
  token: null,
  login: () => {},
  logout: () => {},
})

export const useAuth = () => useContext(AuthContext)

interface AuthProviderProps {
  children: ReactNode
}

export function AuthProvider({ children }: AuthProviderProps) {
  const [token, setToken] = useState<string | null>(null)
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const router = useRouter()

useEffect(() => {
    // 客户端检查token
    if (typeof window !== "undefined") {
      const storedToken = localStorage.getItem("token")
      if (storedToken) {
        setToken(storedToken)
        setIsAuthenticated(true)
      } else {
        setIsAuthenticated(false)
        // 暂时禁用重定向逻辑，允许访问所有页面
        // 将来需要恢复登录验证时，取消下面注释
        /*
        if (pathname !== "/login") {
          router.push("/login")
        }
        */
      }
    }
  }, [])

const login = (newToken: string) => {
    localStorage.setItem("token", newToken)
    setToken(newToken)
    setIsAuthenticated(true)
  }

const logout = () => {
    localStorage.removeItem("token")
    setToken(null)
    setIsAuthenticated(false)
    // 登出后不强制跳转到登录页
    // router.push("/login")
  }

return <AuthContext.Provider value={{ isAuthenticated, token, login, logout }}>{children}</AuthContext.Provider>
}
[V0_FILE]typescriptreact:file="app/api/auth.ts" isMerged="true"
// API请求工具函数
import { toast } from "@/components/ui/use-toast"

const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "https://api.example.com"

// 带有认证的请求函数
export async function authFetch(url: string, options: RequestInit = {}) {
  const token = localStorage.getItem("token")

// 合并headers
  let headers = { ...options.headers }

// 如果有token，添加到请求头
  if (token) {
    headers = {
      ...headers,
      Token: `${token}`,
    }
  }

try {
    const response = await fetch(`${API_BASE_URL}${url}`, {
      ...options,
      headers,
    })

const data = await response.json()

// 检查token是否过期（仅当有token时）
    if (token && (data.code === 401 || data.code === 403)) {
      // 清除token
      localStorage.removeItem("token")

// 暂时不重定向到登录页
      // if (typeof window !== "undefined") {
      //   window.location.href = "/login"
      // }

console.warn("登录已过期")
    }

return data
  } catch (error) {
    console.error("API请求错误:", error)
    toast({
      variant: "destructive",
      title: "请求失败",
      description: error instanceof Error ? error.message : "网络错误，请稍后重试",
    })
    throw error
  }
}

// 不需要认证的请求函数
export async function publicFetch(url: string, options: RequestInit = {}) {
  try {
    const response = await fetch(`${API_BASE_URL}${url}`, options)
    return await response.json()
  } catch (error) {
    console.error("API请求错误:", error)
    toast({
      variant: "destructive",
      title: "请求失败",
      description: error instanceof Error ? error.message : "网络错误，请稍后重试",
    })
    throw error
  }
}
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/new/steps/BasicSettings.tsx" isMerged="true"
"use client"

import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Minus, Plus, HelpCircle } from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

interface BasicSettingsProps {
  formData: any
  onChange: (data: any) => void
  onNext: () => void
}

export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
  return (
    <Card className="p-6">
      <div className="space-y-6">
        <div>
          <Label htmlFor="taskName" className="required">
            任务名称
          </Label>
          <Input
            id="taskName"
            value={formData.taskName}
            onChange={(e) => onChange({ ...formData, taskName: e.target.value })}
            placeholder="请输入任务名称"
            className="mt-2"
          />
        </div>

<div>
          <Label>允许发布的时间段</Label>
          <div className="flex items-center space-x-2 mt-2">
            <Input
              type="time"
              value={formData.startTime}
              onChange={(e) => onChange({ ...formData, startTime: e.target.value })}
              className="w-32"
            />
            <span>至</span>
            <Input
              type="time"
              value={formData.endTime}
              onChange={(e) => onChange({ ...formData, endTime: e.target.value })}
              className="w-32"
            />
          </div>
        </div>

<div>
          <Label>每日同步数量</Label>
          <div className="flex items-center space-x-4 mt-2">
            <Button
              variant="outline"
              size="icon"
              onClick={() => onChange({ ...formData, syncCount: Math.max(1, formData.syncCount - 1) })}
              aria-label="减少同步数量"
            >
              <Minus className="h-4 w-4" />
            </Button>
            <span className="w-12 text-center">{formData.syncCount}</span>
            <Button
              variant="outline"
              size="icon"
              onClick={() => onChange({ ...formData, syncCount: formData.syncCount + 1 })}
              aria-label="增加同步数量"
            >
              <Plus className="h-4 w-4" />
            </Button>
            <span className="text-gray-500">条朋友圈</span>
          </div>
        </div>

<div>
          <Label>账号类型</Label>
          <div className="flex space-x-4 mt-2">
            <div className="flex items-center">
              <Button
                variant={formData.accountType === "business" ? "default" : "outline"}
                onClick={() => onChange({ ...formData, accountType: "business" })}
                className="w-24"
              >
                业务号
              </Button>
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <HelpCircle className="h-4 w-4 ml-2 text-gray-400" />
                  </TooltipTrigger>
                  <TooltipContent>
                    <p>
                      业务号能够循环推送内容库中的内容。当内容库所有内容循环推送完毕后，若有新内容则优先推送新内容，若无新内容则继续循环推送。
                    </p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </div>
            <div className="flex items-center">
              <Button
                variant={formData.accountType === "personal" ? "default" : "outline"}
                onClick={() => onChange({ ...formData, accountType: "personal" })}
                className="w-24"
              >
                人设号
              </Button>
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <HelpCircle className="h-4 w-4 ml-2 text-gray-400" />
                  </TooltipTrigger>
                  <TooltipContent>
                    <p>人设号用于实时更新同步，有新动态时进行同步，无新动态则不同步。</p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </div>
          </div>
        </div>

<div className="flex items-center justify-between">
          <Label>是否启用</Label>
          <Switch
            checked={formData.enabled}
            onCheckedChange={(checked) => onChange({ ...formData, enabled: checked })}
          />
        </div>

<Button className="w-full" onClick={onNext}>
          下一步
        </Button>
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/new/steps/DeviceSelector.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Search, RefreshCw, X } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { toast } from "@/components/ui/use-toast"
import { Badge } from "@/components/ui/badge"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

// 定义类型，避免导入错误
interface Device {
  id: string
  imei: string
  name: string
  status: string
  wechatId: string
  usedInPlans: number
}

interface DeviceResponse {
  code: number
  message: string
  data: {
    devices: Device[]
    total: number
  }
}

interface DeviceSelectResponse {
  code: number
  message: string
  data: {
    success: boolean
    deviceIds: string[]
  }
}

interface DeviceSelectorProps {
  formData: any
  onChange: (data: any) => void
  onNext: () => void
  onPrev: () => void
}

export function DeviceSelector({ formData, onChange, onNext, onPrev }: DeviceSelectorProps) {
  const [devices, setDevices] = useState<Device[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [currentPage, setCurrentPage] = useState(1)
  const [loading, setLoading] = useState(false)
  const itemsPerPage = 5

useEffect(() => {
    fetchDevices()
  }, [])

const fetchDevices = async () => {
    setLoading(true)
    try {
      // 实际项目中这里应该调用API获取所有设备
      const response: DeviceResponse = {
        code: 0,
        message: "success",
        data: {
          devices: Array.from({ length: 42 }, (_, i) => ({
            id: `device-${i + 1}`,
            imei: `IMEI-${Math.random().toString(36).substr(2, 9)}`,
            name: `设备 ${i + 1}`,
            status: Math.random() > 0.3 ? "online" : "offline",
            wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
            usedInPlans: Math.floor(Math.random() * 3),
          })),
          total: 42,
        },
      }

if (response.code === 0) {
        setDevices(response.data.devices)
      } else {
        throw new Error(response.message)
      }
    } catch (error) {
      toast({
        title: "获取失败",
        description: "无法获取设备列表",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handleRefresh = () => {
    fetchDevices()
    toast({
      title: "刷新成功",
      description: "设备列表已更新",
    })
  }

const filteredDevices = devices.filter((device) => {
    const matchesSearch =
      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      device.imei.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesStatus = statusFilter === "all" || device.status === statusFilter
    return matchesSearch && matchesStatus
  })

const paginatedDevices = filteredDevices.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)

const handleDeviceSelect = async (deviceId: string) => {
    try {
      // 实际项目中这里应该调用API
      const response: DeviceSelectResponse = {
        code: 0,
        message: "success",
        data: {
          success: true,
          deviceIds: [deviceId],
        },
      }

if (response.code === 0 && response.data.success) {
        const updatedSelection = formData.selectedDevices.includes(deviceId)
          ? formData.selectedDevices.filter((id: string) => id !== deviceId)
          : [...formData.selectedDevices, deviceId]
        onChange({ ...formData, selectedDevices: updatedSelection })
      } else {
        throw new Error(response.message)
      }
    } catch (error) {
      toast({
        title: "选择失败",
        description: "无法选择设备",
        variant: "destructive",
      })
    }
  }

return (
    <Card className="p-6">
      <div className="space-y-4">
        <div className="flex items-center space-x-2">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
            <Input
              placeholder="搜索设备备注或IMEI"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-9"
            />
          </div>
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="w-[120px]">
              <SelectValue placeholder="全部状态" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部状态</SelectItem>
              <SelectItem value="online">在线</SelectItem>
              <SelectItem value="offline">离线</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
            <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
          </Button>
        </div>

<div className="space-y-2">
          {paginatedDevices.map((device) => (
            <Card
              key={device.id}
              className={`p-3 hover:shadow-md transition-shadow cursor-pointer ${
                formData.selectedDevices.includes(device.id) ? "border-blue-500 border-2" : ""
              }`}
              onClick={() => handleDeviceSelect(device.id)}
            >
              <div className="flex items-center space-x-3">
                <Checkbox
                  checked={formData.selectedDevices.includes(device.id)}
                  onCheckedChange={() => handleDeviceSelect(device.id)}
                />
                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between mb-1">
                    <div className="font-medium truncate">{device.name}</div>
                    <div
                      className={`px-2 py-1 rounded-full text-xs ${
                        device.status === "online" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                      }`}
                    >
                      {device.status === "online" ? "在线" : "离线"}
                    </div>
                  </div>
                  <div className="text-sm text-gray-500">IMEI: {device.imei}</div>
                  <div className="text-sm text-gray-500">微信号: {device.wechatId}</div>
                  {device.usedInPlans > 0 && (
                    <div className="text-sm text-orange-500">已用于 {device.usedInPlans} 个计划</div>
                  )}
                </div>
              </div>
            </Card>
          ))}
        </div>
        <Pagination>
          <PaginationContent>
            <PaginationPrevious
              onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
              disabled={currentPage === 1}
            />
            {Array.from({ length: Math.ceil(filteredDevices.length / itemsPerPage) }, (_, i) => i + 1).map((page) => (
              <PaginationItem key={page}>
                <PaginationLink onClick={() => setCurrentPage(page)} isActive={currentPage === page}>
                  {page}
                </PaginationLink>
              </PaginationItem>
            ))}
            <PaginationNext
              onClick={() =>
                setCurrentPage((prev) => Math.min(Math.ceil(filteredDevices.length / itemsPerPage), prev + 1))
              }
              disabled={currentPage === Math.ceil(filteredDevices.length / itemsPerPage)}
            />
          </PaginationContent>
        </Pagination>

<div className="mt-4">
          <h3 className="font-medium mb-2">已选设备：</h3>
          <div className="flex flex-wrap gap-2">
            {formData.selectedDevices.map((deviceId: string) => {
              const device = devices.find((d) => d.id === deviceId)
              return (
                device && (
                  <Badge key={deviceId} variant="secondary" className="px-2 py-1 flex items-center space-x-1">
                    <span>{device.name}</span>
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-4 w-4 p-0 hover:bg-transparent"
                      onClick={(e) => {
                        e.stopPropagation()
                        handleDeviceSelect(deviceId)
                      }}
                    >
                      <X className="h-3 w-3" />
                    </Button>
                  </Badge>
                )
              )
            })}
          </div>
        </div>

<div className="flex justify-between mt-4">
          <Button variant="outline" onClick={onPrev}>
            上一步
          </Button>
          <Button onClick={onNext} disabled={formData.selectedDevices.length === 0}>
            下一步
          </Button>
        </div>
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/new/steps/ContentSelector.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Search, RefreshCw } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { toast } from "@/components/ui/use-toast"

// 定义类型，避免导入错误
interface ContentLibrary {
  id: string
  name: string
  source: string
  creator: string
  contentCount: number
  lastUpdated: string
  type: string
  status: string
}

interface ContentLibraryResponse {
  code: number
  message: string
  data: {
    libraries: ContentLibrary[]
    total: number
  }
}

interface ContentLibrarySelectResponse {
  code: number
  message: string
  data: {
    success: boolean
    libraryId: string
    name: string
  }
}

interface ContentSelectorProps {
  formData: any
  onChange: (data: any) => void
  onNext: () => void
  onPrev: () => void
}

export function ContentSelector({ formData, onChange, onNext, onPrev }: ContentSelectorProps) {
  const [libraries, setLibraries] = useState<ContentLibrary[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [loading, setLoading] = useState(false)
  const [activeTab, setActiveTab] = useState("all")

useEffect(() => {
    fetchContentLibraries()
  }, [])

const fetchContentLibraries = async () => {
    setLoading(true)
    try {
      // 实际项目中这里应该调用API获取所有内容库
      const response: ContentLibraryResponse = {
        code: 0,
        message: "success",
        data: {
          libraries: [
            {
              id: "1",
              name: "微信好友广告",
              source: "微信",
              creator: "海尼",
              contentCount: 12,
              lastUpdated: "2024-02-09 12:30",
              type: "moments",
              status: "active",
            },
            {
              id: "2",
              name: "开发群",
              source: "微信",
              creator: "karuo",
              contentCount: 8,
              lastUpdated: "2024-02-09 12:30",
              type: "group",
              status: "inactive",
            },
            {
              id: "3",
              name: "产品更新",
              source: "微信",
              creator: "张三",
              contentCount: 15,
              lastUpdated: "2024-02-10 09:45",
              type: "moments",
              status: "active",
            },
            {
              id: "4",
              name: "市场活动",
              source: "微信",
              creator: "李四",
              contentCount: 20,
              lastUpdated: "2024-02-11 14:20",
              type: "moments",
              status: "active",
            },
            {
              id: "5",
              name: "技术交流",
              source: "微信",
              creator: "王五",
              contentCount: 10,
              lastUpdated: "2024-02-12 16:35",
              type: "group",
              status: "active",
            },
          ],
          total: 5,
        },
      }

if (response.code === 0) {
        setLibraries(response.data.libraries)
      } else {
        throw new Error(response.message)
      }
    } catch (error) {
      toast({
        title: "获取失败",
        description: "无法获取内容库列表",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handleRefresh = () => {
    fetchContentLibraries()
    toast({
      title: "刷新成功",
      description: "内容库列表已更新",
    })
  }

const filteredLibraries = libraries.filter((library) => {
    const matchesTab =
      activeTab === "all" ||
      (activeTab === "friends" && library.type === "moments") ||
      (activeTab === "groups" && library.type === "group")
    const matchesSearch = library.name.toLowerCase().includes(searchQuery.toLowerCase())
    return matchesTab && matchesSearch
  })

const handleSelectLibrary = async (library: ContentLibrary) => {
    try {
      // 实际项目中这里应该调用API
      const response: ContentLibrarySelectResponse = {
        code: 0,
        message: "success",
        data: {
          success: true,
          libraryId: library.id,
          name: library.name,
        },
      }

if (response.code === 0 && response.data.success) {
        onChange({
          ...formData,
          selectedLibrary: library.id,
          contentFormat: library.type,
        })
        toast({
          title: "选择成功",
          description: `已选择内容库：${library.name}`,
        })
      } else {
        throw new Error(response.message)
      }
    } catch (error) {
      toast({
        title: "选择失败",
        description: "无法选择内容库",
        variant: "destructive",
      })
    }
  }

const handleFinish = async () => {
    try {
      // 实际项目中这里应该调用API创建计划
      await new Promise((resolve) => setTimeout(resolve, 1000))
      toast({
        title: "创建成功",
        description: "新计划已创建",
      })
      onNext()
    } catch (error) {
      toast({
        title: "创建失败",
        description: "无法创建新计划",
        variant: "destructive",
      })
    }
  }

return (
    <Card className="p-6">
      <div className="space-y-6">
        <div className="flex items-center space-x-2">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
            <Input
              placeholder="搜索内容库名称..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-9"
            />
          </div>
          <Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
            <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
          </Button>
        </div>

<div className="space-y-2">
          {filteredLibraries.map((library) => (
            <div
              key={library.id}
              className={`flex items-center space-x-3 p-3 rounded-lg cursor-pointer border transition-colors ${
                formData.selectedLibrary === library.id
                  ? "border-blue-500 bg-blue-50"
                  : "border-gray-200 hover:border-blue-500"
              }`}
              onClick={() => handleSelectLibrary(library)}
            >
              <div className="flex-1">
                <div className="font-medium">{library.name}</div>
                <div className="text-sm text-gray-500 mt-1">
                  <div className="flex items-center space-x-2">
                    <span>来源：{library.source}</span>
                    <span>•</span>
                    <span>创建人：{library.creator}</span>
                  </div>
                  <div className="flex items-center space-x-2 mt-1">
                    <Badge variant="outline">内容数量：{library.contentCount}</Badge>
                    <Badge variant="outline">更新时间：{new Date(library.lastUpdated).toLocaleString()}</Badge>
                  </div>
                </div>
              </div>
              <Badge variant="secondary" className={library.status === "inactive" ? "bg-gray-100" : ""}>
                {library.status === "active" ? "启用" : "已停用"}
              </Badge>
            </div>
          ))}
        </div>

<div className="flex justify-between">
          <Button variant="outline" onClick={onPrev}>
            上一步
          </Button>
          <Button onClick={handleFinish} disabled={!formData.selectedLibrary}>
            完成
          </Button>
        </div>
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/plans/new/steps/BasicSettings.tsx" isMoved="true" isMovedFrom="app/scenarios/new/steps/BasicSettings.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { QrCode, X, ChevronDown, Plus, Maximize2, Upload, Download } from "lucide-react"
import { TooltipProvider } from "@/components/ui/tooltip"
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"

const scenarios = [
  { id: "haibao", name: "海报", type: "material" },
  { id: "order", name: "订单", type: "api" },
  { id: "douyin", name: "抖音", type: "social" },
  { id: "xiaohongshu", name: "小红书", type: "social" },
  { id: "gongzhonghao", name: "公众号", type: "social" },
  { id: "payment", name: "支付码", type: "material" },
  { id: "weixinqun", name: "微信群", type: "social" },
  { id: "api", name: "API", type: "api" },
]

interface Account {
  id: string
  nickname: string
  avatar: string
}

interface Material {
  id: string
  name: string
  type: "poster" | "payment"
  preview: string
}

interface BasicSettingsProps {
  formData: any
  onChange: (data: any) => void
  onNext?: () => void
}

const posterTemplates = [
  {
    id: "poster-1",
    name: "点击领取",
    preview:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E9%A2%86%E5%8F%961-tipd1HI7da6qooY5NkhxQnXBnT5LGU.gif",
  },
  {
    id: "poster-2",
    name: "点击合作",
    preview:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E5%90%88%E4%BD%9C-LPlMdgxtvhqCSr4IM1bZFEFDBF3ztI.gif",
  },
  {
    id: "poster-3",
    name: "点击咨询",
    preview:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E5%92%A8%E8%AF%A2-FTiyAMAPop2g9LvjLOLDz0VwPg3KVu.gif",
  },
  {
    id: "poster-4",
    name: "点击签到",
    preview:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E7%AD%BE%E5%88%B0-94TZIkjLldb4P2jTVlI6MkSDg0NbXi.gif",
  },
  {
    id: "poster-5",
    name: "点击了解",
    preview:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E4%BA%86%E8%A7%A3-6GCl7mQVdO4WIiykJyweSubLsTwj71.gif",
  },
  {
    id: "poster-6",
    name: "点击报名",
    preview:
      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E6%8A%A5%E5%90%8D-Mj0nnva0BiASeDAIhNNaRRAbjPgjEj.gif",
  },
]

const generateRandomAccounts = (count: number): Account[] => {
  return Array.from({ length: count }, (_, index) => ({
    id: `account-${index + 1}`,
    nickname: `账号-${Math.random().toString(36).substring(2, 7)}`,
    avatar: `/placeholder.svg?height=40&width=40&text=${index + 1}`,
  }))
}

const generatePosterMaterials = (): Material[] => {
  return posterTemplates.map((template) => ({
    id: template.id,
    name: template.name,
    type: "poster",
    preview: template.preview,
  }))
}

export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
  const [isAccountDialogOpen, setIsAccountDialogOpen] = useState(false)
  const [isMaterialDialogOpen, setIsMaterialDialogOpen] = useState(false)
  const [isQRCodeOpen, setIsQRCodeOpen] = useState(false)
  const [isPreviewOpen, setIsPreviewOpen] = useState(false)
  const [previewImage, setPreviewImage] = useState("")
  const [accounts] = useState<Account[]>(generateRandomAccounts(50))
  const [materials] = useState<Material[]>(generatePosterMaterials())
  const [selectedAccounts, setSelectedAccounts] = useState<Account[]>(
    formData.accounts?.length > 0 ? formData.accounts : [],
  )
  const [selectedMaterials, setSelectedMaterials] = useState<Material[]>(
    formData.materials?.length > 0 ? formData.materials : [],
  )
  const [showAllScenarios, setShowAllScenarios] = useState(false)
  const [isImportDialogOpen, setIsImportDialogOpen] = useState(false)
  const [importedTags, setImportedTags] = useState<
    Array<{
      phone: string
      wechat: string
      source?: string
      orderAmount?: number
      orderDate?: string
    }>
  >(formData.importedTags || [])

useEffect(() => {
    if (!formData.planName) {
      if (formData.materials?.length > 0) {
        const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "")
        onChange({ ...formData, planName: `海报${today}` })
      } else {
        onChange({ ...formData, planName: "场景" })
      }
    }
  }, [formData, onChange])

const handleScenarioSelect = (scenarioId: string) => {
    onChange({ ...formData, scenario: scenarioId })
  }

const handleAccountSelect = (account: Account) => {
    const updatedAccounts = [...selectedAccounts, account]
    setSelectedAccounts(updatedAccounts)
    onChange({ ...formData, accounts: updatedAccounts })
  }

const handleMaterialSelect = (material: Material) => {
    const updatedMaterials = [material]
    setSelectedMaterials(updatedMaterials)
    onChange({ ...formData, materials: updatedMaterials })
    setIsMaterialDialogOpen(false)

// 更新计划名称
    const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "")
    onChange({ ...formData, planName: `海报${today}`, materials: updatedMaterials })
  }

const handleRemoveAccount = (accountId: string) => {
    const updatedAccounts = selectedAccounts.filter((a) => a.id !== accountId)
    setSelectedAccounts(updatedAccounts)
    onChange({ ...formData, accounts: updatedAccounts })
  }

const handleRemoveMaterial = (materialId: string) => {
    const updatedMaterials = selectedMaterials.filter((m) => m.id !== materialId)
    setSelectedMaterials(updatedMaterials)
    onChange({ ...formData, materials: updatedMaterials })
  }

const handlePreviewImage = (imageUrl: string) => {
    setPreviewImage(imageUrl)
    setIsPreviewOpen(true)
  }

const displayedScenarios = showAllScenarios ? scenarios : scenarios.slice(0, 3)

const handleFileImport = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        try {
          const content = e.target?.result as string
          const rows = content.split("\n").filter((row) => row.trim())
          const tags = rows.slice(1).map((row) => {
            const [phone, wechat, source, orderAmount, orderDate] = row.split(",")
            return {
              phone: phone.trim(),
              wechat: wechat.trim(),
              source: source?.trim(),
              orderAmount: orderAmount ? Number(orderAmount) : undefined,
              orderDate: orderDate?.trim(),
            }
          })
          setImportedTags(tags)
          onChange({ ...formData, importedTags: tags })
        } catch (error) {
          console.error("导入失败:", error)
        }
      }
      reader.readAsText(file)
    }
  }

const handleDownloadTemplate = () => {
    const template = "电话号码,微信号,来源,订单金额,下单日期\n13800138000,wxid_123,抖音,99.00,2024-03-03"
    const blob = new Blob([template], { type: "text/csv" })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = "订单导入模板.csv"
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(url)
  }

return (
    <TooltipProvider>
      <Card className="p-6">
        <div className="space-y-6">
          <div>
            <Label className="text-base mb-4 block">获客场景</Label>
            <div className="grid grid-cols-3 gap-2">
              {displayedScenarios.map((scenario) => (
                <button
                  key={scenario.id}
                  className={`p-2 rounded-lg text-center transition-all ${
                    formData.scenario === scenario.id
                      ? "bg-blue-100 text-blue-600 font-medium"
                      : "bg-gray-50 text-gray-600 hover:bg-gray-100"
                  }`}
                  onClick={() => handleScenarioSelect(scenario.id)}
                >
                  {scenario.name}
                </button>
              ))}
            </div>
            {!showAllScenarios && (
              <Button variant="ghost" className="mt-2 w-full text-blue-600" onClick={() => setShowAllScenarios(true)}>
                展开更多选项 <ChevronDown className="ml-2 h-4 w-4" />
              </Button>
            )}
          </div>

<div>
            <Label htmlFor="planName">计划名称</Label>
            <Input
              id="planName"
              value={formData.planName}
              onChange={(e) => onChange({ ...formData, planName: e.target.value })}
              placeholder="请输入计划名称"
              className="mt-2"
            />
          </div>

{formData.scenario && (
            <>
              {scenarios.find((s) => s.id === formData.scenario)?.type === "social" && (
                <div>
                  <Label>绑定账号</Label>
                  <div className="flex gap-2 mt-2">
                    <Button
                      variant="outline"
                      className="flex-1 justify-start"
                      onClick={() => setIsAccountDialogOpen(true)}
                    >
                      {selectedAccounts.length > 0 ? `已选择 ${selectedAccounts.length} 个账号` : "选择账号"}
                    </Button>
                    <Button variant="outline" size="icon" onClick={() => setIsQRCodeOpen(true)}>
                      <QrCode className="h-4 w-4" />
                    </Button>
                  </div>
                  {selectedAccounts.length > 0 && (
                    <div className="mt-2 flex flex-wrap gap-2">
                      {selectedAccounts.map((account) => (
                        <div key={account.id} className="flex items-center bg-gray-100 rounded-full px-3 py-1">
                          <img
                            src={account.avatar || "/placeholder.svg"}
                            alt={account.nickname}
                            className="w-4 h-4 rounded-full mr-2"
                          />
                          <span className="text-sm">{account.nickname}</span>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="ml-2 p-0"
                            onClick={() => handleRemoveAccount(account.id)}
                          >
                            <X className="h-4 w-4" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}

{scenarios.find((s) => s.id === formData.scenario)?.type === "material" && (
                <div>
                  <div className="flex items-center justify-between mb-4">
                    <Label>选择海报</Label>
                    <Button variant="outline" onClick={() => setIsMaterialDialogOpen(true)}>
                      <Plus className="h-4 w-4" />
                    </Button>
                  </div>

{/* 海报展示区域 */}
                  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                    {materials.map((material) => (
                      <div
                        key={material.id}
                        className={`relative cursor-pointer rounded-lg overflow-hidden group ${
                          selectedMaterials.find((m) => m.id === material.id)
                            ? "ring-2 ring-blue-600"
                            : "hover:ring-2 hover:ring-blue-600"
                        }`}
                        onClick={() => handleMaterialSelect(material)}
                      >
                        <img
                          src={material.preview || "/placeholder.svg"}
                          alt={material.name}
                          className="w-full aspect-[9/16] object-cover"
                        />
                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all">
                          <Button
                            variant="ghost"
                            size="icon"
                            className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
                            onClick={(e) => {
                              e.stopPropagation()
                              handlePreviewImage(material.preview)
                            }}
                          >
                            <Maximize2 className="h-4 w-4 text-white" />
                          </Button>
                        </div>
                        <div className="absolute bottom-0 left-0 right-0 p-2 bg-black/50 text-white">
                          <div className="text-sm truncate">{material.name}</div>
                        </div>
                      </div>
                    ))}
                  </div>

{selectedMaterials.length > 0 && (
                    <div className="mt-4">
                      <Label>已选择的海报</Label>
                      <div className="mt-2">
                        <div className="relative w-full max-w-[200px]">
                          <img
                            src={selectedMaterials[0].preview || "/placeholder.svg"}
                            alt={selectedMaterials[0].name}
                            className="w-full aspect-[9/16] object-cover rounded-lg cursor-pointer"
                            onClick={() => handlePreviewImage(selectedMaterials[0].preview)}
                          />
                          <Button
                            variant="secondary"
                            size="sm"
                            className="absolute top-2 right-2"
                            onClick={() => handleRemoveMaterial(selectedMaterials[0].id)}
                          >
                            <X className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              )}

{scenarios.find((s) => s.id === formData.scenario)?.id === "order" && (
                <div>
                  <div className="flex items-center justify-between mb-4">
                    <Label>订单导入</Label>
                    <div className="flex gap-2">
                      <Button variant="outline" onClick={handleDownloadTemplate}>
                        <Download className="h-4 w-4 mr-2" />
                        下载模板
                      </Button>
                      <Button onClick={() => setIsImportDialogOpen(true)}>
                        <Upload className="h-4 w-4 mr-2" />
                        导入订单
                      </Button>
                    </div>
                  </div>

{importedTags.length > 0 && (
                    <div className="mt-4">
                      <h4 className="text-sm font-medium mb-2">已导入 {importedTags.length} 条数据</h4>
                      <div className="max-h-[300px] overflow-auto border rounded-md">
                        <Table>
                          <TableHeader>
                            <TableRow>
                              <TableHead>电话号码</TableHead>
                              <TableHead>微信号</TableHead>
                              <TableHead>来源</TableHead>
                              <TableHead>订单金额</TableHead>
                            </TableRow>
                          </TableHeader>
                          <TableBody>
                            {importedTags.slice(0, 5).map((tag, index) => (
                              <TableRow key={index}>
                                <TableCell>{tag.phone}</TableCell>
                                <TableCell>{tag.wechat}</TableCell>
                                <TableCell>{tag.source}</TableCell>
                                <TableCell>{tag.orderAmount}</TableCell>
                              </TableRow>
                            ))}
                            {importedTags.length > 5 && (
                              <TableRow>
                                <TableCell colSpan={4} className="text-center text-gray-500">
                                  还有 {importedTags.length - 5} 条数据未显示
                                </TableCell>
                              </TableRow>
                            )}
                          </TableBody>
                        </Table>
                      </div>
                    </div>
                  )}
                </div>
              )}
            </>
          )}

<div className="flex items-center justify-between">
            <Label htmlFor="enabled">是否启用</Label>
            <Switch
              id="enabled"
              checked={formData.enabled}
              onCheckedChange={(checked) => onChange({ ...formData, enabled: checked })}
            />
          </div>

{/* 账号选择对话框 */}
        <Dialog open={isAccountDialogOpen} onOpenChange={setIsAccountDialogOpen}>
          <DialogContent className="sm:max-w-md">
            <DialogHeader>
              <DialogTitle>选择账号</DialogTitle>
            </DialogHeader>
            <div className="mt-4 max-h-[400px] overflow-y-auto">
              <div className="space-y-2">
                {accounts.map((account) => (
                  <div
                    key={account.id}
                    className="flex items-center space-x-3 p-3 hover:bg-gray-100 rounded-lg cursor-pointer"
                    onClick={() => handleAccountSelect(account)}
                  >
                    <img src={account.avatar || "/placeholder.svg"} alt="" className="w-10 h-10 rounded-full" />
                    <span className="flex-1">{account.nickname}</span>
                    {selectedAccounts.find((a) => a.id === account.id) && (
                      <div className="w-4 h-4 rounded-full bg-blue-600" />
                    )}
                  </div>
                ))}
              </div>
            </div>
          </DialogContent>
        </Dialog>

{/* 二维码对话框 */}
        <Dialog open={isQRCodeOpen} onOpenChange={setIsQRCodeOpen}>
          <DialogContent className="sm:max-w-md">
            <DialogHeader>
              <DialogTitle>绑定账号</DialogTitle>
            </DialogHeader>
            <div className="flex flex-col items-center p-6">
              <div className="w-64 h-64 bg-gray-100 rounded-lg flex items-center justify-center">
                <img src="/placeholder.svg?height=256&width=256" alt="二维码" className="w-full h-full" />
              </div>
              <p className="mt-4 text-sm text-gray-600">请用相应的APP扫码</p>
            </div>
          </DialogContent>
        </Dialog>

{/* 图片预览对话框 */}
        <Dialog open={isPreviewOpen} onOpenChange={setIsPreviewOpen}>
          <DialogContent className="sm:max-w-3xl">
            <DialogHeader>
              <DialogTitle>海报预览</DialogTitle>
            </DialogHeader>
            <div className="flex justify-center items-center p-4">
              <img src={previewImage || "/placeholder.svg"} alt="预览" className="max-h-[80vh] object-contain" />
            </div>
          </DialogContent>
        </Dialog>

{/* 订单导入对话框 */}
        <Dialog open={isImportDialogOpen} onOpenChange={setIsImportDialogOpen}>
          <DialogContent className="max-w-3xl">
            <DialogHeader>
              <DialogTitle>导入订单标签</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <div className="flex items-center gap-4">
                <Input type="file" accept=".csv" onChange={handleFileImport} className="flex-1" />
              </div>
              <div className="max-h-[400px] overflow-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>电话号码</TableHead>
                      <TableHead>微信号</TableHead>
                      <TableHead>来源</TableHead>
                      <TableHead>订单金额</TableHead>
                      <TableHead>下单日期</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {importedTags.map((tag, index) => (
                      <TableRow key={index}>
                        <TableCell>{tag.phone}</TableCell>
                        <TableCell>{tag.wechat}</TableCell>
                        <TableCell>{tag.source}</TableCell>
                        <TableCell>{tag.orderAmount}</TableCell>
                        <TableCell>{tag.orderDate}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </div>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsImportDialogOpen(false)}>
                取消
              </Button>
              <Button
                onClick={() => {
                  onChange({ ...formData, importedTags })
                  setIsImportDialogOpen(false)
                }}
              >
                确认导入
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </Card>
    </TooltipProvider>
  )
}
[V0_FILE]typescriptreact:file="app/plans/new/steps/FriendRequestSettings.tsx" isMoved="true" isMovedFrom="app/scenarios/new/steps/FriendRequestSettings.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { DeviceSelectionDialog } from "@/app/components/device-selection-dialog"
import { HelpCircle, ChevronDown, MessageSquare } from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"

interface FriendRequestSettingsProps {
  formData: any
  onChange: (data: any) => void
  onNext: () => void
  onPrev: () => void
}

// 招呼语模板
const greetingTemplates = [
  "你好，请通过",
  "你好,了解XX,请通过",
  "你好，我是XX产品的客服请通过",
  "你好，感谢关注我们的产品",
  "你好，很高兴为您服务",
]

// 备注类型选项
const remarkTypes = [
  { value: "phone", label: "手机号" },
  { value: "nickname", label: "昵称" },
  { value: "source", label: "来源" },
]

export function FriendRequestSettings({ formData, onChange, onNext, onPrev }: FriendRequestSettingsProps) {
  const [isDeviceDialogOpen, setIsDeviceDialogOpen] = useState(false)
  const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false)

// 使用useEffect设置默认值
  useEffect(() => {
    if (!formData.greeting) {
      onChange({
        ...formData,
        greeting: "你好，请通过",
        remarkType: "phone", // 默认选择手机号
        maxDailyFriends: 20,
        addFriendInterval: 1,
      })
    }
  }, [formData, formData.greeting, onChange])

const handleDeviceSelect = (deviceIds: string[]) => {
    onChange({
      ...formData,
      selectedDevices: deviceIds,
    })
  }

const handleTemplateSelect = (template: string) => {
    onChange({ ...formData, greeting: template })
    setIsTemplateDialogOpen(false)
  }

return (
    <Card className="p-6">
      <div className="space-y-6">
        <div>
          <Label className="text-base">选择设备</Label>
          <Button variant="outline" className="w-full mt-2 justify-between" onClick={() => setIsDeviceDialogOpen(true)}>
            {formData.selectedDevices?.length ? `已选择 ${formData.selectedDevices.length} 个设备` : "选择设备"}
            <ChevronDown className="h-4 w-4" />
          </Button>
        </div>

<div>
          <div className="flex items-center space-x-2">
            <Label className="text-base">好友备注</Label>
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger>
                  <HelpCircle className="h-4 w-4 text-gray-400" />
                </TooltipTrigger>
                <TooltipContent>
                  <p>设置添加好友时的备注格式</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </div>
          <Select
            value={formData.remarkType || "phone"}
            onValueChange={(value) => onChange({ ...formData, remarkType: value })}
          >
            <SelectTrigger className="w-full mt-2">
              <SelectValue placeholder="选择备注类型" />
            </SelectTrigger>
            <SelectContent>
              {remarkTypes.map((type) => (
                <SelectItem key={type.value} value={type.value}>
                  {type.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {formData.remarkType && (
            <div className="mt-2 p-3 bg-gray-50 rounded-lg text-sm">
              <div className="text-gray-500 mb-1">备注格式预览：</div>
              {formData.remarkType === "phone" && "138****1234"}
              {formData.remarkType === "nickname" && "小红书用户2851"}
              {formData.remarkType === "source" && "抖音直播"}
            </div>
          )}
        </div>

<div>
          <div className="flex items-center justify-between">
            <Label className="text-base">招呼语</Label>
            <Button variant="ghost" size="sm" onClick={() => setIsTemplateDialogOpen(true)} className="text-blue-500">
              <MessageSquare className="h-4 w-4 mr-2" />
              参考模板
            </Button>
          </div>
          <Input
            value={formData.greeting}
            onChange={(e) => onChange({ ...formData, greeting: e.target.value })}
            placeholder="请输入招呼语"
            className="mt-2"
          />
        </div>

<div>
          <div className="flex items-center space-x-2">
            <Label className="text-base">每个设备每日最大添加数量</Label>
            <TooltipProvider>
              <Tooltip>
                <TooltipTrigger>
                  <HelpCircle className="h-4 w-4 text-gray-400" />
                </TooltipTrigger>
                <TooltipContent>
                  <p>为了账号安全，建议每个设备每日添加不超过20个好友</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </div>
          <div className="mt-2">
            <Input
              type="number"
              value={formData.maxDailyFriends || 20}
              onChange={(e) => onChange({ ...formData, maxDailyFriends: Number(e.target.value) })}
              max={20}
              min={1}
              className="w-32"
            />
          </div>
        </div>

<div>
          <Label className="text-base">添加间隔</Label>
          <div className="flex items-center space-x-2 mt-2">
            <Input
              type="number"
              value={formData.addFriendInterval || 1}
              onChange={(e) => onChange({ ...formData, addFriendInterval: Number(e.target.value) })}
              className="w-32"
            />
            <span>分钟</span>
          </div>
        </div>

<div>
          <Label className="text-base">允许加人的时间段</Label>
          <div className="flex items-center space-x-2 mt-2">
            <Input
              type="time"
              value={formData.addFriendTimeStart || "09:00"}
              onChange={(e) => onChange({ ...formData, addFriendTimeStart: e.target.value })}
              className="w-32"
            />
            <span>至</span>
            <Input
              type="time"
              value={formData.addFriendTimeEnd || "18:00"}
              onChange={(e) => onChange({ ...formData, addFriendTimeEnd: e.target.value })}
              className="w-32"
            />
          </div>
        </div>

<Dialog open={isTemplateDialogOpen} onOpenChange={setIsTemplateDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>招呼语模板</DialogTitle>
          </DialogHeader>
          <div className="space-y-2">
            {greetingTemplates.map((template, index) => (
              <Button
                key={index}
                variant="outline"
                className="w-full justify-start h-auto py-3 px-4"
                onClick={() => handleTemplateSelect(template)}
              >
                {template}
              </Button>
            ))}
          </div>
        </DialogContent>
      </Dialog>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/plans/new/steps/MessageSettings.tsx" isMoved="true" isMovedFrom="app/scenarios/new/steps/MessageSettings.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
  MessageSquare,
  ImageIcon,
  Video,
  FileText,
  Link2,
  Users,
  AppWindowIcon as Window,
  Plus,
  X,
  Upload,
} from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { toast } from "@/components/ui/use-toast"

interface MessageContent {
  id: string
  type: "text" | "image" | "video" | "file" | "miniprogram" | "link" | "group"
  content: string
  sendInterval?: number
  intervalUnit?: "seconds" | "minutes"
  title?: string
  description?: string
  address?: string
  coverImage?: string
  groupId?: string
}

interface DayPlan {
  day: number
  messages: MessageContent[]
}

interface MessageSettingsProps {
  formData: any
  onChange: (data: any) => void
  onNext: () => void
  onPrev: () => void
}

// 消息类型配置
const messageTypes = [
  { id: "text", icon: MessageSquare, label: "文本" },
  { id: "image", icon: ImageIcon, label: "图片" },
  { id: "video", icon: Video, label: "视频" },
  { id: "file", icon: FileText, label: "文件" },
  { id: "miniprogram", icon: Window, label: "小程序" },
  { id: "link", icon: Link2, label: "链���" },
  { id: "group", icon: Users, label: "邀请入群" },
]

// 模拟群组数据
const mockGroups = [
  { id: "1", name: "产品交流群1", memberCount: 156 },
  { id: "2", name: "产品交流群2", memberCount: 234 },
  { id: "3", name: "产品交流群3", memberCount: 89 },
]

export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageSettingsProps) {
  const [dayPlans, setDayPlans] = useState<DayPlan[]>([
    {
      day: 0,
      messages: [
        {
          id: "1",
          type: "text",
          content: "",
          sendInterval: 5,
          intervalUnit: "minutes",
        },
      ],
    },
  ])
  const [isAddDayPlanOpen, setIsAddDayPlanOpen] = useState(false)
  const [isGroupSelectOpen, setIsGroupSelectOpen] = useState(false)
  const [selectedGroupId, setSelectedGroupId] = useState("")

// 添加新消息
  const handleAddMessage = (dayIndex: number, type = "text") => {
    const updatedPlans = [...dayPlans]
    updatedPlans[dayIndex].messages.push({
      id: Date.now().toString(),
      type: type as MessageContent["type"],
      content: "",
      sendInterval: 5,
      intervalUnit: "minutes",
    })
    setDayPlans(updatedPlans)
    onChange({ ...formData, messagePlans: updatedPlans })
  }

// 更新消息内容
  const handleUpdateMessage = (dayIndex: number, messageIndex: number, updates: Partial<MessageContent>) => {
    const updatedPlans = [...dayPlans]
    updatedPlans[dayIndex].messages[messageIndex] = {
      ...updatedPlans[dayIndex].messages[messageIndex],
      ...updates,
    }
    setDayPlans(updatedPlans)
    onChange({ ...formData, messagePlans: updatedPlans })
  }

// 删除消息
  const handleRemoveMessage = (dayIndex: number, messageIndex: number) => {
    const updatedPlans = [...dayPlans]
    updatedPlans[dayIndex].messages.splice(messageIndex, 1)
    setDayPlans(updatedPlans)
    onChange({ ...formData, messagePlans: updatedPlans })
  }

// 添加新的天数计划
  const handleAddDayPlan = () => {
    setDayPlans([
      ...dayPlans,
      {
        day: dayPlans.length,
        messages: [
          {
            id: Date.now().toString(),
            type: "text",
            content: "",
            sendInterval: 5,
            intervalUnit: "minutes",
          },
        ],
      },
    ])
    setIsAddDayPlanOpen(false)
    toast({
      title: "添加成功",
      description: `已添加第${dayPlans.length}天的消息计划`,
    })
  }

// 选择群组
  const handleSelectGroup = (groupId: string) => {
    setSelectedGroupId(groupId)
    setIsGroupSelectOpen(false)
    toast({
      title: "选择成功",
      description: `已选择群组：${mockGroups.find((g) => g.id === groupId)?.name}`,
    })
  }

// 处理文件上传
  const handleFileUpload = (dayIndex: number, messageIndex: number, type: "image" | "video" | "file") => {
    // 模拟文件上传
    toast({
      title: "上传成功",
      description: `${type === "image" ? "图片" : type === "video" ? "视频" : "文件"}上传成功`,
    })
  }

return (
    <Card className="p-6">
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-semibold">消息设置</h2>
          <Button variant="outline" size="icon" onClick={() => setIsAddDayPlanOpen(true)}>
            <Plus className="h-4 w-4" />
          </Button>
        </div>

<Tabs defaultValue="0" className="w-full">
          <TabsList className="w-full">
            {dayPlans.map((plan) => (
              <TabsTrigger key={plan.day} value={plan.day.toString()} className="flex-1">
                {plan.day === 0 ? "即时消息" : `第${plan.day}天`}
              </TabsTrigger>
            ))}
          </TabsList>

{dayPlans.map((plan, dayIndex) => (
            <TabsContent key={plan.day} value={plan.day.toString()}>
              <div className="space-y-4">
                {plan.messages.map((message, messageIndex) => (
                  <div key={message.id} className="space-y-4 p-4 bg-gray-50 rounded-lg">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <Label>发送间隔</Label>
                        <Input
                          type="number"
                          value={message.sendInterval}
                          onChange={(e) =>
                            handleUpdateMessage(dayIndex, messageIndex, { sendInterval: Number(e.target.value) })
                          }
                          className="w-20"
                        />
                        <Select
                          value={message.intervalUnit}
                          onValueChange={(value) =>
                            handleUpdateMessage(dayIndex, messageIndex, {
                              intervalUnit: value as "seconds" | "minutes",
                            })
                          }
                        >
                          <SelectTrigger className="w-[100px]">
                            <SelectValue placeholder="选择单位" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="seconds">秒</SelectItem>
                            <SelectItem value="minutes">分钟</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <Button variant="ghost" size="sm" onClick={() => handleRemoveMessage(dayIndex, messageIndex)}>
                        <X className="h-4 w-4" />
                      </Button>
                    </div>

<div className="flex items-center space-x-2 bg-white p-2 rounded-lg">
                      {messageTypes.map((type) => (
                        <Button
                          key={type.id}
                          variant={message.type === type.id ? "default" : "outline"}
                          size="sm"
                          onClick={() => handleUpdateMessage(dayIndex, messageIndex, { type: type.id as any })}
                          className="flex flex-col items-center p-2 h-auto"
                        >
                          <type.icon className="h-4 w-4" />
                        </Button>
                      ))}
                    </div>

{message.type === "text" && (
                      <Textarea
                        value={message.content}
                        onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { content: e.target.value })}
                        placeholder="请输入消息内容"
                        className="min-h-[100px]"
                      />
                    )}

{message.type === "miniprogram" && (
                      <div className="space-y-4">
                        <div className="space-y-2">
                          <Label>
                            标题<span className="text-red-500">*</span>
                          </Label>
                          <Input
                            value={message.title}
                            onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { title: e.target.value })}
                            placeholder="请输入小程序标题"
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>描述</Label>
                          <Input
                            value={message.description}
                            onChange={(e) =>
                              handleUpdateMessage(dayIndex, messageIndex, { description: e.target.value })
                            }
                            placeholder="请输入小程序描述"
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>
                            地址<span className="text-red-500">*</span>
                          </Label>
                          <Input
                            value={message.address}
                            onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { address: e.target.value })}
                            placeholder="请输入小程序路径"
                          />
                        </div>
                        <div className="space-y-2">
                          <Label>
                            封面<span className="text-red-500">*</span>
                          </Label>
                          <div className="border-2 border-dashed rounded-lg p-4 text-center">
                            {message.coverImage ? (
                              <div className="relative">
                                <img
                                  src={message.coverImage || "/placeholder.svg"}
                                  alt="封面"
                                  className="max-w-[200px] mx-auto rounded-lg"
                                />
                                <Button
                                  variant="secondary"
                                  size="sm"
                                  className="absolute top-2 right-2"
                                  onClick={() => handleUpdateMessage(dayIndex, messageIndex, { coverImage: undefined })}
                                >
                                  <X className="h-4 w-4" />
                                </Button>
                              </div>
                            ) : (
                              <Button
                                variant="outline"
                                className="w-full h-[120px]"
                                onClick={() => handleFileUpload(dayIndex, messageIndex, "image")}
                              >
                                <Upload className="h-4 w-4 mr-2" />
                                上传封面
                              </Button>
                            )}
                          </div>
                        </div>
                      </div>
                    )}

{message.type === "group" && (
                      <div className="space-y-2">
                        <Label>
                          选择群聊<span className="text-red-500">*</span>
                        </Label>
                        <Button
                          variant="outline"
                          className="w-full justify-start"
                          onClick={() => setIsGroupSelectOpen(true)}
                        >
                          {selectedGroupId ? mockGroups.find((g) => g.id === selectedGroupId)?.name : "选择邀请入的群"}
                        </Button>
                      </div>
                    )}

{(message.type === "image" || message.type === "video" || message.type === "file") && (
                      <div className="border-2 border-dashed rounded-lg p-4 text-center">
                        <Button
                          variant="outline"
                          className="w-full h-[120px]"
                          onClick={() => handleFileUpload(dayIndex, messageIndex, message.type as any)}
                        >
                          <Upload className="h-4 w-4 mr-2" />
                          上传{message.type === "image" ? "图片" : message.type === "video" ? "视频" : "文件"}
                        </Button>
                      </div>
                    )}
                  </div>
                ))}

<Button variant="outline" onClick={() => handleAddMessage(dayIndex)} className="w-full">
                  <Plus className="w-4 h-4 mr-2" />
                  添加消息
                </Button>
              </div>
            </TabsContent>
          ))}
        </Tabs>

{/* 添加天数计划弹窗 */}
      <Dialog open={isAddDayPlanOpen} onOpenChange={setIsAddDayPlanOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>添加消息计划</DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <p className="text-sm text-gray-500 mb-4">选择要添加的消息计划类型</p>
            <Button onClick={handleAddDayPlan} className="w-full">
              添加第 {dayPlans.length} 天计划
            </Button>
          </div>
        </DialogContent>
      </Dialog>

{/* 选择群聊弹窗 */}
      <Dialog open={isGroupSelectOpen} onOpenChange={setIsGroupSelectOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>选择群聊</DialogTitle>
          </DialogHeader>
          <div className="py-4">
            <div className="space-y-2">
              {mockGroups.map((group) => (
                <div
                  key={group.id}
                  className={`p-4 rounded-lg cursor-pointer hover:bg-gray-100 ${
                    selectedGroupId === group.id ? "bg-blue-50 border border-blue-200" : ""
                  }`}
                  onClick={() => handleSelectGroup(group.id)}
                >
                  <div className="font-medium">{group.name}</div>
                  <div className="text-sm text-gray-500">成员数：{group.memberCount}</div>
                </div>
              ))}
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsGroupSelectOpen(false)}>
              取消
            </Button>
            <Button onClick={() => setIsGroupSelectOpen(false)}>确定</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/plans/new/steps/TagSettings.tsx" isMoved="true" isMovedFrom="app/scenarios/new/steps/TagSettings.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Users, UserPlus, X } from "lucide-react"
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

interface TeamMember {
  id: string
  name: string
  role: string
  status: "active" | "inactive"
}

interface OrderTag {
  phone: string
  wechat: string
  source?: string
  orderAmount?: number
  orderDate?: string
}

interface WechatFriend {
  id: string
  nickname: string
  wechatId: string
  remark: string
  addedDate: string
}

interface TagSettingsProps {
  formData: any
  onChange: (data: any) => void
  onComplete: () => void
  onPrev?: () => void
}

export function TagSettings({ formData, onChange, onComplete, onPrev }: TagSettingsProps) {
  const router = useRouter()
  const [teamMembers, setTeamMembers] = useState<TeamMember[]>(formData.teamMembers || [])
  const [selectedRole, setSelectedRole] = useState("member")
  const [newMemberName, setNewMemberName] = useState("")
  const [importedTags, setImportedTags] = useState<OrderTag[]>([])
  const [wechatFriends, setWechatFriends] = useState<WechatFriend[]>([])
  const [activeTab, setActiveTab] = useState(formData.sourceWechatId ? "friends" : "team")

// 如果是从微信号好友转移过来，加载好友数据
  useEffect(() => {
    if (formData.sourceWechatId) {
      // 模拟加载微信好友数据
      const mockFriends = Array.from({ length: 50 }, (_, i) => ({
        id: `friend-${i + 1}`,
        nickname: `好友${i + 1}`,
        wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
        remark: Math.random() > 0.5 ? `备注${i + 1}` : "",
        addedDate: new Date(Date.now() - Math.floor(Math.random() * 10000000000)).toLocaleDateString(),
      }))
      setWechatFriends(mockFriends)
      setActiveTab("friends")
    }
  }, [formData.sourceWechatId])

const handleAddMember = () => {
    if (newMemberName.trim()) {
      const newMember: TeamMember = {
        id: Date.now().toString(),
        name: newMemberName,
        role: selectedRole,
        status: "active",
      }
      const updatedMembers = [...teamMembers, newMember]
      setTeamMembers(updatedMembers)
      onChange({ ...formData, teamMembers: updatedMembers })
      setNewMemberName("")
    }
  }

const handleRemoveMember = (id: string) => {
    const updatedMembers = teamMembers.filter((member) => member.id !== id)
    setTeamMembers(updatedMembers)
    onChange({ ...formData, teamMembers: updatedMembers })
  }

const handleToggleStatus = (id: string) => {
    const updatedMembers = teamMembers.map((member) => {
      if (member.id === id) {
        return {
          ...member,
          status: member.status === "active" ? "inactive" : "active",
        }
      }
      return member
    })
    setTeamMembers(updatedMembers)
    onChange({ ...formData, teamMembers: updatedMembers })
  }

const handleComplete = () => {
    // 根据当前标签页确定要保存的数据
    if (activeTab === "friends" && wechatFriends.length > 0) {
      // 将微信好友转换为标签
      const friendTags = wechatFriends.map((friend) => ({
        phone: "",
        wechat: friend.wechatId,
        source: formData.sourceWechatId,
        orderAmount: undefined,
        orderDate: friend.addedDate,
      }))
      onChange({ ...formData, importedTags: friendTags })
    } else if (activeTab === "import" && importedTags.length > 0) {
      onChange({ ...formData, importedTags })
    }

onComplete()
  }

return (
    <div className="space-y-6">
      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="team">打粉团队</TabsTrigger>
          <TabsTrigger value="import">标签导入</TabsTrigger>
          {formData.sourceWechatId && <TabsTrigger value="friends">微信好友</TabsTrigger>}
        </TabsList>

<TabsContent value="team" className="mt-4">
          <Card className="p-4">
            <div className="space-y-4">
              <div className="flex items-center gap-4">
                <div className="flex-1">
                  <Input
                    value={newMemberName}
                    onChange={(e) => setNewMemberName(e.target.value)}
                    placeholder="输入成员名称"
                  />
                </div>
                <Select value={selectedRole} onValueChange={setSelectedRole}>
                  <SelectTrigger className="w-[120px]">
                    <SelectValue placeholder="选择角色" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="leader">组长</SelectItem>
                    <SelectItem value="member">组员</SelectItem>
                  </SelectContent>
                </Select>
                <Button onClick={handleAddMember}>
                  <UserPlus className="h-4 w-4 mr-2" />
                  添加成员
                </Button>
              </div>

<div className="space-y-2">
                {teamMembers.map((member) => (
                  <div key={member.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                    <div className="flex items-center gap-2">
                      <span className="font-medium">{member.name}</span>
                      <Badge variant="outline">{member.role === "leader" ? "组长" : "组员"}</Badge>
                      <Badge
                        variant={member.status === "active" ? "default" : "secondary"}
                        className="cursor-pointer"
                        onClick={() => handleToggleStatus(member.id)}
                      >
                        {member.status === "active" ? "已启用" : "已停用"}
                      </Badge>
                    </div>
                    <Button variant="ghost" size="sm" onClick={() => handleRemoveMember(member.id)}>
                      <X className="h-4 w-4" />
                    </Button>
                  </div>
                ))}
              </div>
            </div>
          </Card>
        </TabsContent>

{importedTags.length > 0 && (
                <div className="mt-4">
                  <h4 className="text-sm font-medium mb-2">已导入 {importedTags.length} 条数据</h4>
                  <div className="max-h-[300px] overflow-auto border rounded-md">
                    <Table>
                      <TableHeader>
                        <TableRow>
                          <TableHead>电话号码</TableHead>
                          <TableHead>微信号</TableHead>
                          <TableHead>来源</TableHead>
                          <TableHead>订单金额</TableHead>
                        </TableRow>
                      </TableHeader>
                      <TableBody>
                        {importedTags.slice(0, 5).map((tag, index) => (
                          <TableRow key={index}>
                            <TableCell>{tag.phone}</TableCell>
                            <TableCell>{tag.wechat}</TableCell>
                            <TableCell>{tag.source}</TableCell>
                            <TableCell>{tag.orderAmount}</TableCell>
                          </TableRow>
                        ))}
                        {importedTags.length > 5 && (
                          <TableRow>
                            <TableCell colSpan={4} className="text-center text-gray-500">
                              还有 {importedTags.length - 5} 条数据未显示
                            </TableCell>
                          </TableRow>
                        )}
                      </TableBody>
                    </Table>
                  </div>
                </div>
              )}
            </div>
          </Card>
        </TabsContent>

{formData.sourceWechatId && (
          <TabsContent value="friends" className="mt-4">
            <Card className="p-4">
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Users className="h-5 w-5 text-blue-500" />
                    <h3 className="text-lg font-medium">微信好友列表</h3>
                  </div>
                  <Badge variant="outline">共 {wechatFriends.length} 位好友</Badge>
                </div>

<div className="max-h-[400px] overflow-auto border rounded-md">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>昵称</TableHead>
                        <TableHead>微信号</TableHead>
                        <TableHead>备注</TableHead>
                        <TableHead>添加时间</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {wechatFriends.map((friend) => (
                        <TableRow key={friend.id}>
                          <TableCell>{friend.nickname}</TableCell>
                          <TableCell>{friend.wechatId}</TableCell>
                          <TableCell>{friend.remark || "-"}</TableCell>
                          <TableCell>{friend.addedDate}</TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>

<div className="text-sm text-gray-500">
                  <p>• 这些好友将被导入为订单标签</p>
                  <p>• 导入后可用于创建获客计划</p>
                </div>
              </div>
            </Card>
          </TabsContent>
        )}
      </Tabs>

<div className="flex justify-between">
        {onPrev && (
          <Button variant="outline" onClick={onPrev}>
            上一步
          </Button>
        )}
        <Button onClick={handleComplete} className={onPrev ? "ml-auto" : "w-full"}>
          完成
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/plans/new/loading.tsx" isMoved="true" isMovedFrom="app/scenarios/new/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/plans/new/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { ChevronLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { BasicSettings } from "./steps/BasicSettings"
import { FriendRequestSettings } from "./steps/FriendRequestSettings"
import { MessageSettings } from "./steps/MessageSettings"
import { TagSettings } from "./steps/TagSettings"
import { useRouter, useSearchParams } from "next/navigation"
import { toast } from "@/components/ui/use-toast"

// 场景分类规则
const scenarioRules = {
  LIVE: ["直播", "直播间", "主播", "抖音"],
  COMMENT: ["评论", "互动", "回复", "小红书"],
  GROUP: ["群", "社群", "群聊", "微信群"],
  ARTICLE: ["文章", "笔记", "内容", "公众号"],
}

// 根据计划名称和标签自动判断场景
const determineScenario = (planName: string, tags: any[]) => {
  // 优先使用标签进行分类
  if (tags && tags.length > 0) {
    const firstTag = tags[0]
    if (firstTag.name?.includes("直播") || firstTag.name?.includes("抖音")) return "douyin"
    if (firstTag.name?.includes("评论") || firstTag.name?.includes("小红书")) return "xiaohongshu"
    if (firstTag.name?.includes("群") || firstTag.name?.includes("微信")) return "weixinqun"
    if (firstTag.name?.includes("文章") || firstTag.name?.includes("公众号")) return "gongzhonghao"
  }

// 如果没有标签，使用计划名称进行分类
  const planNameLower = planName.toLowerCase()
  if (planNameLower.includes("直播") || planNameLower.includes("抖音")) return "douyin"
  if (planNameLower.includes("评论") || planNameLower.includes("小红书")) return "xiaohongshu"
  if (planNameLower.includes("群") || planNameLower.includes("微信")) return "weixinqun"
  if (planNameLower.includes("文章") || planNameLower.includes("公众号")) return "gongzhonghao"
  return "other"
}

export default function NewAcquisitionPlan() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const type = searchParams.get("type")
  const source = searchParams.get("source")

const [currentStep, setCurrentStep] = useState(1)
  const [formData, setFormData] = useState({
    planName: "",
    scenario: type === "order" ? "order" : "",
    accounts: [],
    materials: [],
    enabled: true,
    remarkType: "phone",
    remarkKeyword: "",
    greeting: "",
    addFriendTimeStart: "09:00",
    addFriendTimeEnd: "18:00",
    addFriendInterval: 1,
    maxDailyFriends: 20,
    messageInterval: 1,
    messageContent: "",
    tags: [],
    selectedDevices: [],
    messagePlans: [],
    importedTags: [],
    sourceWechatId: source || "",
  })

// 如果是从微信号好友转移过来，自动设置计划名称
  useEffect(() => {
    if (type === "order" && source) {
      const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "")
      setFormData((prev) => ({
        ...prev,
        planName: `${source}好友转移${today}`,
        scenario: "order",
      }))

// 模拟加载好友数据
      setTimeout(() => {
        toast({
          title: "好友数据加载成功",
          description: `已从微信号 ${source} 导入好友数据`,
        })
      }, 1000)
    }
  }, [type, source])

const handleSave = () => {
    // 根据标签和计划名称自动判断场景
    const scenario = formData.scenario || determineScenario(formData.planName, formData.tags)

console.log("计划已创建:", { ...formData, scenario })
    toast({
      title: "创建成功",
      description: "获客计划已创建完成",
    })

// 跳转到首页
    router.push("/")
  }

const handlePrev = () => {
    setCurrentStep((prevStep) => Math.max(prevStep - 1, 1))
  }

const isStepValid = () => {
    switch (currentStep) {
      case 1:
        if (!formData.planName.trim()) {
          toast({
            title: "请完善信息",
            description: "请填写计划名称",
            variant: "destructive",
          })
          return false
        }
        return true
      case 2:
        // 如果是订单导入场景，跳过好友申请设置验证
        if (formData.scenario === "order") {
          return true
        }
        if (!formData.greeting?.trim() || formData.selectedDevices?.length === 0) {
          toast({
            title: "请完善信息",
            description: "请填写好友申请信息并选择设备",
            variant: "destructive",
          })
          return false
        }
        return true
      case 3:
        // 如果是订单导入场景，跳过消息设置验证
        if (formData.scenario === "order") {
          return true
        }
        if (formData.messagePlans?.length === 0) {
          toast({
            title: "请完善信息",
            description: "请设置至少一条消息",
            variant: "destructive",
          })
          return false
        }
        return true
      case 4:
        return true
      default:
        return true
    }
  }

const renderStepContent = () => {
    switch (currentStep) {
      case 1:
        return <BasicSettings formData={formData} onChange={setFormData} onNext={handleNext} />
      case 2:
        return (
          <FriendRequestSettings formData={formData} onChange={setFormData} onNext={handleNext} onPrev={handlePrev} />
        )
      case 3:
        return <MessageSettings formData={formData} onChange={setFormData} onNext={handleNext} onPrev={handlePrev} />
      case 4:
        return <TagSettings formData={formData} onComplete={handleSave} onPrev={handlePrev} onChange={setFormData} />
      default:
        return null
    }
  }

// 如果是订单导入场景，直接跳到标签设置步骤
  useEffect(() => {
    // 只有在订单场景下，才自动开启步骤1，而不是直接跳到步骤4
    if (formData.scenario === "order" && currentStep === 1 && formData.planName) {
      // 保持在步骤1，不再自动跳转到步骤4
      // 之前的逻辑是直接跳到步骤4：setCurrentStep(4)
    }
  }, [formData.scenario, currentStep, formData.planName])

return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-[390px] mx-auto bg-white min-h-screen flex flex-col">
        <header className="sticky top-0 z-10 bg-white border-b">
          <div className="flex items-center h-14 px-4">
            <Button variant="ghost" size="icon" onClick={() => router.push("/")}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="ml-2 text-lg font-medium">{formData.sourceWechatId ? "好友转移" : "新建获客计划"}</h1>
          </div>
        </header>

<div className="flex-1 flex flex-col">
          <div className="px-4 py-6">
            <div className="relative flex justify-between">
              {steps.map((step, index) => (
                <div
                  key={step.id}
                  className={cn(
                    "flex flex-col items-center relative z-10",
                    currentStep >= step.id ? "text-blue-600" : "text-gray-400",
                  )}
                >
                  <div
                    className={cn(
                      "w-8 h-8 rounded-full flex items-center justify-center border-2",
                      currentStep >= step.id
                        ? "border-blue-600 bg-blue-600 text-white"
                        : "border-gray-300 bg-white text-gray-400",
                    )}
                  >
                    {step.id}
                  </div>
                  <div className="text-xs mt-1">{step.title}</div>
                  <div className="text-xs mt-0.5 font-medium">{step.subtitle}</div>
                  {index < steps.length - 1 && (
                    <div
                      className={cn(
                        "absolute top-4 left-[32px] w-[calc(100%-32px)] h-[2px]",
                        currentStep > step.id ? "bg-blue-600" : "bg-gray-200",
                      )}
                    />
                  )}
                </div>
              ))}
            </div>
          </div>

<div className="flex-1 px-4 pb-20">{renderStepContent()}</div>

<div className="sticky bottom-0 left-0 right-0 bg-white border-t p-4">
            <div className="flex justify-between max-w-[390px] mx-auto">
              {currentStep > 1 && (
                <Button variant="outline" onClick={handlePrev}>
                  上一步
                </Button>
              )}
              <Button className={cn("min-w-[120px]", currentStep === 1 ? "w-full" : "ml-auto")} onClick={handleNext}>
                {currentStep === steps.length ? "完成" : "下一步"}
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/scenarios/phone/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { ChevronLeft, MoreVertical, Copy, Pencil, Trash2, Phone, Mic, Clock, Settings } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
import { useRouter } from "next/navigation"
import { Badge } from "@/components/ui/badge"
import { toast } from "@/components/ui/use-toast"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"

interface Task {
  id: string
  name: string
  status: "running" | "paused" | "completed"
  stats: {
    calls: number
    acquired: number
    added: number
  }
  lastUpdated: string
  trend: { date: string; calls: number }[]
}

interface CallRecord {
  id: string
  phoneNumber: string
  duration: string
  time: string
  status: "已添加" | "未添加" | "处理中"
  question: string
}

export default function PhoneAcquisitionPage() {
  const router = useRouter()

const [tasks, setTasks] = useState<Task[]>([
    {
      id: "1",
      name: "招商电话获客",
      status: "running",
      stats: {
        calls: 42,
        acquired: 38,
        added: 31,
      },
      lastUpdated: "2024-03-18 15:30",
      trend: Array.from({ length: 7 }, (_, i) => ({
        date: `3月${String(i + 12)}日`,
        calls: Math.floor(Math.random() * 10) + 5,
      })),
    },
  ])

const [callRecords, setCallRecords] = useState<CallRecord[]>([
    {
      id: "call-1",
      phoneNumber: "138****1234",
      duration: "3分42秒",
      time: "2024-03-18 15:30",
      status: "已添加",
      question: "请问贵公司的产品有什么特点？",
    },
    {
      id: "call-2",
      phoneNumber: "139****5678",
      duration: "5分18秒",
      time: "2024-03-18 14:15",
      status: "已添加",
      question: "你们的合作方式是怎样的？",
    },
    {
      id: "call-3",
      phoneNumber: "137****9012",
      duration: "2分55秒",
      time: "2024-03-18 11:22",
      status: "已添加",
      question: "能详细介绍一下你们的服务吗？",
    },
    {
      id: "call-4",
      phoneNumber: "135****3456",
      duration: "4分10秒",
      time: "2024-03-17 16:45",
      status: "已添加",
      question: "你们有什么优惠政策？",
    },
    {
      id: "call-5",
      phoneNumber: "136****7890",
      duration: "1分30秒",
      time: "2024-03-17 10:20",
      status: "未添加",
      question: "未识别到有效问题",
    },
  ])

const [isSettingsOpen, setIsSettingsOpen] = useState(false)
  const [autoAddEnabled, setAutoAddEnabled] = useState(true)
  const [speechToTextEnabled, setSpeechToTextEnabled] = useState(true)
  const [questionExtractionEnabled, setQuestionExtractionEnabled] = useState(true)
  const [isCallDetailOpen, setIsCallDetailOpen] = useState(false)
  const [selectedCall, setSelectedCall] = useState<CallRecord | null>(null)

const handleEditPlan = (taskId: string) => {
    router.push(`/scenarios/phone/edit/${taskId}`)
  }

const handleViewCallDetail = (call: CallRecord) => {
    setSelectedCall(call)
    setIsCallDetailOpen(true)
  }

// 计算通过率
  const calculatePassRate = (acquired: number, added: number) => {
    if (acquired === 0) return 0
    return Math.round((added / acquired) * 100)
  }

return (
    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
        <div className="flex items-center p-4">
          <div className="flex items-center space-x-3">
            <Button variant="ghost" size="icon" onClick={() => router.back()}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="text-xl font-semibold text-blue-600">电话获客</h1>
          </div>
          <Button variant="ghost" size="icon" className="ml-auto" onClick={() => setIsSettingsOpen(true)}>
            <Settings className="h-5 w-5" />
          </Button>
        </div>
      </header>

<div className="p-4 max-w-7xl mx-auto">
        {tasks.map((task) => {
          const { calls: callCount, acquired: acquiredCount, added: addedCount } = task.stats
          const passRate = calculatePassRate(acquiredCount, addedCount)

return (
            <Card key={task.id} className="p-6 hover:shadow-lg transition-all mb-4 bg-white/80 backdrop-blur-sm">
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center space-x-3">
                  <h3 className="font-medium text-lg">{task.name}</h3>
                  <Badge
                    variant={task.status === "running" ? "success" : "secondary"}
                    className="cursor-pointer hover:opacity-80"
                    onClick={() => toggleTaskStatus(task.id)}
                  >
                    {task.status === "running" ? "进行中" : "已暂停"}
                  </Badge>
                </div>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-gray-100 rounded-full z-10">
                      <MoreVertical className="h-4 w-4" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-48 z-50">
                    <DropdownMenuItem
                      onClick={(e) => {
                        e.stopPropagation()
                        handleEditPlan(task.id)
                      }}
                      className="cursor-pointer hover:bg-blue-50"
                    >
                      <Pencil className="w-4 h-4 mr-2" />
                      编辑计划
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      onClick={(e) => {
                        e.stopPropagation()
                        handleCopyPlan(task.id)
                      }}
                      className="cursor-pointer hover:bg-blue-50"
                    >
                      <Copy className="w-4 h-4 mr-2" />
                      复制计划
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      onClick={(e) => {
                        e.stopPropagation()
                        handleDeletePlan(task.id)
                      }}
                      className="text-red-600 cursor-pointer hover:bg-red-50"
                    >
                      <Trash2 className="w-4 h-4 mr-2" />
                      删除计划
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </div>

<div className="grid grid-cols-4 gap-2 mb-4">
                <Card className="p-2">
                  <div className="text-sm text-gray-500 mb-1">来电数</div>
                  <div className="text-2xl font-semibold">{callCount}</div>
                </Card>

<Card className="p-2">
                  <div className="text-sm text-gray-500 mb-1">已获客</div>
                  <div className="text-2xl font-semibold">{acquiredCount}</div>
                </Card>

<Card className="p-2">
                  <div className="text-sm text-gray-500 mb-1">已添加</div>
                  <div className="text-2xl font-semibold">{addedCount}</div>
                </Card>

<TabsContent value="all">
                    <div className="rounded-lg border overflow-hidden">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>电话号码</TableHead>
                            <TableHead>通话时长</TableHead>
                            <TableHead>来电时间</TableHead>
                            <TableHead>状态</TableHead>
                            <TableHead>首句问题</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {callRecords.map((record) => (
                            <TableRow
                              key={record.id}
                              className="cursor-pointer hover:bg-gray-50"
                              onClick={() => handleViewCallDetail(record)}
                            >
                              <TableCell className="font-medium">{record.phoneNumber}</TableCell>
                              <TableCell>{record.duration}</TableCell>
                              <TableCell>{record.time}</TableCell>
                              <TableCell>
                                <Badge
                                  variant={
                                    record.status === "已添加"
                                      ? "success"
                                      : record.status === "处理中"
                                        ? "outline"
                                        : "secondary"
                                  }
                                >
                                  {record.status}
                                </Badge>
                              </TableCell>
                              <TableCell className="max-w-[200px] truncate">
                                {record.question || "未识别到问题"}
                              </TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </div>
                  </TabsContent>

<TabsContent value="added">
                    <div className="rounded-lg border overflow-hidden">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>电话号码</TableHead>
                            <TableHead>通话时长</TableHead>
                            <TableHead>来电时间</TableHead>
                            <TableHead>状态</TableHead>
                            <TableHead>首句问题</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {callRecords
                            .filter((record) => record.status === "已添加")
                            .map((record) => (
                              <TableRow
                                key={record.id}
                                className="cursor-pointer hover:bg-gray-50"
                                onClick={() => handleViewCallDetail(record)}
                              >
                                <TableCell className="font-medium">{record.phoneNumber}</TableCell>
                                <TableCell>{record.duration}</TableCell>
                                <TableCell>{record.time}</TableCell>
                                <TableCell>
                                  <Badge variant="success">{record.status}</Badge>
                                </TableCell>
                                <TableCell className="max-w-[200px] truncate">
                                  {record.question || "未识别到问题"}
                                </TableCell>
                              </TableRow>
                            ))}
                        </TableBody>
                      </Table>
                    </div>
                  </TabsContent>

<TabsContent value="pending">
                    <div className="rounded-lg border overflow-hidden">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>电话号码</TableHead>
                            <TableHead>通话时长</TableHead>
                            <TableHead>来电时间</TableHead>
                            <TableHead>状态</TableHead>
                            <TableHead>首句问题</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {callRecords
                            .filter((record) => record.status !== "已添加")
                            .map((record) => (
                              <TableRow
                                key={record.id}
                                className="cursor-pointer hover:bg-gray-50"
                                onClick={() => handleViewCallDetail(record)}
                              >
                                <TableCell className="font-medium">{record.phoneNumber}</TableCell>
                                <TableCell>{record.duration}</TableCell>
                                <TableCell>{record.time}</TableCell>
                                <TableCell>
                                  <Badge variant={record.status === "处理中" ? "outline" : "secondary"}>
                                    {record.status}
                                  </Badge>
                                </TableCell>
                                <TableCell className="max-w-[200px] truncate">
                                  {record.question || "未识别到问题"}
                                </TableCell>
                              </TableRow>
                            ))}
                        </TableBody>
                      </Table>
                    </div>
                  </TabsContent>
                </Tabs>
              </div>
            </Card>
          )
        })}
      </div>

{/* 设置对话框 */}
      <Dialog open={isSettingsOpen} onOpenChange={setIsSettingsOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>电话获客设置</DialogTitle>
          </DialogHeader>
          <div className="py-4 space-y-4">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="auto-add">自动添加客户</Label>
                <p className="text-sm text-gray-500">来电后自动将客户添加为微信好友</p>
              </div>
              <Switch id="auto-add" checked={autoAddEnabled} onCheckedChange={setAutoAddEnabled} />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="speech-to-text">语音转文字</Label>
                <p className="text-sm text-gray-500">自动将通话内容转换为文字记录</p>
              </div>
              <Switch id="speech-to-text" checked={speechToTextEnabled} onCheckedChange={setSpeechToTextEnabled} />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="question-extraction">问题提取</Label>
                <p className="text-sm text-gray-500">自动从通话中提取客户的首句问题</p>
              </div>
              <Switch
                id="question-extraction"
                checked={questionExtractionEnabled}
                onCheckedChange={setQuestionExtractionEnabled}
              />
            </div>
          </div>
          <DialogFooter>
            <Button onClick={() => setIsSettingsOpen(false)}>保存设置</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* 通话详情对话框 */}
      <Dialog open={isCallDetailOpen} onOpenChange={setIsCallDetailOpen}>
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>通话详情</DialogTitle>
          </DialogHeader>
          {selectedCall && (
            <div className="py-4 space-y-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  <Phone className="h-5 w-5 text-blue-500" />
                  <span className="font-medium">{selectedCall.phoneNumber}</span>
                </div>
                <Badge
                  variant={
                    selectedCall.status === "已添加"
                      ? "success"
                      : selectedCall.status === "处理中"
                        ? "outline"
                        : "secondary"
                  }
                >
                  {selectedCall.status}
                </Badge>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-1">
                  <p className="text-sm text-gray-500">通话时长</p>
                  <p className="font-medium flex items-center">
                    <Clock className="h-4 w-4 mr-1 text-gray-400" />
                    {selectedCall.duration}
                  </p>
                </div>
                <div className="space-y-1">
                  <p className="text-sm text-gray-500">来电时间</p>
                  <p className="font-medium">{selectedCall.time}</p>
                </div>
              </div>

<div className="space-y-2">
                <p className="text-sm text-gray-500">首句问题</p>
                <div className="p-3 bg-gray-50 rounded-lg">
                  <p className="font-medium">{selectedCall.question || "未识别到问题"}</p>
                </div>
              </div>

<div className="space-y-2">
                <div className="flex items-center justify-between">
                  <p className="text-sm text-gray-500">通话记录</p>
                  <Badge variant="outline" className="flex items-center">
                    <Mic className="h-3 w-3 mr-1" />
                    AI转写
                  </Badge>
                </div>
                <div className="p-3 bg-gray-50 rounded-lg max-h-[200px] overflow-y-auto">
                  <p className="text-sm">
                    <span className="font-medium text-blue-600">客服：</span>{" "}
                    您好，这里是XX公司客服，请问有什么可以帮到您？
                  </p>
                  <p className="text-sm mt-2">
                    <span className="font-medium text-green-600">客户：</span> {selectedCall.question || "..."}
                  </p>
                  <p className="text-sm mt-2">
                    <span className="font-medium text-blue-600">客服：</span>{" "}
                    好的，关于这个问题，我们的产品确实有这方面的优势...
                  </p>
                  <p className="text-sm mt-2">
                    <span className="font-medium text-green-600">客户：</span> 那你们的价格是怎么样的？
                  </p>
                  <p className="text-sm mt-2">
                    <span className="font-medium text-blue-600">客服：</span> 我们有多种套餐可以选择，基础版每月只需...
                  </p>
                </div>
              </div>

{selectedCall.status !== "已添加" && (
                <Button
                  className="w-full"
                  onClick={() => {
                    setCallRecords(
                      callRecords.map((record) =>
                        record.id === selectedCall.id ? { ...record, status: "已添加" } : record,
                      ),
                    )
                    toast({
                      title: "添加成功",
                      description: `已成功将 ${selectedCall.phoneNumber} 添加为好友`,
                    })
                    setIsCallDetailOpen(false)
                  }}
                >
                  手动添加为好友
                </Button>
              )}
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/scenarios/phone/edit/[id]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { ChevronLeft, Phone, MessageSquare, Settings, Users } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useRouter } from "next/navigation"
import { toast } from "@/components/ui/use-toast"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function EditPhoneAcquisitionPlan({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [loading, setLoading] = useState(true)
  const [formData, setFormData] = useState({
    planName: "",
    phoneNumbers: ["400-123-4567"],
    autoAddEnabled: true,
    speechToTextEnabled: true,
    questionExtractionEnabled: true,
    greetingMessage: "",
    followUpMessages: [],
    addToGroups: [],
    tags: [],
  })

useEffect(() => {
    // 模拟从API获取计划数据
    const fetchPlanData = async () => {
      try {
        // 这里应该是实际的API调用
        const mockData = {
          planName: "招商电话获客",
          phoneNumbers: ["400-123-4567"],
          autoAddEnabled: true,
          speechToTextEnabled: true,
          questionExtractionEnabled: true,
          greetingMessage: "您好，感谢您的来电咨询，我稍后会添加您为好友，为您提供更详细的资料。",
          followUpMessages: [
            "您好，我是XX公司的客服，刚才接到您的电话，现在方便聊一下吗？",
            "关于您刚才咨询的问题，我这边整理了一些资料，希望对您有所帮助。",
          ],
          addToGroups: ["产品咨询群", "招商合作群"],
          tags: ["电话咨询", "招商意向"],
        }
        setFormData(mockData)
        setLoading(false)
      } catch (error) {
        toast({
          title: "加载失败",
          description: "获取计划数据失败，请重试",
          variant: "destructive",
        })
        setLoading(false)
      }
    }

fetchPlanData()
  }, [])

const handleSave = async () => {
    try {
      // 这里应该是实际的API调用
      await new Promise((resolve) => setTimeout(resolve, 1000))

toast({
        title: "保存成功",
        description: "电话获客计划已更新",
      })
      router.push(`/scenarios/phone`)
    } catch (error) {
      toast({
        title: "保存失败",
        description: "更新计划失败，请重试",
        variant: "destructive",
      })
    }
  }

const handleAddPhoneNumber = () => {
    setFormData({
      ...formData,
      phoneNumbers: [...formData.phoneNumbers, ""],
    })
  }

const handlePhoneNumberChange = (index: number, value: string) => {
    const updatedPhoneNumbers = [...formData.phoneNumbers]
    updatedPhoneNumbers[index] = value
    setFormData({
      ...formData,
      phoneNumbers: updatedPhoneNumbers,
    })
  }

const handleRemovePhoneNumber = (index: number) => {
    const updatedPhoneNumbers = [...formData.phoneNumbers]
    updatedPhoneNumbers.splice(index, 1)
    setFormData({
      ...formData,
      phoneNumbers: updatedPhoneNumbers,
    })
  }

const handleAddFollowUpMessage = () => {
    setFormData({
      ...formData,
      followUpMessages: [...formData.followUpMessages, ""],
    })
  }

const handleFollowUpMessageChange = (index: number, value: string) => {
    const updatedMessages = [...formData.followUpMessages]
    updatedMessages[index] = value
    setFormData({
      ...formData,
      followUpMessages: updatedMessages,
    })
  }

const handleRemoveFollowUpMessage = (index: number) => {
    const updatedMessages = [...formData.followUpMessages]
    updatedMessages.splice(index, 1)
    setFormData({
      ...formData,
      followUpMessages: updatedMessages,
    })
  }

<TabsContent value="basic" className="space-y-4">
              <Card className="p-4">
                <div className="space-y-4">
                  <div>
                    <Label htmlFor="planName">计划名称</Label>
                    <Input
                      id="planName"
                      value={formData.planName}
                      onChange={(e) => setFormData({ ...formData, planName: e.target.value })}
                      className="mt-1"
                    />
                  </div>

<div>
                    <Label>接听电话</Label>
                    <div className="space-y-2 mt-1">
                      {formData.phoneNumbers.map((phone, index) => (
                        <div key={index} className="flex items-center space-x-2">
                          <Input
                            value={phone}
                            onChange={(e) => handlePhoneNumberChange(index, e.target.value)}
                            placeholder="输入电话号码"
                          />
                          {formData.phoneNumbers.length > 1 && (
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleRemovePhoneNumber(index)}
                              className="text-red-500 hover:text-red-700"
                            >
                              删除
                            </Button>
                          )}
                        </div>
                      ))}
                      <Button variant="outline" size="sm" onClick={handleAddPhoneNumber}>
                        添加电话号码
                      </Button>
                    </div>
                  </div>

<div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label htmlFor="auto-add">自动添加客户</Label>
                        <p className="text-xs text-gray-500">来电后自动将客户添加为微信好友</p>
                      </div>
                      <Switch
                        id="auto-add"
                        checked={formData.autoAddEnabled}
                        onCheckedChange={(checked) => setFormData({ ...formData, autoAddEnabled: checked })}
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label htmlFor="speech-to-text">语音转文字</Label>
                        <p className="text-xs text-gray-500">自动将通话内容转换为文字记录</p>
                      </div>
                      <Switch
                        id="speech-to-text"
                        checked={formData.speechToTextEnabled}
                        onCheckedChange={(checked) => setFormData({ ...formData, speechToTextEnabled: checked })}
                      />
                    </div>

<div className="flex items-center justify-between">
                      <div className="space-y-0.5">
                        <Label htmlFor="question-extraction">问题提取</Label>
                        <p className="text-xs text-gray-500">自动从通话中提取客户的首句问题</p>
                      </div>
                      <Switch
                        id="question-extraction"
                        checked={formData.questionExtractionEnabled}
                        onCheckedChange={(checked) => setFormData({ ...formData, questionExtractionEnabled: checked })}
                      />
                    </div>
                  </div>
                </div>
              </Card>
            </TabsContent>

<TabsContent value="message" className="space-y-4">
              <Card className="p-4">
                <div className="space-y-4">
                  <div>
                    <Label htmlFor="greeting">添加好友后的问候语</Label>
                    <Textarea
                      id="greeting"
                      value={formData.greetingMessage}
                      onChange={(e) => setFormData({ ...formData, greetingMessage: e.target.value })}
                      placeholder="输入添加好友后的问候语"
                      className="mt-1 min-h-[100px]"
                    />
                  </div>

<div>
                    <Label>后续跟进消息</Label>
                    <div className="space-y-2 mt-1">
                      {formData.followUpMessages.map((message, index) => (
                        <div key={index} className="space-y-1">
                          <div className="flex items-center justify-between">
                            <Label className="text-sm">消息 {index + 1}</Label>
                            <Button
                              variant="ghost"
                              size="sm"
                              onClick={() => handleRemoveFollowUpMessage(index)}
                              className="text-red-500 hover:text-red-700"
                            >
                              删除
                            </Button>
                          </div>
                          <Textarea
                            value={message}
                            onChange={(e) => handleFollowUpMessageChange(index, e.target.value)}
                            placeholder="输入跟进消息内容"
                            className="min-h-[80px]"
                          />
                        </div>
                      ))}
                      <Button variant="outline" size="sm" onClick={handleAddFollowUpMessage}>
                        添加跟进消息
                      </Button>
                    </div>
                  </div>
                </div>
              </Card>
            </TabsContent>

<TabsContent value="advanced" className="space-y-4">
              <Card className="p-4">
                <div className="space-y-4">
                  <div>
                    <Label>添加到群组</Label>
                    <Select
                      value={formData.addToGroups.length > 0 ? "selected" : "none"}
                      onValueChange={(value) => {
                        if (value === "none") {
                          setFormData({ ...formData, addToGroups: [] })
                        }
                      }}
                    >
                      <SelectTrigger className="mt-1">
                        <SelectValue placeholder="选择群组" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="none">不添加到群组</SelectItem>
                        <SelectItem value="selected">已选择 {formData.addToGroups.length} 个群组</SelectItem>
                      </SelectContent>
                    </Select>
                    {formData.addToGroups.length > 0 && (
                      <div className="mt-2 flex flex-wrap gap-2">
                        {formData.addToGroups.map((group, index) => (
                          <div
                            key={index}
                            className="flex items-center bg-blue-50 text-blue-700 rounded-full px-3 py-1"
                          >
                            <Users className="h-3 w-3 mr-1" />
                            <span className="text-sm">{group}</span>
                            <Button
                              variant="ghost"
                              size="sm"
                              className="ml-1 p-0 h-4 w-4 rounded-full"
                              onClick={() => {
                                const updatedGroups = [...formData.addToGroups]
                                updatedGroups.splice(index, 1)
                                setFormData({ ...formData, addToGroups: updatedGroups })
                              }}
                            >
                              ×
                            </Button>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>

<div>
                    <Label>标签设置</Label>
                    <div className="mt-2 flex flex-wrap gap-2">
                      {formData.tags.map((tag, index) => (
                        <div key={index} className="flex items-center bg-gray-100 rounded-full px-3 py-1">
                          <span className="text-sm">{tag}</span>
                          <Button
                            variant="ghost"
                            size="sm"
                            className="ml-1 p-0 h-4 w-4 rounded-full"
                            onClick={() => {
                              const updatedTags = [...formData.tags]
                              updatedTags.splice(index, 1)
                              setFormData({ ...formData, tags: updatedTags })
                            }}
                          >
                            ×
                          </Button>
                        </div>
                      ))}
                      <Input
                        placeholder="添加标签"
                        className="w-32"
                        onKeyDown={(e) => {
                          if (e.key === "Enter" && e.currentTarget.value) {
                            e.preventDefault()
                            setFormData({
                              ...formData,
                              tags: [...formData.tags, e.currentTarget.value],
                            })
                            e.currentTarget.value = ""
                          }
                        }}
                      />
                    </div>
                  </div>
                </div>
              </Card>
            </TabsContent>
          </Tabs>
        </div>

<div className="sticky bottom-0 left-0 right-0 bg-white border-t p-4">
          <Button className="w-full" onClick={handleSave}>
            保存
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/SpeechToTextProcessor.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { toast } from "@/components/ui/use-toast"

interface SpeechToTextProcessorProps {
  audioUrl: string
  onTranscriptReady: (transcript: string) => void
  onQuestionExtracted: (question: string) => void
  enabled: boolean
}

export function SpeechToTextProcessor({
  audioUrl,
  onTranscriptReady,
  onQuestionExtracted,
  enabled = true,
}: SpeechToTextProcessorProps) {
  const [isProcessing, setIsProcessing] = useState(false)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    if (!enabled || !audioUrl) return

const processAudio = async () => {
      try {
        setIsProcessing(true)
        setError(null)

// 模拟API调用延迟
        await new Promise((resolve) => setTimeout(resolve, 2000))

// 模拟转录结果
        const mockTranscript = `
客服: 您好，这里是XX公司客服，请问有什么可以帮到您？
客户: 请问贵公司的产品有什么特点？
客服: 我们的产品主要有以下几个特点：首先，质量非常可靠；其次，价格比较有竞争力；第三，售后服务非常完善。
客户: 那你们的价格是怎么样的？
客服: 我们有多种套餐可以选择，基础版每月只需99元，高级版每月299元，具体可以根据您的需求来选择。
客户: 好的，我了解了，谢谢。
客服: 不客气，如果您有兴趣，我可以添加您的微信，给您发送更详细的产品资料。
客户: 可以的，谢谢。
客服: 好的，稍后我会添加您为好友，再次感谢您的咨询。
`
        onTranscriptReady(mockTranscript)

// 提取首句问题
        const questionMatch = mockTranscript.match(/客户: (.*?)\n/)
        if (questionMatch && questionMatch[1]) {
          onQuestionExtracted(questionMatch[1])
        } else {
          onQuestionExtracted("未识别到有效问题")
        }

setIsProcessing(false)
      } catch (err) {
        setError("处理音频时出错")
        setIsProcessing(false)
        toast({
          title: "处理失败",
          description: "语音转文字处理失败，请重试",
          variant: "destructive",
        })
      }
    }

processAudio()
  }, [audioUrl, enabled, onTranscriptReady, onQuestionExtracted])

return null // 这是一个功能性组件，不渲染任何UI
}
[V0_FILE]typescriptreact:file="app/workspace/pricing/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ChevronLeft, Edit, Trash2, Plus } from "lucide-react"
import { useRouter } from "next/navigation"

// 模拟定价数据
const mockPricingData = [
  {
    id: "1",
    name: "普通流量包",
    price: 0.5,
    tags: ["新用户", "低活跃度"],
    region: "全国",
  },
  {
    id: "2",
    name: "高质量流量",
    price: 2.5,
    tags: ["高消费", "高活跃度"],
    region: "一线城市",
  },
  {
    id: "3",
    name: "精准营销流量",
    price: 3.8,
    tags: ["潜在客户", "有购买意向"],
    region: "华东地区",
  },
  {
    id: "4",
    name: "节日促销流量",
    price: 1.5,
    tags: ["节日消费", "促销敏感"],
    region: "全国",
  },
]

export default function PricingPage() {
  const router = useRouter()
  const [pricingItems, setPricingItems] = useState(mockPricingData)

const handleDelete = (id: string) => {
    setPricingItems(pricingItems.filter((item) => item.id !== id))
  }

return (
    <div className="flex flex-col min-h-screen bg-gray-50">
      {/* 顶部栏 */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <Button variant="ghost" size="icon" onClick={() => router.push("/workspace")} className="mr-2">
            <ChevronLeft className="h-5 w-5" />
          </Button>

<Button className="flex items-center gap-1" onClick={() => router.push("/workspace/pricing/new")}>
            <Plus className="h-4 w-4" />
            <span>新建分发</span>
          </Button>
        </div>
      </header>

{/* 主内容区 */}
      <main className="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div className="grid grid-cols-1 gap-4">
          {pricingItems.length === 0 ? (
            <div className="text-center py-12">
              <p className="text-gray-500">暂无分发规则，请点击右上角新建分发</p>
            </div>
          ) : (
            pricingItems.map((item) => (
              <Card key={item.id} className="p-4 hover:shadow-md transition-shadow">
                <div className="flex justify-between items-start">
                  <div className="space-y-2">
                    <h3 className="font-medium text-lg">{item.name}</h3>
                    <div className="flex items-baseline gap-1">
                      <span className="text-2xl font-bold text-emerald-600">¥{item.price.toFixed(2)}</span>
                      <span className="text-gray-500 text-sm">/ 人次</span>
                    </div>
                    <div className="flex flex-wrap gap-2 items-center mt-2">
                      {item.tags.map((tag, index) => (
                        <Badge key={index} variant="outline" className="bg-blue-50">
                          {tag}
                        </Badge>
                      ))}
                      <Badge variant="outline" className="bg-amber-50">
                        {item.region}
                      </Badge>
                    </div>
                  </div>
                  <div className="flex gap-2">
                    <Button
                      variant="ghost"
                      size="icon"
                      onClick={() => router.push(`/workspace/pricing/edit/${item.id}`)}
                    >
                      <Edit className="h-4 w-4 text-gray-500" />
                    </Button>
                    <Button variant="ghost" size="icon" onClick={() => handleDelete(item.id)}>
                      <Trash2 className="h-4 w-4 text-gray-500" />
                    </Button>
                  </div>
                </div>
              </Card>
            ))
          )}
        </div>
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/pricing/new/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { ChevronLeft } from "lucide-react"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Check, ChevronsUpDown } from "lucide-react"
import { cn } from "@/app/lib/utils"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Switch } from "@/components/ui/switch"
import { Card } from "@/components/ui/card"

// 模拟标签数据
const tagOptions = [
  { value: "new_user", label: "新用户" },
  { value: "low_activity", label: "低活跃度" },
  { value: "high_spending", label: "高消费" },
  { value: "high_activity", label: "高活跃度" },
  { value: "potential", label: "潜在客户" },
  { value: "purchase_intent", label: "有购买意向" },
  { value: "holiday_consumer", label: "节日消费" },
  { value: "promotion_sensitive", label: "促销敏感" },
  { value: "tech_savvy", label: "科技爱好者" },
  { value: "luxury_buyer", label: "奢侈品买家" },
  { value: "price_sensitive", label: "价格敏感" },
  { value: "brand_loyal", label: "品牌忠诚" },
]

// 模拟区域数据
const regionOptions = [
  { value: "nationwide", label: "全国" },
  { value: "beijing", label: "北京" },
  { value: "shanghai", label: "上海" },
  { value: "guangzhou", label: "广州" },
  { value: "shenzhen", label: "深圳" },
  { value: "hangzhou", label: "杭州" },
  { value: "chengdu", label: "成都" },
  { value: "wuhan", label: "武汉" },
  { value: "east_china", label: "华东地区" },
  { value: "south_china", label: "华南地区" },
  { value: "north_china", label: "华北地区" },
  { value: "central_china", label: "华中地区" },
  { value: "tier_1", label: "一线城市" },
  { value: "tier_2", label: "二线城市" },
  { value: "tier_3", label: "三线城市" },
]

// 模拟设备数据
const deviceOptions = [
  { id: "1", name: "设备 A-001", status: "online" },
  { id: "2", name: "设备 B-002", status: "online" },
  { id: "3", name: "设备 C-003", status: "offline" },
  { id: "4", name: "设备 D-004", status: "online" },
  { id: "5", name: "设备 E-005", status: "online" },
]

type RuleType = "trafficPackage" | "distributionRule"

export default function NewDistributionPage() {
  const router = useRouter()
  const [currentStep, setCurrentStep] = useState(1)
  const [ruleType, setRuleType] = useState<RuleType>("trafficPackage")
  const [name, setName] = useState("")
  const [selectedTags, setSelectedTags] = useState<string[]>([])
  const [selectedRegions, setSelectedRegions] = useState<string[]>([])
  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
  const [selectAllDevices, setSelectAllDevices] = useState(false)
  const [deviceAddQuantity, setDeviceAddQuantity] = useState("10")
  const [price, setPrice] = useState("")
  const [tagsOpen, setTagsOpen] = useState(false)
  const [regionsOpen, setRegionsOpen] = useState(false)
  const [devicesOpen, setDevicesOpen] = useState(false)
  const [autoAdd, setAutoAdd] = useState(false)

// 当选择"全部设备"时，自动选中所有设备
  const handleSelectAllDevices = (value: boolean) => {
    setSelectAllDevices(value)
    if (value) {
      setSelectedDevices(deviceOptions.map((device) => device.id))
    } else {
      setSelectedDevices([])
    }
  }

const handleNext = () => {
    if (name.trim()) {
      setCurrentStep(2)
    } else {
      alert("请填写名称")
    }
  }

const handlePrevious = () => {
    setCurrentStep(1)
  }

const handleSubmit = () => {
    // 在实际应用中，这里会发送API请求保存数据
    console.log({
      ruleType,
      name,
      tags: selectedTags,
      regions: selectedRegions,
      devices: selectAllDevices ? "all" : selectedDevices,
      deviceAddQuantity: Number.parseInt(deviceAddQuantity),
      price: Number.parseFloat(price),
      autoAdd,
    })

// 返回到列表页
    router.push("/workspace/pricing")
  }

return (
    <div className="flex flex-col min-h-screen bg-gray-50">
      {/* 顶部栏 */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <Button variant="ghost" size="icon" onClick={() => router.push("/workspace/pricing")} className="mr-2">
            <ChevronLeft className="h-5 w-5" />
          </Button>
          <h1 className="text-lg font-medium">新建分发</h1>
          <div className="w-10"></div> {/* 占位，保持标题居中 */}
        </div>
      </header>

{/* 进度条 */}
      <div className="bg-white border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center">
            <div className="flex-1">
              <div className="flex items-center">
                <div
                  className={`rounded-full h-8 w-8 flex items-center justify-center ${
                    currentStep >= 1 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
                  }`}
                >
                  1
                </div>
                <div className={`h-1 flex-1 mx-2 ${currentStep >= 2 ? "bg-blue-600" : "bg-gray-200"}`}></div>
                <div
                  className={`rounded-full h-8 w-8 flex items-center justify-center ${
                    currentStep >= 2 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
                  }`}
                >
                  2
                </div>
              </div>
            </div>
          </div>
          <div className="flex mt-2">
            <div className="flex-1 text-center text-sm font-medium">选择规则类型</div>
            <div className="flex-1 text-center text-sm font-medium">设置规则</div>
          </div>
        </div>
      </div>

{/* 主内容区 */}
      <main className="flex-1 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {currentStep === 1 ? (
          <div className="space-y-6">
            <div className="space-y-4">
              <h2 className="text-lg font-medium">选择规则类型</h2>

<RadioGroup
                value={ruleType}
                onValueChange={(value) => setRuleType(value as RuleType)}
                className="grid grid-cols-1 md:grid-cols-2 gap-4"
              >
                <Card
                  className={`p-4 cursor-pointer border-2 ${ruleType === "trafficPackage" ? "border-blue-500" : "border-transparent"}`}
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="trafficPackage" id="trafficPackage" />
                    <Label htmlFor="trafficPackage" className="cursor-pointer flex-1">
                      创建流量包
                    </Label>
                  </div>
                  <p className="mt-2 text-sm text-gray-500 pl-6">按照用户标签和地区创建流量包</p>
                </Card>
                <Card
                  className={`p-4 cursor-pointer border-2 ${ruleType === "distributionRule" ? "border-blue-500" : "border-transparent"}`}
                >
                  <div className="flex items-center space-x-2">
                    <RadioGroupItem value="distributionRule" id="distributionRule" />
                    <Label htmlFor="distributionRule" className="cursor-pointer flex-1">
                      创建分发规则
                    </Label>
                  </div>
                  <p className="mt-2 text-sm text-gray-500 pl-6">创建流量自动分发规则</p>
                </Card>
              </RadioGroup>
            </div>

<div className="space-y-2">
              <Label htmlFor="name">{ruleType === "trafficPackage" ? "流量包名称" : "分发规则名称"}</Label>
              <Input
                id="name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder={ruleType === "trafficPackage" ? "请输入流量包名称" : "请输入分发规则名称"}
                required
              />
            </div>

{/* 用户标签选择 */}
              <div className="space-y-2 mb-6">
                <Label>用户标签</Label>
                <Popover open={tagsOpen} onOpenChange={setTagsOpen}>
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      role="combobox"
                      aria-expanded={tagsOpen}
                      className="w-full justify-between h-auto min-h-10"
                    >
                      {selectedTags.length > 0 ? (
                        <div className="flex flex-wrap gap-1 py-1">
                          {selectedTags.map((tag) => (
                            <Badge key={tag} variant="secondary" className="mr-1">
                              {tagOptions.find((t) => t.value === tag)?.label}
                              <button
                                className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
                                onMouseDown={(e) => {
                                  e.preventDefault()
                                  e.stopPropagation()
                                  setSelectedTags(selectedTags.filter((t) => t !== tag))
                                }}
                              >
                                ✕
                              </button>
                            </Badge>
                          ))}
                        </div>
                      ) : (
                        <span className="text-muted-foreground">选择用户标签</span>
                      )}
                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-full p-0">
                    <Command>
                      <CommandInput placeholder="搜索标签..." />
                      <CommandList>
                        <CommandEmpty>未找到相关标签</CommandEmpty>
                        <CommandGroup>
                          <ScrollArea className="h-60">
                            {tagOptions.map((tag) => (
                              <CommandItem
                                key={tag.value}
                                value={tag.value}
                                onSelect={() => {
                                  setSelectedTags(
                                    selectedTags.includes(tag.value)
                                      ? selectedTags.filter((t) => t !== tag.value)
                                      : [...selectedTags, tag.value],
                                  )
                                }}
                              >
                                <Check
                                  className={cn(
                                    "mr-2 h-4 w-4",
                                    selectedTags.includes(tag.value) ? "opacity-100" : "opacity-0",
                                  )}
                                />
                                {tag.label}
                              </CommandItem>
                            ))}
                          </ScrollArea>
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
              </div>

{/* 用户区域选择 */}
              <div className="space-y-2 mb-6">
                <Label>用户区域</Label>
                <Popover open={regionsOpen} onOpenChange={setRegionsOpen}>
                  <PopoverTrigger asChild>
                    <Button
                      variant="outline"
                      role="combobox"
                      aria-expanded={regionsOpen}
                      className="w-full justify-between h-auto min-h-10"
                    >
                      {selectedRegions.length > 0 ? (
                        <div className="flex flex-wrap gap-1 py-1">
                          {selectedRegions.map((region) => (
                            <Badge key={region} variant="outline" className="mr-1 bg-amber-50">
                              {regionOptions.find((r) => r.value === region)?.label}
                              <button
                                className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
                                onMouseDown={(e) => {
                                  e.preventDefault()
                                  e.stopPropagation()
                                  setSelectedRegions(selectedRegions.filter((r) => r !== region))
                                }}
                              >
                                ✕
                              </button>
                            </Badge>
                          ))}
                        </div>
                      ) : (
                        <span className="text-muted-foreground">选择用户区域</span>
                      )}
                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-full p-0">
                    <Command>
                      <CommandInput placeholder="搜索区域..." />
                      <CommandList>
                        <CommandEmpty>未找到相关区域</CommandEmpty>
                        <CommandGroup>
                          <ScrollArea className="h-60">
                            {regionOptions.map((region) => (
                              <CommandItem
                                key={region.value}
                                value={region.value}
                                onSelect={() => {
                                  setSelectedRegions(
                                    selectedRegions.includes(region.value)
                                      ? selectedRegions.filter((r) => r !== region.value)
                                      : [...selectedRegions, region.value],
                                  )
                                }}
                              >
                                <Check
                                  className={cn(
                                    "mr-2 h-4 w-4",
                                    selectedRegions.includes(region.value) ? "opacity-100" : "opacity-0",
                                  )}
                                />
                                {region.label}
                              </CommandItem>
                            ))}
                          </ScrollArea>
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
              </div>

{/* 设备设置 */}
              <div className="space-y-4 mb-6">
                <h3 className="font-medium">设备范围设置</h3>

<div className="flex items-center space-x-2">
                  <Switch id="selectAll" checked={selectAllDevices} onCheckedChange={handleSelectAllDevices} />
                  <Label htmlFor="selectAll">选择所有设备</Label>
                </div>

{!selectAllDevices && (
                  <div className="space-y-2">
                    <Label>选择指定设备</Label>
                    <Popover open={devicesOpen} onOpenChange={setDevicesOpen}>
                      <PopoverTrigger asChild>
                        <Button
                          variant="outline"
                          role="combobox"
                          aria-expanded={devicesOpen}
                          className="w-full justify-between h-auto min-h-10"
                        >
                          {selectedDevices.length > 0 ? (
                            <div className="flex flex-wrap gap-1 py-1">
                              {selectedDevices.map((deviceId) => (
                                <Badge key={deviceId} variant="outline" className="mr-1">
                                  {deviceOptions.find((d) => d.id === deviceId)?.name}
                                  <button
                                    className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
                                    onMouseDown={(e) => {
                                      e.preventDefault()
                                      e.stopPropagation()
                                      setSelectedDevices(selectedDevices.filter((d) => d !== deviceId))
                                    }}
                                  >
                                    ✕
                                  </button>
                                </Badge>
                              ))}
                            </div>
                          ) : (
                            <span className="text-muted-foreground">选择设备</span>
                          )}
                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-full p-0">
                        <Command>
                          <CommandInput placeholder="搜索设备..." />
                          <CommandList>
                            <CommandEmpty>未找到相关设备</CommandEmpty>
                            <CommandGroup>
                              <ScrollArea className="h-60">
                                {deviceOptions.map((device) => (
                                  <CommandItem
                                    key={device.id}
                                    value={device.id}
                                    onSelect={() => {
                                      setSelectedDevices(
                                        selectedDevices.includes(device.id)
                                          ? selectedDevices.filter((d) => d !== device.id)
                                          : [...selectedDevices, device.id],
                                      )
                                    }}
                                  >
                                    <Check
                                      className={cn(
                                        "mr-2 h-4 w-4",
                                        selectedDevices.includes(device.id) ? "opacity-100" : "opacity-0",
                                      )}
                                    />
                                    {device.name}
                                    <span
                                      className={`ml-2 px-1.5 py-0.5 rounded text-xs ${
                                        device.status === "online"
                                          ? "bg-green-100 text-green-800"
                                          : "bg-gray-100 text-gray-800"
                                      }`}
                                    >
                                      {device.status === "online" ? "在线" : "离线"}
                                    </span>
                                  </CommandItem>
                                ))}
                              </ScrollArea>
                            </CommandGroup>
                          </CommandList>
                        </Command>
                      </PopoverContent>
                    </Popover>
                  </div>
                )}
              </div>

{/* 单设备添加数量 */}
              <div className="space-y-2 mb-6">
                <Label htmlFor="deviceAddQuantity">单设备添加数量</Label>
                <Input
                  id="deviceAddQuantity"
                  type="number"
                  min="1"
                  value={deviceAddQuantity}
                  onChange={(e) => setDeviceAddQuantity(e.target.value)}
                  required
                />
              </div>

{/* 价格设置 */}
              <div className="space-y-2 mb-6">
                <Label htmlFor="price">价格（元/人次）</Label>
                <div className="relative">
                  <span className="absolute left-3 top-1/2 transform -translate-y-1/2">¥</span>
                  <Input
                    id="price"
                    type="number"
                    step="0.01"
                    min="0"
                    value={price}
                    onChange={(e) => setPrice(e.target.value)}
                    placeholder="0.00"
                    className="pl-8"
                    required
                  />
                </div>
              </div>

{/* 自动添加设置 */}
              <div className="flex items-center space-x-2 mb-6">
                <Switch id="autoAdd" checked={autoAdd} onCheckedChange={setAutoAdd} />
                <Label htmlFor="autoAdd">自动添加</Label>
              </div>
            </div>

{/* 按钮组 */}
            <div className="flex justify-between pt-4">
              <Button type="button" variant="outline" onClick={handlePrevious}>
                上一步
              </Button>
              <Button type="button" onClick={handleSubmit}>
                确认
              </Button>
            </div>
          </div>
        )}
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/pricing/edit/[id]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { ChevronLeft } from "lucide-react"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Check, ChevronsUpDown } from "lucide-react"
import { cn } from "@/app/lib/utils"
import { Badge } from "@/components/ui/badge"
import { ScrollArea } from "@/components/ui/scroll-area"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Switch } from "@/components/ui/switch"
import { Card } from "@/components/ui/card"

// 模拟分发规则数据
const mockDistributionData = [
  {
    id: "1",
    ruleType: "trafficPackage",
    name: "普通流量包",
    price: 0.5,
    tags: ["new_user", "low_activity"],
    regions: ["nationwide"],
    deviceAddQuantity: 10,
    selectAllDevices: true,
    selectedDevices: [],
    autoAdd: false,
  },
  {
    id: "2",
    ruleType: "distributionRule",
    name: "高质量流量分发",
    price: 2.5,
    tags: ["high_spending", "high_activity"],
    regions: ["tier_1"],
    deviceAddQuantity: 5,
    selectAllDevices: false,
    selectedDevices: ["1", "4", "5"],
    autoAdd: true,
  },
]

type RuleType = "trafficPackage" | "distributionRule"

export default function EditDistributionPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { id } = params

const [currentStep, setCurrentStep] = useState(1)
  const [ruleType, setRuleType] = useState<RuleType>("trafficPackage")
  const [name, setName] = useState("")
  const [selectedTags, setSelectedTags] = useState<string[]>([])
  const [selectedRegions, setSelectedRegions] = useState<string[]>([])
  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
  const [selectAllDevices, setSelectAllDevices] = useState(false)
  const [deviceAddQuantity, setDeviceAddQuantity] = useState("10")
  const [price, setPrice] = useState("")
  const [tagsOpen, setTagsOpen] = useState(false)
  const [regionsOpen, setRegionsOpen] = useState(false)
  const [devicesOpen, setDevicesOpen] = useState(false)
  const [autoAdd, setAutoAdd] = useState(false)
  const [loading, setLoading] = useState(true)

useEffect(() => {
    // 在实际应用中，这里会从API获取数据
    // 这里使用模拟数据
    const distributionItem = mockDistributionData.find((item) => item.id === id)

if (distributionItem) {
      setRuleType(distributionItem.ruleType as RuleType)
      setName(distributionItem.name)
      setSelectedTags(distributionItem.tags)
      setSelectedRegions(distributionItem.regions)
      setSelectAllDevices(distributionItem.selectAllDevices)
      setSelectedDevices(distributionItem.selectedDevices)
      setDeviceAddQuantity(distributionItem.deviceAddQuantity.toString())
      setPrice(distributionItem.price.toString())
      setAutoAdd(distributionItem.autoAdd)
    } else {
      // 如果找不到数据，返回列表页
      router.push("/workspace/pricing")
    }

setLoading(false)
  }, [id, router])

const handleNext = () => {
    if (name.trim()) {
      setCurrentStep(2)
    } else {
      alert("请填写名称")
    }
  }

const handlePrevious = () => {
    setCurrentStep(1)
  }

const handleSubmit = () => {
    // 在实际应用中，这里会发送API请求更新数据
    console.log({
      id,
      ruleType,
      name,
      tags: selectedTags,
      regions: selectedRegions,
      devices: selectAllDevices ? "all" : selectedDevices,
      deviceAddQuantity: Number.parseInt(deviceAddQuantity),
      price: Number.parseFloat(price),
      autoAdd,
    })

// 返回到列表页
    router.push("/workspace/pricing")
  }

if (loading) {
    return (
      <div className="flex justify-center items-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
      </div>
    )
  }

return (
    <div className="flex flex-col min-h-screen bg-gray-50">
      {/* 顶部栏 */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <Button variant="ghost" size="icon" onClick={() => router.push("/workspace/pricing")} className="mr-2">
            <ChevronLeft className="h-5 w-5" />
          </Button>
          <h1 className="text-lg font-medium">编辑分发</h1>
          <div className="w-10"></div> {/* 占位，保持标题居中 */}
        </div>
      </header>

{/* 设备设置 */}
              <div className="space-y-4 mb-6">
                <h3 className="font-medium">设备范围设置</h3>

{/* 按钮组 */}
            <div className="flex justify-between pt-4">
              <Button type="button" variant="outline" onClick={handlePrevious}>
                上一步
              </Button>
              <Button type="button" onClick={handleSubmit}>
                确认
              </Button>
            </div>
          </div>
        )}
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true"
"use client"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import type { ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="components/dashboard/dashboard-header.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Calendar, Download, Filter } from "lucide-react"

export function DashboardHeader() {
  return (
    <div className="flex flex-col md:flex-row justify-between items-start md:items-center space-y-4 md:space-y-0">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">用户数字资产中台</h1>
        <p className="text-muted-foreground">欢迎回来，查看最新的用户资产数据和分析报告</p>
      </div>
      <div className="flex items-center space-x-2">
        <Button variant="outline" size="sm">
          <Calendar className="mr-2 h-4 w-4" />
          今日
        </Button>
        <Button variant="outline" size="sm">
          <Filter className="mr-2 h-4 w-4" />
          筛选
        </Button>
        <Button variant="outline" size="sm">
          <Download className="mr-2 h-4 w-4" />
          导出
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/user-assets-summary.tsx" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { formatNumber } from "@/lib/utils"

export function UserAssetsSummary() {
  // 这里应该从API获取实际数据
  const stats = {
    totalUsers: 125689,
    activeUsers: 78452,
    highValueUsers: 12458,
    conversionRate: 12.5,
  }

return (
    <Card className="border shadow-sm">
      <CardHeader className="pb-2">
        <CardTitle className="text-base font-medium">用户资产概览</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-1">
            <p className="text-xs text-muted-foreground">总用户数</p>
            <p className="text-2xl font-bold">{formatNumber(stats.totalUsers)}</p>
          </div>
          <div className="space-y-1">
            <p className="text-xs text-muted-foreground">活跃用户</p>
            <p className="text-2xl font-bold">{formatNumber(stats.activeUsers)}</p>
          </div>
          <div className="space-y-1">
            <p className="text-xs text-muted-foreground">高价值用户</p>
            <p className="text-2xl font-bold">{formatNumber(stats.highValueUsers)}</p>
          </div>
          <div className="space-y-1">
            <p className="text-xs text-muted-foreground">转化率</p>
            <p className="text-2xl font-bold">{stats.conversionRate}%</p>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/user-growth-chart.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts"

export function UserGrowthChart() {
  // 这里应该从API获取实际数据
  const data = [
    { date: "1月", users: 4000 },
    { date: "2月", users: 5000 },
    { date: "3月", users: 6000 },
    { date: "4月", users: 7000 },
    { date: "5月", users: 9000 },
    { date: "6月", users: 12000 },
    { date: "7月", users: 15000 },
  ]

return (
    <Card className="col-span-2">
      <CardHeader className="pb-2">
        <CardTitle className="text-base font-medium">用户增长趋势</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-[200px]">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart data={data}>
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip />
              <Line type="monotone" dataKey="users" stroke="hsl(var(--primary))" strokeWidth={2} />
            </LineChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/user-value-distribution.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts"

export function UserValueDistribution() {
  // 这里应该从API获取实际数据
  const data = [
    { name: "高价值", value: 25, color: "hsl(var(--primary))" },
    { name: "中价值", value: 45, color: "hsl(var(--secondary))" },
    { name: "低价值", value: 30, color: "hsl(var(--muted))" },
  ]

return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-base font-medium">用户价值分布</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-[200px]">
          <ResponsiveContainer width="100%" height="100%">
            <PieChart>
              <Pie data={data} cx="50%" cy="50%" innerRadius={40} outerRadius={80} paddingAngle={2} dataKey="value">
                {data.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip />
              <Legend />
            </PieChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/traffic-source-analysis.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts"

export function TrafficSourceAnalysis() {
  // 这里应该从API获取实际数据
  const data = [
    { source: "微信", value: 4000 },
    { source: "抖音", value: 3000 },
    { source: "小红书", value: 2000 },
    { source: "公众号", value: 2780 },
    { source: "官网", value: 1890 },
    { source: "其他", value: 2390 },
  ]

return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-base font-medium">流量来源分析</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="h-[200px]">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={data}>
              <XAxis dataKey="source" />
              <YAxis />
              <Tooltip />
              <Bar dataKey="value" fill="hsl(var(--primary))" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/recent-activities.tsx" isMerged="true"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { formatDate } from "@/lib/utils"
import { Activity, User, ShoppingCart, MessageSquare } from "lucide-react"

export function RecentActivities() {
  // 这里应该从API获取实际数据
  const activities = [
    {
      id: 1,
      type: "user",
      title: "新用户注册",
      description: "张三通过微信小程序注册成为新用户",
      time: new Date(2023, 6, 15, 14, 30),
    },
    {
      id: 2,
      type: "purchase",
      title: "完成购买",
      description: "李四购买了高级会员服务",
      time: new Date(2023, 6, 15, 13, 45),
    },
    {
      id: 3,
      type: "message",
      title: "客户咨询",
      description: "王五咨询了产品使用问题",
      time: new Date(2023, 6, 15, 11, 20),
    },
    {
      id: 4,
      type: "activity",
      title: "活动参与",
      description: "赵六参与了新品推广活动",
      time: new Date(2023, 6, 15, 10, 15),
    },
  ]

const getIcon = (type: string) => {
    switch (type) {
      case "user":
        return <User className="h-4 w-4" />
      case "purchase":
        return <ShoppingCart className="h-4 w-4" />
      case "message":
        return <MessageSquare className="h-4 w-4" />
      case "activity":
        return <Activity className="h-4 w-4" />
      default:
        return <Activity className="h-4 w-4" />
    }
  }

return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle className="text-base font-medium">最近活动</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {activities.map((activity) => (
            <div key={activity.id} className="flex items-start space-x-3">
              <div className="bg-primary/10 rounded-full p-2 text-primary">{getIcon(activity.type)}</div>
              <div className="space-y-1">
                <p className="text-sm font-medium">{activity.title}</p>
                <p className="text-xs text-muted-foreground">{activity.description}</p>
                <p className="text-xs text-muted-foreground">{formatDate(activity.time)}</p>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/dashboard-overview.tsx" isMerged="true"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { formatNumber, getGrowthClass } from "@/lib/utils"
import { ArrowDown, ArrowUp } from "lucide-react"

export function DashboardOverview() {
  // 这里应该从API获取实际数据
  const overviewData = {
    userAcquisition: {
      total: 12458,
      growth: 12.5,
      sources: [
        { name: "微信", value: 4523, growth: 15.2 },
        { name: "抖音", value: 3254, growth: 24.3 },
        { name: "小红书", value: 2145, growth: 8.7 },
        { name: "公众号", value: 1536, growth: -3.2 },
        { name: "官网", value: 1000, growth: 5.6 },
      ],
    },
    userRetention: {
      rate: 68.5,
      growth: 2.3,
      periods: [
        { name: "7天", value: 85.2, growth: 1.2 },
        { name: "30天", value: 68.5, growth: 2.3 },
        { name: "90天", value: 42.3, growth: 3.5 },
        { name: "180天", value: 28.7, growth: -1.2 },
        { name: "365天", value: 15.4, growth: -2.5 },
      ],
    },
    userConversion: {
      rate: 12.5,
      growth: 3.2,
      stages: [
        { name: "浏览", value: 100, growth: 0 },
        { name: "注册", value: 35.2, growth: 2.1 },
        { name: "首次购买", value: 12.5, growth: 3.2 },
        { name: "复购", value: 8.3, growth: 5.4 },
        { name: "会员", value: 4.2, growth: 1.8 },
      ],
    },
  }

return (
    <Tabs defaultValue="acquisition" className="w-full">
      <TabsList className="grid w-full grid-cols-3">
        <TabsTrigger value="acquisition">用户获取</TabsTrigger>
        <TabsTrigger value="retention">用户留存</TabsTrigger>
        <TabsTrigger value="conversion">用户转化</TabsTrigger>
      </TabsList>
      <TabsContent value="acquisition">
        <Card className="border shadow-sm">
          <CardHeader>
            <CardTitle>用户获取分析</CardTitle>
            <CardDescription>各渠道用户获取情况及增长趋势</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium">总获取用户</p>
                  <p className="text-2xl font-bold">{formatNumber(overviewData.userAcquisition.total)}</p>
                </div>
                <div className={`flex items-center ${getGrowthClass(overviewData.userAcquisition.growth)}`}>
                  {overviewData.userAcquisition.growth > 0 ? (
                    <ArrowUp className="h-4 w-4 mr-1" />
                  ) : (
                    <ArrowDown className="h-4 w-4 mr-1" />
                  )}
                  <span>{Math.abs(overviewData.userAcquisition.growth)}%</span>
                </div>
              </div>
              <div className="space-y-2">
                {overviewData.userAcquisition.sources.map((source) => (
                  <div key={source.name} className="flex items-center justify-between">
                    <div className="flex items-center">
                      <span className="text-sm">{source.name}</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="text-sm">{formatNumber(source.value)}</span>
                      <span className={`text-xs ${getGrowthClass(source.growth)}`}>
                        {source.growth > 0 ? "+" : ""}
                        {source.growth}%
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="retention">
        <Card className="border shadow-sm">
          <CardHeader>
            <CardTitle>用户留存分析</CardTitle>
            <CardDescription>不同时间段的用户留存率及变化趋势</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium">30天留存率</p>
                  <p className="text-2xl font-bold">{overviewData.userRetention.rate}%</p>
                </div>
                <div className={`flex items-center ${getGrowthClass(overviewData.userRetention.growth)}`}>
                  {overviewData.userRetention.growth > 0 ? (
                    <ArrowUp className="h-4 w-4 mr-1" />
                  ) : (
                    <ArrowDown className="h-4 w-4 mr-1" />
                  )}
                  <span>{Math.abs(overviewData.userRetention.growth)}%</span>
                </div>
              </div>
              <div className="space-y-2">
                {overviewData.userRetention.periods.map((period) => (
                  <div key={period.name} className="flex items-center justify-between">
                    <div className="flex items-center">
                      <span className="text-sm">{period.name}</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="text-sm">{period.value}%</span>
                      <span className={`text-xs ${getGrowthClass(period.growth)}`}>
                        {period.growth > 0 ? "+" : ""}
                        {period.growth}%
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="conversion">
        <Card className="border shadow-sm">
          <CardHeader>
            <CardTitle>用户转化分析</CardTitle>
            <CardDescription>用户转化漏斗各阶段转化率及变化趋势</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm font-medium">首次购买转化率</p>
                  <p className="text-2xl font-bold">{overviewData.userConversion.rate}%</p>
                </div>
                <div className={`flex items-center ${getGrowthClass(overviewData.userConversion.growth)}`}>
                  {overviewData.userConversion.growth > 0 ? (
                    <ArrowUp className="h-4 w-4 mr-1" />
                  ) : (
                    <ArrowDown className="h-4 w-4 mr-1" />
                  )}
                  <span>{Math.abs(overviewData.userConversion.growth)}%</span>
                </div>
              </div>
              <div className="space-y-2">
                {overviewData.userConversion.stages.map((stage) => (
                  <div key={stage.name} className="flex items-center justify-between">
                    <div className="flex items-center">
                      <span className="text-sm">{stage.name}</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <span className="text-sm">{stage.value}%</span>
                      <span className={`text-xs ${getGrowthClass(stage.growth)}`}>
                        {stage.growth > 0 ? "+" : ""}
                        {stage.growth}%
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  )
}
[V0_FILE]typescriptreact:file="components/user-pool/user-pool-header.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { PlusCircle, Download, Upload } from "lucide-react"

export function UserPoolHeader() {
  return (
    <div className="flex flex-col md:flex-row justify-between items-start md:items-center space-y-4 md:space-y-0">
      <div>
        <h1 className="text-2xl font-bold tracking-tight">用户池管理</h1>
        <p className="text-muted-foreground">管理和分析您的用户资产，发掘用户价值</p>
      </div>
      <div className="flex items-center space-x-2">
        <Button variant="outline" size="sm">
          <Upload className="mr-2 h-4 w-4" />
          导入
        </Button>
        <Button variant="outline" size="sm">
          <Download className="mr-2 h-4 w-4" />
          导出
        </Button>
        <Button size="sm">
          <PlusCircle className="mr-2 h-4 w-4" />
          添加用户
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user-pool/user-pool-stats.tsx" isMerged="true"
import { Card, CardContent } from "@/components/ui/card"
import { formatNumber, getGrowthClass } from "@/lib/utils"
import { ArrowDown, ArrowUp, Users, UserCheck, Star, TrendingUp } from "lucide-react"

export function UserPoolStats() {
  // 这里应该从API获取实际数据
  const stats = [
    {
      title: "总用户数",
      value: 125689,
      change: 12.5,
      icon: <Users className="h-4 w-4" />,
    },
    {
      title: "活跃用户",
      value: 78452,
      change: 8.3,
      icon: <UserCheck className="h-4 w-4" />,
    },
    {
      title: "高价值用户",
      value: 12458,
      change: 15.2,
      icon: <Star className="h-4 w-4" />,
    },
    {
      title: "转化率",
      value: 12.5,
      change: -2.3,
      icon: <TrendingUp className="h-4 w-4" />,
      isPercentage: true,
    },
  ]

return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      {stats.map((stat) => (
        <Card key={stat.title}>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div className="bg-primary/10 rounded-full p-2 text-primary">{stat.icon}</div>
              <div className={`flex items-center ${getGrowthClass(stat.change)}`}>
                {stat.change > 0 ? <ArrowUp className="h-4 w-4 mr-1" /> : <ArrowDown className="h-4 w-4 mr-1" />}
                <span>{Math.abs(stat.change)}%</span>
              </div>
            </div>
            <div className="mt-3">
              <p className="text-sm text-muted-foreground">{stat.title}</p>
              <p className="text-2xl font-bold">{stat.isPercentage ? `${stat.value}%` : formatNumber(stat.value)}</p>
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user-pool/user-pool-filters.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, Filter, X } from "lucide-react"

export function UserPoolFilters() {
  const [searchQuery, setSearchQuery] = useState("")
  const [userType, setUserType] = useState("all")
  const [userSource, setUserSource] = useState("all")
  const [userValue, setUserValue] = useState("all")
  const [showFilters, setShowFilters] = useState(false)

const clearFilters = () => {
    setSearchQuery("")
    setUserType("all")
    setUserSource("all")
    setUserValue("all")
  }

return (
    <div className="space-y-4">
      <div className="flex flex-col md:flex-row gap-4">
        <div className="flex-1 relative">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            type="text"
            placeholder="搜索用户名、手机号、标签..."
            className="pl-8"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
        <Button variant="outline" onClick={() => setShowFilters(!showFilters)}>
          <Filter className="mr-2 h-4 w-4" />
          筛选
        </Button>
        {(userType !== "all" || userSource !== "all" || userValue !== "all") && (
          <Button variant="ghost" onClick={clearFilters}>
            <X className="mr-2 h-4 w-4" />
            清除筛选
          </Button>
        )}
      </div>
      {showFilters && (
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <Select value={userType} onValueChange={setUserType}>
            <SelectTrigger>
              <SelectValue placeholder="用户类型" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部类型</SelectItem>
              <SelectItem value="new">新用户</SelectItem>
              <SelectItem value="active">活跃用户</SelectItem>
              <SelectItem value="inactive">非活跃用户</SelectItem>
              <SelectItem value="lost">流失用户</SelectItem>
            </SelectContent>
          </Select>
          <Select value={userSource} onValueChange={setUserSource}>
            <SelectTrigger>
              <SelectValue placeholder="用户来源" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部来源</SelectItem>
              <SelectItem value="wechat">微信</SelectItem>
              <SelectItem value="douyin">抖音</SelectItem>
              <SelectItem value="xiaohongshu">小红书</SelectItem>
              <SelectItem value="website">官网</SelectItem>
              <SelectItem value="other">其他</SelectItem>
            </SelectContent>
          </Select>
          <Select value={userValue} onValueChange={setUserValue}>
            <SelectTrigger>
              <SelectValue placeholder="用户价值" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部价值</SelectItem>
              <SelectItem value="high">高价值</SelectItem>
              <SelectItem value="medium">中价值</SelectItem>
              <SelectItem value="low">低价值</SelectItem>
            </SelectContent>
          </Select>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user-pool/user-pool-table.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { formatDate } from "@/lib/utils"
import { MoreHorizontal, ChevronLeft, ChevronRight } from "lucide-react"

export function UserPoolTable() {
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage] = useState(10)

// 这里应该从API获取实际数据
  const users = [
    {
      id: "1",
      name: "张三",
      phone: "13812345678",
      source: "微信",
      registerDate: new Date(2023, 5, 15),
      lastActive: new Date(2023, 6, 20),
      value: "high",
      tags: ["潜在客户", "对产品感兴趣"],
      status: "active",
    },
    {
      id: "2",
      name: "李四",
      phone: "13987654321",
      source: "抖音",
      registerDate: new Date(2023, 4, 10),
      lastActive: new Date(2023, 6, 18),
      value: "medium",
      tags: ["新用户", "已咨询"],
      status: "active",
    },
    {
      id: "3",
      name: "王五",
      phone: "13765432198",
      source: "小红书",
      registerDate: new Date(2023, 3, 5),
      lastActive: new Date(2023, 5, 25),
      value: "low",
      tags: ["已购买", "需要跟进"],
      status: "inactive",
    },
    {
      id: "4",
      name: "赵六",
      phone: "13654321987",
      source: "官网",
      registerDate: new Date(2023, 2, 20),
      lastActive: new Date(2023, 6, 19),
      value: "high",
      tags: ["VIP客户", "高频购买"],
      status: "active",
    },
    {
      id: "5",
      name: "钱七",
      phone: "13543219876",
      source: "微信",
      registerDate: new Date(2023, 1, 15),
      lastActive: new Date(2023, 4, 10),
      value: "medium",
      tags: ["已流失", "需要挽回"],
      status: "lost",
    },
  ]

const totalPages = Math.ceil(users.length / itemsPerPage)
  const startIndex = (currentPage - 1) * itemsPerPage
  const endIndex = startIndex + itemsPerPage
  const currentUsers = users.slice(startIndex, endIndex)

const getUserValueBadge = (value: string) => {
    switch (value) {
      case "high":
        return <Badge className="bg-green-500">高价值</Badge>
      case "medium":
        return <Badge className="bg-blue-500">中价值</Badge>
      case "low":
        return <Badge className="bg-gray-500">低价值</Badge>
      default:
        return <Badge>未知</Badge>
    }
  }

const getUserStatusBadge = (status: string) => {
    switch (status) {
      case "active":
        return <Badge className="bg-green-500">活跃</Badge>
      case "inactive":
        return <Badge className="bg-yellow-500">非活跃</Badge>
      case "lost":
        return <Badge className="bg-red-500">流失</Badge>
      default:
        return <Badge>未知</Badge>
    }
  }

return (
    <div className="space-y-4">
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>用户名</TableHead>
              <TableHead>手机号</TableHead>
              <TableHead>来源</TableHead>
              <TableHead>注册时间</TableHead>
              <TableHead>最后活跃</TableHead>
              <TableHead>用户价值</TableHead>
              <TableHead>状态</TableHead>
              <TableHead>标签</TableHead>
              <TableHead className="text-right">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {currentUsers.map((user) => (
              <TableRow key={user.id}>
                <TableCell className="font-medium">{user.name}</TableCell>
                <TableCell>{user.phone}</TableCell>
                <TableCell>{user.source}</TableCell>
                <TableCell>{formatDate(user.registerDate)}</TableCell>
                <TableCell>{formatDate(user.lastActive)}</TableCell>
                <TableCell>{getUserValueBadge(user.value)}</TableCell>
                <TableCell>{getUserStatusBadge(user.status)}</TableCell>
                <TableCell>
                  <div className="flex flex-wrap gap-1">
                    {user.tags.map((tag) => (
                      <Badge key={tag} variant="outline" className="text-xs">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                </TableCell>
                <TableCell className="text-right">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreHorizontal className="h-4 w-4" />
                        <span className="sr-only">打开菜单</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuLabel>操作</DropdownMenuLabel>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem>查看详情</DropdownMenuItem>
                      <DropdownMenuItem>编辑信息</DropdownMenuItem>
                      <DropdownMenuItem>添加标签</DropdownMenuItem>
                      <DropdownMenuItem>发送消息</DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem className="text-red-500">删除用户</DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
      <div className="flex items-center justify-between">
        <p className="text-sm text-muted-foreground">
          显示第 {startIndex + 1} 到 {Math.min(endIndex, users.length)} 条，共 {users.length} 条
        </p>
        <div className="flex items-center space-x-2">
          <Button
            variant="outline"
            size="icon"
            onClick={() => setCurrentPage(currentPage - 1)}
            disabled={currentPage === 1}
          >
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <Button
            variant="outline"
            size="icon"
            onClick={() => setCurrentPage(currentPage + 1)}
            disabled={currentPage === totalPages}
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/traffic-keywords/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/user-profile/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Search, Filter, Download, Users, UserPlus, UserCheck, UserX } from "lucide-react"
import { UserProfileOverview } from "@/components/user-profile/user-profile-overview"
import { UserProfileSegments } from "@/components/user-profile/user-profile-segments"
import { UserProfileTags } from "@/components/user-profile/user-profile-tags"
import { UserProfileAnalytics } from "@/components/user-profile/user-profile-analytics"

export default function UserProfilePage() {
  const [activeTab, setActiveTab] = useState("overview")
  const [searchQuery, setSearchQuery] = useState("")

return (
    <div className="container mx-auto py-6 space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold">用户画像分析</h1>
        <div className="flex space-x-2">
          <Button variant="outline">
            <Download className="mr-2 h-4 w-4" />
            导出报告
          </Button>
          <Button>
            <UserPlus className="mr-2 h-4 w-4" />
            创建画像模型
          </Button>
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">总用户数</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center">
              <Users className="h-5 w-5 text-muted-foreground mr-2" />
              <div className="text-2xl font-bold">24,521</div>
            </div>
            <p className="text-xs text-muted-foreground mt-1">较上月增长 8%</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">活跃用户</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center">
              <UserCheck className="h-5 w-5 text-green-500 mr-2" />
              <div className="text-2xl font-bold">16,842</div>
            </div>
            <p className="text-xs text-muted-foreground mt-1">活跃率 68.7%</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">新增用户</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center">
              <UserPlus className="h-5 w-5 text-blue-500 mr-2" />
              <div className="text-2xl font-bold">1,254</div>
            </div>
            <p className="text-xs text-muted-foreground mt-1">较上月增长 12%</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">流失用户</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center">
              <UserX className="h-5 w-5 text-red-500 mr-2" />
              <div className="text-2xl font-bold">342</div>
            </div>
            <p className="text-xs text-muted-foreground mt-1">流失率 1.4%</p>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader>
          <CardTitle>用户画像分析中心</CardTitle>
          <CardDescription>多维度分析用户特征，构建精准用户画像，支持营销决策</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
            <div className="flex justify-between items-center">
              <TabsList>
                <TabsTrigger value="overview">画像概览</TabsTrigger>
                <TabsTrigger value="segments">用户分群</TabsTrigger>
                <TabsTrigger value="tags">标签体系</TabsTrigger>
                <TabsTrigger value="analytics">深度分析</TabsTrigger>
              </TabsList>
              <div className="flex space-x-2">
                <div className="relative w-64">
                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    placeholder="搜索用户画像..."
                    className="pl-8"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>
                <Button variant="outline" size="icon">
                  <Filter className="h-4 w-4" />
                </Button>
              </div>
            </div>

<TabsContent value="analytics" className="space-y-4">
              <UserProfileAnalytics />
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/user-profile/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/user-profile/user-profile-overview.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { PieChart, BarChart } from "@/components/charts"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { ChevronDown, ChevronRight } from "lucide-react"
import { useState } from "react"

export function UserProfileOverview() {
  const [openSections, setOpenSections] = useState({
    gender: true,
    age: true,
    occupation: false,
    income: false,
    region: false,
    device: false,
    activity: false,
    interest: false,
  })

const toggleSection = (section) => {
    setOpenSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-semibold">用户画像概览</h2>
        <div className="flex space-x-2">
          <Select defaultValue="7days">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="选择时间范围" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="7days">最近7天</SelectItem>
              <SelectItem value="30days">最近30天</SelectItem>
              <SelectItem value="90days">最近90天</SelectItem>
              <SelectItem value="custom">自定义范围</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Collapsible open={openSections.gender} onOpenChange={() => toggleSection("gender")}>
          <Card className="border shadow-sm">
            <CardHeader className="pb-2">
              <CollapsibleTrigger className="flex justify-between items-center w-full">
                <CardTitle className="text-base font-medium">用户性别分布</CardTitle>
                {openSections.gender ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
              </CollapsibleTrigger>
            </CardHeader>
            <CollapsibleContent>
              <CardContent>
                <PieChart
                  data={{
                    labels: ["男性", "女性", "未知"],
                    datasets: [
                      {
                        data: [45, 52, 3],
                        backgroundColor: [
                          "rgba(59, 130, 246, 0.7)",
                          "rgba(236, 72, 153, 0.7)",
                          "rgba(156, 163, 175, 0.7)",
                        ],
                      },
                    ],
                  }}
                  height={250}
                />
              </CardContent>
            </CollapsibleContent>
          </Card>
        </Collapsible>

<Collapsible open={openSections.age} onOpenChange={() => toggleSection("age")}>
          <Card className="border shadow-sm">
            <CardHeader className="pb-2">
              <CollapsibleTrigger className="flex justify-between items-center w-full">
                <CardTitle className="text-base font-medium">用户年龄分布</CardTitle>
                {openSections.age ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
              </CollapsibleTrigger>
            </CardHeader>
            <CollapsibleContent>
              <CardContent>
                <BarChart
                  data={{
                    labels: ["18岁以下", "18-24岁", "25-34岁", "35-44岁", "45-54岁", "55岁以上"],
                    datasets: [
                      {
                        label: "用户数量",
                        data: [1200, 5400, 8900, 5600, 2800, 620],
                        backgroundColor: "rgba(59, 130, 246, 0.7)",
                      },
                    ],
                  }}
                  height={250}
                />
              </CardContent>
            </CollapsibleContent>
          </Card>
        </Collapsible>
      </div>

<Tabs defaultValue="demographic">
        <TabsList>
          <TabsTrigger value="demographic">人口统计</TabsTrigger>
          <TabsTrigger value="geographic">地理分布</TabsTrigger>
          <TabsTrigger value="behavior">行为特征</TabsTrigger>
          <TabsTrigger value="interest">兴趣爱好</TabsTrigger>
        </TabsList>
        <TabsContent value="demographic" className="space-y-4 pt-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Collapsible open={openSections.occupation} onOpenChange={() => toggleSection("occupation")}>
              <Card className="border shadow-sm">
                <CardHeader className="pb-2">
                  <CollapsibleTrigger className="flex justify-between items-center w-full">
                    <CardTitle className="text-base font-medium">职业分布</CardTitle>
                    {openSections.occupation ? (
                      <ChevronDown className="h-4 w-4" />
                    ) : (
                      <ChevronRight className="h-4 w-4" />
                    )}
                  </CollapsibleTrigger>
                </CardHeader>
                <CollapsibleContent>
                  <CardContent>
                    <PieChart
                      data={{
                        labels: ["学生", "企业员工", "自由职业", "企业管理者", "公务员", "其他"],
                        datasets: [
                          {
                            data: [15, 35, 20, 18, 7, 5],
                            backgroundColor: [
                              "rgba(59, 130, 246, 0.7)",
                              "rgba(16, 185, 129, 0.7)",
                              "rgba(249, 115, 22, 0.7)",
                              "rgba(139, 92, 246, 0.7)",
                              "rgba(236, 72, 153, 0.7)",
                              "rgba(156, 163, 175, 0.7)",
                            ],
                          },
                        ],
                      }}
                      height={250}
                    />
                  </CardContent>
                </CollapsibleContent>
              </Card>
            </Collapsible>

<Collapsible open={openSections.income} onOpenChange={() => toggleSection("income")}>
              <Card className="border shadow-sm">
                <CardHeader className="pb-2">
                  <CollapsibleTrigger className="flex justify-between items-center w-full">
                    <CardTitle className="text-base font-medium">收入水平</CardTitle>
                    {openSections.income ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                  </CollapsibleTrigger>
                </CardHeader>
                <CollapsibleContent>
                  <CardContent>
                    <PieChart
                      data={{
                        labels: ["5千以下", "5千-1万", "1万-2万", "2万-3万", "3万以上"],
                        datasets: [
                          {
                            data: [10, 25, 35, 20, 10],
                            backgroundColor: [
                              "rgba(59, 130, 246, 0.7)",
                              "rgba(16, 185, 129, 0.7)",
                              "rgba(249, 115, 22, 0.7)",
                              "rgba(139, 92, 246, 0.7)",
                              "rgba(236, 72, 153, 0.7)",
                            ],
                          },
                        ],
                      }}
                      height={250}
                    />
                  </CardContent>
                </CollapsibleContent>
              </Card>
            </Collapsible>
          </div>
        </TabsContent>

<TabsContent value="geographic" className="space-y-4 pt-4">
          <Collapsible open={openSections.region} onOpenChange={() => toggleSection("region")}>
            <Card className="border shadow-sm">
              <CardHeader className="pb-2">
                <CollapsibleTrigger className="flex justify-between items-center w-full">
                  <CardTitle className="text-base font-medium">地区分布</CardTitle>
                  {openSections.region ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                </CollapsibleTrigger>
              </CardHeader>
              <CollapsibleContent>
                <CardContent>
                  <BarChart
                    data={{
                      labels: ["北京", "上海", "广东", "浙江", "江苏", "四川", "湖北", "福建", "山东", "河南"],
                      datasets: [
                        {
                          label: "用户数量",
                          data: [3200, 2800, 4500, 2100, 1900, 1600, 1400, 1200, 1100, 900],
                          backgroundColor: "rgba(59, 130, 246, 0.7)",
                        },
                      ],
                    }}
                    height={300}
                  />
                </CardContent>
              </CollapsibleContent>
            </Card>
          </Collapsible>
        </TabsContent>

<TabsContent value="behavior" className="space-y-4 pt-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Collapsible open={openSections.activity} onOpenChange={() => toggleSection("activity")}>
              <Card className="border shadow-sm">
                <CardHeader className="pb-2">
                  <CollapsibleTrigger className="flex justify-between items-center w-full">
                    <CardTitle className="text-base font-medium">活跃时段</CardTitle>
                    {openSections.activity ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                  </CollapsibleTrigger>
                </CardHeader>
                <CollapsibleContent>
                  <CardContent>
                    <BarChart
                      data={{
                        labels: ["0-3点", "3-6点", "6-9点", "9-12点", "12-15点", "15-18点", "18-21点", "21-24点"],
                        datasets: [
                          {
                            label: "活跃用户数",
                            data: [800, 400, 2500, 5800, 4200, 3800, 7500, 6200],
                            backgroundColor: "rgba(59, 130, 246, 0.7)",
                          },
                        ],
                      }}
                      height={250}
                    />
                  </CardContent>
                </CollapsibleContent>
              </Card>
            </Collapsible>

<Collapsible open={openSections.device} onOpenChange={() => toggleSection("device")}>
              <Card className="border shadow-sm">
                <CardHeader className="pb-2">
                  <CollapsibleTrigger className="flex justify-between items-center w-full">
                    <CardTitle className="text-base font-medium">使用设备</CardTitle>
                    {openSections.device ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                  </CollapsibleTrigger>
                </CardHeader>
                <CollapsibleContent>
                  <CardContent>
                    <PieChart
                      data={{
                        labels: ["iOS", "Android", "Windows", "MacOS", "其他"],
                        datasets: [
                          {
                            data: [42, 45, 8, 4, 1],
                            backgroundColor: [
                              "rgba(59, 130, 246, 0.7)",
                              "rgba(16, 185, 129, 0.7)",
                              "rgba(249, 115, 22, 0.7)",
                              "rgba(139, 92, 246, 0.7)",
                              "rgba(156, 163, 175, 0.7)",
                            ],
                          },
                        ],
                      }}
                      height={250}
                    />
                  </CardContent>
                </CollapsibleContent>
              </Card>
            </Collapsible>
          </div>
        </TabsContent>

<TabsContent value="interest" className="space-y-4 pt-4">
          <Collapsible open={openSections.interest} onOpenChange={() => toggleSection("interest")}>
            <Card className="border shadow-sm">
              <CardHeader className="pb-2">
                <CollapsibleTrigger className="flex justify-between items-center w-full">
                  <CardTitle className="text-base font-medium">兴趣标签分布</CardTitle>
                  {openSections.interest ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                </CollapsibleTrigger>
              </CardHeader>
              <CollapsibleContent>
                <CardContent>
                  <BarChart
                    data={{
                      labels: ["科技", "金融", "教育", "旅游", "健康", "美食", "时尚", "体育", "娱乐", "汽车"],
                      datasets: [
                        {
                          label: "用户数量",
                          data: [6500, 4800, 3900, 5200, 4100, 6800, 3500, 2900, 5500, 3200],
                          backgroundColor: "rgba(59, 130, 246, 0.7)",
                        },
                      ],
                    }}
                    height={300}
                  />
                </CardContent>
              </CollapsibleContent>
            </Card>
          </Collapsible>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user-profile/user-profile-segments.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { PlusCircle, Search, Users, BarChart2, Edit, Trash2, ChevronDown, ChevronRight } from "lucide-react"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"

interface UserSegment {
  id: string
  name: string
  description: string
  userCount: number
  criteria: string[]
  createdAt: Date
  updatedAt: Date
  status: "active" | "draft"
}

export function UserProfileSegments() {
  const [searchQuery, setSearchQuery] = useState("")
  const [openSections, setOpenSections] = useState({
    segmentList: true,
  })

const toggleSection = (section) => {
    setOpenSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

// 模拟数据
  const segments: UserSegment[] = [
    {
      id: "1",
      name: "高价值用户",
      description: "消费金额高且频次高的用户群体",
      userCount: 2450,
      criteria: ["消费金额>5000", "消费频次>10次/月", "活跃度>80%"],
      createdAt: new Date(2023, 5, 15),
      updatedAt: new Date(2023, 6, 20),
      status: "active",
    },
    {
      id: "2",
      name: "新注册用户",
      description: "最近30天内注册的新用户",
      userCount: 1254,
      criteria: ["注册时间<30天"],
      createdAt: new Date(2023, 4, 10),
      updatedAt: new Date(2023, 6, 18),
      status: "active",
    },
    {
      id: "3",
      name: "流失风险用户",
      description: "最近活跃度下降的用户",
      userCount: 876,
      criteria: ["最近登录>15天", "活跃度下降>50%"],
      createdAt: new Date(2023, 3, 5),
      updatedAt: new Date(2023, 5, 25),
      status: "active",
    },
    {
      id: "4",
      name: "企业客户",
      description: "企业类型的客户群体",
      userCount: 542,
      criteria: ["用户类型=企业", "员工数>50人"],
      createdAt: new Date(2023, 2, 20),
      updatedAt: new Date(2023, 6, 19),
      status: "active",
    },
    {
      id: "5",
      name: "潜在高转化用户",
      description: "浏览行为活跃但未转化的用户",
      userCount: 1320,
      criteria: ["浏览次数>20次/周", "未购买"],
      createdAt: new Date(2023, 1, 15),
      updatedAt: new Date(2023, 4, 10),
      status: "draft",
    },
  ]

// 过滤分群
  const filteredSegments = segments.filter(
    (segment) =>
      segment.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      segment.description.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const formatDate = (date: Date) => {
    return date.toLocaleDateString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    })
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-semibold">用户分群管理</h2>
        <Button>
          <PlusCircle className="mr-2 h-4 w-4" />
          创建新分群
        </Button>
      </div>

<Collapsible open={openSections.segmentList} onOpenChange={() => toggleSection("segmentList")}>
        <div className="border rounded-md p-4">
          <CollapsibleTrigger className="flex justify-between items-center w-full mb-4">
            <h3 className="text-lg font-medium">分群列表</h3>
            {openSections.segmentList ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
          </CollapsibleTrigger>
          <CollapsibleContent>
            <div className="flex justify-between items-center mb-4">
              <div className="flex space-x-2">
                <Select defaultValue="all">
                  <SelectTrigger className="w-[150px]">
                    <SelectValue placeholder="状态" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部状态</SelectItem>
                    <SelectItem value="active">已激活</SelectItem>
                    <SelectItem value="draft">草稿</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="relative w-64">
                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="搜索分群..."
                  className="pl-8"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
            </div>

<div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>分群名称</TableHead>
                    <TableHead>描述</TableHead>
                    <TableHead>用户数量</TableHead>
                    <TableHead>筛选条件</TableHead>
                    <TableHead>创建时间</TableHead>
                    <TableHead>更新时间</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead className="text-right">操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredSegments.map((segment) => (
                    <TableRow key={segment.id}>
                      <TableCell className="font-medium">{segment.name}</TableCell>
                      <TableCell>{segment.description}</TableCell>
                      <TableCell>
                        <div className="flex items-center">
                          <Users className="h-4 w-4 mr-1 text-muted-foreground" />
                          {segment.userCount.toLocaleString()}
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex flex-wrap gap-1">
                          {segment.criteria.map((criterion) => (
                            <Badge key={criterion} variant="outline" className="text-xs">
                              {criterion}
                            </Badge>
                          ))}
                        </div>
                      </TableCell>
                      <TableCell>{formatDate(segment.createdAt)}</TableCell>
                      <TableCell>{formatDate(segment.updatedAt)}</TableCell>
                      <TableCell>
                        <Badge variant={segment.status === "active" ? "default" : "secondary"}>
                          {segment.status === "active" ? "已激活" : "草稿"}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end space-x-2">
                          <Button variant="ghost" size="icon">
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="icon">
                            <BarChart2 className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="icon" className="text-red-500">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CollapsibleContent>
        </div>
      </Collapsible>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/user-profile/user-profile-tags.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { PlusCircle, Search, Tag, Edit, Trash2, Users, ChevronDown, ChevronRight } from "lucide-react"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"

interface UserTag {
  id: string
  name: string
  category: string
  description: string
  userCount: number
  source: string
  createdAt: Date
  updatedAt: Date
}

export function UserProfileTags() {
  const [searchQuery, setSearchQuery] = useState("")
  const [openSections, setOpenSections] = useState({
    tagList: true,
  })

const toggleSection = (section) => {
    setOpenSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

// 过滤标签
  const filteredTags = tags.filter(
    (tag) =>
      tag.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      tag.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
      tag.description.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const formatDate = (date: Date) => {
    return date.toLocaleDateString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    })
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-semibold">用户标签体系</h2>
        <Button>
          <PlusCircle className="mr-2 h-4 w-4" />
          创建新标签
        </Button>
      </div>

<Collapsible open={openSections.tagList} onOpenChange={() => toggleSection("tagList")}>
        <div className="border rounded-md p-4">
          <CollapsibleTrigger className="flex justify-between items-center w-full mb-4">
            <h3 className="text-lg font-medium">标签列表</h3>
            {openSections.tagList ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
          </CollapsibleTrigger>
          <CollapsibleContent>
            <div className="flex justify-between items-center mb-4">
              <div className="flex space-x-2">
                <Select defaultValue="all">
                  <SelectTrigger className="w-[150px]">
                    <SelectValue placeholder="标签分类" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部���类</SelectItem>
                    <SelectItem value="value">价值分类</SelectItem>
                    <SelectItem value="role">职业角色</SelectItem>
                    <SelectItem value="interest">兴趣爱好</SelectItem>
                    <SelectItem value="activity">活跃度</SelectItem>
                  </SelectContent>
                </Select>
                <Select defaultValue="all">
                  <SelectTrigger className="w-[150px]">
                    <SelectValue placeholder="标签来源" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部来源</SelectItem>
                    <SelectItem value="system">系统生成</SelectItem>
                    <SelectItem value="keyword">流量词映射</SelectItem>
                    <SelectItem value="behavior">行为分析</SelectItem>
                    <SelectItem value="manual">手动创建</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="relative w-64">
                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="搜索标签..."
                  className="pl-8"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
            </div>

<div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>标签名称</TableHead>
                    <TableHead>分类</TableHead>
                    <TableHead>描述</TableHead>
                    <TableHead>用户数量</TableHead>
                    <TableHead>来源</TableHead>
                    <TableHead>创建时间</TableHead>
                    <TableHead>更新时间</TableHead>
                    <TableHead className="text-right">操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredTags.map((tag) => (
                    <TableRow key={tag.id}>
                      <TableCell>
                        <div className="flex items-center">
                          <Tag className="h-4 w-4 mr-2 text-muted-foreground" />
                          <span className="font-medium">{tag.name}</span>
                        </div>
                      </TableCell>
                      <TableCell>
                        <Badge variant="outline">{tag.category}</Badge>
                      </TableCell>
                      <TableCell>{tag.description}</TableCell>
                      <TableCell>
                        <div className="flex items-center">
                          <Users className="h-4 w-4 mr-1 text-muted-foreground" />
                          {tag.userCount.toLocaleString()}
                        </div>
                      </TableCell>
                      <TableCell>{tag.source}</TableCell>
                      <TableCell>{formatDate(tag.createdAt)}</TableCell>
                      <TableCell>{formatDate(tag.updatedAt)}</TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end space-x-2">
                          <Button variant="ghost" size="icon">
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="icon" className="text-red-500">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CollapsibleContent>
        </div>
      </Collapsible>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/data-integration/data-source-list.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Edit, ExternalLink, MoreHorizontal, Search, RefreshCw } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

interface DataSource {
  id: string
  name: string
  type: "api" | "file" | "database" | "third-party"
  status: "active" | "inactive" | "error" | "pending"
  lastSync: Date | null
  recordCount: number
  createdAt: Date
}

export function DataSourceList() {
  const [searchQuery, setSearchQuery] = useState("")

// 模拟数据
  const dataSources: DataSource[] = [
    {
      id: "1",
      name: "CRM系统用户数据",
      type: "api",
      status: "active",
      lastSync: new Date(2023, 6, 15, 14, 30),
      recordCount: 45892,
      createdAt: new Date(2023, 3, 10),
    },
    {
      id: "2",
      name: "电商平台订单数据",
      type: "api",
      status: "active",
      lastSync: new Date(2023, 6, 15, 10, 15),
      recordCount: 128456,
      createdAt: new Date(2023, 2, 5),
    },
    {
      id: "3",
      name: "营销活动参与用户",
      type: "file",
      status: "active",
      lastSync: new Date(2023, 6, 14, 9, 45),
      recordCount: 8754,
      createdAt: new Date(2023, 5, 20),
    },
    {
      id: "4",
      name: "APP用户行为数据",
      type: "api",
      status: "error",
      lastSync: new Date(2023, 6, 10, 16, 20),
      recordCount: 65432,
      createdAt: new Date(2023, 1, 15),
    },
    {
      id: "5",
      name: "社交媒体用户数据",
      type: "third-party",
      status: "active",
      lastSync: new Date(2023, 6, 15, 8, 0),
      recordCount: 32145,
      createdAt: new Date(2023, 4, 25),
    },
  ]

// 过滤数据源
  const filteredDataSources = dataSources.filter(
    (source) =>
      source.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      source.type.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const formatDate = (date: Date | null) => {
    if (!date) return "从未同步"
    return date.toLocaleString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

const getStatusBadge = (status: DataSource["status"]) => {
    switch (status) {
      case "active":
        return <Badge className="bg-green-100 text-green-800">正常</Badge>
      case "inactive":
        return <Badge className="bg-gray-100 text-gray-800">未启用</Badge>
      case "error":
        return <Badge className="bg-red-100 text-red-800">错误</Badge>
      case "pending":
        return <Badge className="bg-yellow-100 text-yellow-800">待配置</Badge>
    }
  }

const getTypeIcon = (type: DataSource["type"]) => {
    switch (type) {
      case "api":
        return <Badge className="bg-blue-100 text-blue-800">API接口</Badge>
      case "file":
        return <Badge className="bg-purple-100 text-purple-800">文件导入</Badge>
      case "database":
        return <Badge className="bg-green-100 text-green-800">数据库</Badge>
      case "third-party":
        return <Badge className="bg-orange-100 text-orange-800">第三方平台</Badge>
    }
  }

return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div className="relative w-64">
          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="搜索数据源..."
            className="pl-8"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
        <Button variant="outline" size="sm">
          <RefreshCw className="h-4 w-4 mr-2" />
          刷新状态
        </Button>
      </div>

<div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>数据源名称</TableHead>
              <TableHead>类型</TableHead>
              <TableHead>状态</TableHead>
              <TableHead>最后同步时间</TableHead>
              <TableHead>记录数量</TableHead>
              <TableHead className="text-right">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredDataSources.map((source) => (
              <TableRow key={source.id}>
                <TableCell className="font-medium">{source.name}</TableCell>
                <TableCell>{getTypeIcon(source.type)}</TableCell>
                <TableCell>{getStatusBadge(source.status)}</TableCell>
                <TableCell>{formatDate(source.lastSync)}</TableCell>
                <TableCell>{source.recordCount.toLocaleString()}</TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end space-x-2">
                    <Button variant="ghost" size="icon">
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button variant="ghost" size="icon">
                      <ExternalLink className="h-4 w-4" />
                    </Button>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem>立即同步</DropdownMenuItem>
                        <DropdownMenuItem>查看日志</DropdownMenuItem>
                        <DropdownMenuItem>复制配置</DropdownMenuItem>
                        <DropdownMenuItem className="text-red-600">删除</DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/data-integration/data-mapping-config.tsx" isMerged="true"
"use client"

interface FieldMapping {
  id: string
  sourceField: string
  targetField: string
  dataType: string
  required: boolean
  transformation: string
}

export function DataMappingConfig() {
  // 模拟数据
  const [mappings, setMappings] = useState<FieldMapping[]>([
    {
      id: "1",
      sourceField: "phone",
      targetField: "phoneNumber",
      dataType: "string",
      required: true,
      transformation: "formatPhoneNumber",
    },
    {
      id: "2",
      sourceField: "id_card",
      targetField: "identityNumber",
      dataType: "string",
      required: true,
      transformation: "mask",
    },
    {
      id: "3",
      sourceField: "imei",
      targetField: "deviceImei",
      dataType: "string",
      required: false,
      transformation: "none",
    },
    {
      id: "4",
      sourceField: "address",
      targetField: "userAddress",
      dataType: "string",
      required: false,
      transformation: "none",
    },
    {
      id: "5",
      sourceField: "name",
      targetField: "fullName",
      dataType: "string",
      required: true,
      transformation: "none",
    },
    {
      id: "6",
      sourceField: "register_time",
      targetField: "registrationDate",
      dataType: "datetime",
      required: true,
      transformation: "parseDateTime",
    },
    {
      id: "7",
      sourceField: "last_login",
      targetField: "lastActiveTime",
      dataType: "datetime",
      required: false,
      transformation: "parseDateTime",
    },
  ])

const addNewMapping = () => {
    const newMapping: FieldMapping = {
      id: `new-${Date.now()}`,
      sourceField: "",
      targetField: "",
      dataType: "string",
      required: false,
      transformation: "none",
    }
    setMappings([...mappings, newMapping])
  }

const updateMapping = (id: string, field: keyof FieldMapping, value: any) => {
    setMappings(mappings.map((mapping) => (mapping.id === id ? { ...mapping, [field]: value } : mapping)))
  }

const deleteMapping = (id: string) => {
    setMappings(mappings.filter((mapping) => mapping.id !== id))
  }

return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h3 className="text-lg font-medium">字段映射配置</h3>
        <Button onClick={addNewMapping}>
          <Plus className="mr-2 h-4 w-4" />
          添加映射
        </Button>
      </div>

<div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>源字段</TableHead>
              <TableHead></TableHead>
              <TableHead>目标字段</TableHead>
              <TableHead>数据类型</TableHead>
              <TableHead>必填</TableHead>
              <TableHead>转换方式</TableHead>
              <TableHead className="text-right">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {mappings.map((mapping) => (
              <TableRow key={mapping.id}>
                <TableCell>
                  <Input
                    value={mapping.sourceField}
                    onChange={(e) => updateMapping(mapping.id, "sourceField", e.target.value)}
                    placeholder="源字段名"
                  />
                </TableCell>
                <TableCell>
                  <ArrowRight className="h-4 w-4 text-muted-foreground" />
                </TableCell>
                <TableCell>
                  <Input
                    value={mapping.targetField}
                    onChange={(e) => updateMapping(mapping.id, "targetField", e.target.value)}
                    placeholder="目标字段名"
                  />
                </TableCell>
                <TableCell>
                  <Select
                    value={mapping.dataType}
                    onValueChange={(value) => updateMapping(mapping.id, "dataType", value)}
                  >
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder="选择数据类型" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="string">字符串</SelectItem>
                      <SelectItem value="number">数字</SelectItem>
                      <SelectItem value="boolean">布尔值</SelectItem>
                      <SelectItem value="datetime">日期时间</SelectItem>
                      <SelectItem value="array">数组</SelectItem>
                      <SelectItem value="object">对象</SelectItem>
                    </SelectContent>
                  </Select>
                </TableCell>
                <TableCell>
                  <div className="flex items-center justify-center">
                    <Switch
                      checked={mapping.required}
                      onCheckedChange={(checked) => updateMapping(mapping.id, "required", checked)}
                    />
                  </div>
                </TableCell>
                <TableCell>
                  <Select
                    value={mapping.transformation}
                    onValueChange={(value) => updateMapping(mapping.id, "transformation", value)}
                  >
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder="选择转换方式" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="none">无转换</SelectItem>
                      <SelectItem value="formatPhoneNumber">格式化手机号</SelectItem>
                      <SelectItem value="mask">数据脱敏</SelectItem>
                      <SelectItem value="parseDateTime">解析日期时间</SelectItem>
                      <SelectItem value="uppercase">转大写</SelectItem>
                      <SelectItem value="lowercase">转小写</SelectItem>
                      <SelectItem value="trim">去除空格</SelectItem>
                      <SelectItem value="custom">自定义转换</SelectItem>
                    </SelectContent>
                  </Select>
                </TableCell>
                <TableCell className="text-right">
                  <Button variant="ghost" size="icon" onClick={() => deleteMapping(mapping.id)}>
                    <Trash2 className="h-4 w-4 text-red-500" />
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

<div className="flex justify-end space-x-2">
        <Button variant="outline">取消</Button>
        <Button>
          <Save className="mr-2 h-4 w-4" />
          保存配置
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/data-integration/integration-history.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, FileDown, Eye, RefreshCw } from "lucide-react"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

interface IntegrationRecord {
  id: string
  sourceId: string
  sourceName: string
  startTime: Date
  endTime: Date
  status: "success" | "failed" | "partial" | "running"
  totalRecords: number
  successRecords: number
  failedRecords: number
  notes: string
}

export function IntegrationHistory() {
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")

// 模拟数据
  const integrationRecords: IntegrationRecord[] = [
    {
      id: "1",
      sourceId: "1",
      sourceName: "CRM系统用户数据",
      startTime: new Date(2023, 6, 15, 14, 30),
      endTime: new Date(2023, 6, 15, 14, 45),
      status: "success",
      totalRecords: 5280,
      successRecords: 5280,
      failedRecords: 0,
      notes: "完全同步成功",
    },
    {
      id: "2",
      sourceId: "2",
      sourceName: "电商平台订单数据",
      startTime: new Date(2023, 6, 15, 10, 15),
      endTime: new Date(2023, 6, 15, 10, 40),
      status: "partial",
      totalRecords: 12500,
      successRecords: 12350,
      failedRecords: 150,
      notes: "部分记录格式错误",
    },
    {
      id: "3",
      sourceId: "3",
      sourceName: "营销活动参与用户",
      startTime: new Date(2023, 6, 14, 9, 45),
      endTime: new Date(2023, 6, 14, 9, 50),
      status: "success",
      totalRecords: 875,
      successRecords: 875,
      failedRecords: 0,
      notes: "同步成功",
    },
    {
      id: "4",
      sourceId: "4",
      sourceName: "APP用户行为数据",
      startTime: new Date(2023, 6, 10, 16, 20),
      endTime: new Date(2023, 6, 10, 16, 35),
      status: "failed",
      totalRecords: 8500,
      successRecords: 0,
      failedRecords: 8500,
      notes: "API连接超时",
    },
    {
      id: "5",
      sourceId: "5",
      sourceName: "社交媒体用户数据",
      startTime: new Date(2023, 6, 15, 8, 0),
      endTime: new Date(2023, 6, 15, 8, 15),
      status: "success",
      totalRecords: 3200,
      successRecords: 3200,
      failedRecords: 0,
      notes: "同步成功",
    },
    {
      id: "6",
      sourceId: "7",
      sourceName: "新用户注册数据",
      startTime: new Date(2023, 6, 15, 16, 0),
      endTime: null,
      status: "running",
      totalRecords: 0,
      successRecords: 0,
      failedRecords: 0,
      notes: "首次同步进行中",
    },
  ]

// 过滤记录
  const filteredRecords = integrationRecords.filter((record) => {
    const matchesSearch = record.sourceName.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesStatus = statusFilter === "all" || record.status === statusFilter
    return matchesSearch && matchesStatus
  })

const formatDate = (date: Date | null) => {
    if (!date) return "进行中"
    return date.toLocaleString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

const getStatusBadge = (status: IntegrationRecord["status"]) => {
    switch (status) {
      case "success":
        return <Badge className="bg-green-100 text-green-800">成功</Badge>
      case "failed":
        return <Badge className="bg-red-100 text-red-800">失败</Badge>
      case "partial":
        return <Badge className="bg-yellow-100 text-yellow-800">部分成功</Badge>
      case "running":
        return <Badge className="bg-blue-100 text-blue-800">进行中</Badge>
    }
  }

return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div className="flex space-x-2">
          <div className="relative w-64">
            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="搜索数据源..."
              className="pl-8"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>
          <Select value={statusFilter} onValueChange={setStatusFilter}>
            <SelectTrigger className="w-[150px]">
              <SelectValue placeholder="状态筛选" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部状态</SelectItem>
              <SelectItem value="success">成功</SelectItem>
              <SelectItem value="failed">失败</SelectItem>
              <SelectItem value="partial">部分成功</SelectItem>
              <SelectItem value="running">进行中</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <Button variant="outline">
          <RefreshCw className="mr-2 h-4 w-4" />
          刷新
        </Button>
      </div>

<div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>数据源</TableHead>
              <TableHead>开始时间</TableHead>
              <TableHead>结束时间</TableHead>
              <TableHead>状态</TableHead>
              <TableHead>总记录数</TableHead>
              <TableHead>成功数</TableHead>
              <TableHead>失败数</TableHead>
              <TableHead>备注</TableHead>
              <TableHead className="text-right">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredRecords.map((record) => (
              <TableRow key={record.id}>
                <TableCell className="font-medium">{record.sourceName}</TableCell>
                <TableCell>{formatDate(record.startTime)}</TableCell>
                <TableCell>{formatDate(record.endTime)}</TableCell>
                <TableCell>{getStatusBadge(record.status)}</TableCell>
                <TableCell>{record.totalRecords.toLocaleString()}</TableCell>
                <TableCell>{record.successRecords.toLocaleString()}</TableCell>
                <TableCell>{record.failedRecords.toLocaleString()}</TableCell>
                <TableCell>{record.notes}</TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end space-x-2">
                    <Button variant="ghost" size="icon">
                      <Eye className="h-4 w-4" />
                    </Button>
                    <Button variant="ghost" size="icon">
                      <FileDown className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

<Pagination>
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious href="#" />
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">1</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#" isActive>
              2
            </PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationLink href="#">3</PaginationLink>
          </PaginationItem>
          <PaginationItem>
            <PaginationNext href="#" />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/data-integration/data-preview.tsx" isMerged="true"
"use client"

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function DataPreview() {
  // 模拟数据
  const previewData = [
    {
      id: "1",
      name: "张三",
      phone: "13812345678",
      idCard: "3101********1234",
      imei: "86723*****5432",
      address: "上海市浦东新区张江高科技园区",
      registerDate: "2023-01-15",
      lastActive: "2023-07-12",
      source: "CRM系统",
      status: "matched",
    },
    {
      id: "2",
      name: "李四",
      phone: "13987654321",
      idCard: "4401********5678",
      imei: "35871*****7890",
      address: "广州市天河区珠江新城",
      registerDate: "2022-11-20",
      lastActive: "2023-07-10",
      source: "电商平台",
      status: "matched",
    },
    {
      id: "3",
      name: "王五",
      phone: "13765432198",
      idCard: "1101********7890",
      imei: "",
      address: "北京市海淀区中关村",
      registerDate: "2023-03-05",
      lastActive: "2023-07-15",
      source: "营销活动",
      status: "partial",
    },
    {
      id: "4",
      name: "赵六",
      phone: "13698765432",
      idCard: "",
      imei: "86723*****1234",
      address: "深圳市南山区科技园",
      registerDate: "2023-05-18",
      lastActive: "2023-07-14",
      source: "APP注册",
      status: "partial",
    },
    {
      id: "5",
      name: "钱七",
      phone: "",
      idCard: "",
      imei: "",
      address: "杭州市西湖区",
      registerDate: "2023-06-30",
      lastActive: "2023-07-01",
      source: "社交媒体",
      status: "unmatched",
    },
  ]

const getStatusBadge = (status: string) => {
    switch (status) {
      case "matched":
        return <Badge className="bg-green-100 text-green-800">已匹配</Badge>
      case "partial":
        return <Badge className="bg-yellow-100 text-yellow-800">部分匹配</Badge>
      case "unmatched":
        return <Badge className="bg-red-100 text-red-800">未匹配</Badge>
    }
  }

return (
    <div className="space-y-4">
      <Tabs defaultValue="preview">
        <TabsList>
          <TabsTrigger value="preview">数据预览</TabsTrigger>
          <TabsTrigger value="matched">已匹配</TabsTrigger>
          <TabsTrigger value="partial">部分匹配</TabsTrigger>
          <TabsTrigger value="unmatched">未匹配</TabsTrigger>
        </TabsList>

<TabsContent value="preview" className="pt-4">
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>姓名</TableHead>
                  <TableHead>手机号</TableHead>
                  <TableHead>身份证</TableHead>
                  <TableHead>IMEI</TableHead>
                  <TableHead>地址</TableHead>
                  <TableHead>注册日期</TableHead>
                  <TableHead>最后活跃</TableHead>
                  <TableHead>来源</TableHead>
                  <TableHead>匹配状态</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {previewData.map((item) => (
                  <TableRow key={item.id}>
                    <TableCell className="font-medium">{item.name}</TableCell>
                    <TableCell>{item.phone || "-"}</TableCell>
                    <TableCell>{item.idCard || "-"}</TableCell>
                    <TableCell>{item.imei || "-"}</TableCell>
                    <TableCell>{item.address}</TableCell>
                    <TableCell>{item.registerDate}</TableCell>
                    <TableCell>{item.lastActive}</TableCell>
                    <TableCell>{item.source}</TableCell>
                    <TableCell>{getStatusBadge(item.status)}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </TabsContent>

<TabsContent value="matched" className="pt-4">
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>姓名</TableHead>
                  <TableHead>手机号</TableHead>
                  <TableHead>身份证</TableHead>
                  <TableHead>IMEI</TableHead>
                  <TableHead>地址</TableHead>
                  <TableHead>注册日期</TableHead>
                  <TableHead>最后活跃</TableHead>
                  <TableHead>来源</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {previewData
                  .filter((item) => item.status === "matched")
                  .map((item) => (
                    <TableRow key={item.id}>
                      <TableCell className="font-medium">{item.name}</TableCell>
                      <TableCell>{item.phone || "-"}</TableCell>
                      <TableCell>{item.idCard || "-"}</TableCell>
                      <TableCell>{item.imei || "-"}</TableCell>
                      <TableCell>{item.address}</TableCell>
                      <TableCell>{item.registerDate}</TableCell>
                      <TableCell>{item.lastActive}</TableCell>
                      <TableCell>{item.source}</TableCell>
                    </TableRow>
                  ))}
              </TableBody>
            </Table>
          </div>
        </TabsContent>

<TabsContent value="partial" className="pt-4">
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>姓名</TableHead>
                  <TableHead>手机号</TableHead>
                  <TableHead>身份证</TableHead>
                  <TableHead>IMEI</TableHead>
                  <TableHead>地址</TableHead>
                  <TableHead>注册日期</TableHead>
                  <TableHead>最后活跃</TableHead>
                  <TableHead>来源</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {previewData
                  .filter((item) => item.status === "partial")
                  .map((item) => (
                    <TableRow key={item.id}>
                      <TableCell className="font-medium">{item.name}</TableCell>
                      <TableCell>{item.phone || "-"}</TableCell>
                      <TableCell>{item.idCard || "-"}</TableCell>
                      <TableCell>{item.imei || "-"}</TableCell>
                      <TableCell>{item.address}</TableCell>
                      <TableCell>{item.registerDate}</TableCell>
                      <TableCell>{item.lastActive}</TableCell>
                      <TableCell>{item.source}</TableCell>
                    </TableRow>
                  ))}
              </TableBody>
            </Table>
          </div>
        </TabsContent>

<TabsContent value="unmatched" className="pt-4">
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>姓名</TableHead>
                  <TableHead>手机号</TableHead>
                  <TableHead>身份证</TableHead>
                  <TableHead>IMEI</TableHead>
                  <TableHead>地址</TableHead>
                  <TableHead>注册日期</TableHead>
                  <TableHead>最后活跃</TableHead>
                  <TableHead>来源</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {previewData
                  .filter((item) => item.status === "unmatched")
                  .map((item) => (
                    <TableRow key={item.id}>
                      <TableCell className="font-medium">{item.name}</TableCell>
                      <TableCell>{item.phone || "-"}</TableCell>
                      <TableCell>{item.idCard || "-"}</TableCell>
                      <TableCell>{item.imei || "-"}</TableCell>
                      <TableCell>{item.address}</TableCell>
                      <TableCell>{item.registerDate}</TableCell>
                      <TableCell>{item.lastActive}</TableCell>
                      <TableCell>{item.source}</TableCell>
                    </TableRow>
                  ))}
              </TableBody>
            </Table>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/user-portrait-overview.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { PieChart, BarChart } from "@/components/charts"

interface UserPortraitOverviewProps {
  timeRange: string
}

export function UserPortraitOverview({ timeRange }: UserPortraitOverviewProps) {
  // 这里应该根据timeRange从API获取实际数据

return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-2">用户性别分布</h3>
            <PieChart
              data={{
                labels: ["男性", "女性", "未知"],
                datasets: [
                  {
                    data: [45, 52, 3],
                    backgroundColor: ["rgb(59, 130, 246)", "rgb(236, 72, 153)", "rgb(156, 163, 175)"],
                  },
                ],
              }}
              height={180}
            />
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-2">用户年龄分布</h3>
            <PieChart
              data={{
                labels: ["18岁以下", "18-24岁", "25-34岁", "35-44岁", "45-54岁", "55岁以上"],
                datasets: [
                  {
                    data: [5, 25, 40, 20, 7, 3],
                    backgroundColor: [
                      "rgb(59, 130, 246)",
                      "rgb(16, 185, 129)",
                      "rgb(249, 115, 22)",
                      "rgb(139, 92, 246)",
                      "rgb(236, 72, 153)",
                      "rgb(156, 163, 175)",
                    ],
                  },
                ],
              }}
              height={180}
            />
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-2">用户价值分布</h3>
            <PieChart
              data={{
                labels: ["高价值", "中价值", "低价值"],
                datasets: [
                  {
                    data: [25, 45, 30],
                    backgroundColor: ["rgb(16, 185, 129)", "rgb(59, 130, 246)", "rgb(156, 163, 175)"],
                  },
                ],
              }}
              height={180}
            />
          </CardContent>
        </Card>
      </div>

<Card>
        <CardContent className="p-4">
          <h3 className="text-sm font-medium mb-2">兴趣标签分布</h3>
          <BarChart
            data={{
              labels: ["科技", "金融", "教育", "旅游", "健康", "美食", "时尚", "体育", "娱乐", "汽车"],
              datasets: [
                {
                  label: "用户数量",
                  data: [6500, 4800, 3900, 5200, 4100, 6800, 3500, 2900, 5500, 3200],
                  backgroundColor: "rgba(59, 130, 246, 0.8)",
                },
              ],
            }}
            height={250}
          />
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/user-tags-distribution.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { PieChart, BarChart } from "@/components/charts"
import { Badge } from "@/components/ui/badge"

interface UserTagsDistributionProps {
  timeRange: string
}

export function UserTagsDistribution({ timeRange }: UserTagsDistributionProps) {
  // 这里应该根据timeRange从API获取实际数据

// 模拟标签分类数据
  const tagCategories = [
    { name: "行为特征", count: 45, color: "bg-blue-100 text-blue-800" },
    { name: "偏好特征", count: 38, color: "bg-green-100 text-green-800" },
    { name: "价值特征", count: 22, color: "bg-purple-100 text-purple-800" },
    { name: "生命周期", count: 15, color: "bg-yellow-100 text-yellow-800" },
    { name: "渠道来源", count: 12, color: "bg-indigo-100 text-indigo-800" },
    { name: "社交属性", count: 8, color: "bg-pink-100 text-pink-800" },
  ]

// 模拟热门标签数据
  const hotTags = [
    { name: "高价值用户", count: 12458, category: "价值特征" },
    { name: "活跃用户", count: 45678, category: "行为特征" },
    { name: "数据分析师", count: 8765, category: "职业角色" },
    { name: "营销决策者", count: 6543, category: "职业角色" },
    { name: "技术爱好者", count: 15432, category: "偏好特征" },
    { name: "潜在客户", count: 23456, category: "价值特征" },
    { name: "流失风险", count: 5678, category: "生命周期" },
    { name: "企业客户", count: 3456, category: "客户类型" },
    { name: "新注册用户", count: 7890, category: "生命周期" },
    { name: "社交活跃", count: 12345, category: "社交属性" },
  ]

return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-4">标签分类分布</h3>
            <PieChart
              data={{
                labels: tagCategories.map((cat) => cat.name),
                datasets: [
                  {
                    data: tagCategories.map((cat) => cat.count),
                    backgroundColor: [
                      "rgb(59, 130, 246)",
                      "rgb(16, 185, 129)",
                      "rgb(139, 92, 246)",
                      "rgb(249, 115, 22)",
                      "rgb(99, 102, 241)",
                      "rgb(236, 72, 153)",
                    ],
                  },
                ],
              }}
              height={250}
            />
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-4">热门标签 Top 10</h3>
            <BarChart
              data={{
                labels: hotTags.map((tag) => tag.name),
                datasets: [
                  {
                    label: "用户数量",
                    data: hotTags.map((tag) => tag.count),
                    backgroundColor: "rgba(59, 130, 246, 0.8)",
                  },
                ],
              }}
              height={250}
            />
          </CardContent>
        </Card>
      </div>

<Card>
        <CardContent className="p-4">
          <h3 className="text-sm font-medium mb-4">标签分类详情</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {tagCategories.map((category) => (
              <div key={category.name} className="space-y-2">
                <div className="flex justify-between items-center">
                  <Badge className={category.color}>{category.name}</Badge>
                  <span className="text-sm text-muted-foreground">{category.count}个标签</span>
                </div>
                <div className="space-y-1">
                  {hotTags
                    .filter((tag) => tag.category === category.name)
                    .slice(0, 3)
                    .map((tag) => (
                      <div key={tag.name} className="flex justify-between items-center text-sm">
                        <span>{tag.name}</span>
                        <span className="text-muted-foreground">{(tag.count / 1000).toFixed(1)}k用户</span>
                      </div>
                    ))}
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

<Card>
        <CardContent className="p-4">
          <h3 className="text-sm font-medium mb-4">标签覆盖率分析</h3>
          <div className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="bg-primary/10 rounded-lg p-4">
                <div className="text-sm text-muted-foreground">平均标签数/用户</div>
                <div className="text-2xl font-bold">5.8</div>
                <div className="text-xs text-green-600">较上月增长 0.3</div>
              </div>
              <div className="bg-primary/10 rounded-lg p-4">
                <div className="text-sm text-muted-foreground">标签覆盖率</div>
                <div className="text-2xl font-bold">92.5%</div>
                <div className="text-xs text-green-600">较上月提升 1.2%</div>
              </div>
              <div className="bg-primary/10 rounded-lg p-4">
                <div className="text-sm text-muted-foreground">标签准确率</div>
                <div className="text-2xl font-bold">87.3%</div>
                <div className="text-xs text-green-600">较上月提升 2.1%</div>
              </div>
            </div>

<BarChart
              data={{
                labels: ["0个标签", "1-3个标签", "4-6个标签", "7-9个标签", "10个以上标签"],
                datasets: [
                  {
                    label: "用户数量",
                    data: [7500, 25000, 45000, 35000, 12500],
                    backgroundColor: "rgba(59, 130, 246, 0.8)",
                  },
                ],
              }}
              height={250}
            />
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/user-behavior-analysis.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { LineChart, BarChart } from "@/components/charts"

interface UserBehaviorAnalysisProps {
  timeRange: string
}

export function UserBehaviorAnalysis({ timeRange }: UserBehaviorAnalysisProps) {
  // 这里应该根据timeRange从API获取实际数据

return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-primary/10 rounded-lg p-4">
          <div className="text-sm text-muted-foreground">平均活跃天数/月</div>
          <div className="text-2xl font-bold">12.5</div>
          <div className="text-xs text-green-600">较上月增长 1.2</div>
        </div>
        <div className="bg-primary/10 rounded-lg p-4">
          <div className="text-sm text-muted-foreground">平均使用时长/日</div>
          <div className="text-2xl font-bold">42分钟</div>
          <div className="text-xs text-green-600">较上月增长 5分钟</div>
        </div>
        <div className="bg-primary/10 rounded-lg p-4">
          <div className="text-sm text-muted-foreground">平均交互次数/日</div>
          <div className="text-2xl font-bold">8.3</div>
          <div className="text-xs text-green-600">较上月增长 0.5</div>
        </div>
      </div>

<Card>
        <CardContent className="p-4">
          <h3 className="text-sm font-medium mb-2">用户活跃度趋势</h3>
          <LineChart
            data={{
              labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
              datasets: [
                {
                  label: "日活跃用户",
                  data: [45000, 48000, 52000, 55000, 58000, 62000, 65000],
                  borderColor: "rgb(59, 130, 246)",
                  backgroundColor: "rgba(59, 130, 246, 0.1)",
                },
                {
                  label: "周活跃用户",
                  data: [75000, 78000, 82000, 85000, 88000, 92000, 95000],
                  borderColor: "rgb(16, 185, 129)",
                  backgroundColor: "rgba(16, 185, 129, 0.1)",
                },
                {
                  label: "月活跃用户",
                  data: [95000, 98000, 102000, 105000, 108000, 112000, 115000],
                  borderColor: "rgb(249, 115, 22)",
                  backgroundColor: "rgba(249, 115, 22, 0.1)",
                },
              ],
            }}
            height={250}
          />
        </CardContent>
      </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-2">活跃时段分布</h3>
            <BarChart
              data={{
                labels: ["0-3点", "3-6点", "6-9点", "9-12点", "12-15点", "15-18点", "18-21点", "21-24点"],
                datasets: [
                  {
                    label: "活跃用户数",
                    data: [8000, 4000, 25000, 58000, 42000, 38000, 75000, 62000],
                    backgroundColor: "rgba(59, 130, 246, 0.8)",
                  },
                ],
              }}
              height={250}
            />
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-2">使用设备分布</h3>
            <BarChart
              data={{
                labels: ["iOS", "Android", "Windows", "MacOS", "其他"],
                datasets: [
                  {
                    label: "用户数量",
                    data: [52000, 55000, 10000, 5000, 1000],
                    backgroundColor: "rgba(59, 130, 246, 0.8)",
                  },
                ],
              }}
              height={250}
            />
          </CardContent>
        </Card>
      </div>

<Card>
        <CardContent className="p-4">
          <h3 className="text-sm font-medium mb-2">用户行为轨迹分析</h3>
          <LineChart
            data={{
              labels: ["浏览", "搜索", "加入购物车", "下单", "支付", "评价", "复购"],
              datasets: [
                {
                  label: "高价值用户",
                  data: [100, 95, 85, 80, 78, 65, 60],
                  borderColor: "rgb(16, 185, 129)",
                  backgroundColor: "rgba(16, 185, 129, 0.1)",
                },
                {
                  label: "中价值用户",
                  data: [100, 85, 65, 55, 50, 35, 25],
                  borderColor: "rgb(59, 130, 246)",
                  backgroundColor: "rgba(59, 130, 246, 0.1)",
                },
                {
                  label: "低价值用户",
                  data: [100, 70, 40, 25, 20, 10, 5],
                  borderColor: "rgb(156, 163, 175)",
                  backgroundColor: "rgba(156, 163, 175, 0.1)",
                },
              ],
            }}
            height={250}
          />
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/dashboard/user-lifecycle-analysis.tsx" isMerged="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { LineChart, BarChart } from "@/components/charts"

interface UserLifecycleAnalysisProps {
  timeRange: string
}

export function UserLifecycleAnalysis({ timeRange }: UserLifecycleAnalysisProps) {
  // 这里应该根据timeRange从API获取实际数据

return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-primary/10 rounded-lg p-4">
          <div className="text-sm text-muted-foreground">新增用户数</div>
          <div className="text-2xl font-bold">12,458</div>
          <div className="text-xs text-green-600">较上月增长 8.2%</div>
        </div>
        <div className="bg-primary/10 rounded-lg p-4">
          <div className="text-sm text-muted-foreground">用户留存率(30天)</div>
          <div className="text-2xl font-bold">68.5%</div>
          <div className="text-xs text-green-600">较上月提升 2.3%</div>
        </div>
        <div className="bg-primary/10 rounded-lg p-4">
          <div className="text-sm text-muted-foreground">用户流失率</div>
          <div className="text-2xl font-bold">5.2%</div>
          <div className="text-xs text-green-600">较上月降低 0.8%</div>
        </div>
      </div>

<Card>
        <CardContent className="p-4">
          <h3 className="text-sm font-medium mb-2">用户生命周期分布</h3>
          <BarChart
            data={{
              labels: ["获取阶段", "激活阶段", "留存阶段", "转化阶段", "忠诚阶段"],
              datasets: [
                {
                  label: "用户数量",
                  data: [25000, 18000, 12000, 8000, 5000],
                  backgroundColor: "rgba(59, 130, 246, 0.8)",
                },
              ],
            }}
            height={250}
          />
        </CardContent>
      </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-2">用户留存率趋势</h3>
            <LineChart
              data={{
                labels: ["1天", "7天", "14天", "30天", "60天", "90天", "180天", "365天"],
                datasets: [
                  {
                    label: "留存率",
                    data: [95, 85, 75, 68, 55, 42, 28, 15],
                    borderColor: "rgb(59, 130, 246)",
                    backgroundColor: "rgba(59, 130, 246, 0.1)",
                  },
                ],
              }}
              height={250}
            />
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <h3 className="text-sm font-medium mb-2">用户流失原因分析</h3>
            <BarChart
              data={{
                labels: ["产品体验差", "需求不匹配", "竞品转移", "价格因素", "服务问题", "其他原因"],
                datasets: [
                  {
                    label: "流失用户比例",
                    data: [35, 25, 20, 10, 8, 2],
                    backgroundColor: "rgba(59, 130, 246, 0.8)",
                  },
                ],
              }}
              height={250}
            />
          </CardContent>
        </Card>
      </div>

<Card>
        <CardContent className="p-4">
          <h3 className="text-sm font-medium mb-2">用户价值变化趋势</h3>
          <LineChart
            data={{
              labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
              datasets: [
                {
                  label: "高价值用户比例",
                  data: [18, 19, 20, 22, 23, 24, 25],
                  borderColor: "rgb(16, 185, 129)",
                  backgroundColor: "rgba(16, 185, 129, 0.1)",
                },
                {
                  label: "中价值用户比例",
                  data: [42, 43, 44, 45, 45, 46, 45],
                  borderColor: "rgb(59, 130, 246)",
                  backgroundColor: "rgba(59, 130, 246, 0.1)",
                },
                {
                  label: "低价值用户比例",
                  data: [40, 38, 36, 33, 32, 30, 30],
                  borderColor: "rgb(156, 163, 175)",
                  backgroundColor: "rgba(156, 163, 175, 0.1)",
                },
              ],
            }}
            height={250}
          />
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/devices/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/scenarios/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/traffic-pool/traffic-pool-list.tsx" isMoved="true" isMovedFrom="components/traffic-keywords/traffic-keyword-list.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Checkbox } from "@/components/ui/checkbox"
import { MoreHorizontal, Edit, Trash2, BarChart2, Tag } from "lucide-react"

interface TrafficPool {
  id: string
  keyword: string
  source: string
  category: string
  volume: "high" | "medium" | "low"
  matchedUsers: number
  createdAt: Date
  updatedAt: Date
  tags: string[]
}

interface TrafficPoolListProps {
  searchQuery: string
}

export function TrafficPoolList({ searchQuery }: TrafficPoolListProps) {
  const [selectedKeywords, setSelectedKeywords] = useState<string[]>([])

// 模拟数据
  const keywords: TrafficPool[] = [
    {
      id: "1",
      keyword: "数字营销",
      source: "搜索引擎",
      category: "营销",
      volume: "high",
      matchedUsers: 1250,
      createdAt: new Date(2023, 5, 15),
      updatedAt: new Date(2023, 6, 20),
      tags: ["高意向", "B端客户"],
    },
    {
      id: "2",
      keyword: "用户画像",
      source: "社交媒体",
      category: "数据分析",
      volume: "high",
      matchedUsers: 980,
      createdAt: new Date(2023, 4, 10),
      updatedAt: new Date(2023, 6, 18),
      tags: ["数据分析", "企业客户"],
    },
    {
      id: "3",
      keyword: "流量获取",
      source: "广告投放",
      category: "营销",
      volume: "medium",
      matchedUsers: 645,
      createdAt: new Date(2023, 3, 5),
      updatedAt: new Date(2023, 5, 25),
      tags: ["获客", "营销人员"],
    },
    {
      id: "4",
      keyword: "数据可视化",
      source: "内容营销",
      category: "数据分析",
      volume: "medium",
      matchedUsers: 520,
      createdAt: new Date(2023, 2, 20),
      updatedAt: new Date(2023, 6, 19),
      tags: ["技术", "数据分析师"],
    },
    {
      id: "5",
      keyword: "精准营销",
      source: "搜索引擎",
      category: "营销",
      volume: "high",
      matchedUsers: 1100,
      createdAt: new Date(2023, 1, 15),
      updatedAt: new Date(2023, 4, 10),
      tags: ["高转化", "营销经理"],
    },
  ]

// 过滤关键词
  const filteredKeywords = keywords.filter(
    (keyword) =>
      keyword.keyword.toLowerCase().includes(searchQuery.toLowerCase()) ||
      keyword.source.toLowerCase().includes(searchQuery.toLowerCase()) ||
      keyword.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
      keyword.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase())),
  )

const toggleSelectAll = () => {
    if (selectedKeywords.length === filteredKeywords.length) {
      setSelectedKeywords([])
    } else {
      setSelectedKeywords(filteredKeywords.map((k) => k.id))
    }
  }

const toggleSelectKeyword = (id: string) => {
    if (selectedKeywords.includes(id)) {
      setSelectedKeywords(selectedKeywords.filter((k) => k !== id))
    } else {
      setSelectedKeywords([...selectedKeywords, id])
    }
  }

const getVolumeBadge = (volume: string) => {
    switch (volume) {
      case "high":
        return <Badge className="bg-green-500">高</Badge>
      case "medium":
        return <Badge className="bg-blue-500">中</Badge>
      case "low":
        return <Badge className="bg-gray-500">低</Badge>
      default:
        return <Badge>未知</Badge>
    }
  }

const formatDate = (date: Date) => {
    return date.toLocaleDateString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    })
  }

return (
    <div className="space-y-4">
      {selectedKeywords.length > 0 && (
        <div className="bg-muted p-2 rounded-md flex items-center justify-between">
          <span className="text-sm">已选择 {selectedKeywords.length} 项</span>
          <div className="space-x-2">
            <Button variant="outline" size="sm">
              <Tag className="mr-2 h-4 w-4" />
              批量标记
            </Button>
            <Button variant="outline" size="sm" className="text-red-500">
              <Trash2 className="mr-2 h-4 w-4" />
              批量删除
            </Button>
          </div>
        </div>
      )}

<div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-12">
                <Checkbox
                  checked={selectedKeywords.length === filteredKeywords.length && filteredKeywords.length > 0}
                  onCheckedChange={toggleSelectAll}
                  aria-label="Select all"
                />
              </TableHead>
              <TableHead>关键词</TableHead>
              <TableHead>来源</TableHead>
              <TableHead>分类</TableHead>
              <TableHead>流量</TableHead>
              <TableHead>匹配用户数</TableHead>
              <TableHead>创建时间</TableHead>
              <TableHead>更新时间</TableHead>
              <TableHead>标签</TableHead>
              <TableHead className="text-right">操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredKeywords.map((keyword) => (
              <TableRow key={keyword.id}>
                <TableCell>
                  <Checkbox
                    checked={selectedKeywords.includes(keyword.id)}
                    onCheckedChange={() => toggleSelectKeyword(keyword.id)}
                    aria-label={`Select ${keyword.keyword}`}
                  />
                </TableCell>
                <TableCell className="font-medium">{keyword.keyword}</TableCell>
                <TableCell>{keyword.source}</TableCell>
                <TableCell>{keyword.category}</TableCell>
                <TableCell>{getVolumeBadge(keyword.volume)}</TableCell>
                <TableCell>{keyword.matchedUsers.toLocaleString()}</TableCell>
                <TableCell>{formatDate(keyword.createdAt)}</TableCell>
                <TableCell>{formatDate(keyword.updatedAt)}</TableCell>
                <TableCell>
                  <div className="flex flex-wrap gap-1">
                    {keyword.tags.map((tag) => (
                      <Badge key={tag} variant="outline" className="text-xs">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                </TableCell>
                <TableCell className="text-right">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreHorizontal className="h-4 w-4" />
                        <span className="sr-only">打开菜单</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuLabel>操作</DropdownMenuLabel>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem>
                        <Edit className="mr-2 h-4 w-4" />
                        编辑
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <BarChart2 className="mr-2 h-4 w-4" />
                        查看分析
                      </DropdownMenuItem>
                      <DropdownMenuItem>
                        <Tag className="mr-2 h-4 w-4" />
                        管理标签
                      </DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem className="text-red-500">
                        <Trash2 className="mr-2 h-4 w-4" />
                        删除
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/traffic-pool/pool-analytics.tsx" isMerged="true"
"use client"

export function PoolAnalytics() {
  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-semibold">流量池分析</h2>
        <div className="flex space-x-2">
          <Select defaultValue="7days">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="选择时间范围" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="7days">最近7天</SelectItem>
              <SelectItem value="30days">最近30天</SelectItem>
              <SelectItem value="90days">最近90天</SelectItem>
              <SelectItem value="custom">自定义范围</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">总流量池数量</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">12</div>
            <p className="text-xs text-muted-foreground">较上月增长 2个</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">活跃流量池</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">8</div>
            <p className="text-xs text-muted-foreground">较上月增长 1个</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">流量池转化率</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">24.8%</div>
            <p className="text-xs text-muted-foreground">较上月提升 2.3%</p>
          </CardContent>
        </Card>
      </div>

<Tabs defaultValue="overview">
        <TabsList>
          <TabsTrigger value="overview">概览</TabsTrigger>
          <TabsTrigger value="performance">性能分析</TabsTrigger>
          <TabsTrigger value="conversion">转化分析</TabsTrigger>
        </TabsList>
        <TabsContent value="overview" className="space-y-4">
          <Card className="p-4">
            <CardHeader>
              <CardTitle>流量池增长趋势</CardTitle>
            </CardHeader>
            <CardContent className="pt-0">
              <div className="h-[300px] flex items-center justify-center">
                <p className="text-muted-foreground">图表功能已移除</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="performance" className="space-y-4">
          <Card className="p-4">
            <CardHeader>
              <CardTitle>流量池性能指标</CardTitle>
            </CardHeader>
            <CardContent className="pt-0">
              <div className="h-[300px] flex items-center justify-center">
                <p className="text-muted-foreground">图表功能已移除</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="conversion" className="space-y-4">
          <Card className="p-4">
            <CardHeader>
              <CardTitle>流量池转化路径</CardTitle>
            </CardHeader>
            <CardContent className="pt-0">
              <div className="h-[300px] flex items-center justify-center">
                <p className="text-muted-foreground">图表功能已移除</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

// 保持已有的 KeywordAnalytics 函数
export function KeywordAnalytics() {
  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-semibold">流量词分析</h2>
        <div className="flex space-x-2">
          <Select defaultValue="7days">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="选择时间范围" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="7days">最近7天</SelectItem>
              <SelectItem value="30days">最近30天</SelectItem>
              <SelectItem value="90days">最近90天</SelectItem>
              <SelectItem value="custom">自定义范围</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">总流量词数量</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">125</div>
            <p className="text-xs text-muted-foreground">较上月增长 12%</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">匹配用户总数</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">24,521</div>
            <p className="text-xs text-muted-foreground">较上月增长 8%</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-sm font-medium">平均匹配率</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">68.3%</div>
            <p className="text-xs text-muted-foreground">较上月提升 2.1%</p>
          </CardContent>
        </Card>
      </div>

<Tabs defaultValue="trends">
        <TabsList>
          <TabsTrigger value="trends">趋势分析</TabsTrigger>
          <TabsTrigger value="distribution">分布分析</TabsTrigger>
          <TabsTrigger value="performance">性能分析</TabsTrigger>
        </TabsList>
        <TabsContent value="trends" className="space-y-4">
          <Card className="p-4">
            <CardHeader>
              <CardTitle>流量词匹配趋势</CardTitle>
            </CardHeader>
            <CardContent className="pt-0">
              <div className="h-[300px] flex items-center justify-center">
                <p className="text-muted-foreground">图表功能已移除</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
        <TabsContent value="distribution" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card className="p-4">
              <CardHeader>
                <CardTitle>流量词来源分布</CardTitle>
              </CardHeader>
              <CardContent className="pt-0">
                <div className="h-[250px] flex items-center justify-center">
                  <p className="text-muted-foreground">图表功能已移除</p>
                </div>
              </CardContent>
            </Card>
            <Card className="p-4">
              <CardHeader>
                <CardTitle>流量词分类分布</CardTitle>
              </CardHeader>
              <CardContent className="pt-0">
                <div className="h-[250px] flex items-center justify-center">
                  <p className="text-muted-foreground">图表功能已移除</p>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
        <TabsContent value="performance" className="space-y-4">
          <Card className="p-4">
            <CardHeader>
              <CardTitle>流量词匹配性能</CardTitle>
            </CardHeader>
            <CardContent className="pt-0">
              <div className="h-[300px] flex items-center justify-center">
                <p className="text-muted-foreground">图表功能已移除</p>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/traffic-pool/user-tag-mapping.tsx" isMoved="true" isMovedFrom="components/traffic-keywords/user-tag-mapping.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { PlusCircle, Search, Tag, ArrowRight } from "lucide-react"

interface TagMapping {
  id: string
  keywordId: string
  keyword: string
  tagId: string
  tagName: string
  tagCategory: string
  matchRule: string
  priority: number
  createdAt: Date
  status: "active" | "inactive"
}

export function UserTagMapping() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedMappings, setSelectedMappings] = useState<string[]>([])

// 模拟数据
  const mappings: TagMapping[] = [
    {
      id: "1",
      keywordId: "1",
      keyword: "数字营销",
      tagId: "101",
      tagName: "营销决策者",
      tagCategory: "职业角色",
      matchRule: "精确匹配",
      priority: 1,
      createdAt: new Date(2023, 5, 15),
      status: "active",
    },
    {
      id: "2",
      keywordId: "2",
      keyword: "用户画像",
      tagId: "102",
      tagName: "数据分析师",
      tagCategory: "职业角色",
      matchRule: "包含匹配",
      priority: 2,
      createdAt: new Date(2023, 4, 10),
      status: "active",
    },
    {
      id: "3",
      keywordId: "3",
      keyword: "流量获取",
      tagId: "103",
      tagName: "营销专员",
      tagCategory: "职业角色",
      matchRule: "精确匹配",
      priority: 3,
      createdAt: new Date(2023, 3, 5),
      status: "active",
    },
    {
      id: "4",
      keywordId: "4",
      keyword: "数据可视化",
      tagId: "104",
      tagName: "技术人员",
      tagCategory: "职业角色",
      matchRule: "包含匹配",
      priority: 2,
      createdAt: new Date(2023, 2, 20),
      status: "inactive",
    },
    {
      id: "5",
      keywordId: "5",
      keyword: "精准营销",
      tagId: "105",
      tagName: "营销经理",
      tagCategory: "职业角色",
      matchRule: "精确匹配",
      priority: 1,
      createdAt: new Date(2023, 1, 15),
      status: "active",
    },
  ]

// 过滤映射
  const filteredMappings = mappings.filter(
    (mapping) =>
      mapping.keyword.toLowerCase().includes(searchQuery.toLowerCase()) ||
      mapping.tagName.toLowerCase().includes(searchQuery.toLowerCase()) ||
      mapping.tagCategory.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const toggleSelectAll = () => {
    if (selectedMappings.length === filteredMappings.length) {
      setSelectedMappings([])
    } else {
      setSelectedMappings(filteredMappings.map((m) => m.id))
    }
  }

const toggleSelectMapping = (id: string) => {
    if (selectedMappings.includes(id)) {
      setSelectedMappings(selectedMappings.filter((m) => m !== id))
    } else {
      setSelectedMappings([...selectedMappings, id])
    }
  }

const formatDate = (date: Date) => {
    return date.toLocaleDateString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    })
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-semibold">用户标签映射</h2>
        <Button>
          <PlusCircle className="mr-2 h-4 w-4" />
          创建新映射
        </Button>
      </div>

<Card>
        <CardHeader>
          <CardTitle>流量词与用户标签映射规则</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex justify-between items-center">
              <div className="flex space-x-2">
                <Select defaultValue="all">
                  <SelectTrigger className="w-[150px]">
                    <SelectValue placeholder="状态" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部状态</SelectItem>
                    <SelectItem value="active">已启用</SelectItem>
                    <SelectItem value="inactive">已禁用</SelectItem>
                  </SelectContent>
                </Select>
                <Select defaultValue="all">
                  <SelectTrigger className="w-[150px]">
                    <SelectValue placeholder="标签分类" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部分类</SelectItem>
                    <SelectItem value="role">职业角色</SelectItem>
                    <SelectItem value="interest">兴趣爱好</SelectItem>
                    <SelectItem value="behavior">行为特征</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="relative w-64">
                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="搜索关键词或标签..."
                  className="pl-8"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
            </div>

{selectedMappings.length > 0 && (
              <div className="bg-muted p-2 rounded-md flex items-center justify-between">
                <span className="text-sm">已选择 {selectedMappings.length} 项</span>
                <div className="space-x-2">
                  <Button variant="outline" size="sm">
                    启用
                  </Button>
                  <Button variant="outline" size="sm">
                    禁用
                  </Button>
                  <Button variant="outline" size="sm" className="text-red-500">
                    删除
                  </Button>
                </div>
              </div>
            )}

<div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-12">
                      <Checkbox
                        checked={selectedMappings.length === filteredMappings.length && filteredMappings.length > 0}
                        onCheckedChange={toggleSelectAll}
                        aria-label="Select all"
                      />
                    </TableHead>
                    <TableHead>流量词</TableHead>
                    <TableHead className="w-12 text-center">映射</TableHead>
                    <TableHead>用户标签</TableHead>
                    <TableHead>标签分类</TableHead>
                    <TableHead>匹配规则</TableHead>
                    <TableHead>优先级</TableHead>
                    <TableHead>创建时间</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead className="text-right">操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {filteredMappings.map((mapping) => (
                    <TableRow key={mapping.id}>
                      <TableCell>
                        <Checkbox
                          checked={selectedMappings.includes(mapping.id)}
                          onCheckedChange={() => toggleSelectMapping(mapping.id)}
                          aria-label={`Select ${mapping.keyword} to ${mapping.tagName} mapping`}
                        />
                      </TableCell>
                      <TableCell className="font-medium">{mapping.keyword}</TableCell>
                      <TableCell className="text-center">
                        <ArrowRight className="h-4 w-4 mx-auto" />
                      </TableCell>
                      <TableCell>
                        <Badge variant="outline" className="font-normal">
                          <Tag className="mr-1 h-3 w-3" />
                          {mapping.tagName}
                        </Badge>
                      </TableCell>
                      <TableCell>{mapping.tagCategory}</TableCell>
                      <TableCell>{mapping.matchRule}</TableCell>
                      <TableCell>{mapping.priority}</TableCell>
                      <TableCell>{formatDate(mapping.createdAt)}</TableCell>
                      <TableCell>
                        <Badge
                          variant={mapping.status === "active" ? "default" : "secondary"}
                          className={mapping.status === "active" ? "bg-green-500" : ""}
                        >
                          {mapping.status === "active" ? "已启用" : "已禁用"}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-right">
                        <Button variant="ghost" size="sm">
                          编辑
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api-interface/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import { toast } from "@/components/ui/use-toast"
import { useRouter } from "next/navigation"

interface ApiInterface {
  id: string
  name: string
  endpoint: string
  method: string
  status: "active" | "inactive" | "deprecated"
  stats: {
    totalCalls: number
    successCalls: number
    errorCalls: number
    successRate: number
    avgResponseTime: number
  }
  lastUpdated: string
  trend: { date: string; calls: number; success: number; responseTime: number }[]
  description: string
  authentication: string
}

export default function ApiInterfacePage() {
  const router = useRouter()
  const [apis, setApis] = useState<ApiInterface[]>([
    {
      id: "1",
      name: "用户数据查询接口",
      endpoint: "/api/users/query",
      method: "GET",
      status: "active",
      stats: {
        totalCalls: 1245632,
        successCalls: 1220578,
        errorCalls: 25054,
        successRate: 98,
        avgResponseTime: 120,
      },
      lastUpdated: "2023-07-15 14:30",
      trend: Array.from({ length: 7 }, (_, i) => ({
        date: `2023-07-${String(i + 9).padStart(2, "0")}`,
        calls: Math.floor(Math.random() * 20000) + 150000,
        success: Math.floor(Math.random() * 18000) + 145000,
        responseTime: Math.floor(Math.random() * 50) + 100,
      })),
      description: "查询用户基本信息、标签和行为数据",
      authentication: "API Key",
    },
    {
      id: "2",
      name: "用户标签更新接口",
      endpoint: "/api/users/tags/update",
      method: "POST",
      status: "active",
      stats: {
        totalCalls: 856421,
        successCalls: 845789,
        errorCalls: 10632,
        successRate: 99,
        avgResponseTime: 150,
      },
      lastUpdated: "2023-07-15 13:45",
      trend: Array.from({ length: 7 }, (_, i) => ({
        date: `2023-07-${String(i + 9).padStart(2, "0")}`,
        calls: Math.floor(Math.random() * 15000) + 100000,
        success: Math.floor(Math.random() * 14000) + 98000,
        responseTime: Math.floor(Math.random() * 40) + 130,
      })),
      description: "更新用户标签信息",
      authentication: "OAuth 2.0",
    },
    {
      id: "3",
      name: "用户行为分析接口",
      endpoint: "/api/analytics/user-behavior",
      method: "GET",
      status: "active",
      stats: {
        totalCalls: 542367,
        successCalls: 538945,
        errorCalls: 3422,
        successRate: 99.5,
        avgResponseTime: 180,
      },
      lastUpdated: "2023-07-15 12:20",
      trend: Array.from({ length: 7 }, (_, i) => ({
        date: `2023-07-${String(i + 9).padStart(2, "0")}`,
        calls: Math.floor(Math.random() * 10000) + 70000,
        success: Math.floor(Math.random() * 9800) + 69000,
        responseTime: Math.floor(Math.random() * 30) + 170,
      })),
      description: "获取用户行为分析数据",
      authentication: "API Key",
    },
  ])

const [isApiDocsOpen, setIsApiDocsOpen] = useState(false)
  const [selectedApiId, setSelectedApiId] = useState<string | null>(null)
  const [searchQuery, setSearchQuery] = useState("")

const handleViewDocs = (apiId: string) => {
    setSelectedApiId(apiId)
    setIsApiDocsOpen(true)
  }

const copyApi = (apiId: string) => {
    const apiToCopy = apis.find((api) => api.id === apiId)
    if (apiToCopy) {
      const newApi = {
        ...apiToCopy,
        id: `${Date.now()}`,
        name: `${apiToCopy.name} (副本)`,
        status: "inactive" as const,
        lastUpdated: new Date().toLocaleString(),
      }
      setApis([...apis, newApi])
      toast({
        title: "复制成功",
        description: "已创建接口副本",
      })
    }
  }

const selectedApi = apis.find((api) => api.id === selectedApiId)

return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center gap-2">
        <Button variant="ghost" size="icon" onClick={() => router.push("/data-platform")}>
          <ArrowLeft className="h-5 w-5" />
        </Button>
        <h1 className="text-3xl font-bold">API接口已整合</h1>
      </div>

<Card className="border shadow-md">
        <CardHeader>
          <CardTitle>API接口已整合到数据中台</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="mb-4">API接口功能已经整合到数据中台中，请前往数据中台页面查看和管理API接口。</p>
          <Button onClick={() => router.push("/data-platform")}>前往数据中台</Button>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api-interface/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/user-portrait/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="services/user-portrait-service.ts" isMerged="true"
import type { UserPortrait, UserCategory, UserTag, UserSegment } from "@/types/user-portrait"

// 模拟用户数据
export const getUsers = (): UserPortrait[] => {
  return [
    {
      id: "1",
      name: "张三",
      nickname: "小张",
      phone: "13812345678",
      imei: "123456789012345",
      idNumber: "310************123",
      source: "微信",
      sourceDetail: "朋友圈广告",
      registerDate: "2023-05-15",
      lastActive: "2023-07-20",
      value: "high",
      spendingCapacity: "高",
      spendingLevel: "A",
      spendingAmount: "¥15,000",
      address: "上海市浦东新区张江高科技园区",
      tags: ["潜在客户", "对产品感兴趣", "高消费", "科技爱好者"],
      status: "active",
      entryPoint: "首页Banner",
      behavior: ["浏览产品", "加入购物车", "咨询客服", "分享商品"],
    },
    {
      id: "2",
      name: "李四",
      nickname: "阿四",
      phone: "13987654321",
      imei: "987654321098765",
      idNumber: "440************456",
      source: "抖音",
      sourceDetail: "短视频推广",
      registerDate: "2023-04-10",
      lastActive: "2023-07-18",
      value: "medium",
      spendingCapacity: "中",
      spendingLevel: "B",
      spendingAmount: "¥8,500",
      address: "广州市天河区珠江新城",
      tags: ["新用户", "已咨询", "中等消费", "时尚爱好者"],
      status: "active",
      entryPoint: "推荐页",
      behavior: ["浏览产品", "收藏商品", "比较价格"],
    },
    {
      id: "3",
      name: "王五",
      nickname: "老王",
      phone: "13765432198",
      imei: "456789012345678",
      idNumber: "110************789",
      source: "小红书",
      sourceDetail: "博主推荐",
      registerDate: "2023-03-05",
      lastActive: "2023-05-25",
      value: "low",
      spendingCapacity: "低",
      spendingLevel: "C",
      spendingAmount: "¥3,200",
      address: "北京市朝阳区三里屯",
      tags: ["已购买", "需要跟进", "低消费", "美妆爱好者"],
      status: "inactive",
      entryPoint: "搜索结果",
      behavior: ["浏览产品", "查看评价", "放弃购买"],
    },
    {
      id: "4",
      name: "赵六",
      nickname: "六子",
      phone: "13654321987",
      imei: "789012345678901",
      idNumber: "510************012",
      source: "官网",
      sourceDetail: "搜索引擎",
      registerDate: "2023-02-20",
      lastActive: "2023-07-19",
      value: "high",
      spendingCapacity: "高",
      spendingLevel: "A+",
      spendingAmount: "¥25,000",
      address: "成都市高新区天府大道",
      tags: ["VIP客户", "高频购买", "高消费", "数码爱好者"],
      status: "active",
      entryPoint: "直接访问",
      behavior: ["浏览产品", "购买商品", "评价商品", "推荐给朋友"],
    },
    {
      id: "5",
      name: "钱七",
      nickname: "钱多多",
      phone: "13543219876",
      imei: "890123456789012",
      idNumber: "330************345",
      source: "微信",
      sourceDetail: "公众号推文",
      registerDate: "2023-01-15",
      lastActive: "2023-04-10",
      value: "medium",
      spendingCapacity: "中",
      spendingLevel: "B+",
      spendingAmount: "¥12,000",
      address: "杭州市西湖区文三路",
      tags: ["已流失", "需要挽回", "中等消费", "旅游爱好者"],
      status: "lost",
      entryPoint: "活动页面",
      behavior: ["浏览产品", "加入购物车", "放弃购买"],
    },
  ]
}

// 获取用户分类
export const getUserCategories = (): UserCategory[] => {
  return [
    {
      id: "1",
      name: "高价值用户",
      description: "消费能力强，购买频率高的用户",
      count: 32456,
      criteria: [{ field: "value", operator: "equals", value: "high" }],
    },
    {
      id: "2",
      name: "活跃用户",
      description: "近30天内有活动的用户",
      count: 78452,
      criteria: [{ field: "status", operator: "equals", value: "active" }],
    },
    {
      id: "3",
      name: "流失风险用户",
      description: "30-90天未活动的用户",
      count: 15689,
      criteria: [{ field: "status", operator: "equals", value: "inactive" }],
    },
    {
      id: "4",
      name: "已流失用户",
      description: "90天以上未活动的用户",
      count: 8765,
      criteria: [{ field: "status", operator: "equals", value: "lost" }],
    },
  ]
}

// 获取用户标签
export const getUserTags = (): UserTag[] => {
  return [
    {
      id: "1",
      name: "高消费",
      category: "消费能力",
      count: 32456,
      description: "月均消费金额超过10000元的用户",
    },
    {
      id: "2",
      name: "科技爱好者",
      category: "兴趣爱好",
      count: 45678,
      description: "对科技产品有浓厚兴趣的用户",
    },
    {
      id: "3",
      name: "时尚爱好者",
      category: "兴趣爱好",
      count: 38765,
      description: "对时尚产品有浓厚兴趣的用户",
    },
    {
      id: "4",
      name: "美妆爱好者",
      category: "兴趣爱好",
      count: 42345,
      description: "对美妆产品有浓厚兴趣的用户",
    },
    {
      id: "5",
      name: "数码爱好者",
      category: "兴趣爱好",
      count: 36789,
      description: "对数码产品有浓厚兴趣的用户",
    },
    {
      id: "6",
      name: "旅游爱好者",
      category: "兴趣爱好",
      count: 28976,
      description: "对旅游产品有浓厚兴趣的用户",
    },
  ]
}

// 获取用户分群
export const getUserSegments = (): UserSegment[] => {
  return [
    {
      id: "1",
      name: "高价值潜在客户",
      description: "高消费能力但尚未购买的用户",
      count: 12456,
      criteria: [
        { field: "value", operator: "equals", value: "high" },
        { field: "tags", operator: "contains", value: "潜在客户" },
      ],
    },
    {
      id: "2",
      name: "高频购买VIP",
      description: "高频次购买的VIP用户",
      count: 8765,
      criteria: [
        { field: "value", operator: "equals", value: "high" },
        { field: "tags", operator: "contains", value: "VIP客户" },
      ],
    },
    {
      id: "3",
      name: "流失风险高价值",
      description: "有流失风险的高价值用户",
      count: 3456,
      criteria: [
        { field: "value", operator: "equals", value: "high" },
        { field: "status", operator: "equals", value: "inactive" },
      ],
    },
    {
      id: "4",
      name: "待挽回用户",
      description: "已流失但有挽回价值的用户",
      count: 5678,
      criteria: [
        { field: "status", operator: "equals", value: "lost" },
        { field: "tags", operator: "contains", value: "需要挽回" },
      ],
    },
  ]
}
[V0_FILE]typescriptreact:file="components/user-portrait/tag-management.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { PlusCircle, Search, Tag, Edit, Trash2, Users } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

interface UserTag {
  id: string
  name: string
  category: string
  description: string
  userCount: number
  source: string
  createdAt: Date
  updatedAt: Date
}

export function TagManagement() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedCategory, setSelectedCategory] = useState("all")
  const [selectedSource, setSelectedSource] = useState("all")

// 模拟数据
  const tags: UserTag[] = [
    {
      id: "1",
      name: "高价值客户",
      category: "价值分类",
      description: "消费金额高且频次高的用户",
      userCount: 2450,
      source: "系统生成",
      createdAt: new Date(2023, 5, 15),
      updatedAt: new Date(2023, 6, 20),
    },
    {
      id: "2",
      name: "数据分析师",
      category: "职业角色",
      description: "从事数据分析工作的用户",
      userCount: 980,
      source: "流量词映射",
      createdAt: new Date(2023, 4, 10),
      updatedAt: new Date(2023, 6, 18),
    },
    {
      id: "3",
      name: "营销决策者",
      category: "职业角色",
      description: "负责营销决策的管理人员",
      userCount: 645,
      source: "流量词映射",
      createdAt: new Date(2023, 3, 5),
      updatedAt: new Date(2023, 5, 25),
    },
    {
      id: "4",
      name: "技术爱好者",
      category: "兴趣爱好",
      description: "对技术有浓厚兴趣的用户",
      userCount: 1520,
      source: "行为分析",
      createdAt: new Date(2023, 2, 20),
      updatedAt: new Date(2023, 6, 19),
    },
    {
      id: "5",
      name: "活跃用户",
      category: "活跃度",
      description: "每周登录3次以上的用户",
      userCount: 8600,
      source: "系统生成",
      createdAt: new Date(2023, 1, 15),
      updatedAt: new Date(2023, 4, 10),
    },
    {
      id: "6",
      name: "上海市",
      category: "位置信息",
      description: "位于上海市的用户",
      userCount: 5200,
      source: "消费行为",
      createdAt: new Date(2023, 3, 10),
      updatedAt: new Date(2023, 6, 15),
    },
    {
      id: "7",
      name: "牛排",
      category: "菜品偏好",
      description: "喜欢牛排的用户",
      userCount: 3800,
      source: "消费行为",
      createdAt: new Date(2023, 4, 5),
      updatedAt: new Date(2023, 6, 12),
    },
    {
      id: "8",
      name: "晚餐",
      category: "消费时段",
      description: "晚餐时段消费的用户",
      userCount: 7500,
      source: "消费行为",
      createdAt: new Date(2023, 2, 15),
      updatedAt: new Date(2023, 5, 20),
    },
    {
      id: "9",
      name: "周末消费",
      category: "消费习惯",
      description: "周末消费的用户",
      userCount: 6200,
      source: "消费行为",
      createdAt: new Date(2023, 3, 20),
      updatedAt: new Date(2023, 6, 10),
    },
    {
      id: "10",
      name: "高端餐厅",
      category: "消费场所",
      description: "在高端餐厅消费的用户",
      userCount: 2900,
      source: "消费行为",
      createdAt: new Date(2023, 4, 25),
      updatedAt: new Date(2023, 6, 5),
    },
  ]

// 过滤标签
  const filteredTags = tags.filter((tag) => {
    // 搜索过滤
    const searchMatch =
      tag.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      tag.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
      tag.description.toLowerCase().includes(searchQuery.toLowerCase())

// 分类过滤
    const categoryMatch = selectedCategory === "all" || tag.category === selectedCategory

// 来源过滤
    const sourceMatch = selectedSource === "all" || tag.source === selectedSource

return searchMatch && categoryMatch && sourceMatch
  })

const formatDate = (date: Date) => {
    return date.toLocaleDateString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    })
  }

return (
    <Card className="border-none shadow-md overflow-hidden">
      <CardHeader className="bg-gradient-to-r from-green-50 to-teal-50 border-b">
        <div className="flex justify-between items-center">
          <div>
            <CardTitle>用户标签管理</CardTitle>
            <CardDescription>管理系统中的用户标签</CardDescription>
          </div>
        </div>
      </CardHeader>
      <CardContent className="p-4">
        <div className="space-y-6">
          <div className="flex justify-between items-center">
            <h2 className="text-xl font-semibold">用户标签体系</h2>
            <Button>
              <PlusCircle className="mr-2 h-4 w-4" />
              创建新标签
            </Button>
          </div>

<div className="flex justify-between items-center">
            <div className="flex space-x-2">
              <Select value={selectedCategory} onValueChange={setSelectedCategory}>
                <SelectTrigger className="w-[150px]">
                  <SelectValue placeholder="标签分类" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部分类</SelectItem>
                  <SelectItem value="价值分类">价值分类</SelectItem>
                  <SelectItem value="职业角色">职业角色</SelectItem>
                  <SelectItem value="兴趣爱好">兴趣爱好</SelectItem>
                  <SelectItem value="活跃度">活跃度</SelectItem>
                  <SelectItem value="位置信息">位置信息</SelectItem>
                  <SelectItem value="菜品偏好">菜品偏好</SelectItem>
                  <SelectItem value="消费时段">消费时段</SelectItem>
                  <SelectItem value="消费习惯">消费习惯</SelectItem>
                  <SelectItem value="消费场所">消费场所</SelectItem>
                </SelectContent>
              </Select>
              <Select value={selectedSource} onValueChange={setSelectedSource}>
                <SelectTrigger className="w-[150px]">
                  <SelectValue placeholder="标签来源" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部来源</SelectItem>
                  <SelectItem value="系统生成">系统生成</SelectItem>
                  <SelectItem value="流量词映射">流量词映射</SelectItem>
                  <SelectItem value="行为分析">行为分析</SelectItem>
                  <SelectItem value="消费行为">消费行为</SelectItem>
                  <SelectItem value="手动创建">手动创建</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="relative w-64">
              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="搜索标签..."
                className="pl-8"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
          </div>

<div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>标签名称</TableHead>
                  <TableHead>分类</TableHead>
                  <TableHead>描述</TableHead>
                  <TableHead>用户数量</TableHead>
                  <TableHead>来源</TableHead>
                  <TableHead>创建时间</TableHead>
                  <TableHead>更新时间</TableHead>
                  <TableHead className="text-right">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredTags.map((tag) => (
                  <TableRow key={tag.id}>
                    <TableCell>
                      <div className="flex items-center">
                        <Tag className="h-4 w-4 mr-2 text-muted-foreground" />
                        <span className="font-medium">{tag.name}</span>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge variant="outline">{tag.category}</Badge>
                    </TableCell>
                    <TableCell>{tag.description}</TableCell>
                    <TableCell>
                      <div className="flex items-center">
                        <Users className="h-4 w-4 mr-1 text-muted-foreground" />
                        {tag.userCount.toLocaleString()}
                      </div>
                    </TableCell>
                    <TableCell>{tag.source}</TableCell>
                    <TableCell>{formatDate(tag.createdAt)}</TableCell>
                    <TableCell>{formatDate(tag.updatedAt)}</TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end space-x-2">
                        <Button variant="ghost" size="icon">
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button variant="ghost" size="icon" className="text-red-500">
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/user-portrait/tags/page.tsx" isMerged="true"
import { TagManagement } from "@/components/user-portrait/tag-management"

export default function TagManagementPage() {
  return (
    <div className="container mx-auto p-4 space-y-6">
      <h1 className="text-3xl font-bold">标签管理</h1>
      <p className="text-muted-foreground">管理用户标签体系，包括行为标签、场景标签和用户分群</p>

<TagManagement />
    </div>
  )
}
[V0_FILE]typescript:file="services/data-analysis-service.ts" isFixed="true" isQuickEdit="true" isMerged="true"
import type {
  UserRFMData,
  RFMAnalysisResult,
  UserFilterOptions,
  DataComparisonResult,
  UserSegment,
} from "@/types/data-analysis"

// 模拟用户RFM数据
export const getUserRFMData = (): UserRFMData[] => {
  return [
    {
      userId: "1",
      userName: "张三",
      phone: "13812345678",
      lastPurchaseDate: "2023-07-15",
      purchaseFrequency: 12,
      totalSpent: 15800,
      rfmScore: {
        recency: 5,
        frequency: 5,
        monetary: 5,
        totalScore: 15,
      },
      segment: "高价值活跃用户",
      valueEstimation: 3200,
    },
    {
      userId: "2",
      userName: "李四",
      phone: "13987654321",
      lastPurchaseDate: "2023-06-20",
      purchaseFrequency: 8,
      totalSpent: 9500,
      rfmScore: {
        recency: 4,
        frequency: 4,
        monetary: 4,
        totalScore: 12,
      },
      segment: "中价值活跃用户",
      valueEstimation: 1800,
    },
    {
      userId: "3",
      userName: "王五",
      phone: "13765432198",
      lastPurchaseDate: "2023-04-10",
      purchaseFrequency: 3,
      totalSpent: 3200,
      rfmScore: {
        recency: 2,
        frequency: 2,
        monetary: 3,
        totalScore: 7,
      },
      segment: "低价值流失风险用户",
      valueEstimation: 650,
    },
    {
      userId: "4",
      userName: "赵六",
      phone: "13654321987",
      lastPurchaseDate: "2023-07-18",
      purchaseFrequency: 15,
      totalSpent: 25000,
      rfmScore: {
        recency: 5,
        frequency: 5,
        monetary: 5,
        totalScore: 15,
      },
      segment: "高价值活跃用户",
      valueEstimation: 4500,
    },
    {
      userId: "5",
      userName: "钱七",
      phone: "13543219876",
      lastPurchaseDate: "2023-03-15",
      purchaseFrequency: 6,
      totalSpent: 12000,
      rfmScore: {
        recency: 1,
        frequency: 3,
        monetary: 4,
        totalScore: 8,
      },
      segment: "中价值沉睡用户",
      valueEstimation: 1200,
    },
    {
      userId: "6",
      userName: "孙八",
      phone: "13432198765",
      lastPurchaseDate: "2023-07-10",
      purchaseFrequency: 4,
      totalSpent: 5800,
      rfmScore: {
        recency: 4,
        frequency: 3,
        monetary: 3,
        totalScore: 10,
      },
      segment: "中价值活跃用户",
      valueEstimation: 950,
    },
    {
      userId: "7",
      userName: "周九",
      phone: "13321987654",
      lastPurchaseDate: "2023-05-25",
      purchaseFrequency: 2,
      totalSpent: 2500,
      rfmScore: {
        recency: 3,
        frequency: 2,
        monetary: 2,
        totalScore: 7,
      },
      segment: "低价值流失风险用户",
      valueEstimation: 480,
    },
    {
      userId: "8",
      userName: "吴十",
      phone: "13219876543",
      lastPurchaseDate: "2023-07-20",
      purchaseFrequency: 10,
      totalSpent: 18000,
      rfmScore: {
        recency: 5,
        frequency: 4,
        monetary: 5,
        totalScore: 14,
      },
      segment: "高价值活跃用户",
      valueEstimation: 3600,
    },
    {
      userId: "9",
      userName: "郑十一",
      phone: "13198765432",
      lastPurchaseDate: "2023-02-10",
      purchaseFrequency: 5,
      totalSpent: 8000,
      rfmScore: {
        recency: 1,
        frequency: 3,
        monetary: 3,
        totalScore: 7,
      },
      segment: "中价值沉睡用户",
      valueEstimation: 850,
    },
    {
      userId: "10",
      userName: "王十二",
      phone: "13098765432",
      lastPurchaseDate: "2023-07-05",
      purchaseFrequency: 7,
      totalSpent: 13500,
      rfmScore: {
        recency: 4,
        frequency: 4,
        monetary: 4,
        totalScore: 12,
      },
      segment: "中价值活跃用户",
      valueEstimation: 2200,
    },
  ]
}

// 定义分群分布的类型
interface SegmentDistribution {
  segment: UserSegment
  count: number
  percentage: number
}

// 分析RFM数据
export const analyzeRFMData = (data: UserRFMData[]): RFMAnalysisResult => {
  const userCount = data.length

// 计算平均值
  const averageRecency = data.reduce((sum, user) => sum + user.rfmScore.recency, 0) / userCount
  const averageFrequency = data.reduce((sum, user) => sum + user.rfmScore.frequency, 0) / userCount
  const averageMonetary = data.reduce((sum, user) => sum + user.rfmScore.monetary, 0) / userCount

// 计算总估值和平均估值
  const totalValueEstimation = data.reduce((sum, user) => sum + user.valueEstimation, 0)
  const averageValueEstimation = totalValueEstimation / userCount

// 计算分群分布
  const segmentCounts: Record<UserSegment, number> = {} as Record<UserSegment, number>
  data.forEach((user) => {
    segmentCounts[user.segment] = (segmentCounts[user.segment] || 0) + 1
  })

const segmentDistribution: SegmentDistribution[] = Object.entries(segmentCounts)
    .map(([segment, count]) => ({
      segment: segment as UserSegment,
      count,
      percentage: (count / userCount) * 100,
    }))
    .sort((a, b) => b.count - a.count)

return {
    userCount,
    averageRecency,
    averageFrequency,
    averageMonetary,
    segmentDistribution,
    totalValueEstimation,
    averageValueEstimation,
  }
}

// 过滤用户数据
export const filterUserData = (data: UserRFMData[], options: UserFilterOptions): UserRFMData[] => {
  return data.filter((user) => {
    // 分群过滤
    if (options.segments.length > 0 && !options.segments.includes(user.segment)) {
      return false
    }

// 日期范围过滤
    if (options.dateRange.start && options.dateRange.end) {
      const userDate = new Date(user.lastPurchaseDate)
      const startDate = new Date(options.dateRange.start)
      const endDate = new Date(options.dateRange.end)
      if (userDate < startDate || userDate > endDate) {
        return false
      }
    }

// 价值范围过滤
    if (options.valueRange.min !== undefined && options.valueRange.max !== undefined) {
      if (user.valueEstimation < options.valueRange.min || user.valueEstimation > options.valueRange.max) {
        return false
      }
    }

return true
  })
}

// 比较两个时间段的数据
export const compareDataPeriods = (beforeData: UserRFMData[], afterData: UserRFMData[]): DataComparisonResult[] => {
  const segments: UserSegment[] = [
    "高价值活跃用户",
    "高价值流失风险用户",
    "高价值沉睡用户",
    "中价值活跃用户",
    "中价值流失风险用户",
    "中价值沉睡用户",
    "低价值活跃用户",
    "低价值流失风险用户",
    "低价值沉睡用户",
    "新用户",
  ]

return segments
    .map((segment) => {
      const beforeSegment = beforeData.filter((user) => user.segment === segment)
      const afterSegment = afterData.filter((user) => user.segment === segment)

const beforeCount = beforeSegment.length
      const afterCount = afterSegment.length

const beforeValue = beforeSegment.reduce((sum, user) => sum + user.valueEstimation, 0)
      const afterValue = afterSegment.reduce((sum, user) => sum + user.valueEstimation, 0)

const changePercentage =
        beforeCount === 0 ? (afterCount === 0 ? 0 : 100) : ((afterCount - beforeCount) / beforeCount) * 100

const valueChangePercentage =
        beforeValue === 0 ? (afterValue === 0 ? 0 : 100) : ((afterValue - beforeValue) / beforeValue) * 100

return {
        segment,
        beforeCount,
        afterCount,
        changePercentage,
        beforeValue,
        afterValue,
        valueChangePercentage,
      }
    })
    .filter((result) => result.beforeCount > 0 || result.afterCount > 0)
}
[V0_FILE]typescriptreact:file="components/data-analysis/user-selector.tsx" isMerged="true"
"use client"

import { useState } from "react"
import type { UserRFMData, UserSegment, UserFilterOptions } from "@/types/data-analysis"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Search, Filter, RefreshCw, UserPlus, Download } from "lucide-react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

interface UserSelectorProps {
  users: UserRFMData[]
  selectedUsers: string[]
  onSelectUser: (userId: string) => void
  onSelectAll: (selected: boolean) => void
  onFilterChange: (options: UserFilterOptions) => void
  filterOptions: UserFilterOptions
}

export function UserSelector({
  users,
  selectedUsers,
  onSelectUser,
  onSelectAll,
  onFilterChange,
  filterOptions,
}: UserSelectorProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [showFilters, setShowFilters] = useState(false)

// 本地过滤用户（搜索功能）
  const filteredUsers = users.filter(
    (user) =>
      user.userName.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.phone.includes(searchQuery) ||
      user.segment.toLowerCase().includes(searchQuery.toLowerCase()),
  )

// 处理分群选择
  const handleSegmentChange = (segment: UserSegment, checked: boolean) => {
    let newSegments = [...filterOptions.segments]
    if (checked) {
      newSegments.push(segment)
    } else {
      newSegments = newSegments.filter((s) => s !== segment)
    }
    onFilterChange({ ...filterOptions, segments: newSegments })
  }

// 处理日期范围变更
  const handleDateRangeChange = (field: "start" | "end", value: string) => {
    onFilterChange({
      ...filterOptions,
      dateRange: {
        ...filterOptions.dateRange,
        [field]: value,
      },
    })
  }

// 处理价值范围变更
  const handleValueRangeChange = (field: "min" | "max", value: string) => {
    onFilterChange({
      ...filterOptions,
      valueRange: {
        ...filterOptions.valueRange,
        [field]: Number.parseInt(value) || 0,
      },
    })
  }

// 获取用户分群的颜色
  const getSegmentColor = (segment: string) => {
    if (segment.includes("高价值")) return "bg-green-100 text-green-800"
    if (segment.includes("中价值")) return "bg-blue-100 text-blue-800"
    if (segment.includes("低价值")) return "bg-gray-100 text-gray-800"
    return "bg-purple-100 text-purple-800" // 新用户
  }

return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-center">
          <CardTitle>用户选择</CardTitle>
          <div className="flex space-x-2">
            <Button variant="outline" size="sm" onClick={() => setShowFilters(!showFilters)}>
              <Filter className="h-4 w-4 mr-2" />
              筛选
            </Button>
            <Button variant="outline" size="sm">
              <RefreshCw className="h-4 w-4 mr-2" />
              刷新
            </Button>
            <Button variant="outline" size="sm">
              <Download className="h-4 w-4 mr-2" />
              导出
            </Button>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        {/* 搜索栏 */}
        <div className="mb-4 relative">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            type="text"
            placeholder="搜索用户名、手机号、分群..."
            className="pl-8"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>

{/* 筛选面板 */}
        {showFilters && (
          <div className="mb-6 p-4 border rounded-md bg-gray-50">
            <h3 className="text-sm font-medium mb-3">高级筛选</h3>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {/* 分群筛选 */}
              <div>
                <h4 className="text-xs font-medium mb-2">用户分群</h4>
                <div className="space-y-2">
                  {[
                    "高价值活跃用户",
                    "高价值流失风险用户",
                    "高价值沉睡用户",
                    "中价值活跃用户",
                    "中价值流失风险用户",
                    "中价值沉睡用户",
                    "低价值活跃用户",
                    "低价值流失风险用户",
                    "低价值沉睡用户",
                    "新用户",
                  ].map((segment) => (
                    <div key={segment} className="flex items-center space-x-2">
                      <Checkbox
                        id={`segment-${segment}`}
                        checked={filterOptions.segments.includes(segment as UserSegment)}
                        onCheckedChange={(checked) => handleSegmentChange(segment as UserSegment, checked as boolean)}
                      />
                      <Label htmlFor={`segment-${segment}`} className="text-xs">
                        {segment}
                      </Label>
                    </div>
                  ))}
                </div>
              </div>

{/* 日期范围筛选 */}
              <div>
                <h4 className="text-xs font-medium mb-2">最后购买日期</h4>
                <div className="space-y-2">
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <Label htmlFor="date-start" className="text-xs">
                        开始日期
                      </Label>
                      <Input
                        id="date-start"
                        type="date"
                        value={filterOptions.dateRange.start}
                        onChange={(e) => handleDateRangeChange("start", e.target.value)}
                        className="text-xs"
                      />
                    </div>
                    <div>
                      <Label htmlFor="date-end" className="text-xs">
                        结束日期
                      </Label>
                      <Input
                        id="date-end"
                        type="date"
                        value={filterOptions.dateRange.end}
                        onChange={(e) => handleDateRangeChange("end", e.target.value)}
                        className="text-xs"
                      />
                    </div>
                  </div>
                </div>
              </div>

{/* 价值范围筛选 */}
              <div>
                <h4 className="text-xs font-medium mb-2">用户估值范围</h4>
                <div className="space-y-2">
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <Label htmlFor="value-min" className="text-xs">
                        最小值
                      </Label>
                      <Input
                        id="value-min"
                        type="number"
                        value={filterOptions.valueRange.min}
                        onChange={(e) => handleValueRangeChange("min", e.target.value)}
                        className="text-xs"
                      />
                    </div>
                    <div>
                      <Label htmlFor="value-max" className="text-xs">
                        最大值
                      </Label>
                      <Input
                        id="value-max"
                        type="number"
                        value={filterOptions.valueRange.max}
                        onChange={(e) => handleValueRangeChange("max", e.target.value)}
                        className="text-xs"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>

<div className="flex justify-end mt-4">
              <Button
                variant="outline"
                size="sm"
                className="mr-2"
                onClick={() =>
                  onFilterChange({
                    segments: [],
                    dateRange: { start: "", end: "" },
                    valueRange: { min: 0, max: 0 },
                    sources: [],
                  })
                }
              >
                重置
              </Button>
              <Button size="sm">应用筛选</Button>
            </div>
          </div>
        )}

{/* 用户表格 */}
        <div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-12">
                  <Checkbox
                    checked={selectedUsers.length === filteredUsers.length && filteredUsers.length > 0}
                    onCheckedChange={(checked) => onSelectAll(!!checked)}
                  />
                </TableHead>
                <TableHead>用户名</TableHead>
                <TableHead>手机号</TableHead>
                <TableHead>最后购买</TableHead>
                <TableHead>购买频率</TableHead>
                <TableHead>消费总额</TableHead>
                <TableHead>RFM得分</TableHead>
                <TableHead>用户分群</TableHead>
                <TableHead>估值</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredUsers.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={9} className="text-center py-4">
                    没有找到匹配的用户
                  </TableCell>
                </TableRow>
              ) : (
                filteredUsers.map((user) => (
                  <TableRow key={user.userId} className="cursor-pointer hover:bg-gray-50">
                    <TableCell>
                      <Checkbox
                        checked={selectedUsers.includes(user.userId)}
                        onCheckedChange={() => onSelectUser(user.userId)}
                      />
                    </TableCell>
                    <TableCell className="font-medium">{user.userName}</TableCell>
                    <TableCell>{user.phone}</TableCell>
                    <TableCell>{user.lastPurchaseDate}</TableCell>
                    <TableCell>{user.purchaseFrequency}次</TableCell>
                    <TableCell>¥{user.totalSpent.toLocaleString()}</TableCell>
                    <TableCell>
                      <div className="flex items-center space-x-1">
                        <Badge variant="outline" className="bg-red-50 text-red-700">
                          R{user.rfmScore.recency}
                        </Badge>
                        <Badge variant="outline" className="bg-green-50 text-green-700">
                          F{user.rfmScore.frequency}
                        </Badge>
                        <Badge variant="outline" className="bg-blue-50 text-blue-700">
                          M{user.rfmScore.monetary}
                        </Badge>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge className={getSegmentColor(user.segment)}>{user.segment}</Badge>
                    </TableCell>
                    <TableCell className="font-medium">¥{user.valueEstimation.toLocaleString()}</TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>

{/* 选择统计 */}
        <div className="mt-4 flex justify-between items-center">
          <div className="text-sm text-gray-500">
            已选择 <span className="font-medium">{selectedUsers.length}</span> 个用户， 总估值{" "}
            <span className="font-medium">
              ¥
              {users
                .filter((user) => selectedUsers.includes(user.userId))
                .reduce((sum, user) => sum + user.valueEstimation, 0)
                .toLocaleString()}
            </span>
          </div>
          <Button size="sm">
            <UserPlus className="h-4 w-4 mr-2" />
            添加到分析
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/data-analysis/rfm-analysis.tsx" isTerminated="true" isMerged="true"
"use client"

import type { RFMAnalysisResult, UserRFMData } from "@/types/data-analysis"

interface RFMAnalysisProps {
  data: UserRFMData[]
  analysisResult: RFMAnalysisResult
}

export function RFMAnalysis({ data, analysisResult }: RFMAnalysisProps) {
  // 获取用户分群的颜色
  const getSegmentColor = (segment: string) => {
    if (segment.includes("高价值")) return "rgb(16, 185, 129)"
    if (segment.includes("中价值")) return "rgb(59, 130, 246)"
    if (segment.includes("低价值")) return "rgb(156, 163, 175)"
    return "rgb(139, 92, 246)" // 新用户
  }

// 准备饼图数据
  const pieChartData = {
    labels: analysisResult.segmentDistribution.map(item => item.segment),
    datasets: [
      {
        data: analysisResult.segmentDistribution.map(item => item.count),
        backgroundColor: analysisResult.segmentDistribution.map(item => getSegmentColor(item.segment)),
      },
    ],
  }

// 准备RFM分布柱状图数据
  const rfmDistributionData = {
    labels: ["R1", "R2", "R3", "R4", "R5", "F1", "F2", "F3", "F4", "F5", "M1", "M2", "M3", "M4", "M5"],
    datasets: [
      {
        label: "用户数量",
        data: [
          // R分布
          data.filter(user => user.rfmScore.recency === 1).length,
          data.filter(user => user.rfmScore.recency === 2).length,
          data.filter(user => user.rfmScore.recency === 3).length,
          data.filter(user => user.rfmScore.recency === 4).length,
          data.filter(user => user.rfmScore.recency === 5).length,
          // F分布
          data.filter(user => user.rfmScore.frequency === 1).length,
          data.filter(user => user.rfmScore.frequency === 2).length,
          data.filter(user => user.rfmScore.frequency === 3).length,
          data.filter(user => user.rfmScore.frequency === 4).length,
          data.filter(user => user.rfmScore.frequency === 5).length,
          // M分布
          data.filter(user => user.rfmScore.monetary === 1).length,
          data.filter(user => user.rfmScore.monetary === 2).length,
          data.filter(user => user.rfmScore.monetary === 3).length,
          data.filter(user => user.rfmScore.monetary === 4).length,
          data.filter(user => user.rfmScore.monetary === 5).length,
        ],
        backgroundColor: [
          // R颜色
          "rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)",
          // F颜色
          "rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)",
          // M颜色
          "rgba(59, 130, 246, 0.7)", "rgba(59, 130, 246, 0.7)", "rgba(59, 130\
[V0_FILE]typescriptreact:file="components/ui/collapsible.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"

import { cn } from "@/lib/utils"

const Collapsible = CollapsiblePrimitive.Root

const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger

const CollapsibleContent = React.forwardRef<
  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
>(({ className, children, ...props }, ref) => (
  <CollapsiblePrimitive.CollapsibleContent
    ref={ref}
    className={cn(
      "data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden transition-all",
      className,
    )}
    {...props}
  >
    {children}
  </CollapsiblePrimitive.CollapsibleContent>
))
CollapsibleContent.displayName = "CollapsibleContent"

export { Collapsible, CollapsibleTrigger, CollapsibleContent }
[V0_FILE]typescriptreact:file="app/scenarios/new/steps/BasicSettings.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"

export function BasicSettings({ onNext }: { onNext: () => void }) {
  const [name, setName] = useState("")
  const [description, setDescription] = useState("")
  const [category, setCategory] = useState("")

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // 保存基本设置数据的逻辑
    onNext()
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>基本设置</CardTitle>
        <CardDescription>配置场景的基本信息</CardDescription>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name">场景名称</Label>
            <Input
              id="name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="请输入场景名称"
              required
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="description">场景描述</Label>
            <Textarea
              id="description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="请输入场景描述"
              rows={4}
            />
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" type="button">
            取消
          </Button>
          <Button type="submit">下一步</Button>
        </CardFooter>
      </form>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/scenarios/new/steps/FriendRequestSettings.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"

export function FriendRequestSettings({ onBack, onNext }: { onBack: () => void; onNext: () => void }) {
  const [enableFriendRequests, setEnableFriendRequests] = useState(false)
  const [requestMessage, setRequestMessage] = useState("")
  const [requestLimit, setRequestLimit] = useState("10")
  const [requestInterval, setRequestInterval] = useState("daily")

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // 保存好友请求设置数据的逻辑
    onNext()
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>好友请求设置</CardTitle>
        <CardDescription>配置场景中的好友请求功能</CardDescription>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="space-y-6">
          <div className="flex items-center justify-between">
            <Label htmlFor="enable-friend-requests" className="flex flex-col space-y-1">
              <span>启用好友请求</span>
              <span className="font-normal text-sm text-muted-foreground">启用后将允许系统自动发送好友请求</span>
            </Label>
            <Switch
              id="enable-friend-requests"
              checked={enableFriendRequests}
              onCheckedChange={setEnableFriendRequests}
            />
          </div>

{enableFriendRequests && (
            <>
              <div className="space-y-2">
                <Label htmlFor="request-message">请求消息</Label>
                <Textarea
                  id="request-message"
                  value={requestMessage}
                  onChange={(e) => setRequestMessage(e.target.value)}
                  placeholder="请输入好友请求附带的消息"
                  rows={3}
                />
              </div>

<div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="request-limit">请求限制</Label>
                  <Input
                    id="request-limit"
                    type="number"
                    min="1"
                    value={requestLimit}
                    onChange={(e) => setRequestLimit(e.target.value)}
                    placeholder="请求数量上限"
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="request-interval">请求频率</Label>
                  <Select value={requestInterval} onValueChange={setRequestInterval}>
                    <SelectTrigger id="request-interval">
                      <SelectValue placeholder="选择请求频率" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="hourly">每小时</SelectItem>
                      <SelectItem value="daily">每天</SelectItem>
                      <SelectItem value="weekly">每周</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </>
          )}
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" type="button" onClick={onBack}>
            上一步
          </Button>
          <Button type="submit">下一步</Button>
        </CardFooter>
      </form>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/scenarios/new/steps/MessageSettings.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function MessageSettings({ onBack, onNext }: { onBack: () => void; onNext: () => void }) {
  const [enableMessages, setEnableMessages] = useState(false)
  const [messageType, setMessageType] = useState("text")
  const [messageContent, setMessageContent] = useState("")
  const [messageSchedule, setMessageSchedule] = useState("immediate")
  const [customTime, setCustomTime] = useState("")

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // 保存消息设置数据的逻辑
    onNext()
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>消息设置</CardTitle>
        <CardDescription>配置场景中的消息发送功能</CardDescription>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="space-y-6">
          <div className="flex items-center justify-between">
            <Label htmlFor="enable-messages" className="flex flex-col space-y-1">
              <span>启用消息发送</span>
              <span className="font-normal text-sm text-muted-foreground">启用后将允许系统自动发送消息</span>
            </Label>
            <Switch id="enable-messages" checked={enableMessages} onCheckedChange={setEnableMessages} />
          </div>

{enableMessages && (
            <>
              <div className="space-y-2">
                <Label>消息类型</Label>
                <Tabs value={messageType} onValueChange={setMessageType}>
                  <TabsList className="grid grid-cols-3">
                    <TabsTrigger value="text">文本消息</TabsTrigger>
                    <TabsTrigger value="image">图片消息</TabsTrigger>
                    <TabsTrigger value="link">链接消息</TabsTrigger>
                  </TabsList>
                  <TabsContent value="text" className="mt-4">
                    <Textarea
                      value={messageContent}
                      onChange={(e) => setMessageContent(e.target.value)}
                      placeholder="请输入文本消息内容"
                      rows={4}
                    />
                  </TabsContent>
                  <TabsContent value="image" className="mt-4">
                    <div className="space-y-4">
                      <Input type="file" accept="image/*" />
                      <Textarea
                        value={messageContent}
                        onChange={(e) => setMessageContent(e.target.value)}
                        placeholder="请输入图片描述（可选）"
                        rows={2}
                      />
                    </div>
                  </TabsContent>
                  <TabsContent value="link" className="mt-4 space-y-4">
                    <Input
                      value={messageContent}
                      onChange={(e) => setMessageContent(e.target.value)}
                      placeholder="请输入链接地址"
                    />
                    <Textarea placeholder="请输入链接描述（可选）" rows={2} />
                  </TabsContent>
                </Tabs>
              </div>

{messageSchedule === "scheduled" && (
                  <div className="pt-2">
                    <Label htmlFor="custom-time">选择发送时间</Label>
                    <Input
                      id="custom-time"
                      type="datetime-local"
                      value={customTime}
                      onChange={(e) => setCustomTime(e.target.value)}
                      className="mt-2"
                    />
                  </div>
                )}

{messageSchedule === "triggered" && (
                  <div className="border rounded-md p-4 mt-2">
                    <p className="text-sm text-muted-foreground">触发条件将在下一步配置</p>
                  </div>
                )}
              </div>
            </>
          )}
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" type="button" onClick={onBack}>
            上一步
          </Button>
          <Button type="submit">下一步</Button>
        </CardFooter>
      </form>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/scenarios/new/steps/TagSettings.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { X } from "lucide-react"

export function TagSettings({ onBack, onComplete }: { onBack: () => void; onComplete: () => void }) {
  const [enableTags, setEnableTags] = useState(false)
  const [tagInput, setTagInput] = useState("")
  const [tags, setTags] = useState<string[]>([])

const handleAddTag = () => {
    if (tagInput.trim() && !tags.includes(tagInput.trim())) {
      setTags([...tags, tagInput.trim()])
      setTagInput("")
    }
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      e.preventDefault()
      handleAddTag()
    }
  }

const handleRemoveTag = (tagToRemove: string) => {
    setTags(tags.filter((tag) => tag !== tagToRemove))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // 保存标签设置数据的逻辑
    onComplete()
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>标签设置</CardTitle>
        <CardDescription>配置场景的用户标签</CardDescription>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="space-y-6">
          <div className="flex items-center justify-between">
            <Label htmlFor="enable-tags" className="flex flex-col space-y-1">
              <span>启用用户标签</span>
              <span className="font-normal text-sm text-muted-foreground">启用后将为场景中的用户添加标签</span>
            </Label>
            <Switch id="enable-tags" checked={enableTags} onCheckedChange={setEnableTags} />
          </div>

{enableTags && (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label htmlFor="tag-input">添加标签</Label>
                <div className="flex space-x-2">
                  <Input
                    id="tag-input"
                    value={tagInput}
                    onChange={(e) => setTagInput(e.target.value)}
                    onKeyDown={handleKeyDown}
                    placeholder="输入标签名称并按回车"
                  />
                  <Button type="button" onClick={handleAddTag}>
                    添加
                  </Button>
                </div>
              </div>

<div>
                <Label>已添加标签</Label>
                <div className="flex flex-wrap gap-2 mt-2">
                  {tags.length > 0 ? (
                    tags.map((tag) => (
                      <Badge key={tag} className="px-3 py-1 flex items-center gap-1">
                        {tag}
                        <X className="h-3 w-3 cursor-pointer" onClick={() => handleRemoveTag(tag)} />
                      </Badge>
                    ))
                  ) : (
                    <p className="text-sm text-muted-foreground">暂无标签</p>
                  )}
                </div>
              </div>
            </div>
          )}
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline" type="button" onClick={onBack}>
            上一步
          </Button>
          <Button type="submit">完成</Button>
        </CardFooter>
      </form>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/scenarios/api/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function Loading() {
  return (
    <div className="container mx-auto py-6 space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold">API 接口管理</h1>
        <Skeleton className="h-10 w-32" />
      </div>

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {Array(6)
          .fill(0)
          .map((_, i) => (
            <Card key={i}>
              <CardHeader className="pb-2">
                <Skeleton className="h-5 w-3/4 mb-2" />
                <Skeleton className="h-4 w-1/2" />
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <Skeleton className="h-4 w-full" />
                  <Skeleton className="h-4 w-5/6" />
                  <Skeleton className="h-4 w-4/6" />
                </div>
                <div className="flex justify-between mt-4">
                  <Skeleton className="h-8 w-20" />
                  <Skeleton className="h-8 w-20" />
                </div>
              </CardContent>
            </Card>
          ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/content/[id]/materials/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function Loading() {
  return (
    <div className="container mx-auto py-6 space-y-6">
      <div className="flex justify-between items-center">
        <Skeleton className="h-10 w-64" />
        <Skeleton className="h-10 w-32" />
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {Array(6)
          .fill(0)
          .map((_, i) => (
            <Card key={i} className="overflow-hidden">
              <CardHeader className="pb-2">
                <div className="flex justify-between items-start">
                  <Skeleton className="h-6 w-40" />
                  <Skeleton className="h-6 w-20" />
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <Skeleton className="h-40 w-full" />
                <div className="flex justify-between items-center">
                  <Skeleton className="h-5 w-24" />
                  <div className="flex space-x-2">
                    <Skeleton className="h-8 w-8 rounded-full" />
                    <Skeleton className="h-8 w-8 rounded-full" />
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
      </div>

<div className="flex justify-center mt-6">
        <Skeleton className="h-10 w-64" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/wechat-accounts/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function WechatAccountsLoading() {
  return (
    <div className="container mx-auto p-4 space-y-6">
      <div className="flex justify-between items-center mb-6">
        <Skeleton className="h-8 w-48" />
        <Skeleton className="h-10 w-32" />
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {Array(6)
          .fill(0)
          .map((_, i) => (
            <div key={i} className="border rounded-lg p-4 shadow-sm">
              <div className="flex items-center space-x-4 mb-4">
                <Skeleton className="h-12 w-12 rounded-full" />
                <div className="space-y-2">
                  <Skeleton className="h-5 w-32" />
                  <Skeleton className="h-4 w-24" />
                </div>
              </div>

<div className="flex justify-center mt-6">
        <Skeleton className="h-10 w-64" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/user-value/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/content/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function ContentLoading() {
  return (
    <div className="container mx-auto p-4 space-y-6">
      <div className="flex items-center justify-between mb-6">
        <Skeleton className="h-10 w-64" />
        <Skeleton className="h-10 w-32" />
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        {Array(3)
          .fill(0)
          .map((_, i) => (
            <Card key={i} className="shadow-sm">
              <CardHeader className="pb-2">
                <Skeleton className="h-6 w-32 mb-2" />
              </CardHeader>
              <CardContent>
                <Skeleton className="h-16 w-full" />
              </CardContent>
            </Card>
          ))}
      </div>

<Card>
        <CardHeader>
          <CardTitle>
            <Skeleton className="h-7 w-48" />
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {Array(5)
              .fill(0)
              .map((_, i) => (
                <div key={i} className="flex items-center gap-4">
                  <Skeleton className="h-12 w-12 rounded-full" />
                  <div className="space-y-2 flex-1">
                    <Skeleton className="h-4 w-full" />
                    <Skeleton className="h-4 w-3/4" />
                  </div>
                  <Skeleton className="h-8 w-24" />
                </div>
              ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/AIRewriteModal.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { X } from "lucide-react"
import { Button } from "./ui/button"
import { Card } from "./ui/card"

interface AIRewriteModalProps {
  isOpen: boolean
  onClose: () => void
  originalContent: string
}

export function AIRewriteModal({ isOpen, onClose, originalContent }: AIRewriteModalProps) {
  const [rewrittenContent, setRewrittenContent] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

const handleRewrite = async () => {
    try {
      setIsLoading(true)
      setError(null)
      // 调用实际的AI改写API
      const response = await fetch("/api/ai/rewrite", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ content: originalContent }),
      })

if (!response.ok) {
        throw new Error("AI改写请求失败")
      }

const data = await response.json()
      setRewrittenContent(data.rewrittenContent)
    } catch (err) {
      setError(err instanceof Error ? err.message : "改写过程中发生错误")
      console.error("AI改写错误:", err)
    } finally {
      setIsLoading(false)
    }
  }

if (!isOpen) return null

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <Card className="w-full max-w-lg p-6">
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-semibold">AI 内容改写</h2>
          <Button variant="ghost" size="sm" onClick={onClose}>
            <X className="w-4 h-4" />
          </Button>
        </div>
        <div className="space-y-4">
          <div>
            <h3 className="font-medium mb-2">原始内容：</h3>
            <p className="text-sm text-gray-600">{originalContent}</p>
          </div>
          <div>
            <h3 className="font-medium mb-2">改写后内容：</h3>
            <p className="text-sm text-gray-600">{rewrittenContent || '点击"开始改写"按钮生成内容'}</p>
          </div>
        </div>
        <div className="mt-6 flex justify-end space-x-2">
          {error && <p className="text-sm text-red-500 mr-auto">{error}</p>}
          <Button variant="outline" onClick={onClose} disabled={isLoading}>
            取消
          </Button>
          <Button onClick={handleRewrite} disabled={isLoading}>
            {isLoading ? (
              <>
                <span className="mr-2">处理中</span>
                <span className="animate-spin">⟳</span>
              </>
            ) : (
              "开始改写"
            )}
          </Button>
        </div>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/DeviceSelector.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Filter, Search, RefreshCw, AlertCircle } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { toast } from "@/components/ui/use-toast"
import { Progress } from "@/components/ui/progress"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
import { useDebounce } from "@/hooks/use-debounce"
import { useVirtualizer } from "@tanstack/react-virtual"

interface WechatAccount {
  wechatId: string
  nickname: string
  remainingAdds: number
  maxDailyAdds: number
  todayAdded: number
}

interface Device {
  id: string
  imei: string
  name: string
  status: "online" | "offline"
  wechatAccounts: WechatAccount[]
  usedInPlans: number
}

interface DeviceSelectorProps {
  onSelect: (selectedDevices: string[]) => void
  initialSelectedDevices?: string[]
  excludeUsedDevices?: boolean
}

export function DeviceSelector({
  onSelect,
  initialSelectedDevices = [],
  excludeUsedDevices = true,
}: DeviceSelectorProps) {
  const [devices, setDevices] = useState<Device[]>([])
  const [selectedDevices, setSelectedDevices] = useState<string[]>(initialSelectedDevices)
  const [searchQuery, setSearchQuery] = useState("")
  const debouncedSearchQuery = useDebounce(searchQuery, 300)
  const [statusFilter, setStatusFilter] = useState("all")
  const [currentPage, setCurrentPage] = useState(1)
  const devicesPerPage = 10
  const [filteredDevices, setFilteredDevices] = useState<Device[]>([])

const parentRef = useRef<HTMLDivElement>(null)

const rowVirtualizer = useVirtualizer({
    count: filteredDevices.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 120, // 估计每个设备卡片的高度
    overscan: 5,
  })

useEffect(() => {
    // 模拟获取设备数据
    const fetchDevices = async () => {
      await new Promise((resolve) => setTimeout(resolve, 500))
      const mockDevices = Array.from({ length: 42 }, (_, i) => ({
        id: `device-${i + 1}`,
        imei: `IMEI-${Math.random().toString(36).substr(2, 9)}`,
        name: `设备 ${i + 1}`,
        status: Math.random() > 0.3 ? "online" : "offline",
        wechatAccounts: Array.from({ length: Math.floor(Math.random() * 2) + 1 }, (_, j) => ({
          wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
          nickname: `微信号 ${j + 1}`,
          remainingAdds: Math.floor(Math.random() * 10) + 5,
          maxDailyAdds: 20,
          todayAdded: Math.floor(Math.random() * 15),
        })),
        usedInPlans: Math.floor(Math.random() * 3),
      }))
      setDevices(mockDevices)
    }

fetchDevices()
  }, [])

useEffect(() => {
    filterDevices()
  }, [debouncedSearchQuery, statusFilter, excludeUsedDevices, devices])

const filterDevices = () => {
    const filtered = devices.filter((device) => {
      const matchesSearch =
        device.name.toLowerCase().includes(debouncedSearchQuery.toLowerCase()) ||
        device.imei.toLowerCase().includes(debouncedSearchQuery.toLowerCase()) ||
        device.wechatAccounts.some((account) =>
          account.wechatId.toLowerCase().includes(debouncedSearchQuery.toLowerCase()),
        )
      const matchesStatus = statusFilter === "all" || device.status === statusFilter
      const matchesUsage = !excludeUsedDevices || device.usedInPlans === 0
      return matchesSearch && matchesStatus && matchesUsage
    })
    setFilteredDevices(filtered)
  }

const handleRefresh = () => {
    toast({
      title: "刷新成功",
      description: "设备列表已更新",
    })
  }

const paginatedDevices = filteredDevices.slice((currentPage - 1) * devicesPerPage, currentPage * devicesPerPage)

const handleSelectAll = () => {
    if (selectedDevices.length === paginatedDevices.length) {
      setSelectedDevices([])
    } else {
      setSelectedDevices(paginatedDevices.map((device) => device.id))
    }
    onSelect(selectedDevices)
  }

const handleDeviceSelect = (deviceId: string) => {
    const updatedSelection = selectedDevices.includes(deviceId)
      ? selectedDevices.filter((id) => id !== deviceId)
      : [...selectedDevices, deviceId]
    setSelectedDevices(updatedSelection)
    onSelect(updatedSelection)
  }

return (
    <div className="space-y-4">
      <div className="flex items-center space-x-2">
        <div className="relative flex-1">
          <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
          <Input
            placeholder="搜索设备IMEI/备注/微信号"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-9"
          />
        </div>
        <Button variant="outline" size="icon">
          <Filter className="h-4 w-4" />
        </Button>
        <Button variant="outline" size="icon" onClick={handleRefresh}>
          <RefreshCw className="h-4 w-4" />
        </Button>
      </div>

<div className="flex items-center justify-between">
        <Select value={statusFilter} onValueChange={setStatusFilter}>
          <SelectTrigger className="w-[120px]">
            <SelectValue placeholder="全部状态" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">全部状态</SelectItem>
            <SelectItem value="online">在线</SelectItem>
            <SelectItem value="offline">离线</SelectItem>
          </SelectContent>
        </Select>
        <Button variant="outline" onClick={handleSelectAll}>
          {selectedDevices.length === paginatedDevices.length ? "取消全选" : "全选"}
        </Button>
      </div>

<div ref={parentRef} className="h-[500px] overflow-auto">
        <div
          style={{
            height: `${rowVirtualizer.getTotalSize()}px`,
            width: "100%",
            position: "relative",
          }}
        >
          {rowVirtualizer.getVirtualItems().map((virtualRow) => {
            const device = filteredDevices[virtualRow.index]
            return (
              <div
                key={device.id}
                style={{
                  position: "absolute",
                  top: 0,
                  left: 0,
                  width: "100%",
                  height: `${virtualRow.size}px`,
                  transform: `translateY(${virtualRow.start}px)`,
                }}
              >
                <Card key={device.id} className="p-3 hover:shadow-md transition-shadow">
                  <div className="flex items-center space-x-3">
                    <Checkbox
                      checked={selectedDevices.includes(device.id)}
                      onCheckedChange={() => handleDeviceSelect(device.id)}
                    />
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center justify-between mb-1">
                        <div className="font-medium truncate">{device.name}</div>
                        <div
                          className={`px-2 py-1 rounded-full text-xs ${
                            device.status === "online" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                          }`}
                        >
                          {device.status === "online" ? "在线" : "离线"}
                        </div>
                      </div>
                      <div className="text-sm text-gray-500">IMEI: {device.imei}</div>
                      <div className="mt-2 space-y-2">
                        {device.wechatAccounts.map((account) => (
                          <div key={account.wechatId} className="bg-gray-50 rounded-lg p-2">
                            <div className="flex items-center justify-between text-sm">
                              <span className="font-medium">{account.nickname}</span>
                              <span className="text-gray-500">{account.wechatId}</span>
                            </div>
                            <div className="mt-1 space-y-1">
                              <div className="flex items-center justify-between text-sm">
                                <div className="flex items-center space-x-1">
                                  <span>今日可添加：</span>
                                  <span className="font-medium">{account.remainingAdds}</span>
                                  <TooltipProvider>
                                    <Tooltip>
                                      <TooltipTrigger>
                                        <AlertCircle className="h-4 w-4 text-gray-400" />
                                      </TooltipTrigger>
                                      <TooltipContent>
                                        <p>每日最多添加 {account.maxDailyAdds} 个好友</p>
                                      </TooltipContent>
                                    </Tooltip>
                                  </TooltipProvider>
                                </div>
                                <span className="text-sm text-gray-500">
                                  {account.todayAdded}/{account.maxDailyAdds}
                                </span>
                              </div>
                              <Progress value={(account.todayAdded / account.maxDailyAdds) * 100} className="h-1.5" />
                            </div>
                          </div>
                        ))}
                      </div>
                      {!excludeUsedDevices && device.usedInPlans > 0 && (
                        <div className="text-sm text-orange-500 mt-2">已用于 {device.usedInPlans} 个计划</div>
                      )}
                    </div>
                  </div>
                </Card>
              </div>
            )
          })}
        </div>
      </div>

<Pagination>
        <PaginationContent>
          <PaginationItem>
            <PaginationPrevious
              href="#"
              onClick={(e) => {
                e.preventDefault()
                setCurrentPage((prev) => Math.max(1, prev - 1))
              }}
            />
          </PaginationItem>
          {Array.from({ length: Math.ceil(filteredDevices.length / devicesPerPage) }, (_, i) => i + 1).map((page) => (
            <PaginationItem key={page}>
              <PaginationLink
                href="#"
                isActive={currentPage === page}
                onClick={(e) => {
                  e.preventDefault()
                  setCurrentPage(page)
                }}
              >
                {page}
              </PaginationLink>
            </PaginationItem>
          ))}
          <PaginationItem>
            <PaginationNext
              href="#"
              onClick={(e) => {
                e.preventDefault()
                setCurrentPage((prev) => Math.min(Math.ceil(filteredDevices.length / devicesPerPage), prev + 1))
              }}
            />
          </PaginationItem>
        </PaginationContent>
      </Pagination>
    </div>
  )
}
[V0_FILE]typescript:file="lib/api-utils.ts" isMerged="true"
/**
 * 带有重试机制的API请求函数
 * @param url 请求URL
 * @param options 请求选项
 * @param retries 重试次数
 * @param retryDelay 重试延迟(ms)
 * @returns Promise<Response>
 */
export async function fetchWithRetry(
  url: string,
  options: RequestInit = {},
  retries = 3,
  retryDelay = 1000,
): Promise<Response> {
  try {
    const response = await fetch(url, options)

if (!response.ok && retries > 0) {
      console.log(`请求失败，${retryDelay}ms后重试，剩余重试次数: ${retries - 1}`)
      await new Promise((resolve) => setTimeout(resolve, retryDelay))
      return fetchWithRetry(url, options, retries - 1, retryDelay * 2)
    }

return response
  } catch (error) {
    if (retries > 0) {
      console.log(`请求出错，${retryDelay}ms后重试，剩余重试次数: ${retries - 1}`)
      await new Promise((resolve) => setTimeout(resolve, retryDelay))
      return fetchWithRetry(url, options, retries - 1, retryDelay * 2)
    }
    throw error
  }
}

/**
 * 处理API响应的通用函数
 * @param response 响应对象
 * @returns Promise<T>
 */
export async function handleApiResponse<T>(response: Response): Promise<T> {
  if (!response.ok) {
    const errorData = await response.json().catch(() => ({}))
    throw new Error(errorData.message || `请求失败: ${response.status}`)
  }

return response.json()
}
[V0_FILE]typescriptreact:file="app/components/ErrorBoundary.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { Component, type ErrorInfo, type ReactNode } from "react"
import { Button } from "@/components/ui/button"
import { AlertTriangle } from "lucide-react"

interface Props {
  children: ReactNode
  fallback?: ReactNode
}

interface State {
  hasError: boolean
  error: Error | null
}

export class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = { hasError: false, error: null }
  }

static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error }
  }

componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // 记录错误到日志服务
    this.logError(error, errorInfo)
  }

logError = async (error: Error, errorInfo: ErrorInfo) => {
    try {
      await fetch("/api/log-error", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          message: error.message,
          stack: error.stack,
          componentStack: errorInfo.componentStack,
          url: window.location.href,
          timestamp: new Date().toISOString(),
        }),
      })
    } catch (e) {
      console.error("Failed to log error:", e)
    }
  }

handleRetry = () => {
    this.setState({ hasError: false, error: null })
  }

render() {
    if (this.state.hasError) {
      if (this.props.fallback) {
        return this.props.fallback
      }

return (
        <div className="flex flex-col items-center justify-center min-h-[400px] p-6 text-center">
          <AlertTriangle className="h-12 w-12 text-amber-500 mb-4" />
          <h2 className="text-xl font-semibold mb-2">出现了一些问题</h2>
          <p className="text-gray-600 mb-6 max-w-md">应用遇到了错误。我们已记录此问题并将尽快修复。</p>
          <div className="space-x-4">
            <Button onClick={this.handleRetry}>重试</Button>
            <Button variant="outline" onClick={() => window.location.reload()}>
              刷新页面
            </Button>
          </div>
          {process.env.NODE_ENV === "development" && (
            <div className="mt-6 p-4 bg-gray-100 rounded-md text-left overflow-auto max-w-full">
              <p className="font-mono text-sm text-red-600 whitespace-pre-wrap">{this.state.error?.stack}</p>
            </div>
          )}
        </div>
      )
    }

return this.props.children
  }
}
[V0_FILE]typescript:file="lib/cache-utils.ts" isMerged="true"
/**
 * 简单的内存缓存实现
 */
interface CacheItem<T> {
  value: T
  expiry: number
}

class MemoryCache {
  private cache: Map<string, CacheItem<any>> = new Map()

/**
   * 获取缓存项
   * @param key 缓存键
   * @returns 缓存值或undefined
   */
  get<T>(key: string): T | undefined {
    const item = this.cache.get(key)

if (!item) {
      return undefined
    }

if (Date.now() > item.expiry) {
      this.cache.delete(key)
      return undefined
    }

return item.value
  }

/**
   * 设置缓存项
   * @param key 缓存键
   * @param value 缓存值
   * @param ttlMs 过期时间(毫秒)
   */
  set<T>(key: string, value: T, ttlMs: number): void {
    this.cache.set(key, {
      value,
      expiry: Date.now() + ttlMs,
    })
  }

/**
   * 删除缓存项
   * @param key 缓存键
   */
  delete(key: string): void {
    this.cache.delete(key)
  }

/**
   * 清空所有缓存
   */
  clear(): void {
    this.cache.clear()
  }
}

export const memoryCache = new MemoryCache()

/**
 * 带缓存的数据获取函数
 * @param key 缓存键
 * @param fetchFn 获取数据的函数
 * @param ttlMs 缓存过期时间(毫秒)
 * @returns Promise<T>
 */
export async function fetchWithCache<T>(
  key: string,
  fetchFn: () => Promise<T>,
  ttlMs = 60000, // 默认1分钟
): Promise<T> {
  const cachedData = memoryCache.get<T>(key)

if (cachedData !== undefined) {
    return cachedData
  }

const data = await fetchFn()
  memoryCache.set(key, data, ttlMs)
  return data
}
[V0_FILE]typescriptreact:file="app/content/[id]/materials/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { ChevronLeft, Download, Plus, Search, Tag, Trash2, BarChart } from "lucide-react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { useRouter } from "next/navigation"
import { toast } from "@/components/ui/use-toast"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { useInView } from "react-intersection-observer"
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu"

interface Material {
  id: string
  content: string
  tags: string[]
  aiAnalysis?: string
}

export default function MaterialsPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [materials, setMaterials] = useState<Material[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [isLoading, setIsLoading] = useState(true)
  const [selectedMaterial, setSelectedMaterial] = useState<Material | null>(null)
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  const { ref, inView } = useInView()
  const [selectedMaterials, setSelectedMaterials] = useState<string[]>([])
  const [exportFormat, setExportFormat] = useState<"excel" | "csv" | "json">("excel")
  const [isExporting, setIsExporting] = useState(false)

useEffect(() => {
    if (inView && hasMore && !isLoading) {
      loadMoreMaterials()
    }
  }, [inView, hasMore, isLoading])

useEffect(() => {
    const fetchMaterials = async () => {
      setIsLoading(true)
      try {
        // 模拟从API获取素材数据
        await new Promise((resolve) => setTimeout(resolve, 500))
        const mockMaterials: Material[] = [
          {
            id: "1",
            content: "今天的阳光真好，适合出去走走",
            tags: ["日常", "心情"],
          },
          {
            id: "2",
            content: "新品上市，限时优惠，快来抢购！",
            tags: ["营销", "促销"],
          },
          {
            id: "3",
            content: "学习新技能的第一天，感觉很充实",
            tags: ["学习", "成长"],
          },
        ]
        setMaterials(mockMaterials)
      } catch (error) {
        console.error("Failed to fetch materials:", error)
        toast({
          title: "错误",
          description: "获取素材数据失败",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }
    fetchMaterials()
  }, [])

const loadMoreMaterials = async () => {
    setIsLoading(true)
    try {
      // 模拟从API获取更多素材数据
      await new Promise((resolve) => setTimeout(resolve, 500))
      const newMaterials: Material[] = [
        {
          id: String(materials.length + 1),
          content: `More content ${materials.length + 1}`,
          tags: ["more", "content"],
        },
      ]

if (newMaterials.length === 0) {
        setHasMore(false)
      } else {
        setMaterials([...materials, ...newMaterials])
        setPage(page + 1)
      }
    } catch (error) {
      console.error("Failed to fetch more materials:", error)
      toast({
        title: "错误",
        description: "获取更多素材数据失败",
        variant: "destructive",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleNewMaterial = () => {
    // 实现新建素材功能
    router.push(`/content/${params.id}/materials/new`)
  }

const handleAIAnalysis = async (material: Material) => {
    try {
      // 模拟AI分析过程
      await new Promise((resolve) => setTimeout(resolve, 1000))
      const analysis = "这是一条" + material.tags.join("、") + "相关的内容，情感倾向积极。"
      setMaterials(materials.map((m) => (m.id === material.id ? { ...m, aiAnalysis: analysis } : m)))
      setSelectedMaterial({ ...material, aiAnalysis: analysis })
    } catch (error) {
      console.error("AI analysis failed:", error)
      toast({
        title: "错误",
        description: "AI分析失败",
        variant: "destructive",
      })
    }
  }

const filteredMaterials = materials.filter(
    (material) =>
      material.content.toLowerCase().includes(searchQuery.toLowerCase()) ||
      material.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase())),
  )

const toggleSelectMaterial = (id: string) => {
    if (selectedMaterials.includes(id)) {
      setSelectedMaterials(selectedMaterials.filter((materialId) => materialId !== id))
    } else {
      setSelectedMaterials([...selectedMaterials, id])
    }
  }

const selectAllMaterials = () => {
    if (selectedMaterials.length === filteredMaterials.length) {
      setSelectedMaterials([])
    } else {
      setSelectedMaterials(filteredMaterials.map((material) => material.id))
    }
  }

const handleExport = async () => {
    setIsExporting(true)
    try {
      // 模拟导出过程
      await new Promise((resolve) => setTimeout(resolve, 1500))

let fileName = `素材数据_${new Date().toISOString().split("T")[0]}`
      let fileExtension = ""

switch (exportFormat) {
        case "excel":
          fileName += ".xlsx"
          fileExtension = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          break
        case "csv":
          fileName += ".csv"
          fileExtension = "text/csv"
          break
        case "json":
          fileName += ".json"
          fileExtension = "application/json"
          break
      }

toast({
        title: "导出成功",
        description: `已成功导出为${fileName}`,
      })
    } catch (error) {
      console.error("Export failed:", error)
      toast({
        title: "导出失败",
        description: "导出素材数据失败",
        variant: "destructive",
      })
    } finally {
      setIsExporting(false)
    }
  }

if (isLoading) {
    return <div className="flex justify-center items-center h-screen">加载中...</div>
  }

return (
    <div className="flex-1 bg-gray-50 min-h-screen">
      <header className="sticky top-0 z-10 bg-white border-b">
        <div className="flex items-center justify-between p-4">
          <div className="flex items-center space-x-3">
            <Button variant="ghost" size="icon" onClick={() => router.back()}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
            <h1 className="text-lg font-medium">已采集素材</h1>
          </div>
          {selectedMaterials.length > 0 && (
            <div className="flex items-center space-x-2">
              <span className="text-sm text-gray-500">已选择 {selectedMaterials.length} 项</span>
              <Button variant="outline" size="sm" onClick={() => setSelectedMaterials([])}>
                取消选择
              </Button>
              <Button variant="destructive" size="sm">
                批量删除
              </Button>
              <Button variant="outline" size="sm">
                批量添加标签
              </Button>
            </div>
          )}
          <div className="flex items-center space-x-2">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" disabled={isExporting}>
                  {isExporting ? (
                    <>
                      <span className="mr-2">导出中</span>
                      <span className="animate-spin">⟳</span>
                    </>
                  ) : (
                    <>
                      <Download className="h-4 w-4 mr-2" />
                      导出
                    </>
                  )}
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <DropdownMenuRadioGroup value={exportFormat} onValueChange={(value) => setExportFormat(value as any)}>
                  <DropdownMenuRadioItem value="excel">Excel格式</DropdownMenuRadioItem>
                  <DropdownMenuRadioItem value="csv">CSV格式</DropdownMenuRadioItem>
                  <DropdownMenuRadioItem value="json">JSON格式</DropdownMenuRadioItem>
                </DropdownMenuRadioGroup>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={handleExport}>开始导出</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
            <Button onClick={handleNewMaterial}>
              <Plus className="h-4 w-4 mr-2" />
              新建素材
            </Button>
          </div>
        </div>
      </header>

<div className="p-4">
        <Card className="p-4">
          <div className="space-y-4">
            <div className="relative">
              <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
              <Input
                placeholder="搜索素材或标签..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-9"
              />
            </div>

<div className="space-y-2">
              {filteredMaterials.map((material) => (
                <div key={material.id} className="flex items-center justify-between bg-white p-3 rounded-lg shadow">
                  <div className="flex-1">
                    <input
                      type="checkbox"
                      checked={selectedMaterials.includes(material.id)}
                      onChange={() => toggleSelectMaterial(material.id)}
                    />
                    <p className="text-sm text-gray-600 mb-2">{material.content}</p>
                    <div className="flex flex-wrap gap-2">
                      {material.tags.map((tag, index) => (
                        <Badge key={index} variant="secondary">
                          <Tag className="h-3 w-3 mr-1" />
                          {tag}
                        </Badge>
                      ))}
                    </div>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Dialog>
                      <DialogTrigger asChild>
                        <Button variant="outline" size="sm" onClick={() => handleAIAnalysis(material)}>
                          <BarChart className="h-4 w-4 mr-1" />
                          AI分析
                        </Button>
                      </DialogTrigger>
                      <DialogContent>
                        <DialogHeader>
                          <DialogTitle>AI 分析结果</DialogTitle>
                        </DialogHeader>
                        <div className="mt-4">
                          <p>{selectedMaterial?.aiAnalysis || "正在分析中..."}</p>
                        </div>
                      </DialogContent>
                    </Dialog>
                    <Button variant="destructive" size="sm">
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              ))}
              {filteredMaterials.length > 0 && hasMore && (
                <div ref={ref} className="py-4 text-center">
                  {isLoading ? "加载中..." : "向下滚动加载更多"}
                </div>
              )}
            </div>
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workspace/moments-sync/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"

export default function MomentsSyncLoading() {
  return (
    <div className="container mx-auto py-6 space-y-6">
      <div className="flex items-center justify-between">
        <Skeleton className="h-10 w-[250px]" />
        <Skeleton className="h-10 w-[120px]" />
      </div>

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {Array(6)
          .fill(0)
          .map((_, i) => (
            <Card key={i} className="overflow-hidden">
              <CardHeader className="p-0">
                <Skeleton className="h-48 w-full" />
              </CardHeader>
              <CardContent className="p-4 space-y-3">
                <Skeleton className="h-5 w-4/5" />
                <Skeleton className="h-4 w-3/5" />
                <div className="flex justify-between items-center pt-2">
                  <Skeleton className="h-4 w-[100px]" />
                  <Skeleton className="h-8 w-[80px]" />
                </div>
              </CardContent>
            </Card>
          ))}
      </div>

<div className="flex justify-center">
        <Skeleton className="h-10 w-[200px]" />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/data-integration/database-structure-viewer.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Database, TableIcon, Key, Download, RefreshCw } from "lucide-react"
import { Skeleton } from "@/components/ui/skeleton"

interface TableField {
  Field: string
  Type: string
  Null: string
  Key: string
  Default: string | null
  Extra: string
}

interface DatabaseStructure {
  [tableName: string]: TableField[]
}

export function DatabaseStructureViewer() {
  const [databases, setDatabases] = useState<string[]>([])
  const [selectedDatabase, setSelectedDatabase] = useState<string>("")
  const [structure, setStructure] = useState<DatabaseStructure | null>(null)
  const [loading, setLoading] = useState<boolean>(false)
  const [error, setError] = useState<string | null>(null)

// 获取数据库列表
  useEffect(() => {
    const fetchDatabases = async () => {
      try {
        setLoading(true)
        const response = await fetch("/api/database-structure")
        const result = await response.json()

if (result.success) {
          const dbList = result.data.map((item: any) => Object.values(item)[0] as string)
          setDatabases(dbList)

// 默认选择第一个非系统数据库
          const nonSystemDbs = dbList.filter(
            (db: string) => !["information_schema", "mysql", "performance_schema", "sys"].includes(db),
          )
          if (nonSystemDbs.length > 0) {
            setSelectedDatabase(nonSystemDbs[0])
          }
        } else {
          setError(result.message || "获取数据库列表失败")
        }
      } catch (err) {
        setError("获取数据库列表失败")
        console.error(err)
      } finally {
        setLoading(false)
      }
    }

fetchDatabases()
  }, [])

// 获取数据库结构
  useEffect(() => {
    if (!selectedDatabase) return

const fetchDatabaseStructure = async () => {
      try {
        setLoading(true)
        setStructure(null)

const response = await fetch(`/api/database-structure?database=${selectedDatabase}`)
        const result = await response.json()

if (result.success) {
          setStructure(result.data)
          setError(null)
        } else {
          setError(result.message || "获取数据库结构失败")
        }
      } catch (err) {
        setError("获取数据库结构失败")
        console.error(err)
      } finally {
        setLoading(false)
      }
    }

fetchDatabaseStructure()
  }, [selectedDatabase])

// 获取字段类型的简化描述
  const getSimplifiedType = (type: string) => {
    if (type.includes("int")) return "Integer"
    if (type.includes("varchar") || type.includes("text") || type.includes("char")) return "String"
    if (type.includes("datetime") || type.includes("timestamp")) return "DateTime"
    if (type.includes("date")) return "Date"
    if (type.includes("decimal") || type.includes("float") || type.includes("double")) return "Decimal"
    if (type.includes("bool")) return "Boolean"
    if (type.includes("json")) return "JSON"
    if (type.includes("blob")) return "Binary"
    return type
  }

// 获取字段类型的标签颜色
  const getTypeColor = (type: string) => {
    if (type.includes("int")) return "bg-blue-100 text-blue-800"
    if (type.includes("varchar") || type.includes("text") || type.includes("char")) return "bg-green-100 text-green-800"
    if (type.includes("datetime") || type.includes("timestamp") || type.includes("date"))
      return "bg-purple-100 text-purple-800"
    if (type.includes("decimal") || type.includes("float") || type.includes("double"))
      return "bg-yellow-100 text-yellow-800"
    if (type.includes("bool")) return "bg-orange-100 text-orange-800"
    if (type.includes("json")) return "bg-indigo-100 text-indigo-800"
    if (type.includes("blob")) return "bg-red-100 text-red-800"
    return "bg-gray-100 text-gray-800"
  }

// 导出数据库结构为JSON
  const exportDatabaseStructure = () => {
    if (!structure) return

const dataStr = JSON.stringify(structure, null, 2)
    const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(dataStr)}`

const exportFileDefaultName = `${selectedDatabase}-structure.json`

const linkElement = document.createElement("a")
    linkElement.setAttribute("href", dataUri)
    linkElement.setAttribute("download", exportFileDefaultName)
    linkElement.click()
  }

// 刷新数据库结构
  const refreshDatabaseStructure = async () => {
    if (!selectedDatabase) return

try {
      setLoading(true)
      setStructure(null)

const response = await fetch(`/api/database-structure?database=${selectedDatabase}`)
      const result = await response.json()

if (result.success) {
        setStructure(result.data)
        setError(null)
      } else {
        setError(result.message || "刷新数据库结构失败")
      }
    } catch (err) {
      setError("刷新数据库结构失败")
      console.error(err)
    } finally {
      setLoading(false)
    }
  }

return (
    <Card className="w-full">
      <CardHeader>
        <div className="flex justify-between items-center">
          <div>
            <CardTitle>数据库结构查看器</CardTitle>
            <CardDescription>查看和分析数据库表结构</CardDescription>
          </div>
          <div className="flex space-x-2">
            <Button
              variant="outline"
              size="sm"
              onClick={refreshDatabaseStructure}
              disabled={loading || !selectedDatabase}
            >
              <RefreshCw className="h-4 w-4 mr-2" />
              刷新
            </Button>
            <Button variant="outline" size="sm" onClick={exportDatabaseStructure} disabled={!structure}>
              <Download className="h-4 w-4 mr-2" />
              导出JSON
            </Button>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        {loading && (
          <div className="space-y-4">
            <Skeleton className="h-8 w-full" />
            <Skeleton className="h-64 w-full" />
          </div>
        )}

{error && (
          <div className="p-4 bg-red-50 text-red-800 rounded-md">
            <p>{error}</p>
          </div>
        )}

{!loading && !error && (
          <div className="space-y-4">
            <div className="flex space-x-2 overflow-x-auto pb-2">
              {databases.map((db) => (
                <Button
                  key={db}
                  variant={selectedDatabase === db ? "default" : "outline"}
                  size="sm"
                  onClick={() => setSelectedDatabase(db)}
                >
                  <Database className="h-4 w-4 mr-2" />
                  {db}
                </Button>
              ))}
            </div>

{structure && (
              <div>
                <h3 className="text-lg font-medium mb-2">数据库: {selectedDatabase}</h3>
                <p className="text-sm text-muted-foreground mb-4">共 {Object.keys(structure).length} 张表</p>

<Accordion type="multiple" className="w-full">
                  {Object.entries(structure).map(([tableName, fields]) => (
                    <AccordionItem key={tableName} value={tableName}>
                      <AccordionTrigger className="hover:bg-muted/50 px-4">
                        <div className="flex items-center">
                          <TableIcon className="h-4 w-4 mr-2" />
                          <span>{tableName}</span>
                          <Badge className="ml-2 bg-gray-100 text-gray-800">{fields.length} 字段</Badge>
                        </div>
                      </AccordionTrigger>
                      <AccordionContent>
                        <div className="rounded-md border overflow-hidden">
                          <Table>
                            <TableHeader>
                              <TableRow>
                                <TableHead className="w-[200px]">字段名</TableHead>
                                <TableHead>类型</TableHead>
                                <TableHead>允许空值</TableHead>
                                <TableHead>键</TableHead>
                                <TableHead>默认值</TableHead>
                                <TableHead>额外</TableHead>
                              </TableRow>
                            </TableHeader>
                            <TableBody>
                              {fields.map((field, index) => (
                                <TableRow key={index}>
                                  <TableCell className="font-medium">
                                    {field.Field}
                                    {field.Key === "PRI" && <Key className="h-3 w-3 ml-1 inline text-amber-500" />}
                                  </TableCell>
                                  <TableCell>
                                    <Badge className={getTypeColor(field.Type)}>{getSimplifiedType(field.Type)}</Badge>
                                    <span className="text-xs text-muted-foreground ml-2">{field.Type}</span>
                                  </TableCell>
                                  <TableCell>
                                    {field.Null === "YES" ? (
                                      <Badge variant="outline">可空</Badge>
                                    ) : (
                                      <Badge className="bg-red-100 text-red-800">非空</Badge>
                                    )}
                                  </TableCell>
                                  <TableCell>
                                    {field.Key === "PRI" && <Badge>主键</Badge>}
                                    {field.Key === "UNI" && <Badge className="bg-blue-100 text-blue-800">唯一</Badge>}
                                    {field.Key === "MUL" && (
                                      <Badge className="bg-purple-100 text-purple-800">索引</Badge>
                                    )}
                                  </TableCell>
                                  <TableCell>
                                    {field.Default !== null ? (
                                      field.Default
                                    ) : (
                                      <span className="text-muted-foreground">NULL</span>
                                    )}
                                  </TableCell>
                                  <TableCell>{field.Extra}</TableCell>
                                </TableRow>
                              ))}
                            </TableBody>
                          </Table>
                        </div>
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </div>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescript:file="lib/db-connector.ts" isMerged="true"
// 模拟数据库结构数据
// 由于v0不支持mysql2，我们使用模拟数据来展示功能

// 模拟数据库列表
const mockDatabases = [
  { Database: "user_data_platform" },
  { Database: "traffic_analysis" },
  { Database: "content_library" },
  { Database: "wechat_accounts" },
  { Database: "device_management" },
]

// 模拟表结构数据
const mockDatabaseStructure: Record<string, Record<string, any[]>> = {
  user_data_platform: {
    users: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "username", Type: "varchar(50)", Null: "NO", Key: "UNI", Default: null, Extra: "" },
      { Field: "email", Type: "varchar(100)", Null: "YES", Key: "UNI", Default: null, Extra: "" },
      { Field: "phone", Type: "varchar(20)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
      {
        Field: "updated_at",
        Type: "datetime",
        Null: "YES",
        Key: "",
        Default: null,
        Extra: "on update CURRENT_TIMESTAMP",
      },
      { Field: "last_login", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "status", Type: "tinyint(1)", Null: "NO", Key: "", Default: "1", Extra: "" },
    ],
    user_tags: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "user_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
      { Field: "tag_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
    ],
    tags: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "name", Type: "varchar(50)", Null: "NO", Key: "UNI", Default: null, Extra: "" },
      { Field: "category", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "description", Type: "text", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
    ],
    user_profiles: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "user_id", Type: "int(11)", Null: "NO", Key: "UNI", Default: null, Extra: "" },
      { Field: "full_name", Type: "varchar(100)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "gender", Type: "enum('male','female','other')", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "birth_date", Type: "date", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "address", Type: "text", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "city", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "province", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "country", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "avatar_url", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "bio", Type: "text", Null: "YES", Key: "", Default: null, Extra: "" },
    ],
    user_activities: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "user_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
      { Field: "activity_type", Type: "varchar(50)", Null: "NO", Key: "", Default: null, Extra: "" },
      { Field: "activity_data", Type: "json", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
      { Field: "ip_address", Type: "varchar(45)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "user_agent", Type: "text", Null: "YES", Key: "", Default: null, Extra: "" },
    ],
  },
  traffic_analysis: {
    traffic_sources: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "name", Type: "varchar(100)", Null: "NO", Key: "UNI", Default: null, Extra: "" },
      { Field: "source_type", Type: "varchar(50)", Null: "NO", Key: "", Default: null, Extra: "" },
      { Field: "description", Type: "text", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
    ],
    traffic_records: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "source_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
      { Field: "user_id", Type: "int(11)", Null: "YES", Key: "MUL", Default: null, Extra: "" },
      { Field: "visit_time", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
      { Field: "referrer", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "landing_page", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "exit_page", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "duration_seconds", Type: "int(11)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "device_type", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "os", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "browser", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
    ],
    traffic_campaigns: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "name", Type: "varchar(100)", Null: "NO", Key: "", Default: null, Extra: "" },
      { Field: "source_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
      { Field: "start_date", Type: "date", Null: "NO", Key: "", Default: null, Extra: "" },
      { Field: "end_date", Type: "date", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "budget", Type: "decimal(10,2)", Null: "YES", Key: "", Default: null, Extra: "" },
      {
        Field: "status",
        Type: "enum('active','paused','completed')",
        Null: "NO",
        Key: "",
        Default: "'active'",
        Extra: "",
      },
      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
      {
        Field: "updated_at",
        Type: "datetime",
        Null: "YES",
        Key: "",
        Default: null,
        Extra: "on update CURRENT_TIMESTAMP",
      },
    ],
  },
  content_library: {
    content_items: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "title", Type: "varchar(255)", Null: "NO", Key: "", Default: null, Extra: "" },
      { Field: "content_type", Type: "varchar(50)", Null: "NO", Key: "", Default: null, Extra: "" },
      { Field: "content_data", Type: "json", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "created_by", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
      {
        Field: "updated_at",
        Type: "datetime",
        Null: "YES",
        Key: "",
        Default: null,
        Extra: "on update CURRENT_TIMESTAMP",
      },
      {
        Field: "status",
        Type: "enum('draft','published','archived')",
        Null: "NO",
        Key: "",
        Default: "'draft'",
        Extra: "",
      },
    ],
    content_categories: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "name", Type: "varchar(100)", Null: "NO", Key: "UNI", Default: null, Extra: "" },
      { Field: "parent_id", Type: "int(11)", Null: "YES", Key: "MUL", Default: null, Extra: "" },
      { Field: "description", Type: "text", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
    ],
    content_item_categories: [
      { Field: "content_id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "" },
      { Field: "category_id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "" },
      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
    ],
    content_tags: [
      { Field: "content_id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "" },
      { Field: "tag_id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "" },
      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
    ],
  },
  wechat_accounts: {
    accounts: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "wechat_id", Type: "varchar(100)", Null: "NO", Key: "UNI", Default: null, Extra: "" },
      { Field: "nickname", Type: "varchar(100)", Null: "NO", Key: "", Default: null, Extra: "" },
      { Field: "avatar_url", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "qr_code_url", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
      {
        Field: "status",
        Type: "enum('active','inactive','blocked')",
        Null: "NO",
        Key: "",
        Default: "'active'",
        Extra: "",
      },
      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
      { Field: "last_sync", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
    ],
    friends: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "account_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
      { Field: "friend_wechat_id", Type: "varchar(100)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "nickname", Type: "varchar(100)", Null: "NO", Key: "", Default: null, Extra: "" },
      { Field: "remark", Type: "varchar(100)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "avatar_url", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
      {
        Field: "gender",
        Type: "enum('male','female','unknown')",
        Null: "YES",
        Key: "",
        Default: "'unknown'",
        Extra: "",
      },
      { Field: "region", Type: "varchar(100)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "added_at", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "last_interaction", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
    ],
    groups: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "account_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
      { Field: "group_name", Type: "varchar(100)", Null: "NO", Key: "", Default: null, Extra: "" },
      { Field: "group_avatar_url", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "member_count", Type: "int(11)", Null: "YES", Key: "", Default: "0", Extra: "" },
      { Field: "created_at", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "last_active", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
    ],
    group_members: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "group_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
      { Field: "friend_id", Type: "int(11)", Null: "YES", Key: "MUL", Default: null, Extra: "" },
      { Field: "wechat_id", Type: "varchar(100)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "nickname", Type: "varchar(100)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "joined_at", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "is_admin", Type: "tinyint(1)", Null: "NO", Key: "", Default: "0", Extra: "" },
    ],
  },
  device_management: {
    devices: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "device_name", Type: "varchar(100)", Null: "NO", Key: "", Default: null, Extra: "" },
      { Field: "device_type", Type: "varchar(50)", Null: "NO", Key: "", Default: null, Extra: "" },
      { Field: "model", Type: "varchar(100)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "os_version", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "imei", Type: "varchar(50)", Null: "YES", Key: "UNI", Default: null, Extra: "" },
      { Field: "serial_number", Type: "varchar(100)", Null: "YES", Key: "UNI", Default: null, Extra: "" },
      {
        Field: "status",
        Type: "enum('online','offline','maintenance')",
        Null: "NO",
        Key: "",
        Default: "'offline'",
        Extra: "",
      },
      { Field: "last_online", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
      { Field: "registered_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
    ],
    device_accounts: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "device_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
      { Field: "account_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
      { Field: "binding_time", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
      { Field: "status", Type: "enum('active','inactive')", Null: "NO", Key: "", Default: "'active'", Extra: "" },
      { Field: "last_sync", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
    ],
    device_logs: [
      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
      { Field: "device_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
      { Field: "log_type", Type: "varchar(50)", Null: "NO", Key: "", Default: null, Extra: "" },
      { Field: "log_message", Type: "text", Null: "NO", Key: "", Default: null, Extra: "" },
      {
        Field: "log_level",
        Type: "enum('info','warning','error','critical')",
        Null: "NO",
        Key: "",
        Default: "'info'",
        Extra: "",
      },
      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
      { Field: "additional_data", Type: "json", Null: "YES", Key: "", Default: null, Extra: "" },
    ],
  },
}

// 获取所有数据库
export async function getDatabases() {
  return mockDatabases
}

// 获取指定数据库中的所有表
export async function getTables(database: string) {
  if (!mockDatabaseStructure[database]) {
    return []
  }

return Object.keys(mockDatabaseStructure[database]).map((tableName) => {
    return { Tables_in_database: tableName }
  })
}

// 获取表结构
export async function getTableStructure(database: string, table: string) {
  if (!mockDatabaseStructure[database] || !mockDatabaseStructure[database][table]) {
    return []
  }

return mockDatabaseStructure[database][table]
}

// 获取表的创建语句
export async function getTableCreateStatement(database: string, table: string) {
  // 这里只返回一个模拟的创建语句
  return [
    {
      Table: table,
      "Create Table": `CREATE TABLE ${table} (...)`,
    },
  ]
}

// 获取数据库完整结构信息
export async function getDatabaseStructure(database: string) {
  if (!mockDatabaseStructure[database]) {
    return {}
  }

return mockDatabaseStructure[database]
}
[V0_FILE]typescriptreact:file="app/database-structure/page.tsx" isMerged="true"
import { DatabaseStructureViewer } from "@/components/data-integration/database-structure-viewer"

export default function DatabaseStructurePage() {
  return (
    <div className="container mx-auto py-6">
      <h1 className="text-2xl font-bold mb-6">数据库结构查看器</h1>
      <DatabaseStructureViewer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/conversion/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { BarChart, LineChart } from "@/components/charts"
import {
  Activity,
  ArrowUpRight,
  Download,
  Filter,
  RefreshCw,
  ShoppingCart,
  TrendingUp,
  MessageSquare,
} from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

export default function ConversionPage() {
  const [timeRange, setTimeRange] = useState("30days")

return (
    <div className="container mx-auto p-4 space-y-6">
      {/* 页面标题和工具栏 */}
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold">成交转化</h1>
          <p className="text-muted-foreground mt-1">促进用户交易与转化的功能集合</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-[140px]">
              <SelectValue placeholder="选择时间范围" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="7days">最近7天</SelectItem>
              <SelectItem value="30days">最近30天</SelectItem>
              <SelectItem value="90days">最近90天</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="icon">
            <Filter className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="icon">
            <RefreshCw className="h-4 w-4" />
          </Button>
          <Button variant="outline">
            <Download className="mr-2 h-4 w-4" />
            导出报告
          </Button>
        </div>
      </div>

{/* 成交转化概览 */}
      <Card className="border-none shadow-md overflow-hidden">
        <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
          <div className="flex justify-between items-center">
            <div>
              <CardTitle>成交转化概览</CardTitle>
              <CardDescription>用户交易与转化整体情况</CardDescription>
            </div>
            <Button variant="outline">
              <ShoppingCart className="h-4 w-4 mr-2" />
              查看详情
            </Button>
          </div>
        </CardHeader>
        <CardContent className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-none shadow-sm">
              <CardContent className="p-4">
                <div className="flex justify-between items-start">
                  <div>
                    <div className="text-sm font-medium text-blue-600">浏览转化率</div>
                    <div className="text-2xl font-bold mt-2">45.2%</div>
                    <div className="text-sm text-green-600 mt-1 flex items-center">
                      <ArrowUpRight className="h-4 w-4 mr-1" />
                      较上月提升 2.1%
                    </div>
                  </div>
                  <div className="bg-blue-100 p-2 rounded-full">
                    <Activity className="h-5 w-5 text-blue-600" />
                  </div>
                </div>
                <div className="mt-3">
                  <div className="flex justify-between text-xs mb-1">
                    <span>目标</span>
                    <span>50%</span>
                  </div>
                  <Progress value={90.4} className="h-1.5 bg-blue-100" />
                </div>
              </CardContent>
            </Card>

<Card className="bg-gradient-to-br from-green-50 to-emerald-50 border-none shadow-sm">
              <CardContent className="p-4">
                <div className="flex justify-between items-start">
                  <div>
                    <div className="text-sm font-medium text-green-600">购买转化率</div>
                    <div className="text-2xl font-bold mt-2">12.5%</div>
                    <div className="text-sm text-green-600 mt-1 flex items-center">
                      <ArrowUpRight className="h-4 w-4 mr-1" />
                      较上月提升 0.8%
                    </div>
                  </div>
                  <div className="bg-green-100 p-2 rounded-full">
                    <ShoppingCart className="h-5 w-5 text-green-600" />
                  </div>
                </div>
                <div className="mt-3">
                  <div className="flex justify-between text-xs mb-1">
                    <span>目标</span>
                    <span>15%</span>
                  </div>
                  <Progress value={83.3} className="h-1.5 bg-green-100" />
                </div>
              </CardContent>
            </Card>

<Card className="bg-gradient-to-br from-purple-50 to-pink-50 border-none shadow-sm">
              <CardContent className="p-4">
                <div className="flex justify-between items-start">
                  <div>
                    <div className="text-sm font-medium text-purple-600">场景转化率</div>
                    <div className="text-2xl font-bold mt-2">18.3%</div>
                    <div className="text-sm text-green-600 mt-1 flex items-center">
                      <ArrowUpRight className="h-4 w-4 mr-1" />
                      较上月提升 1.2%
                    </div>
                  </div>
                  <div className="bg-purple-100 p-2 rounded-full">
                    <MessageSquare className="h-5 w-5 text-purple-600" />
                  </div>
                </div>
                <div className="mt-3">
                  <div className="flex justify-between text-xs mb-1">
                    <span>目标</span>
                    <span>20%</span>
                  </div>
                  <Progress value={91.5} className="h-1.5 bg-purple-100" />
                </div>
              </CardContent>
            </Card>

<Card className="bg-gradient-to-br from-amber-50 to-yellow-50 border-none shadow-sm">
              <CardContent className="p-4">
                <div className="flex justify-between items-start">
                  <div>
                    <div className="text-sm font-medium text-amber-600">客单价</div>
                    <div className="text-2xl font-bold mt-2">¥245</div>
                    <div className="text-sm text-green-600 mt-1 flex items-center">
                      <ArrowUpRight className="h-4 w-4 mr-1" />
                      较上月提升 5.2%
                    </div>
                  </div>
                  <div className="bg-amber-100 p-2 rounded-full">
                    <TrendingUp className="h-5 w-5 text-amber-600" />
                  </div>
                </div>
                <div className="mt-3">
                  <div className="flex justify-between text-xs mb-1">
                    <span>目标</span>
                    <span>¥250</span>
                  </div>
                  <Progress value={98} className="h-1.5 bg-amber-100" />
                </div>
              </CardContent>
            </Card>
          </div>
        </CardContent>
      </Card>

{/* 用户行为分析 */}
      <Card className="border-none shadow-md overflow-hidden">
        <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
          <div className="flex justify-between items-center">
            <div>
              <CardTitle>用户行为分析</CardTitle>
              <CardDescription>用户行为与交互数据分析</CardDescription>
            </div>
            <Badge className="bg-blue-100 text-blue-800">转化</Badge>
          </div>
        </CardHeader>
        <CardContent className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-sm">
              <h3 className="text-lg font-medium mb-3">用户行为分析</h3>
              <BarChart
                data={{
                  labels: ["浏览", "搜索", "点击", "加购", "下单", "支付", "分享"],
                  datasets: [
                    {
                      label: "行为占比(%)",
                      data: [100, 65, 45, 25, 15, 12, 8],
                      backgroundColor: "rgba(59, 130, 246, 0.8)",
                    },
                  ],
                }}
                height={220}
              />
            </div>
            <div className="bg-white p-4 rounded-lg shadow-sm">
              <h3 className="text-lg font-medium mb-3">用户活跃度分析</h3>
              <LineChart
                data={{
                  labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
                  datasets: [
                    {
                      label: "活跃用户数",
                      data: [65000, 59000, 80000, 81000, 56000, 85000, 90000],
                      borderColor: "rgb(59, 130, 246)",
                      backgroundColor: "rgba(59, 130, 246, 0.1)",
                    },
                    {
                      label: "平均停留时间(分钟)",
                      data: [12, 10, 14, 15, 11, 18, 20],
                      borderColor: "rgb(16, 185, 129)",
                      backgroundColor: "rgba(16, 185, 129, 0.1)",
                    },
                  ],
                }}
                height={220}
              />
            </div>
          </div>

<div className="mt-4">
            <Card className="bg-white shadow-sm">
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">用户行为指标</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <div className="space-y-2">
                    <div className="flex justify-between items-center">
                      <span className="text-sm">平均活跃度</span>
                      <span className="text-sm font-medium">68.5%</span>
                    </div>
                    <Progress value={68.5} className="h-1.5" />
                  </div>

<div className="space-y-2">
                    <div className="flex justify-between items-center">
                      <span className="text-sm">平均停留时间</span>
                      <span className="text-sm font-medium">12.5分钟</span>
                    </div>
                    <Progress value={62.5} className="h-1.5" />
                  </div>

{/* 交易漏斗分析 */}
      <Card className="border-none shadow-md overflow-hidden">
        <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b">
          <div className="flex justify-between items-center">
            <div>
              <CardTitle>交易漏斗分析</CardTitle>
              <CardDescription>用户交易转化漏斗分析</CardDescription>
            </div>
            <Badge className="bg-blue-100 text-blue-800">转化</Badge>
          </div>
        </CardHeader>
        <CardContent className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-white p-4 rounded-lg shadow-sm">
              <h3 className="text-lg font-medium mb-3">转化漏斗</h3>
              <div className="flex flex-col items-center space-y-2 py-4">
                <div className="w-full max-w-md">
                  <div className="relative pt-1">
                    <div className="flex mb-2 items-center justify-between">
                      <div>
                        <span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200">
                          浏览 (100%)
                        </span>
                      </div>
                      <div className="text-right">
                        <span className="text-xs font-semibold inline-block text-blue-600">125,689</span>
                      </div>
                    </div>
                    <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-blue-200">
                      <div
                        style={{ width: "100%" }}
                        className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"
                      ></div>
                    </div>
                  </div>
                </div>

<div className="w-full max-w-md">
                  <div className="relative pt-1">
                    <div className="flex mb-2 items-center justify-between">
                      <div>
                        <span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-green-600 bg-green-200">
                          支付完成 (8%)
                        </span>
                      </div>
                      <div className="text-right">
                        <span className="text-xs font-semibold inline-block text-green-600">10,055</span>
                      </div>
                    </div>
                    <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-green-200">
                      <div
                        style={{ width: "8%" }}
                        className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="bg-white p-4 rounded-lg shadow-sm">
              <h3 className="text-lg font-medium mb-3">转化率趋势</h3>
              <LineChart
                data={{
                  labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
                  datasets: [
                    {
                      label: "浏览转化率",
                      data: [40, 42, 43, 44, 45, 46, 45],
                      borderColor: "rgb(59, 130, 246)",
                      backgroundColor: "rgba(59, 130, 246, 0.1)",
                    },
                    {
                      label: "购买转化率",
                      data: [15, 16, 16.5, 17, 17.5, 18, 18],
                      borderColor: "rgb(16, 185, 129)",
                      backgroundColor: "rgba(16, 185, 129, 0.1)",
                    },
                  ],
                }}
                height={220}
              />
            </div>
          </div>
        </CardContent>
      </Card>

{/* 场景管理 */}
      <Card className="border-none shadow-md overflow-hidden">
        <CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 border-b">
          <div className="flex justify-between items-center">
            <div>
              <CardTitle>场景管理</CardTitle>
              <CardDescription>用户交互场景管理与分析</CardDescription>
            </div>
            <Badge className="bg-blue-100 text-blue-800">转化</Badge>
          </div>
        </CardHeader>
        <CardContent className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card className="bg-white shadow-sm">
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">场景概览</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="text-sm">活跃场景数</span>
                    <span className="text-sm font-medium">48</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm">场景转化率</span>
                    <span className="text-sm font-medium">18.3%</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm">场景覆盖率</span>
                    <span className="text-sm font-medium">85.2%</span>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card className="bg-white shadow-sm">
              <CardHeader className="pb-2">
                <CardTitle className="text-lg">场景效果</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="text-sm">平均停留时间</span>
                    <span className="text-sm font-medium">8.5分钟</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm">互动率</span>
                    <span className="text-sm font-medium">42.3%</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-sm">转化率</span>
                    <span className="text-sm font-medium">18.3%</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

<div className="mt-4">
            <div className="bg-white p-4 rounded-lg shadow-sm">
              <h3 className="text-lg font-medium mb-3">场景使用趋势</h3>
              <LineChart
                data={{
                  labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
                  datasets: [
                    {
                      label: "社交场景",
                      data: [25000, 27000, 28000, 30000, 32000, 35000, 38000],
                      borderColor: "rgb(59, 130, 246)",
                      backgroundColor: "rgba(59, 130, 246, 0.1)",
                    },
                    {
                      label: "购物场景",
                      data: [20000, 22000, 24000, 25000, 28000, 30000, 32000],
                      borderColor: "rgb(16, 185, 129)",
                      backgroundColor: "rgba(16, 185, 129, 0.1)",
                    },
                  ],
                }}
                height={220}
              />
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/devices/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { PieChart, BarChart, LineChart } from "@/components/charts"
import { Badge } from "@/components/ui/badge"
import { Activity, Filter, Plus, RefreshCw, Search, Smartphone, Laptop, Monitor, Wifi, WifiOff } from "lucide-react"

export default function DevicesPage() {
  const [deviceType, setDeviceType] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")

return (
    <div className="container mx-auto p-4 space-y-6">
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold">设备管理</h1>
          <p className="text-muted-foreground mt-1">管理和分析用户设备数据</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            添加设备
          </Button>
        </div>
      </div>

<Card className="border-none shadow-md overflow-hidden">
        <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
          <div className="flex justify-between items-center">
            <div>
              <CardTitle>设备分析</CardTitle>
              <CardDescription>设备类型、活跃度和使用情况分析</CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent className="p-4">
          <Tabs defaultValue="overview" className="space-y-4">
            <TabsList className="grid grid-cols-3 w-full">
              <TabsTrigger value="overview">设备概览</TabsTrigger>
              <TabsTrigger value="activity">活跃分析</TabsTrigger>
              <TabsTrigger value="distribution">分布分析</TabsTrigger>
            </TabsList>

<TabsContent value="overview" className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="bg-white p-4 rounded-lg shadow-sm">
                  <h3 className="text-lg font-medium mb-3">设备类型分布</h3>
                  <PieChart
                    data={{
                      labels: ["iOS设备", "Android设备", "Windows设备", "Mac设备", "其他设备"],
                      datasets: [
                        {
                          data: [45, 40, 8, 5, 2],
                          backgroundColor: [
                            "rgb(59, 130, 246)",
                            "rgb(16, 185, 129)",
                            "rgb(249, 115, 22)",
                            "rgb(139, 92, 246)",
                            "rgb(156, 163, 175)",
                          ],
                        },
                      ],
                    }}
                    height={220}
                  />
                </div>
                <div className="bg-white p-4 rounded-lg shadow-sm">
                  <h3 className="text-lg font-medium mb-3">设备型号分布 Top 10</h3>
                  <BarChart
                    data={{
                      labels: [
                        "iPhone 13",
                        "iPhone 12",
                        "Samsung S21",
                        "iPhone 14",
                        "Xiaomi 12",
                        "Huawei P40",
                        "OPPO Find X",
                        "Vivo X60",
                        "OnePlus 9",
                        "iPhone SE",
                      ],
                      datasets: [
                        {
                          label: "设备数量",
                          data: [25000, 22000, 18000, 15000, 12000, 10000, 8000, 7000, 6000, 5000],
                          backgroundColor: "rgba(59, 130, 246, 0.8)",
                        },
                      ],
                    }}
                    height={220}
                  />
                </div>
              </div>
            </TabsContent>

<TabsContent value="activity" className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="bg-white p-4 rounded-lg shadow-sm">
                  <h3 className="text-lg font-medium mb-3">设备活跃度趋势</h3>
                  <LineChart
                    data={{
                      labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
                      datasets: [
                        {
                          label: "iOS设备",
                          data: [75, 78, 80, 82, 85, 87, 90],
                          borderColor: "rgb(59, 130, 246)",
                          backgroundColor: "rgba(59, 130, 246, 0.1)",
                        },
                        {
                          label: "Android设备",
                          data: [70, 72, 75, 78, 80, 82, 85],
                          borderColor: "rgb(16, 185, 129)",
                          backgroundColor: "rgba(16, 185, 129, 0.1)",
                        },
                      ],
                    }}
                    height={220}
                  />
                </div>
                <div className="bg-white p-4 rounded-lg shadow-sm">
                  <h3 className="text-lg font-medium mb-3">设备使用时长分布</h3>
                  <PieChart
                    data={{
                      labels: ["<30分钟/天", "30-60分钟/天", "1-2小时/天", "2-4小时/天", ">4小时/天"],
                      datasets: [
                        {
                          data: [15, 25, 30, 20, 10],
                          backgroundColor: [
                            "rgb(156, 163, 175)",
                            "rgb(249, 115, 22)",
                            "rgb(16, 185, 129)",
                            "rgb(59, 130, 246)",
                            "rgb(139, 92, 246)",
                          ],
                        },
                      ],
                    }}
                    height={220}
                  />
                </div>
              </div>
            </TabsContent>

<TabsContent value="distribution" className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="bg-white p-4 rounded-lg shadow-sm">
                  <h3 className="text-lg font-medium mb-3">地区分布 Top 10</h3>
                  <BarChart
                    data={{
                      labels: ["北京", "上海", "广州", "深圳", "杭州", "成都", "武汉", "南京", "重庆", "西安"],
                      datasets: [
                        {
                          label: "设备数量",
                          data: [18500, 17200, 15800, 14500, 12000, 10500, 9800, 8500, 7800, 7200],
                          backgroundColor: "rgba(59, 130, 246, 0.8)",
                        },
                      ],
                    }}
                    height={220}
                  />
                </div>
                <div className="bg-white p-4 rounded-lg shadow-sm">
                  <h3 className="text-lg font-medium mb-3">系统版本分布</h3>
                  <PieChart
                    data={{
                      labels: ["iOS 16", "iOS 15", "iOS 14", "Android 13", "Android 12", "Android 11", "其他"],
                      datasets: [
                        {
                          data: [30, 25, 10, 15, 10, 5, 5],
                          backgroundColor: [
                            "rgb(59, 130, 246)",
                            "rgb(96, 165, 250)",
                            "rgb(147, 197, 253)",
                            "rgb(16, 185, 129)",
                            "rgb(52, 211, 153)",
                            "rgb(110, 231, 183)",
                            "rgb(156, 163, 175)",
                          ],
                        },
                      ],
                    }}
                    height={220}
                  />
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>

<Card className="border-none shadow-md overflow-hidden">
        <CardHeader className="bg-white border-b">
          <div className="flex justify-between items-center">
            <div>
              <CardTitle>设备列表</CardTitle>
              <CardDescription>查看和管理所有设备</CardDescription>
            </div>
            <div className="flex items-center space-x-2">
              <div className="relative">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  type="search"
                  placeholder="搜索设备..."
                  className="pl-8 w-[200px] md:w-[300px]"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <Select value={deviceType} onValueChange={setDeviceType}>
                <SelectTrigger className="w-[150px]">
                  <SelectValue placeholder="设备类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部类型</SelectItem>
                  <SelectItem value="ios">iOS设备</SelectItem>
                  <SelectItem value="android">Android设备</SelectItem>
                  <SelectItem value="windows">Windows设备</SelectItem>
                  <SelectItem value="mac">Mac设备</SelectItem>
                </SelectContent>
              </Select>
              <Button variant="outline" size="icon">
                <Filter className="h-4 w-4" />
              </Button>
              <Button variant="outline" size="icon">
                <RefreshCw className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-50">
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">设备ID</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">设备名称</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">设备类型</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">系统版本</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">状态</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">最后活跃时间</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">操作</th>
                </tr>
              </thead>
              <tbody className="divide-y">
                {[
                  {
                    id: "DEV-001",
                    name: "iPhone 13 Pro",
                    type: "iOS",
                    version: "iOS 16.2",
                    status: "在线",
                    lastActive: "2023-07-15 14:30",
                  },
                  {
                    id: "DEV-002",
                    name: "Samsung Galaxy S21",
                    type: "Android",
                    version: "Android 13",
                    status: "在线",
                    lastActive: "2023-07-15 13:45",
                  },
                  {
                    id: "DEV-003",
                    name: "MacBook Pro",
                    type: "Mac",
                    version: "macOS 13.1",
                    status: "在线",
                    lastActive: "2023-07-15 12:20",
                  },
                  {
                    id: "DEV-004",
                    name: "Xiaomi 12",
                    type: "Android",
                    version: "Android 12",
                    status: "离线",
                    lastActive: "2023-07-14 18:10",
                  },
                  {
                    id: "DEV-005",
                    name: "iPad Pro",
                    type: "iOS",
                    version: "iOS 16.1",
                    status: "在线",
                    lastActive: "2023-07-15 10:05",
                  },
                  {
                    id: "DEV-006",
                    name: "Huawei P40",
                    type: "Android",
                    version: "Android 11",
                    status: "离线",
                    lastActive: "2023-07-13 09:30",
                  },
                  {
                    id: "DEV-007",
                    name: "Windows Laptop",
                    type: "Windows",
                    version: "Windows 11",
                    status: "在线",
                    lastActive: "2023-07-15 11:45",
                  },
                  {
                    id: "DEV-008",
                    name: "OPPO Find X5",
                    type: "Android",
                    version: "Android 13",
                    status: "在线",
                    lastActive: "2023-07-15 09:20",
                  },
                  {
                    id: "DEV-009",
                    name: "iPhone 12",
                    type: "iOS",
                    version: "iOS 16.2",
                    status: "离线",
                    lastActive: "2023-07-14 22:15",
                  },
                  {
                    id: "DEV-010",
                    name: "Vivo X80",
                    type: "Android",
                    version: "Android 12",
                    status: "在线",
                    lastActive: "2023-07-15 08:50",
                  },
                ].map((device) => (
                  <tr key={device.id} className="hover:bg-gray-50">
                    <td className="px-4 py-3 text-sm">{device.id}</td>
                    <td className="px-4 py-3 text-sm font-medium">{device.name}</td>
                    <td className="px-4 py-3 text-sm">
                      <div className="flex items-center">
                        {device.type === "iOS" && <Smartphone className="h-4 w-4 mr-1 text-blue-500" />}
                        {device.type === "Android" && <Smartphone className="h-4 w-4 mr-1 text-green-500" />}
                        {device.type === "Mac" && <Laptop className="h-4 w-4 mr-1 text-gray-500" />}
                        {device.type === "Windows" && <Monitor className="h-4 w-4 mr-1 text-blue-400" />}
                        {device.type}
                      </div>
                    </td>
                    <td className="px-4 py-3 text-sm">{device.version}</td>
                    <td className="px-4 py-3 text-sm">
                      <Badge
                        variant="outline"
                        className={`${
                          device.status === "在线"
                            ? "bg-green-50 text-green-600 border-green-200"
                            : "bg-red-50 text-red-600 border-red-200"
                        }`}
                      >
                        {device.status}
                      </Badge>
                    </td>
                    <td className="px-4 py-3 text-sm">{device.lastActive}</td>
                    <td className="px-4 py-3 text-sm">
                      <Button variant="ghost" size="sm">
                        详情
                      </Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/scenarios/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { PieChart, BarChart, LineChart } from "@/components/charts"
import {
  Activity,
  Filter,
  Plus,
  RefreshCw,
  Search,
  MessageSquare,
  ShoppingCart,
  FileText,
  CreditCard,
  Users,
} from "lucide-react"

export default function ScenariosPage() {
  const [scenarioType, setScenarioType] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")

return (
    <div className="container mx-auto p-4 space-y-6">
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold">场景管理</h1>
          <p className="text-muted-foreground mt-1">管理和分析用户交互场景</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            创建场景
          </Button>
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="bg-white shadow-sm">
          <CardContent className="p-4 flex items-center">
            <div className="bg-blue-100 p-2 rounded-full mr-3">
              <MessageSquare className="h-5 w-5 text-blue-600" />
            </div>
            <div>
              <div className="text-sm font-medium text-gray-600">场景总数</div>
              <div className="text-xl font-bold">48</div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-white shadow-sm">
          <CardContent className="p-4 flex items-center">
            <div className="bg-green-100 p-2 rounded-full mr-3">
              <Users className="h-5 w-5 text-green-600" />
            </div>
            <div>
              <div className="text-sm font-medium text-gray-600">覆盖用户</div>
              <div className="text-xl font-bold">98,765</div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-white shadow-sm">
          <CardContent className="p-4 flex items-center">
            <div className="bg-purple-100 p-2 rounded-full mr-3">
              <Activity className="h-5 w-5 text-purple-600" />
            </div>
            <div>
              <div className="text-sm font-medium text-gray-600">平均转化率</div>
              <div className="text-xl font-bold">12.2%</div>
            </div>
          </CardContent>
        </Card>
        <Card className="bg-white shadow-sm">
          <CardContent className="p-4 flex items-center">
            <div className="bg-amber-100 p-2 rounded-full mr-3">
              <CreditCard className="h-5 w-5 text-amber-600" />
            </div>
            <div>
              <div className="text-sm font-medium text-gray-600">平均客单价</div>
              <div className="text-xl font-bold">¥1,850</div>
            </div>
          </CardContent>
        </Card>
      </div>

<Card className="border-none shadow-md overflow-hidden">
        <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
          <div className="flex justify-between items-center">
            <div>
              <CardTitle>场景分析</CardTitle>
              <CardDescription>场景类型、转化率和用户行为分析</CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent className="p-4">
          <Tabs defaultValue="overview" className="space-y-4">
            <TabsList className="grid grid-cols-3 w-full">
              <TabsTrigger value="overview">场景概览</TabsTrigger>
              <TabsTrigger value="conversion">转化分析</TabsTrigger>
              <TabsTrigger value="behavior">行为分析</TabsTrigger>
            </TabsList>

<TabsContent value="overview" className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="bg-white p-4 rounded-lg shadow-sm">
                  <h3 className="text-lg font-medium mb-3">场景类型分布</h3>
                  <PieChart
                    data={{
                      labels: ["社交场景", "购物场景", "内容消费", "服务咨询", "金融场景"],
                      datasets: [
                        {
                          data: [35, 30, 20, 10, 5],
                          backgroundColor: [
                            "rgb(59, 130, 246)",
                            "rgb(16, 185, 129)",
                            "rgb(249, 115, 22)",
                            "rgb(139, 92, 246)",
                            "rgb(156, 163, 175)",
                          ],
                        },
                      ],
                    }}
                    height={220}
                  />
                </div>
                <div className="bg-white p-4 rounded-lg shadow-sm">
                  <h3 className="text-lg font-medium mb-3">场景使用趋势</h3>
                  <LineChart
                    data={{
                      labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
                      datasets: [
                        {
                          label: "社交场景",
                          data: [25000, 27000, 28000, 30000, 32000, 35000, 38000],
                          borderColor: "rgb(59, 130, 246)",
                          backgroundColor: "rgba(59, 130, 246, 0.1)",
                        },
                        {
                          label: "购物场景",
                          data: [20000, 22000, 24000, 25000, 28000, 30000, 32000],
                          borderColor: "rgb(16, 185, 129)",
                          backgroundColor: "rgba(16, 185, 129, 0.1)",
                        },
                      ],
                    }}
                    height={220}
                  />
                </div>
              </div>
            </TabsContent>

<TabsContent value="conversion" className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="bg-white p-4 rounded-lg shadow-sm">
                  <h3 className="text-lg font-medium mb-3">场景转化率</h3>
                  <BarChart
                    data={{
                      labels: ["社交场景", "购物场景", "内容消费", "服务咨询", "金融场景"],
                      datasets: [
                        {
                          label: "转化率(%)",
                          data: [12.5, 18.7, 8.3, 6.2, 15.4],
                          backgroundColor: "rgba(59, 130, 246, 0.8)",
                        },
                      ],
                    }}
                    height={220}
                  />
                </div>
                <div className="bg-white p-4 rounded-lg shadow-sm">
                  <h3 className="text-lg font-medium mb-3">转化率趋势</h3>
                  <LineChart
                    data={{
                      labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
                      datasets: [
                        {
                          label: "平均转化率",
                          data: [8.5, 9.2, 10.1, 10.8, 11.5, 12.0, 12.2],
                          borderColor: "rgb(59, 130, 246)",
                          backgroundColor: "rgba(59, 130, 246, 0.1)",
                        },
                      ],
                    }}
                    height={220}
                  />
                </div>
              </div>
            </TabsContent>

<TabsContent value="behavior" className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="bg-white p-4 rounded-lg shadow-sm">
                  <h3 className="text-lg font-medium mb-3">用户行为分布</h3>
                  <PieChart
                    data={{
                      labels: ["浏览", "互动", "分享", "评论", "购买"],
                      datasets: [
                        {
                          data: [45, 25, 15, 10, 5],
                          backgroundColor: [
                            "rgb(59, 130, 246)",
                            "rgb(16, 185, 129)",
                            "rgb(249, 115, 22)",
                            "rgb(139, 92, 246)",
                            "rgb(156, 163, 175)",
                          ],
                        },
                      ],
                    }}
                    height={220}
                  />
                </div>
                <div className="bg-white p-4 rounded-lg shadow-sm">
                  <h3 className="text-lg font-medium mb-3">用户停留时间</h3>
                  <BarChart
                    data={{
                      labels: ["社交场景", "购物场景", "内容消费", "服务咨询", "金融场景"],
                      datasets: [
                        {
                          label: "平均停留时间(分钟)",
                          data: [12.5, 8.7, 15.3, 6.2, 4.4],
                          backgroundColor: "rgba(59, 130, 246, 0.8)",
                        },
                      ],
                    }}
                    height={220}
                  />
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>

<Card className="border-none shadow-md overflow-hidden">
        <CardHeader className="bg-white border-b">
          <div className="flex justify-between items-center">
            <div>
              <CardTitle>场景列表</CardTitle>
              <CardDescription>查看和管理所有场景</CardDescription>
            </div>
            <div className="flex items-center space-x-2">
              <div className="relative">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  type="search"
                  placeholder="搜索场景..."
                  className="pl-8 w-[200px] md:w-[300px]"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <Select value={scenarioType} onValueChange={setScenarioType}>
                <SelectTrigger className="w-[150px]">
                  <SelectValue placeholder="场景类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">全部类型</SelectItem>
                  <SelectItem value="social">社交场景</SelectItem>
                  <SelectItem value="shopping">购物场景</SelectItem>
                  <SelectItem value="content">内容消费</SelectItem>
                  <SelectItem value="service">服务咨询</SelectItem>
                  <SelectItem value="finance">金融场景</SelectItem>
                </SelectContent>
              </Select>
              <Button variant="outline" size="icon">
                <Filter className="h-4 w-4" />
              </Button>
              <Button variant="outline" size="icon">
                <RefreshCw className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="bg-gray-50">
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">场景ID</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">场景名称</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">场景类型</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">覆盖用户</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">转化率</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">创建时间</th>
                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">操作</th>
                </tr>
              </thead>
              <tbody className="divide-y">
                {[
                  {
                    id: "SCN-001",
                    name: "社交互动推荐",
                    type: "社交场景",
                    users: 25678,
                    conversion: 12.5,
                    created: "2023-05-15",
                  },
                  {
                    id: "SCN-002",
                    name: "商品购买流程",
                    type: "购物场景",
                    users: 18765,
                    conversion: 18.7,
                    created: "2023-05-20",
                  },
                  {
                    id: "SCN-003",
                    name: "视频内容推荐",
                    type: "内容消费",
                    users: 32456,
                    conversion: 8.3,
                    created: "2023-06-01",
                  },
                  {
                    id: "SCN-004",
                    name: "客服咨询入口",
                    type: "服务咨询",
                    users: 12345,
                    conversion: 6.2,
                    created: "2023-06-10",
                  },
                  {
                    id: "SCN-005",
                    name: "支付流程优化",
                    type: "金融场景",
                    users: 8765,
                    conversion: 15.4,
                    created: "2023-06-15",
                  },
                  {
                    id: "SCN-006",
                    name: "社区讨论互动",
                    type: "社交场景",
                    users: 15432,
                    conversion: 10.8,
                    created: "2023-06-20",
                  },
                  {
                    id: "SCN-007",
                    name: "促销活动推荐",
                    type: "购物场景",
                    users: 21345,
                    conversion: 16.2,
                    created: "2023-06-25",
                  },
                  {
                    id: "SCN-008",
                    name: "文章阅读推荐",
                    type: "内容消费",
                    users: 18765,
                    conversion: 7.5,
                    created: "2023-07-01",
                  },
                  {
                    id: "SCN-009",
                    name: "问题反馈流程",
                    type: "服务咨询",
                    users: 9876,
                    conversion: 5.8,
                    created: "2023-07-05",
                  },
                  {
                    id: "SCN-010",
                    name: "会员充值流程",
                    type: "金融场景",
                    users: 6543,
                    conversion: 14.2,
                    created: "2023-07-10",
                  },
                ].map((scenario) => (
                  <tr key={scenario.id} className="hover:bg-gray-50">
                    <td className="px-4 py-3 text-sm">{scenario.id}</td>
                    <td className="px-4 py-3 text-sm font-medium">{scenario.name}</td>
                    <td className="px-4 py-3 text-sm">
                      <div className="flex items-center">
                        {scenario.type === "社交场景" && <MessageSquare className="h-4 w-4 mr-1 text-blue-500" />}
                        {scenario.type === "购物场景" && <ShoppingCart className="h-4 w-4 mr-1 text-green-500" />}
                        {scenario.type === "内容消费" && <FileText className="h-4 w-4 mr-1 text-orange-500" />}
                        {scenario.type === "服务咨询" && <Users className="h-4 w-4 mr-1 text-purple-500" />}
                        {scenario.type === "金融场景" && <CreditCard className="h-4 w-4 mr-1 text-amber-500" />}
                        {scenario.type}
                      </div>
                    </td>
                    <td className="px-4 py-3 text-sm">{scenario.users.toLocaleString()}</td>
                    <td className="px-4 py-3 text-sm">{scenario.conversion}%</td>
                    <td className="px-4 py-3 text-sm">{scenario.created}</td>
                    <td className="px-4 py-3 text-sm">
                      <Button variant="ghost" size="sm">
                        详情
                      </Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/charts.tsx" isMerged="true"
"use client"

import {
  LineChart as RechartsLineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  BarChart as RechartsBarChart,
  Bar,
  PieChart as RechartsPieChart,
  Pie,
  Cell,
} from "recharts"

interface ChartProps {
  data: any
  height?: number
}

export function LineChart({ data, height = 300 }: ChartProps) {
  return (
    <ResponsiveContainer width="100%" height={height}>
      <RechartsLineChart
        data={data.labels.map((label, i) => {
          const dataPoint = { name: label }
          data.datasets.forEach((dataset, j) => {
            dataPoint[dataset.label] = dataset.data[i]
          })
          return dataPoint
        })}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        {data.datasets.map((dataset, i) => (
          <Line
            key={i}
            type="monotone"
            dataKey={dataset.label}
            stroke={dataset.borderColor}
            fill={dataset.backgroundColor}
            activeDot={{ r: 8 }}
          />
        ))}
      </RechartsLineChart>
    </ResponsiveContainer>
  )
}

export function BarChart({ data, height = 300 }: ChartProps) {
  return (
    <ResponsiveContainer width="100%" height={height}>
      <RechartsBarChart
        data={data.labels.map((label, i) => {
          const dataPoint = { name: label }
          data.datasets.forEach((dataset, j) => {
            dataPoint[dataset.label] = dataset.data[i]
          })
          return dataPoint
        })}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        {data.datasets.map((dataset, i) => (
          <Bar key={i} dataKey={dataset.label} fill={dataset.backgroundColor || "#8884d8"} />
        ))}
      </RechartsBarChart>
    </ResponsiveContainer>
  )
}

export function PieChart({ data, height = 300 }: ChartProps) {
  return (
    <ResponsiveContainer width="100%" height={height}>
      <RechartsPieChart>
        <Pie
          data={data.labels.map((label, i) => ({
            name: label,
            value: data.datasets[0].data[i],
          }))}
          cx="50%"
          cy="50%"
          labelLine={false}
          outerRadius={80}
          fill="#8884d8"
          dataKey="value"
          label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
        >
          {data.labels.map((entry, index) => (
            <Cell
              key={`cell-${index}`}
              fill={data.datasets[0].backgroundColor[index] || `#${Math.floor(Math.random() * 16777215).toString(16)}`}
            />
          ))}
        </Pie>
        <Tooltip />
        <Legend />
      </RechartsPieChart>
    </ResponsiveContainer>
  )
}
[V0_FILE]typescriptreact:file="components/tag-tasks/task-list.tsx" isMerged="true"
"use client"

import { useState } from "react"

export function TaskList() {
  const [searchQuery, setSearchQuery] = useState("")
  const [openSections, setOpenSections] = useState({
    taskList: true,
  })

const toggleSection = (section) => {
    setOpenSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

// 模拟数据
  const tasks = [
    {
      id: "1",
      name: "高价值用户标签更新",
      type: "用户价值评估",
      status: "running",
      progress: 65,
      createdAt: "2023-07-15",
      lastRun: "2023-07-20",
      frequency: "每日",
      affectedTags: ["高价值用户", "中价值用户", "低价值用户"],
    },
    {
      id: "2",
      name: "行为标签生成",
      type: "行为分析",
      status: "completed",
      progress: 100,
      createdAt: "2023-07-10",
      lastRun: "2023-07-20",
      frequency: "每日",
      affectedTags: ["消费地点", "消费时间", "消费菜品"],
    },
    {
      id: "3",
      name: "流失风险评估",
      type: "风险预警",
      status: "paused",
      progress: 0,
      createdAt: "2023-06-25",
      lastRun: "2023-07-15",
      frequency: "每周",
      affectedTags: ["流失风险高", "流失风险中", "流失风险低"],
    },
    {
      id: "4",
      name: "兴趣标签更新",
      type: "兴趣分析",
      status: "scheduled",
      progress: 0,
      createdAt: "2023-07-01",
      lastRun: "2023-07-18",
      frequency: "每周",
      affectedTags: ["美食", "旅游", "电影", "音乐"],
    },
    {
      id: "5",
      name: "消费能力评估",
      type: "用户价值评估",
      status: "completed",
      progress: 100,
      createdAt: "2023-06-20",
      lastRun: "2023-07-19",
      frequency: "每周",
      affectedTags: ["高消费", "中消费", "低消费"],
    },
  ]

return (
    <div className="space-y-4">
      {/* 任务列表内容 */}
      <div className="bg-white rounded-lg shadow">
        <div className="p-4">
          <h3 className="text-lg font-medium">标签任务列表</h3>
          <p className="text-sm text-gray-500">管理和监控标签计算任务</p>
        </div>
        <div className="border-t">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  任务名称
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  类型
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  状态
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  进度
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  最后运行
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  操作
                </th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {tasks.map((task) => (
                <tr key={task.id}>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm font-medium text-gray-900">{task.name}</div>
                    <div className="text-sm text-gray-500">创建于 {task.createdAt}</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm text-gray-900">{task.type}</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span
                      className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                      ${
                        task.status === "running"
                          ? "bg-green-100 text-green-800"
                          : task.status === "completed"
                            ? "bg-blue-100 text-blue-800"
                            : task.status === "paused"
                              ? "bg-yellow-100 text-yellow-800"
                              : "bg-gray-100 text-gray-800"
                      }`}
                    >
                      {task.status === "running"
                        ? "运行中"
                        : task.status === "completed"
                          ? "已完成"
                          : task.status === "paused"
                            ? "已暂停"
                            : "已计划"}
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="w-full bg-gray-200 rounded-full h-2.5">
                      <div
                        className={`h-2.5 rounded-full ${
                          task.status === "completed"
                            ? "bg-blue-600"
                            : task.status === "running"
                              ? "bg-green-600"
                              : "bg-gray-400"
                        }`}
                        style={{ width: `${task.progress}%` }}
                      ></div>
                    </div>
                    <div className="text-xs text-gray-500 mt-1">{task.progress}%</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{task.lastRun}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <a href="#" className="text-indigo-600 hover:text-indigo-900 mr-3">
                      查看
                    </a>
                    {task.status === "running" ? (
                      <a href="#" className="text-yellow-600 hover:text-yellow-900">
                        暂停
                      </a>
                    ) : task.status === "paused" || task.status === "scheduled" ? (
                      <a href="#" className="text-green-600 hover:text-green-900">
                        启动
                      </a>
                    ) : null}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="components/charts.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import {
  LineChart as RechartsLineChart,
  Line,
  BarChart as RechartsBarChart,
  Bar,
  PieChart as RechartsPieChart,
  Pie,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  Cell,
} from "recharts"

interface ChartProps {
  data: any
  height?: number
}

export const LineChart: React.FC<ChartProps> = ({ data, height = 300 }) => {
  return (
    <ResponsiveContainer width="100%" height={height}>
      <RechartsLineChart
        data={data.labels.map((label: string, index: number) => {
          const dataPoint: any = { name: label }
          data.datasets.forEach((dataset: any, datasetIndex: number) => {
            dataPoint[dataset.label] = dataset.data[index]
          })
          return dataPoint
        })}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        {data.datasets.map((dataset: any, index: number) => (
          <Line
            key={index}
            type="monotone"
            dataKey={dataset.label}
            stroke={dataset.borderColor}
            fill={dataset.backgroundColor}
            activeDot={{ r: 8 }}
          />
        ))}
      </RechartsLineChart>
    </ResponsiveContainer>
  )
}

export const BarChart: React.FC<ChartProps> = ({ data, height = 300 }) => {
  return (
    <ResponsiveContainer width="100%" height={height}>
      <RechartsBarChart
        data={data.labels.map((label: string, index: number) => {
          const dataPoint: any = { name: label }
          data.datasets.forEach((dataset: any, datasetIndex: number) => {
            dataPoint[dataset.label] = dataset.data[index]
          })
          return dataPoint
        })}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        {data.datasets.map((dataset: any, index: number) => (
          <Bar
            key={index}
            dataKey={dataset.label}
            fill={dataset.backgroundColor || `rgba(59, 130, 246, ${0.8 - index * 0.2})`}
          />
        ))}
      </RechartsBarChart>
    </ResponsiveContainer>
  )
}

export const PieChart: React.FC<ChartProps> = ({ data, height = 300 }) => {
  return (
    <ResponsiveContainer width="100%" height={height}>
      <RechartsPieChart>
        <Tooltip />
        <Legend />
        {data.datasets.map((dataset: any, datasetIndex: number) => (
          <Pie
            key={datasetIndex}
            data={data.labels.map((label: string, index: number) => ({
              name: label,
              value: dataset.data[index],
            }))}
            cx="50%"
            cy="50%"
            outerRadius={80}
            fill="#8884d8"
            dataKey="value"
            label
          >
            {data.labels.map((entry: any, index: number) => (
              <Cell
                key={`cell-${index}`}
                fill={
                  dataset.backgroundColor instanceof Array
                    ? dataset.backgroundColor[index]
                    : `rgba(59, 130, 246, ${0.8 - index * 0.1})`
                }
              />
            ))}
          </Pie>
        ))}
      </RechartsPieChart>
    </ResponsiveContainer>
  )
}
[V0_FILE]typescriptreact:file="components/user-profile/user-profile-analytics.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Button } from "@/components/ui/button"
import { LineChart, BarChart } from "@/components/charts"
import { Download, ChevronDown, ChevronRight } from "lucide-react"
import { useState } from "react"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"

export function UserProfileAnalytics() {
  const [openSections, setOpenSections] = useState({
    valueAnalysis: true,
    behaviorAnalysis: false,
    lifecycleAnalysis: false,
    conversionAnalysis: false,
  })

const toggleSection = (section) => {
    setOpenSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-semibold">用户画像深度分析</h2>
        <div className="flex space-x-2">
          <Select defaultValue="30days">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="选择时间范围" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="7days">最近7天</SelectItem>
              <SelectItem value="30days">最近30天</SelectItem>
              <SelectItem value="90days">最近90天</SelectItem>
              <SelectItem value="custom">自定义范围</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline">
            <Download className="mr-2 h-4 w-4" />
            导出数据
          </Button>
        </div>
      </div>

<Tabs defaultValue="value">
        <TabsList>
          <TabsTrigger value="value">价值分析</TabsTrigger>
          <TabsTrigger value="behavior">行为分析</TabsTrigger>
          <TabsTrigger value="lifecycle">生命周期</TabsTrigger>
          <TabsTrigger value="conversion">转化路径</TabsTrigger>
        </TabsList>
        <TabsContent value="value" className="space-y-4 pt-4">
          <Collapsible open={openSections.valueAnalysis} onOpenChange={() => toggleSection("valueAnalysis")}>
            <Card className="border shadow-sm">
              <CardHeader className="pb-2">
                <CollapsibleTrigger className="flex justify-between items-center w-full">
                  <CardTitle className="text-base font-medium">用户价值分布趋势</CardTitle>
                  {openSections.valueAnalysis ? (
                    <ChevronDown className="h-4 w-4" />
                  ) : (
                    <ChevronRight className="h-4 w-4" />
                  )}
                </CollapsibleTrigger>
              </CardHeader>
              <CollapsibleContent>
                <CardContent>
                  <LineChart
                    data={{
                      labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
                      datasets: [
                        {
                          label: "高价值用户",
                          data: [1200, 1350, 1500, 1680, 1850, 2100, 2450],
                          borderColor: "rgba(16, 185, 129, 0.7)",
                          backgroundColor: "rgba(16, 185, 129, 0.1)",
                        },
                        {
                          label: "中价值用户",
                          data: [5600, 6200, 6800, 7500, 8200, 9000, 9800],
                          borderColor: "rgba(59, 130, 246, 0.7)",
                          backgroundColor: "rgba(59, 130, 246, 0.1)",
                        },
                        {
                          label: "低价值用户",
                          data: [8200, 8500, 8900, 9300, 9800, 10500, 11200],
                          borderColor: "rgba(156, 163, 175, 0.7)",
                          backgroundColor: "rgba(156, 163, 175, 0.1)",
                        },
                      ],
                    }}
                    height={300}
                  />
                </CardContent>
              </CollapsibleContent>
            </Card>
          </Collapsible>
        </TabsContent>
        <TabsContent value="behavior" className="space-y-4 pt-4">
          <Collapsible open={openSections.behaviorAnalysis} onOpenChange={() => toggleSection("behaviorAnalysis")}>
            <Card className="border shadow-sm">
              <CardHeader className="pb-2">
                <CollapsibleTrigger className="flex justify-between items-center w-full">
                  <CardTitle className="text-base font-medium">用户行为轨迹分析</CardTitle>
                  {openSections.behaviorAnalysis ? (
                    <ChevronDown className="h-4 w-4" />
                  ) : (
                    <ChevronRight className="h-4 w-4" />
                  )}
                </CollapsibleTrigger>
              </CardHeader>
              <CollapsibleContent>
                <CardContent>
                  <LineChart
                    data={{
                      labels: ["浏览", "搜索", "加入购物车", "下单", "支付", "评价", "复购"],
                      datasets: [
                        {
                          label: "高价值用户",
                          data: [100, 95, 85, 80, 78, 65, 60],
                          borderColor: "rgba(16, 185, 129, 0.7)",
                          backgroundColor: "rgba(16, 185, 129, 0.1)",
                        },
                        {
                          label: "中价值用户",
                          data: [100, 85, 65, 55, 50, 35, 25],
                          borderColor: "rgba(59, 130, 246, 0.7)",
                          backgroundColor: "rgba(59, 130, 246, 0.1)",
                        },
                        {
                          label: "低价值用户",
                          data: [100, 70, 40, 25, 20, 10, 5],
                          borderColor: "rgba(156, 163, 175, 0.7)",
                          backgroundColor: "rgba(156, 163, 175, 0.1)",
                        },
                      ],
                    }}
                    height={300}
                  />
                </CardContent>
              </CollapsibleContent>
            </Card>
          </Collapsible>
        </TabsContent>
        <TabsContent value="lifecycle" className="space-y-4 pt-4">
          <Collapsible open={openSections.lifecycleAnalysis} onOpenChange={() => toggleSection("lifecycleAnalysis")}>
            <Card className="border shadow-sm">
              <CardHeader className="pb-2">
                <CollapsibleTrigger className="flex justify-between items-center w-full">
                  <CardTitle className="text-base font-medium">用户生命周期分布</CardTitle>
                  {openSections.lifecycleAnalysis ? (
                    <ChevronDown className="h-4 w-4" />
                  ) : (
                    <ChevronRight className="h-4 w-4" />
                  )}
                </CollapsibleTrigger>
              </CardHeader>
              <CollapsibleContent>
                <CardContent>
                  <BarChart
                    data={{
                      labels: ["获取阶段", "激活阶段", "留存阶段", "转化阶段", "忠诚阶段"],
                      datasets: [
                        {
                          label: "用户数量",
                          data: [12500, 8600, 6200, 4800, 2450],
                          backgroundColor: "rgba(59, 130, 246, 0.7)",
                        },
                      ],
                    }}
                    height={300}
                  />
                </CardContent>
              </CollapsibleContent>
            </Card>
          </Collapsible>
        </TabsContent>
        <TabsContent value="conversion" className="space-y-4 pt-4">
          <Collapsible open={openSections.conversionAnalysis} onOpenChange={() => toggleSection("conversionAnalysis")}>
            <Card className="border shadow-sm">
              <CardHeader className="pb-2">
                <CollapsibleTrigger className="flex justify-between items-center w-full">
                  <CardTitle className="text-base font-medium">用户转化路径分析</CardTitle>
                  {openSections.conversionAnalysis ? (
                    <ChevronDown className="h-4 w-4" />
                  ) : (
                    <ChevronRight className="h-4 w-4" />
                  )}
                </CollapsibleTrigger>
              </CardHeader>
              <CollapsibleContent>
                <CardContent>
                  <LineChart
                    data={{
                      labels: ["访问", "注册", "浏览产品", "加入购物车", "下单", "支付", "复购"],
                      datasets: [
                        {
                          label: "转化率",
                          data: [100, 45, 38, 25, 18, 15, 8],
                          borderColor: "rgba(59, 130, 246, 0.7)",
                          backgroundColor: "rgba(59, 130, 246, 0.1)",
                        },
                      ],
                    }}
                    height={300}
                  />
                </CardContent>
              </CollapsibleContent>
            </Card>
          </Collapsible>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "卡若用户数据中台",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-scroll-area": "^1.0.5",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.5",
    "@radix-ui/react-tooltip": "^1.0.7",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "date-fns": "^3.3.1",
    "lucide-react": "^0.323.0",
    "next": "14.2.35",
    "react": "^18",
    "react-day-picker": "^8.10.0",
    "react-dom": "^18",
    "recharts": "^2.12.0",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "@ant-design/plots": "2.6.4",
    "regenerator-runtime": "0.14.1",
    "@tanstack/react-table": "8.21.3",
    "@radix-ui/react-icons": "1.3.2",
    "next-themes": "0.4.6",
    "@tanstack/react-virtual": "3.13.12",
    "react-intersection-observer": "9.16.0",
    "cmdk": "1.1.1",
    "@radix-ui/react-separator": "1.1.7",
    "html-to-image": "1.11.13",
    "dom-to-image": "2.6.0",
    "docx": "9.5.1",
    "ai": "4.3.19",
    "@ai-sdk/openai": "2.0.32",
    "@radix-ui/react-slider": "1.3.6"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}
[V0_FILE]typescript:file="data-ingestion/data-source.ts" isMerged="true"
// 定义数据源类型
export type DataSourceType = "mysql" | "postgresql" | "mongodb" | "api" | "file"

// 定义数据源接口
export interface DataSource {
  id: string
  name: string
  type: DataSourceType
  config: any // 数据源配置信息，例如连接字符串、API 地址等
}
[V0_FILE]typescript:file="data-ingestion/ingestion-service.ts" isMerged="true"
import type { DataSource } from "./data-source"

// 定义数据接入服务接口
export interface IngestionService {
  ingestData(dataSource: DataSource): Promise<any[]> // 接入数据，返回数据列表
}
[V0_FILE]typescript:file="data-ingestion/data-storage.ts" isMerged="true"
// 定义数据存储接口
export interface DataStorage {
  storeData(data: any[], schema: any): Promise<void> // 存储数据，需要指定数据结构
}
[V0_FILE]typescript:file="data-ingestion/data-schema.ts" isMerged="true"
// 定义数据结构接口
export interface DataSchema {
  fields: {
    name: string
    type: string
    description?: string
  }[]
}
[V0_FILE]markdown:file="开发文档/需求文档.md" isMerged="true"
产品需求文档 (PRD): "神射手" 用户资产数字中台 V1.3

1. 项目概述

- 项目名称: "神射手" 用户资产数字中台 (对应 @神射手 项目)
- 目标: 构建一个统一、灵活、高性能的用户数据中心，汇聚来自**多个异构源系统**（如截图所示 众多数据库，以及未来可能接入的其他内外部系统）的用户相关信息，形成 360 度用户视图。该平台通过 API 服务 (api/ 目录) 赋能其他业务系统（如“存客宝”），并可能包含内置管理界面 (app/ 等目录)。
- 核心挑战: 处理源系统**数据结构差异巨大**、**字段繁多且命名不一**的问题（如 所有数据库所有字段.csv 所反映），将这些**多样化的数据**有效整合为统一的“用户资产”。
- 核心价值: 打破数据孤岛，沉淀用户资产，提升数据驱动能力。通过标准化的服务层 (services/ 目录) 和 API 接口，支持精细化运营和个性化用户分析。

2. 项目目标

- 数据汇聚: 实现对各源数据库（覆盖截图中的 MySQL 库等）及其他渠道用户数据的统一接入和存储。
- Schema 灵活性: 支持存储结构各异的数据，能动态适应不同来源、包含大量**非标准化字段**的数据。
- 高性能查询: 实现对单个用户信息的毫秒级查询响应，**即使在数据模型复杂、数据量巨大的情况下**。
- 统一用户资产视图: 将来自不同源系统、**各种不同字段**的数据，通过映射和关联，**统一成可理解、可使用的“用户资产”格式**，存储在中台数据库中。
- 快速迭代: 采用模块化架构，支持业务需求的快速变化。
- 统一服务: 提供稳定、标准的 API 接口 (api/ 路由驱动)，供内部系统调用。
- 赋能应用: 使“存客宝”等应用能利用中台数据自定义用户分群、构建流量池规则。
- 支持分析: 提供基础的用户画像分析能力，支持基于全量用户数据的查询和探索。

3. 功能需求

- 3.1 数据接入 (Ingestion)
  - 数据源适配: 需要开发或配置数据同步/ETL 工具，能够连接不同的源数据库（如 MySQL）和 API，定期或实时抽取数据。
  - API 端点: 提供 /api/ingest (或类似) 接口，用于接收实时推送的数据。
  - 服务层处理 (**services/IngestionService**):
    - 接收原始数据（包含来源 source 和 源ID source_user_id）。
    - 核心步骤：数据映射与转换 - 根据预定义的 **数据字典和映射规则**（见 3.2.1），对原始数据进行初步处理：
      - 识别关键字段（如姓名、手机、邮箱等）。
      - 标准化某些字段值（如日期格式、地址格式）。
      - 生成或关联全局唯一 userId（涉及身份识别逻辑）。
      - 准备写入数据库的文档结构。
  - 历史数据迁移: 需要制定计划，将源系统中的存量数据批量导入中台。

- 3.2 数据存储与结构 (Storage & Schema)
  - 数据库选型: **强烈推荐文档数据库 (如 MongoDB)**。理由：其灵活的 Schema 是处理源系统字段多样性（Caihong 中众多 shua_ 表，SG_ 库中各异的结构）的最佳方式，可以直接存储源系统的原始字段结构，避免了在关系型数据库中创建超宽表或大量关联表的复杂性。
  - 数据模型 (示例):
{
  "userId": "global-unique-id-xyz", // 中台统一用户ID
  "core_profile": { // 提取的核心/标准化字段
    "name": "...",
    "mobile": "...", // 脱敏存储
    "email": "...",
    // ... 其他核心字段
  },
  "unified_tags": ["高价值客户", "医疗行业", "辽宁负责人"], // 统一标签
  "unified_attributes": { // 统一计算属性
    "lifetime_value": 15000,
    "last_active_days": 15
  },
  "source_profiles": [ // 存储各来源的详细档案
    {
      "source": "caihong_shua_users", // 来源标识 (更具体)
      "source_user_id": "user_id_in_shua_users_table",
      "original_data": { // 保留原始字段，无需所有字段都映射
        "username": "...",
        "level": 3,
        "register_time": "...",
        // ... shua_users 表中的所有字段
      },
      "ingestion_timestamp": "..."
    },
    {
      "source": "sg_enterprise_directory",
      "source_record_id": "record_id_in_sg_enterprise", // 源记录ID
      // 可能基于 企业名称+负责人 关联到 userId
      "original_data": {
        "企业名称": "沈阳东北制药总厂",
        "负责人": "张三", // 假设这个负责人也是中台的一个用户
        "联系人": "李四",
        "职位": "厂长",
        "行政区划": "210106",
        "地址": "沈阳市铁西区重工南街37号",
        "区号": "024",
        // ... SG_企业名录 中的所有字段
      },
       "ingestion_timestamp": "..."
    },
    // ... 其他来源 (SG_人才库, SG_投资, 抖音, 微信等)
  ],
  "createdAt": "...", // 中台记录创建时间
  "updatedAt": "..."  // 中台记录更新时间
}
  - 3.2.1 数据字典与映射规则:
    - 核心产出: 需要基于对 所有数据库所有字段.csv 及各源系统的分析，创建一份详细的**数据字典**。
    - 内容:
      - 定义中台的核心字段 (core_profile) 及其含义。
      - 定义统一标签 (unified_tags) 和统一属性 (unified_attributes) 的生成规则。
      - 建立**源系统字段**到**中台字段（核心字段或保留在 ****original_data**** 中）的映射关系**。
      - 标识出 PII（个人身份信息）字段，明确其处理方式（存储、加密、脱敏、访问控制）。
      - 标识出可用于**身份识别 (Identity Resolution)** 的关键字段（如手机号、邮箱、身份证号、微信 unionid 等）。
    - 实现: 映射规则可以在 services/IngestionService 中通过代码实现，或配置在外部规则引擎中。

- 3.3 数据查询 (Querying)
  - API 端点 (**api/****):** 提供丰富的查询 API。
  - 服务层逻辑 (**services/QueryService****):** 封装数据库查询逻辑。
  - 查询能力:
    - 基础查询: 按 userId, core_profile.email, core_profile.mobile 等快速获取用户。
    - 关联查询: 按 source_profiles.source + source_profiles.source_user_id 查询。
    - 复杂分析查询: 支持基于 core_profile, unified_tags, unified_attributes 以及 source_profiles.original_data **内部任意字段**的组合查询。例如：
      - 查询 source_profiles.source 为 'sg_enterprise_directory' 且 original_data.负责人 为 '张三' 的所有用户。
      - 查询 unified_tags 包含 '高价值客户' 且 source_profiles 中存在 source='caihong_shua_orders' 记录的用户。
  - 性能: 必须为 userId, 核心字段, 以及 source_profiles 中经常用于查询的字段（如 source, source_user_id, original_data 内的关键业务字段）**建立数据库索引**。

- 3.4 数据服务 (API Distribution)
  - (与 V1.2 类似) 提供标准 API，重点强化查询 API 的过滤能力，满足存客宝等应用需求。

- 3.5 (可能) 管理界面 (Management UI)
  - (与 V1.2 类似) 提供界面用于查看统一后的用户视图、搜索用户、可能包含基础的数据质量监控。

- 3.6 与存客宝 (**cunkebao 0420**) 集成场景
  - 存客宝调用中台 API，获取 **经过整合和关联的全维度用户数据**，包括核心信息、统一标签、以及来自 Caihong, SG_* 等所有源系统的详细档案信息，用于构建复杂的流量池规则和执行精准营销。

- 3.7 (重点) 身份识别与合并 (Identity Resolution)
  - 必要性: 由于数据来自不同系统，必须有机制识别哪些记录属于同一个自然人。
  - 策略: 需要在 services/ 中实现，基于数据字典中标识的关键字段（手机、邮箱、身份证等），采用确定性匹配（完全一致）和模糊匹配（相似度算法）相结合的方式，将不同 source_profiles 关联到同一个 userId。这是一个持续优化的过程。

- 3.8 分析支持
  - 中台 API 应能支持 BI 工具或数据分析平台进行数据查询和提取。
  - (可选) 提供数据导出功能，将处理整合后的用户数据导出为宽表或其他格式，供离线分析使用。

4. 非功能性需求

- (与 V1.2 类似：性能、可扩展性、灵活性、可用性)
- 4.5 安全性:
  - 严禁存储明文密码或高度敏感凭证。 对于截图中可能存在的密码或敏感数据，在接入中台时必须**丢弃**或进行**不可逆的哈希处理**（如果中台需要校验密码，但这通常应由源系统或统一认证中心负责）。
  - 严格遵守数据字典中定义的 PII 处理规则（加密、脱敏、访问控制）。
  - API 访问控制要做到字段级别。

5. 数据库选型推荐

- 首选: **MongoDB**。其灵活的文档模型、强大的查询能力（支持嵌套文档查询和索引）、成熟的生态和良好的水平扩展性，非常适合应对当前描述的复杂数据源整合需求。

6. 开放问题与后续步骤

- 启动核心任务： **立即开始分析 ****所有数据库所有字段.csv**** 和各源数据库结构，着手制定 V1.0 的数据字典和映射规则。** 这是项目成功的关键。
- 详细设计身份识别 (Identity Resolution) 的具体算法和流程。
- 确定数据库部署方案（云服务 Atlas? 自建?）。
- 与存客宝团队详细对接 API 需求，特别是复杂查询场景。
- 确定管理界面的范围和优先级。
- 制定历史数据迁移方案和数据质量校验计划。
[V0_FILE]markdown:file="开发文档/标签管理系统开发文档.md" isMerged="true"
# 标签管理系统开发文档

## 1. 系统概述

标签管理系统是用户数据资产中台的核心组件之一，用于管理和组织用户标签体系，支持用户画像的构建和应用。系统包括标签管理、标签规则引擎等功能模块，为企业提供完整的用户标签生命周期管理能力。

## 2. 系统架构

### 2.1 总体架构

标签管理系统采用前后端分离架构，前端使用 React + Next.js 开发，后端使用 Node.js + MySQL 开发。系统主要包括以下几个部分：

- 标签管理：负责标签的创建、编辑、删除等基础管理功能
- 标签规则引擎：负责标签生成规则的定义和执行
- 标签分析：提供标签使用情况的统计和分析功能
- 标签关系图谱：展示标签之间的关联关系

### 2.2 数据模型

#### 标签表 (tags)

| 字段名 | 类型 | 说明 |
| --- | --- | --- |
| id | varchar(36) | 主键，标签ID |
| name | varchar(100) | 标签名称 |
| category | varchar(50) | 标签分类 |
| type | enum | 标签类型：系统、自定义、衍生 |
| source | varchar(100) | 数据来源 |
| coverage | decimal(5,2) | 覆盖率 |
| created_at | datetime | 创建时间 |
| updated_at | datetime | 更新时间 |

#### 标签规则表 (tag_rules)

| 字段名 | 类型 | 说明 |
| --- | --- | --- |
| id | varchar(36) | 主键，规则ID |
| name | varchar(100) | 规则名称 |
| description | text | 规则描述 |
| target_tag_id | varchar(36) | 目标标签ID |
| condition | text | 规则条件 |
| sql | text | SQL语句 |
| status | enum | 状态：活跃、非活跃、草稿 |
| priority | int | 优先级 |
| created_at | datetime | 创建时间 |
| updated_at | datetime | 更新时间 |

#### 规则执行历史表 (rule_executions)

| 字段名 | 类型 | 说明 |
| --- | --- | --- |
| id | varchar(36) | 主键，执行ID |
| rule_id | varchar(36) | 规则ID |
| execution_time | datetime | 执行时间 |
| duration | int | 执行耗时（秒） |
| status | enum | 状态：成功、失败、执行中 |
| affected_users | int | 影响用户数 |
| executed_by | varchar(50) | 执行人 |
| log | text | 执行日志 |

#### 用户标签关联表 (user_tags)

| 字段名 | 类型 | 说明 |
| --- | --- | --- |
| user_id | varchar(36) | 用户ID |
| tag_id | varchar(36) | 标签ID |
| created_at | datetime | 创建时间 |
| rule_execution_id | varchar(36) | 规则执行ID |

## 3. 功能模块

### 3.1 标签管理

标签管理模块提供标签的基础管理功能，包括：

- 标签列表：展示所有标签，支持搜索、筛选和排序
- 标签创建：创建新标签，设置标签名称、分类、类型等信息
- 标签编辑：修改标签信息
- 标签删除：删除不需要的标签
- 标签分析：展示标签的使用情况和分布情况
- 标签关系图谱：展示标签之间的关联关系

### 3.2 标签规则引擎

标签规则引擎负责标签生成规则的定义和执行，包括：

- 规则列表：展示所有规则，支持搜索、筛选和排序
- 规则创建：创建新规则，设置规则名称、描述、目标标签、条件等信息
- 规则编辑：修改规则信息
- 规则执行：手动执行规则，为符合条件的用户打标签
- 规则调度：设置规则的自动执行计划
- 执行历史：查看规则的执行历史和结果

## 4. 开发流程

### 4.1 标签管理模块开发

1. 创建标签管理页面 (app/tag-management/page.tsx)
2. 实现标签列表展示功能
3. 实现标签创建、编辑、删除功能
4. 实现标签分类分布图表 (components/tag-management/tag-category-chart.tsx)
5. 实现标签使用统计图表 (components/tag-management/tag-usage-stats.tsx)
6. 实现标签关系图谱 (components/tag-management/tag-relationship-graph.tsx)

### 4.2 标签规则引擎开发

1. 创建标签规则引擎页面 (app/tag-rules/page.tsx)
2. 实现规则列表展示功能
3. 实现规则创建、编辑、删除功能
4. 实现规则编辑器 (components/tag-rules/rule-editor.tsx)
5. 实现规则执行历史查看功能 (components/tag-rules/rule-execution-history.tsx)

## 5. 接口设计

### 5.1 标签管理接口

- GET /api/tags - 获取标签列表
- POST /api/tags - 创建标签
- GET /api/tags/:id - 获取标签详情
- PUT /api/tags/:id - 更新标签
- DELETE /api/tags/:id - 删除标签
- GET /api/tags/stats - 获取标签统计信息
- GET /api/tags/relationships - 获取标签关系图谱数据

### 5.2 标签规则引擎接口

- GET /api/tag-rules - 获取规则列表
- POST /api/tag-rules - 创建规则
- GET /api/tag-rules/:id - 获取规则详情
- PUT /api/tag-rules/:id - 更新规则
- DELETE /api/tag-rules/:id - 删除规则
- POST /api/tag-rules/:id/execute - 执行规则
- GET /api/tag-rules/executions - 获取规则执行历史
- GET /api/tag-rules/executions/:id - 获取规则执行详情

## 6. 后续计划

1. 实现标签规则的自动调度功能
2. 增加标签导入导出功能
3. 增加标签权限管理功能
4. 增加标签版本管理功能
5. 增加标签质量评估功能
6. 增加标签推荐功能
[V0_FILE]typescriptreact:file="app/data-dictionary/page.tsx" isMerged="true"
"use client"

interface DataDictionaryItem {
  id: string
  fieldName: string
  description: string
  dataType: string
  source: string
}

export default function DataDictionaryPage() {
  const [dataDictionary, setDataDictionary] = useState<DataDictionaryItem[]>([
    {
      id: "1",
      fieldName: "username",
      description: "用户名",
      dataType: "string",
      source: "caihong_shua_users",
    },
  ])
  const [newFieldName, setNewFieldName] = useState("")
  const [newFieldDescription, setNewFieldDescription] = useState("")
  const [newFieldDataType, setNewFieldDataType] = useState("string")
  const [newFieldSource, setNewFieldSource] = useState("")

const handleAddEntry = () => {
    if (newFieldName.trim() === "") {
      alert("字段名称不能为空")
      return
    }

const newEntry: DataDictionaryItem = {
      id: Date.now().toString(),
      fieldName: newFieldName,
      description: newFieldDescription,
      dataType: newFieldDataType,
      source: newFieldSource,
    }

setDataDictionary([...dataDictionary, newEntry])
    setNewFieldName("")
    setNewFieldDescription("")
    setNewFieldDataType("string")
    setNewFieldSource("")
  }

return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold">数据字典管理</h1>
          <p className="text-muted-foreground mt-1">管理和维护数据字典</p>
        </div>
      </div>

<Card>
        <CardHeader>
          <CardTitle>添加数据字典条目</CardTitle>
          <CardDescription>手动添加数据字典条目</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="field-name">字段名称</Label>
            <Input
              id="field-name"
              placeholder="请输入字段名称"
              value={newFieldName}
              onChange={(e) => setNewFieldName(e.target.value)}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="field-description">字段描述</Label>
            <Input
              id="field-description"
              placeholder="请输入字段描述"
              value={newFieldDescription}
              onChange={(e) => setNewFieldDescription(e.target.value)}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="field-data-type">数据类型</Label>
            <Input
              id="field-data-type"
              placeholder="请输入数据类型"
              value={newFieldDataType}
              onChange={(e) => setNewFieldDataType(e.target.value)}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="field-source">数据来源</Label>
            <Input
              id="field-source"
              placeholder="请输入数据来源"
              value={newFieldSource}
              onChange={(e) => setNewFieldSource(e.target.value)}
            />
          </div>
          <Button onClick={handleAddEntry}>
            <PlusCircle className="h-4 w-4 mr-2" />
            添加条目
          </Button>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>数据字典列表</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>字段名称</TableHead>
                <TableHead>描述</TableHead>
                <TableHead>数据类型</TableHead>
                <TableHead>数据来源</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {dataDictionary.map((item) => (
                <TableRow key={item.id}>
                  <TableCell>{item.fieldName}</TableCell>
                  <TableCell>{item.description}</TableCell>
                  <TableCell>{item.dataType}</TableCell>
                  <TableCell>{item.source}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/data-integration/data-field-mapping.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { ArrowRight, Plus, Save, Trash2, HelpCircle } from "lucide-react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

interface FieldMapping {
  id: string
  sourceField: string
  targetField: string
  dataType: string
  required: boolean
  transformation: string
  primaryKey: boolean
}

export function DataFieldMapping() {
  // 模拟数据
  const [mappings, setMappings] = useState<FieldMapping[]>([
    {
      id: "1",
      sourceField: "user_id",
      targetField: "userId",
      dataType: "string",
      required: true,
      transformation: "none",
      primaryKey: true,
    },
    {
      id: "2",
      sourceField: "phone",
      targetField: "phoneNumber",
      dataType: "string",
      required: true,
      transformation: "formatPhoneNumber",
      primaryKey: false,
    },
    {
      id: "3",
      sourceField: "id_card",
      targetField: "identityNumber",
      dataType: "string",
      required: true,
      transformation: "mask",
      primaryKey: false,
    },
    {
      id: "4",
      sourceField: "imei",
      targetField: "deviceImei",
      dataType: "string",
      required: false,
      transformation: "none",
      primaryKey: false,
    },
    {
      id: "5",
      sourceField: "name",
      targetField: "fullName",
      dataType: "string",
      required: true,
      transformation: "none",
      primaryKey: false,
    },
    {
      id: "6",
      sourceField: "register_time",
      targetField: "registrationDate",
      dataType: "datetime",
      required: true,
      transformation: "parseDateTime",
      primaryKey: false,
    },
    {
      id: "7",
      sourceField: "last_login",
      targetField: "lastActiveTime",
      dataType: "datetime",
      required: false,
      transformation: "parseDateTime",
      primaryKey: false,
    },
  ])

const updateMapping = (id: string, field: keyof FieldMapping, value: any) => {
    setMappings(mappings.map((mapping) => (mapping.id === id ? { ...mapping, [field]: value } : mapping)))
  }

const deleteMapping = (id: string) => {
    setMappings(mappings.filter((mapping) => mapping.id !== id))
  }

return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle>数据字段映射</CardTitle>
          <CardDescription>
            配置源数据字段与目标数据字段的映射关系，以ID、手机号、身份证号和IMEI设备号为标准整合客户数据
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex justify-between items-center">
            <div className="flex items-center gap-2">
              <Badge className="bg-blue-100 text-blue-800">标准字段映射</Badge>
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Button variant="ghost" size="icon">
                      <HelpCircle className="h-4 w-4" />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>
                    <p className="max-w-xs">
                      标准字段映射用于将不同数据源的字段映射到统一的标准字段，以便于数据整合和分析。
                      主键字段用于唯一标识用户，通常为用户ID、手机号、身份证号或IMEI设备号。
                    </p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            </div>
            <Button onClick={addNewMapping}>
              <Plus className="mr-2 h-4 w-4" />
              添加映射
            </Button>
          </div>

<div className="rounded-md border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>源字段</TableHead>
                  <TableHead></TableHead>
                  <TableHead>目标字段</TableHead>
                  <TableHead>数据类型</TableHead>
                  <TableHead>必填</TableHead>
                  <TableHead>主键</TableHead>
                  <TableHead>转换方式</TableHead>
                  <TableHead className="text-right">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {mappings.map((mapping) => (
                  <TableRow key={mapping.id}>
                    <TableCell>
                      <Input
                        value={mapping.sourceField}
                        onChange={(e) => updateMapping(mapping.id, "sourceField", e.target.value)}
                        placeholder="源字段名"
                      />
                    </TableCell>
                    <TableCell>
                      <ArrowRight className="h-4 w-4 text-muted-foreground" />
                    </TableCell>
                    <TableCell>
                      <Input
                        value={mapping.targetField}
                        onChange={(e) => updateMapping(mapping.id, "targetField", e.target.value)}
                        placeholder="目标字段名"
                      />
                    </TableCell>
                    <TableCell>
                      <Select
                        value={mapping.dataType}
                        onValueChange={(value) => updateMapping(mapping.id, "dataType", value)}
                      >
                        <SelectTrigger className="w-full">
                          <SelectValue placeholder="选择数据类型" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="string">字符串</SelectItem>
                          <SelectItem value="number">数字</SelectItem>
                          <SelectItem value="boolean">布尔值</SelectItem>
                          <SelectItem value="datetime">日期时间</SelectItem>
                          <SelectItem value="array">数组</SelectItem>
                          <SelectItem value="object">对象</SelectItem>
                        </SelectContent>
                      </Select>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center justify-center">
                        <Switch
                          checked={mapping.required}
                          onCheckedChange={(checked) => updateMapping(mapping.id, "required", checked)}
                        />
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center justify-center">
                        <Switch
                          checked={mapping.primaryKey}
                          onCheckedChange={(checked) => updateMapping(mapping.id, "primaryKey", checked)}
                        />
                      </div>
                    </TableCell>
                    <TableCell>
                      <Select
                        value={mapping.transformation}
                        onValueChange={(value) => updateMapping(mapping.id, "transformation", value)}
                      >
                        <SelectTrigger className="w-full">
                          <SelectValue placeholder="选择转换方式" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="none">无转换</SelectItem>
                          <SelectItem value="formatPhoneNumber">格式化手机号</SelectItem>
                          <SelectItem value="mask">数据脱敏</SelectItem>
                          <SelectItem value="parseDateTime">解析日期时间</SelectItem>
                          <SelectItem value="uppercase">转大写</SelectItem>
                          <SelectItem value="lowercase">转小写</SelectItem>
                          <SelectItem value="trim">去除空格</SelectItem>
                          <SelectItem value="custom">自定义转换</SelectItem>
                        </SelectContent>
                      </Select>
                    </TableCell>
                    <TableCell className="text-right">
                      <Button variant="ghost" size="icon" onClick={() => deleteMapping(mapping.id)}>
                        <Trash2 className="h-4 w-4 text-red-500" />
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

<Card>
        <CardHeader>
          <CardTitle>标准字段说明</CardTitle>
          <CardDescription>用户数据标准字段的说明和用途</CardDescription>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>字段名</TableHead>
                <TableHead>数据类型</TableHead>
                <TableHead>说明</TableHead>
                <TableHead>用途</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell className="font-medium">userId</TableCell>
                <TableCell>字符串</TableCell>
                <TableCell>用户唯一标识符</TableCell>
                <TableCell>用于唯一标识用户，主键字段</TableCell>
              </TableRow>
              <TableRow>
                <TableCell className="font-medium">phoneNumber</TableCell>
                <TableCell>字符串</TableCell>
                <TableCell>用户手机号码</TableCell>
                <TableCell>用于用户联系和身份验证，可作为主键</TableCell>
              </TableRow>
              <TableRow>
                <TableCell className="font-medium">identityNumber</TableCell>
                <TableCell>字符串</TableCell>
                <TableCell>用户身份证号码</TableCell>
                <TableCell>用于用户实名认证，可作为主键</TableCell>
              </TableRow>
              <TableRow>
                <TableCell className="font-medium">deviceImei</TableCell>
                <TableCell>字符串</TableCell>
                <TableCell>设备IMEI号码</TableCell>
                <TableCell>用于设备识别，可作为主键</TableCell>
              </TableRow>
              <TableRow>
                <TableCell className="font-medium">fullName</TableCell>
                <TableCell>字符串</TableCell>
                <TableCell>用户姓名</TableCell>
                <TableCell>用于用户基本信息</TableCell>
              </TableRow>
              <TableRow>
                <TableCell className="font-medium">registrationDate</TableCell>
                <TableCell>日期时间</TableCell>
                <TableCell>用户注册时间</TableCell>
                <TableCell>用于用户生命周期分析</TableCell>
              </TableRow>
              <TableRow>
                <TableCell className="font-medium">lastActiveTime</TableCell>
                <TableCell>日期时间</TableCell>
                <TableCell>用户最后活跃时间</TableCell>
                <TableCell>用于用户活跃度分析</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/data-integration/api-documentation.tsx" isMerged="true"
"use client"

interface ApiEndpoint {
  id: string
  name: string
  method: "GET" | "POST" | "PUT" | "DELETE"
  path: string
  description: string
  parameters: {
    name: string
    type: string
    required: boolean
    description: string
  }[]
  requestBody?: {
    type: string
    example: string
  }
  responses: {
    code: string
    description: string
    example: string
  }[]
  authentication: "API Key" | "OAuth 2.0" | "None"
}

export function ApiDocumentation() {
  const { toast } = useToast()
  const [activeTab, setActiveTab] = useState("user-data")
  const [copiedEndpoint, setCopiedEndpoint] = useState<string | null>(null)

// 模拟API端点数据
  const apiEndpoints: Record<string, ApiEndpoint[]> = {
    "user-data": [
      {
        id: "get-users",
        name: "获取用户列表",
        method: "GET",
        path: "/api/users",
        description: "获取系统中的用户列表，支持分页、筛选和排序",
        parameters: [
          {
            name: "page",
            type: "number",
            required: false,
            description: "页码，默认为1",
          },
          {
            name: "limit",
            type: "number",
            required: false,
            description: "每页数量，默认为20，最大为100",
          },
          {
            name: "sort",
            type: "string",
            required: false,
            description: "排序字段，例如：name,-createdAt（-表示降序）",
          },
          {
            name: "filter",
            type: "string",
            required: false,
            description: "筛选条件，例如：status=active",
          },
        ],
        responses: [
          {
            code: "200",
            description: "成功",
            example: `{
  "data": [
    {
      "id": "user_123",
      "name": "张三",
      "phoneNumber": "138****1234",
      "registrationDate": "2023-01-15T08:30:00Z",
      "lastActiveTime": "2023-07-20T14:25:30Z",
      "tags": ["高价值", "活跃用户"]
    },
    // 更多用户...
  ],
  "pagination": {
    "page": 1,
    "limit": 20,
    "total": 156,
    "pages": 8
  }
}`,
          },
          {
            code: "400",
            description: "请求参数错误",
            example: `{
  "error": "Bad Request",
  "message": "Invalid filter format",
  "code": "INVALID_FILTER"
}`,
          },
          {
            code: "401",
            description: "未授权",
            example: `{
  "error": "Unauthorized",
  "message": "API key is invalid or expired",
  "code": "INVALID_API_KEY"
}`,
          },
        ],
        authentication: "API Key",
      },
      {
        id: "get-user",
        name: "获取用户详情",
        method: "GET",
        path: "/api/users/{id}",
        description: "根据用户ID获取用户详细信息",
        parameters: [
          {
            name: "id",
            type: "string",
            required: true,
            description: "用户ID",
          },
        ],
        responses: [
          {
            code: "200",
            description: "成功",
            example: `{
  "id": "user_123",
  "name": "张三",
  "phoneNumber": "138****1234",
  "identityNumber": "310******1234",
  "email": "zhangsan@example.com",
  "registrationDate": "2023-01-15T08:30:00Z",
  "lastActiveTime": "2023-07-20T14:25:30Z",
  "tags": ["高价值", "活跃用户"],
  "devices": [
    {
      "id": "device_456",
      "type": "mobile",
      "model": "iPhone 13",
      "imei": "123456789012345",
      "lastActiveTime": "2023-07-20T14:25:30Z"
    }
  ],
  "userValue": {
    "rfm": {
      "recency": 5,
      "frequency": 4,
      "monetary": 5,
      "score": 4.7
    },
    "lifetimeValue": 12500
  }
}`,
          },
          {
            code: "404",
            description: "用户不存在",
            example: `{
  "error": "Not Found",
  "message": "User with ID user_999 not found",
  "code": "USER_NOT_FOUND"
}`,
          },
        ],
        authentication: "API Key",
      },
    ],
    "user-portrait": [
      {
        id: "get-user-portrait",
        name: "获取用户画像",
        method: "GET",
        path: "/api/user-portrait/{id}",
        description: "根据用户ID获取用户画像数据",
        parameters: [
          {
            name: "id",
            type: "string",
            required: true,
            description: "用户ID",
          },
        ],
        responses: [
          {
            code: "200",
            description: "成功",
            example: `{
  "userId": "user_123",
  "basicInfo": {
    "name": "张三",
    "age": 28,
    "gender": "male",
    "location": "上海市"
  },
  "behaviorTags": ["夜间活跃", "周末购物", "高频App使用"],
  "interestTags": ["科技", "旅游", "美食"],
  "consumptionPattern": {
    "averageOrderValue": 320,
    "purchaseFrequency": "每周2-3次",
    "preferredCategories": ["电子产品", "服装"]
  },
  "rfmAnalysis": {
    "recency": 5,
    "frequency": 4,
    "monetary": 5,
    "score": 4.7,
    "segment": "高价值用户"
  },
  "deviceInfo": [
    {
      "type": "mobile",
      "model": "iPhone 13",
      "osVersion": "iOS 16.5",
      "usageFrequency": "高"
    }
  ],
  "channelPreference": ["App", "微信小程序"],
  "riskScore": 0.2
}`,
          },
        ],
        authentication: "API Key",
      },
    ],
    "ai-analysis": [
      {
        id: "analyze-user-behavior",
        name: "用户行为分析",
        method: "POST",
        path: "/api/ai/analyze-behavior",
        description: "使用AI分析用户行为数据，生成洞察报告",
        parameters: [],
        requestBody: {
          type: "application/json",
          example: `{
  "userId": "user_123",
  "timeRange": {
    "start": "2023-01-01T00:00:00Z",
    "end": "2023-07-20T23:59:59Z"
  },
  "analysisDepth": "deep",
  "includeTags": true,
  "includeRecommendations": true
}`,
        },
        responses: [
          {
            code: "200",
            description: "成功",
            example: `{
  "userId": "user_123",
  "analysisTime": "2023-07-21T10:15:30Z",
  "timeRange": {
    "start": "2023-01-01T00:00:00Z",
    "end": "2023-07-20T23:59:59Z"
  },
  "behaviorPatterns": [
    {
      "pattern": "夜间活跃",
      "confidence": 0.92,
      "description": "用户主要在晚上9点至凌晨1点活跃",
      "supportingData": {
        "activeTimeDistribution": {
          "morning": 0.15,
          "afternoon": 0.25,
          "evening": 0.60
        }
      }
    },
    // 更多行为模式...
  ],
  "insights": [
    {
      "type": "preference",
      "description": "用户对科技类产品有强烈兴趣，尤其是智能家居设备",
      "confidence": 0.85
    },
    // 更多洞察...
  ],
  "recommendations": [
    {
      "type": "marketing",
      "description": "建议在晚间时段推送智能家居相关促销信息",
      "expectedImpact": "高"
    },
    // 更多建议...
  ]
}`,
          },
        ],
        authentication: "API Key",
      },
    ],
  }

const handleCopyCode = (code: string, endpointId: string) => {
    navigator.clipboard.writeText(code)
    setCopiedEndpoint(endpointId)
    toast({
      title: "已复制到剪贴板",
      description: "代码已成功复制到剪贴板",
    })
    setTimeout(() => setCopiedEndpoint(null), 2000)
  }

return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle>API文档</CardTitle>
          <CardDescription>用户数据资产中台API接口文档和使用说明</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
            <TabsList className="grid grid-cols-3 w-full max-w-md">
              <TabsTrigger value="user-data">用户数据</TabsTrigger>
              <TabsTrigger value="user-portrait">用户画像</TabsTrigger>
              <TabsTrigger value="ai-analysis">AI分析</TabsTrigger>
            </TabsList>

{Object.entries(apiEndpoints).map(([category, endpoints]) => (
              <TabsContent key={category} value={category} className="space-y-4">
                {endpoints.map((endpoint) => (
                  <Card key={endpoint.id} className="border shadow-sm">
                    <CardHeader className="pb-2">
                      <div className="flex justify-between items-start">
                        <div>
                          <CardTitle className="text-lg">{endpoint.name}</CardTitle>
                          <CardDescription>{endpoint.description}</CardDescription>
                        </div>
                        <Badge
                          className={
                            endpoint.method === "GET"
                              ? "bg-blue-100 text-blue-800"
                              : endpoint.method === "POST"
                                ? "bg-green-100 text-green-800"
                                : endpoint.method === "PUT"
                                  ? "bg-yellow-100 text-yellow-800"
                                  : "bg-red-100 text-red-800"
                          }
                        >
                          {endpoint.method}
                        </Badge>
                      </div>
                    </CardHeader>
                    <CardContent className="pb-2">
                      <div className="flex items-center gap-2 mb-4">
                        <code className="bg-muted px-2 py-1 rounded text-sm font-mono">{endpoint.path}</code>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => handleCopyCode(endpoint.path, `path-${endpoint.id}`)}
                        >
                          {copiedEndpoint === `path-${endpoint.id}` ? (
                            <Check className="h-4 w-4" />
                          ) : (
                            <Copy className="h-4 w-4" />
                          )}
                        </Button>
                      </div>

<Accordion type="single" collapsible className="w-full">
                        {endpoint.parameters.length > 0 && (
                          <AccordionItem value="parameters">
                            <AccordionTrigger>请求参数</AccordionTrigger>
                            <AccordionContent>
                              <div className="rounded-md border">
                                <table className="min-w-full divide-y divide-border">
                                  <thead>
                                    <tr className="bg-muted/50">
                                      <th className="px-4 py-2 text-left text-sm font-medium">参数名</th>
                                      <th className="px-4 py-2 text-left text-sm font-medium">类型</th>
                                      <th className="px-4 py-2 text-left text-sm font-medium">必填</th>
                                      <th className="px-4 py-2 text-left text-sm font-medium">描述</th>
                                    </tr>
                                  </thead>
                                  <tbody className="divide-y divide-border">
                                    {endpoint.parameters.map((param, index) => (
                                      <tr key={index}>
                                        <td className="px-4 py-2 text-sm font-mono">{param.name}</td>
                                        <td className="px-4 py-2 text-sm">{param.type}</td>
                                        <td className="px-4 py-2 text-sm">
                                          {param.required ? (
                                            <Badge className="bg-red-100 text-red-800">必填</Badge>
                                          ) : (
                                            <Badge className="bg-gray-100 text-gray-800">可选</Badge>
                                          )}
                                        </td>
                                        <td className="px-4 py-2 text-sm">{param.description}</td>
                                      </tr>
                                    ))}
                                  </tbody>
                                </table>
                              </div>
                            </AccordionContent>
                          </AccordionItem>
                        )}

{endpoint.requestBody && (
                          <AccordionItem value="request-body">
                            <AccordionTrigger>请求体</AccordionTrigger>
                            <AccordionContent>
                              <div className="space-y-2">
                                <div className="flex items-center gap-2">
                                  <Badge className="bg-purple-100 text-purple-800">{endpoint.requestBody.type}</Badge>
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    className="h-7"
                                    onClick={() => handleCopyCode(endpoint.requestBody!.example, `req-${endpoint.id}`)}
                                  >
                                    {copiedEndpoint === `req-${endpoint.id}` ? (
                                      <Check className="h-3 w-3 mr-1" />
                                    ) : (
                                      <Copy className="h-3 w-3 mr-1" />
                                    )}
                                    复制
                                  </Button>
                                </div>
                                <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm font-mono">
                                  {endpoint.requestBody.example}
                                </pre>
                              </div>
                            </AccordionContent>
                          </AccordionItem>
                        )}

<AccordionItem value="responses">
                          <AccordionTrigger>响应</AccordionTrigger>
                          <AccordionContent>
                            <div className="space-y-4">
                              {endpoint.responses.map((response, index) => (
                                <div key={index} className="space-y-2">
                                  <div className="flex items-center gap-2">
                                    <Badge
                                      className={
                                        response.code.startsWith("2")
                                          ? "bg-green-100 text-green-800"
                                          : response.code.startsWith("4")
                                            ? "bg-red-100 text-red-800"
                                            : "bg-yellow-100 text-yellow-800"
                                      }
                                    >
                                      {response.code}
                                    </Badge>
                                    <span className="text-sm font-medium">{response.description}</span>
                                    <Button
                                      variant="ghost"
                                      size="sm"
                                      className="h-7"
                                      onClick={() => handleCopyCode(response.example, `res-${endpoint.id}-${index}`)}
                                    >
                                      {copiedEndpoint === `res-${endpoint.id}-${index}` ? (
                                        <Check className="h-3 w-3 mr-1" />
                                      ) : (
                                        <Copy className="h-3 w-3 mr-1" />
                                      )}
                                      复制
                                    </Button>
                                  </div>
                                  <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm font-mono">
                                    {response.example}
                                  </pre>
                                </div>
                              ))}
                            </div>
                          </AccordionContent>
                        </AccordionItem>

<AccordionItem value="authentication">
                          <AccordionTrigger>认证方式</AccordionTrigger>
                          <AccordionContent>
                            <div className="p-2">
                              <Badge className="bg-blue-100 text-blue-800">{endpoint.authentication}</Badge>
                              {endpoint.authentication === "API Key" && (
                                <div className="mt-2 text-sm">
                                  <p>在请求头中添加以下字段：</p>
                                  <code className="bg-muted px-2 py-1 rounded text-sm font-mono mt-1 block">
                                    X-API-Key: your_api_key_here
                                  </code>
                                </div>
                              )}
                              {endpoint.authentication === "OAuth 2.0" && (
                                <div className="mt-2 text-sm">
                                  <p>在请求头中添加以下字段：</p>
                                  <code className="bg-muted px-2 py-1 rounded text-sm font-mono mt-1 block">
                                    Authorization: Bearer your_access_token_here
                                  </code>
                                </div>
                              )}
                            </div>
                          </AccordionContent>
                        </AccordionItem>

<AccordionItem value="code-examples">
                          <AccordionTrigger>代码示例</AccordionTrigger>
                          <AccordionContent>
                            <div className="space-y-4">
                              <div>
                                <div className="flex items-center gap-2 mb-2">
                                  <Badge className="bg-blue-100 text-blue-800">JavaScript</Badge>
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    className="h-7"
                                    onClick={() => handleCopyCode(jsExample, `js-${endpoint.id}`)}
                                  >
                                    {copiedEndpoint === `js-${endpoint.id}` ? (
                                      <Check className="h-3 w-3 mr-1" />
                                    ) : (
                                      <Copy className="h-3 w-3 mr-1" />
                                    )}
                                    复制
                                  </Button>
                                </div>
                                <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm font-mono">
                                  {jsExample}
                                </pre>
                              </div>

<div>
                                <div className="flex items-center gap-2 mb-2">
                                  <Badge className="bg-green-100 text-green-800">Python</Badge>
                                  <Button
                                    variant="ghost"
                                    size="sm"
                                    className="h-7"
                                    onClick={() => handleCopyCode(pythonExample, `py-${endpoint.id}`)}
                                  >
                                    {copiedEndpoint === `py-${endpoint.id}` ? (
                                      <Check className="h-3 w-3 mr-1" />
                                    ) : (
                                      <Copy className="h-3 w-3 mr-1" />
                                    )}
                                    复制
                                  </Button>
                                </div>
                                <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm font-mono">
                                  {pythonExample}
                                </pre>
                              </div>
                            </div>
                          </AccordionContent>
                        </AccordionItem>
                      </Accordion>
                    </CardContent>
                  </Card>
                ))}
              </TabsContent>
            ))}
          </Tabs>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>API使用指南</CardTitle>
          <CardDescription>如何开始使用用户数据资产中台API</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <h3 className="text-lg font-medium">1. 获取API密钥</h3>
            <p className="text-sm text-muted-foreground">
              在开始使用API之前，您需要获取API密钥。请联系系统管理员申请API密钥。
            </p>
          </div>

<div className="space-y-2">
            <h3 className="text-lg font-medium">2. 认证</h3>
            <p className="text-sm text-muted-foreground">所有API请求都需要进行认证。请在请求头中添加您的API密钥：</p>
            <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm font-mono">
              X-API-Key: your_api_key_here
            </pre>
          </div>

<div className="space-y-2">
            <h3 className="text-lg font-medium">3. 请求格式</h3>
            <p className="text-sm text-muted-foreground">API支持JSON格式的请求和响应。请在请求头中设置：</p>
            <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm font-mono">
              Content-Type: application/json Accept: application/json
            </pre>
          </div>

<div className="space-y-2">
            <h3 className="text-lg font-medium">4. 错误处理</h3>
            <p className="text-sm text-muted-foreground">
              API使用标准的HTTP状态码表示请求的结果。错误响应会包含错误详情：
            </p>
            <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm font-mono">
              {`{
  "error": "错误类型",
  "message": "错误详细信息",
  "code": "错误代码"
}`}
            </pre>
          </div>

<div className="space-y-2">
            <h3 className="text-lg font-medium">5. 速率限制</h3>
            <p className="text-sm text-muted-foreground">
              API有速率限制，默认为每分钟100个请求。超过限制会返回429状态码。
            </p>
          </div>

<div className="flex justify-between items-center mt-4">
            <Button variant="outline" className="gap-2">
              <FileJson className="h-4 w-4" />
              下载OpenAPI规范
            </Button>
            <Button variant="outline" className="gap-2">
              <Code className="h-4 w-4" />
              下载SDK
            </Button>
            <Button className="gap-2">
              <Play className="h-4 w-4" />
              API测试工具
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

// 示例代码
const jsExample = `// 使用fetch API调用
const apiKey = 'your_api_key_here';

fetch('https://api.example.com/api/users', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'X-API-Key': apiKey
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));`

const pythonExample = `# 使用requests库调用
import requests

api_key = 'your_api_key_here'
headers = {
    'Content-Type': 'application/json',
    'X-API-Key': api_key
}

response = requests.get('https://api.example.com/api/users', headers=headers)
data = response.json()
print(data)`
[V0_FILE]typescriptreact:file="components/data-integration/data-collection-settings.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Plus, Trash2, Clock, RefreshCw, Database, Server, FileText, Settings, HelpCircle } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

interface CollectionTask {
  id: string
  name: string
  source: string
  type: string
  schedule: string
  lastRun: string | null
  nextRun: string | null
  status: "active" | "paused" | "error" | "completed"
  recordsCollected: number
}

export function DataCollectionSettings() {
  const [activeTab, setActiveTab] = useState("tasks")
  const [isAddingTask, setIsAddingTask] = useState(false)
  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null)

// 模拟数据采集任务
  const [collectionTasks, setCollectionTasks] = useState<CollectionTask[]>([
    {
      id: "1",
      name: "用户基本信息采集",
      source: "CRM系统",
      type: "数据库",
      schedule: "每日 00:00",
      lastRun: "2023-07-20 00:00",
      nextRun: "2023-07-21 00:00",
      status: "active",
      recordsCollected: 125678,
    },
    {
      id: "2",
      name: "用户行为数据采集",
      source: "行为分析平台",
      type: "API",
      schedule: "每小时",
      lastRun: "2023-07-20 15:00",
      nextRun: "2023-07-20 16:00",
      status: "active",
      recordsCollected: 458921,
    },
    {
      id: "3",
      name: "社交媒体数据采集",
      source: "MCP SERVER",
      type: "AI工具",
      schedule: "每日 02:00",
      lastRun: "2023-07-20 02:00",
      nextRun: "2023-07-21 02:00",
      status: "active",
      recordsCollected: 87452,
    },
    {
      id: "4",
      name: "历史交易数据导入",
      source: "交易系统",
      type: "文件",
      schedule: "手动",
      lastRun: "2023-07-15 10:30",
      nextRun: null,
      status: "completed",
      recordsCollected: 254789,
    },
    {
      id: "5",
      name: "设备信息采集",
      source: "设备管理系统",
      type: "API",
      schedule: "每日 03:00",
      lastRun: "2023-07-20 03:00",
      nextRun: "2023-07-21 03:00",
      status: "error",
      recordsCollected: 12547,
    },
  ])

// 模拟数据源
  const dataSources = [
    { id: "crm", name: "CRM系统", type: "数据库" },
    { id: "behavior", name: "行为分析平台", type: "API" },
    { id: "mcp", name: "MCP SERVER", type: "AI工具" },
    { id: "transaction", name: "交易系统", type: "文件" },
    { id: "device", name: "设备管理系统", type: "API" },
    { id: "social", name: "社交媒体平台", type: "API" },
    { id: "ecommerce", name: "电商平台", type: "API" },
  ]

// 模拟采集类型
  const collectionTypes = [
    { id: "full", name: "全量采集", description: "采集所有数据" },
    { id: "incremental", name: "增量采集", description: "仅采集新增或变更的数据" },
    { id: "scheduled", name: "定时采集", description: "按照设定的时间计划采集数据" },
    { id: "event", name: "事件触发采集", description: "在特定事件发生时采集数据" },
    { id: "manual", name: "手动采集", description: "手动触发数据采集" },
  ]

const getStatusBadge = (status: CollectionTask["status"]) => {
    switch (status) {
      case "active":
        return <Badge className="bg-green-100 text-green-800">运行中</Badge>
      case "paused":
        return <Badge className="bg-yellow-100 text-yellow-800">已暂停</Badge>
      case "error":
        return <Badge className="bg-red-100 text-red-800">错误</Badge>
      case "completed":
        return <Badge className="bg-blue-100 text-blue-800">已完成</Badge>
    }
  }

const getSourceIcon = (type: string) => {
    switch (type) {
      case "数据库":
        return <Database className="h-4 w-4 text-blue-500" />
      case "API":
        return <Server className="h-4 w-4 text-purple-500" />
      case "文件":
        return <FileText className="h-4 w-4 text-green-500" />
      case "AI工具":
        return <Settings className="h-4 w-4 text-orange-500" />
      default:
        return <Database className="h-4 w-4" />
    }
  }

const addTask = (task: Omit<CollectionTask, "id" | "lastRun" | "recordsCollected">) => {
    const newTask: CollectionTask = {
      id: `task-${Date.now()}`,
      ...task,
      lastRun: null,
      recordsCollected: 0,
    }
    setCollectionTasks([...collectionTasks, newTask])
    setIsAddingTask(false)
  }

const deleteTask = (id: string) => {
    setCollectionTasks(collectionTasks.filter((task) => task.id !== id))
  }

const toggleTaskStatus = (id: string) => {
    setCollectionTasks(
      collectionTasks.map((task) => {
        if (task.id === id) {
          return {
            ...task,
            status: task.status === "active" ? "paused" : "active",
          }
        }
        return task
      }),
    )
  }

const selectedTask = selectedTaskId ? collectionTasks.find((task) => task.id === selectedTaskId) : null

return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle>数据采集设置</CardTitle>
          <CardDescription>配置和管理数据采集任务</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
            <TabsList>
              <TabsTrigger value="tasks">采集任务</TabsTrigger>
              <TabsTrigger value="sources">数据源</TabsTrigger>
              <TabsTrigger value="settings">采集设置</TabsTrigger>
            </TabsList>

<TabsContent value="tasks" className="space-y-4">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-2">
                  <Badge className="bg-blue-100 text-blue-800">共 {collectionTasks.length} 个任务</Badge>
                  <TooltipProvider>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <HelpCircle className="h-4 w-4" />
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p className="max-w-xs">
                          数据采集任务用于从各个数据源采集数据，并将其整合到用户数据资产中台。
                          您可以设置采集频率、采集方式和数据处理规则。
                        </p>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                </div>
                <Button onClick={() => setIsAddingTask(true)}>
                  <Plus className="mr-2 h-4 w-4" />
                  添加采集任务
                </Button>
              </div>

<div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>任务名称</TableHead>
                      <TableHead>数据源</TableHead>
                      <TableHead>采集频率</TableHead>
                      <TableHead>上次运行</TableHead>
                      <TableHead>下次运行</TableHead>
                      <TableHead>状态</TableHead>
                      <TableHead>已采集记录</TableHead>
                      <TableHead className="text-right">操作</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {collectionTasks.map((task) => (
                      <TableRow key={task.id}>
                        <TableCell className="font-medium">{task.name}</TableCell>
                        <TableCell>
                          <div className="flex items-center gap-1">
                            {getSourceIcon(task.type)}
                            <span>{task.source}</span>
                          </div>
                        </TableCell>
                        <TableCell>{task.schedule}</TableCell>
                        <TableCell>{task.lastRun || "从未运行"}</TableCell>
                        <TableCell>{task.nextRun || "无计划"}</TableCell>
                        <TableCell>{getStatusBadge(task.status)}</TableCell>
                        <TableCell>{task.recordsCollected.toLocaleString()}</TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end space-x-2">
                            <Button
                              variant="ghost"
                              size="icon"
                              onClick={() => toggleTaskStatus(task.id)}
                              disabled={task.status === "completed"}
                            >
                              {task.status === "active" ? (
                                <Clock className="h-4 w-4 text-yellow-500" />
                              ) : (
                                <RefreshCw className="h-4 w-4 text-green-500" />
                              )}
                            </Button>
                            <Button variant="ghost" size="icon" onClick={() => setSelectedTaskId(task.id)}>
                              <Settings className="h-4 w-4" />
                            </Button>
                            <Button variant="ghost" size="icon" onClick={() => deleteTask(task.id)}>
                              <Trash2 className="h-4 w-4 text-red-500" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </TabsContent>

<TabsContent value="sources" className="space-y-4">
              <div className="flex justify-between items-center">
                <h3 className="text-lg font-medium">可用数据源</h3>
                <Button variant="outline">添加数据源</Button>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {dataSources.map((source) => (
                  <Card key={source.id} className="border shadow-sm">
                    <CardContent className="p-4">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          {getSourceIcon(source.type)}
                          <div>
                            <h4 className="font-medium">{source.name}</h4>
                            <p className="text-sm text-muted-foreground">{source.type}</p>
                          </div>
                        </div>
                        <Button variant="ghost" size="icon">
                          <Settings className="h-4 w-4" />
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>

<Card className="mt-4">
                <CardHeader>
                  <CardTitle>MCP SERVER 配置</CardTitle>
                  <CardDescription>配置MCP SERVER AI工具的采集参数</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <Label htmlFor="mcp-server-url">服务器地址</Label>
                      <Input id="mcp-server-url" defaultValue="https://mcp.example.com/api" />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="mcp-api-key">API密钥</Label>
                      <Input id="mcp-api-key" type="password" defaultValue="••••••••••••••••" />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="mcp-model">AI模型选择</Label>
                    <Select defaultValue="gpt-4">
                      <SelectTrigger id="mcp-model">
                        <SelectValue placeholder="选择AI模型" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="gpt-4">GPT-4</SelectItem>
                        <SelectItem value="gpt-3.5-turbo">GPT-3.5 Turbo</SelectItem>
                        <SelectItem value="claude-2">Claude 2</SelectItem>
                        <SelectItem value="llama-2">Llama 2</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="mcp-auto-process">自动处理采集数据</Label>
                      <Switch id="mcp-auto-process" defaultChecked />
                    </div>
                    <p className="text-sm text-muted-foreground">
                      启用后，系统将自动使用AI处理采集的数据，提取关键信息并生成标签
                    </p>
                  </div>

<div className="space-y-2">
                    <Label>采集数据类型</Label>
                    <div className="grid grid-cols-2 gap-2">
                      <div className="flex items-center space-x-2">
                        <Switch id="collect-profile" defaultChecked />
                        <Label htmlFor="collect-profile">用户资料</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Switch id="collect-posts" defaultChecked />
                        <Label htmlFor="collect-posts">发布内容</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Switch id="collect-interactions" defaultChecked />
                        <Label htmlFor="collect-interactions">互动数据</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Switch id="collect-followers" defaultChecked />
                        <Label htmlFor="collect-followers">关注者数据</Label>
                      </div>
                    </div>
                  </div>

<div className="flex justify-end">
                    <Button>保存MCP配置</Button>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="settings" className="space-y-4">
              <Card>
                <CardHeader>
                  <CardTitle>全局采集设置</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="enable-collection">启用数据采集</Label>
                      <Switch id="enable-collection" defaultChecked />
                    </div>
                    <p className="text-sm text-muted-foreground">关闭后，所有数据采集任务将暂停执行</p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="collection-threads">并发采集线程数</Label>
                    <Select defaultValue="5">
                      <SelectTrigger id="collection-threads">
                        <SelectValue placeholder="选择并发线程数" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="1">1</SelectItem>
                        <SelectItem value="3">3</SelectItem>
                        <SelectItem value="5">5</SelectItem>
                        <SelectItem value="10">10</SelectItem>
                        <SelectItem value="20">20</SelectItem>
                      </SelectContent>
                    </Select>
                    <p className="text-sm text-muted-foreground">
                      设置同时执行的数据采集任务数量，数值越大系统负载越高
                    </p>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="retry-attempts">失败重试次数</Label>
                    <Select defaultValue="3">
                      <SelectTrigger id="retry-attempts">
                        <SelectValue placeholder="选择重试次数" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="0">不重试</SelectItem>
                        <SelectItem value="1">1次</SelectItem>
                        <SelectItem value="3">3次</SelectItem>
                        <SelectItem value="5">5次</SelectItem>
                        <SelectItem value="10">10次</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="data-deduplication">数据去重</Label>
                      <Switch id="data-deduplication" defaultChecked />
                    </div>
                    <p className="text-sm text-muted-foreground">启用后，系统将自动检测并去除重复数据</p>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="data-validation">数据验证</Label>
                      <Switch id="data-validation" defaultChecked />
                    </div>
                    <p className="text-sm text-muted-foreground">启用后，系统将验证采集数据的完整性和有效性</p>
                  </div>

<div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="notification">采集任务通知</Label>
                      <Switch id="notification" defaultChecked />
                    </div>
                    <p className="text-sm text-muted-foreground">启用后，系统将在采集任务完成或出错时发送通知</p>
                  </div>

{/* 添加采集任务对话框 */}
      <Dialog open={isAddingTask} onOpenChange={setIsAddingTask}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>添加数据采集任务</DialogTitle>
            <DialogDescription>配置新的数据采集任务</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="task-name" className="text-right">
                任务名称
              </Label>
              <Input id="task-name" className="col-span-3" placeholder="例如：用户基本信息采集" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="data-source" className="text-right">
                数据源
              </Label>
              <Select>
                <SelectTrigger id="data-source" className="col-span-3">
                  <SelectValue placeholder="选择数据源" />
                </SelectTrigger>
                <SelectContent>
                  {dataSources.map((source) => (
                    <SelectItem key={source.id} value={source.id}>
                      {source.name} ({source.type})
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="collection-type" className="text-right">
                采集类型
              </Label>
              <Select>
                <SelectTrigger id="collection-type" className="col-span-3">
                  <SelectValue placeholder="选择采集类型" />
                </SelectTrigger>
                <SelectContent>
                  {collectionTypes.map((type) => (
                    <SelectItem key={type.id} value={type.id}>
                      {type.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="schedule" className="text-right">
                采集频率
              </Label>
              <Select>
                <SelectTrigger id="schedule" className="col-span-3">
                  <SelectValue placeholder="选择采集频率" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="hourly">每小时</SelectItem>
                  <SelectItem value="daily">每日</SelectItem>
                  <SelectItem value="weekly">每周</SelectItem>
                  <SelectItem value="monthly">每月</SelectItem>
                  <SelectItem value="manual">手动</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="time" className="text-right">
                执行时间
              </Label>
              <Input id="time" type="time" className="col-span-3" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <div className="text-right">
                <Label htmlFor="auto-process">自动处理</Label>
              </div>
              <div className="flex items-center space-x-2 col-span-3">
                <Switch id="auto-process" />
                <Label htmlFor="auto-process">采集后自动处理数据</Label>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsAddingTask(false)}>
              取消
            </Button>
            <Button
              onClick={() =>
                addTask({
                  name: "新建采集任务",
                  source: "CRM系统",
                  type: "数据库",
                  schedule: "每日 00:00",
                  nextRun: "2023-07-21 00:00",
                  status: "active",
                })
              }
            >
              创建任务
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* 任务详情对话框 */}
      <Dialog open={!!selectedTaskId} onOpenChange={(open) => !open && setSelectedTaskId(null)}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>任务详情</DialogTitle>
            <DialogDescription>查看和编辑采集任务详情</DialogDescription>
          </DialogHeader>
          {selectedTask && (
            <div className="space-y-4 py-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="text-sm text-muted-foreground">任务名称</Label>
                  <p className="font-medium">{selectedTask.name}</p>
                </div>
                <div>
                  <Label className="text-sm text-muted-foreground">数据源</Label>
                  <p className="font-medium">{selectedTask.source}</p>
                </div>
                <div>
                  <Label className="text-sm text-muted-foreground">采集频率</Label>
                  <p className="font-medium">{selectedTask.schedule}</p>
                </div>
                <div>
                  <Label className="text-sm text-muted-foreground">状态</Label>
                  <div>{getStatusBadge(selectedTask.status)}</div>
                </div>
                <div>
                  <Label className="text-sm text-muted-foreground">上次运行</Label>
                  <p className="font-medium">{selectedTask.lastRun || "从未运行"}</p>
                </div>
                <div>
                  <Label className="text-sm text-muted-foreground">下次运行</Label>
                  <p className="font-medium">{selectedTask.nextRun || "无计划"}</p>
                </div>
                <div>
                  <Label className="text-sm text-muted-foreground">已采集记录</Label>
                  <p className="font-medium">{selectedTask.recordsCollected.toLocaleString()}</p>
                </div>
              </div>

<div className="space-y-2">
                <Label>采集字段</Label>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>字段名</TableHead>
                      <TableHead>数据类型</TableHead>
                      <TableHead>是否采集</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    <TableRow>
                      <TableCell>用户ID</TableCell>
                      <TableCell>字符串</TableCell>
                      <TableCell>
                        <Switch defaultChecked />
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell>手机号</TableCell>
                      <TableCell>字符串</TableCell>
                      <TableCell>
                        <Switch defaultChecked />
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell>身份证号</TableCell>
                      <TableCell>字符串</TableCell>
                      <TableCell>
                        <Switch defaultChecked />
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell>设备IMEI</TableCell>
                      <TableCell>字符串</TableCell>
                      <TableCell>
                        <Switch defaultChecked />
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell>注册时间</TableCell>
                      <TableCell>日期时间</TableCell>
                      <TableCell>
                        <Switch defaultChecked />
                      </TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </div>

<div className="space-y-2">
                <Label>数据处理规则</Label>
                <div className="grid grid-cols-2 gap-2">
                  <div className="flex items-center space-x-2">
                    <Switch defaultChecked />
                    <Label>数据去重</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Switch defaultChecked />
                    <Label>数据验证</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Switch defaultChecked />
                    <Label>数据脱敏</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Switch defaultChecked />
                    <Label>数据转换</Label>
                  </div>
                </div>
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setSelectedTaskId(null)}>
              关闭
            </Button>
            <Button variant="outline" onClick={() => {}}>
              立即执行
            </Button>
            <Button onClick={() => setSelectedTaskId(null)}>保存更改</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/data-integration/data-dashboard.tsx" isMerged="true"
"use client"

// 模拟图表组件
const LineChart = ({ data, title }: { data: any; title: string }) => (
  <div className="w-full h-64 bg-muted/30 rounded-md flex items-center justify-center">
    <div className="text-center">
      <p className="text-muted-foreground">{title}</p>
      <p className="text-sm text-muted-foreground">图表组件将在这里显示</p>
    </div>
  </div>
)

const BarChart = ({ data, title }: { data: any; title: string }) => (
  <div className="w-full h-64 bg-muted/30 rounded-md flex items-center justify-center">
    <div className="text-center">
      <p className="text-muted-foreground">{title}</p>
      <p className="text-sm text-muted-foreground">图表组件将在这里显示</p>
    </div>
  </div>
)

const PieChart = ({ data, title }: { data: any; title: string }) => (
  <div className="w-full h-64 bg-muted/30 rounded-md flex items-center justify-center">
    <div className="text-center">
      <p className="text-muted-foreground">{title}</p>
      <p className="text-sm text-muted-foreground">图表组件将在这里显示</p>
    </div>
  </div>
)

export function DataDashboard() {
  const [timeRange, setTimeRange] = useState("7d")
  const [activeTab, setActiveTab] = useState("overview")

// 模拟数据
  const overviewData = {
    totalUsers: 1245678,
    userGrowth: 12.5,
    totalDataSources: 8,
    dataSourceGrowth: 33.3,
    totalRecords: 45678921,
    recordsGrowth: 8.7,
    dataQuality: 92,
    dataQualityGrowth: 3.2,
  }

const dataSourceStats = [
    { name: "CRM系统", records: 12500000, growth: 5.2, quality: 95 },
    { name: "交易系统", records: 8750000, growth: 12.3, quality: 90 },
    { name: "行为分析平台", records: 15800000, growth: 8.7, quality: 88 },
    { name: "社交媒体", records: 4500000, growth: 15.2, quality: 85 },
    { name: "设备管理系统", records: 3200000, growth: -2.1, quality: 93 },
  ]

const dataQualityIssues = [
    { type: "缺失值", count: 12500, percentage: 0.027, severity: "medium" },
    { type: "格式错误", count: 8750, percentage: 0.019, severity: "high" },
    { type: "重复数据", count: 23800, percentage: 0.052, severity: "low" },
    { type: "异常值", count: 4500, percentage: 0.01, severity: "high" },
    { type: "不一致数据", count: 9200, percentage: 0.02, severity: "medium" },
  ]

const formatNumber = (num: number) => {
    if (num >= 1000000) {
      return (num / 1000000).toFixed(1) + "M"
    } else if (num >= 1000) {
      return (num / 1000).toFixed(1) + "K"
    }
    return num.toString()
  }

const getSeverityBadge = (severity: string) => {
    switch (severity) {
      case "high":
        return <Badge className="bg-red-100 text-red-800">高</Badge>
      case "medium":
        return <Badge className="bg-yellow-100 text-yellow-800">中</Badge>
      case "low":
        return <Badge className="bg-green-100 text-green-800">低</Badge>
      default:
        return <Badge>未知</Badge>
    }
  }

return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">数据仪表盘</h2>
        <div className="flex items-center gap-2">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-[180px]">
              <Calendar className="mr-2 h-4 w-4" />
              <SelectValue placeholder="选择时间范围" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="1d">今日</SelectItem>
              <SelectItem value="7d">近7天</SelectItem>
              <SelectItem value="30d">近30天</SelectItem>
              <SelectItem value="90d">近90天</SelectItem>
              <SelectItem value="1y">近1年</SelectItem>
              <SelectItem value="custom">自定义</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="icon">
            <RefreshCw className="h-4 w-4" />
          </Button>
          <Button variant="outline">
            <Download className="mr-2 h-4 w-4" />
            导出报告
          </Button>
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex flex-col space-y-2">
              <p className="text-sm text-muted-foreground">总用户数</p>
              <div className="flex items-end justify-between">
                <h3 className="text-2xl font-bold">{formatNumber(overviewData.totalUsers)}</h3>
                <div className={`flex items-center ${getGrowthClass(overviewData.userGrowth)}`}>
                  {overviewData.userGrowth > 0 ? (
                    <ArrowUp className="h-4 w-4 mr-1" />
                  ) : (
                    <ArrowDown className="h-4 w-4 mr-1" />
                  )}
                  <span>{Math.abs(overviewData.userGrowth)}%</span>
                </div>
              </div>
              <p className="text-xs text-muted-foreground">相比上一时段</p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex flex-col space-y-2">
              <p className="text-sm text-muted-foreground">数据源数量</p>
              <div className="flex items-end justify-between">
                <h3 className="text-2xl font-bold">{overviewData.totalDataSources}</h3>
                <div className={`flex items-center ${getGrowthClass(overviewData.dataSourceGrowth)}`}>
                  {overviewData.dataSourceGrowth > 0 ? (
                    <ArrowUp className="h-4 w-4 mr-1" />
                  ) : (
                    <ArrowDown className="h-4 w-4 mr-1" />
                  )}
                  <span>{Math.abs(overviewData.dataSourceGrowth)}%</span>
                </div>
              </div>
              <p className="text-xs text-muted-foreground">相比上一时段</p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex flex-col space-y-2">
              <p className="text-sm text-muted-foreground">总记录数</p>
              <div className="flex items-end justify-between">
                <h3 className="text-2xl font-bold">{formatNumber(overviewData.totalRecords)}</h3>
                <div className={`flex items-center ${getGrowthClass(overviewData.recordsGrowth)}`}>
                  {overviewData.recordsGrowth > 0 ? (
                    <ArrowUp className="h-4 w-4 mr-1" />
                  ) : (
                    <ArrowDown className="h-4 w-4 mr-1" />
                  )}
                  <span>{Math.abs(overviewData.recordsGrowth)}%</span>
                </div>
              </div>
              <p className="text-xs text-muted-foreground">相比上一时段</p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex flex-col space-y-2">
              <p className="text-sm text-muted-foreground">数据质量评分</p>
              <div className="flex items-end justify-between">
                <h3 className="text-2xl font-bold">{overviewData.dataQuality}/100</h3>
                <div className={`flex items-center ${getGrowthClass(overviewData.dataQualityGrowth)}`}>
                  {overviewData.dataQualityGrowth > 0 ? (
                    <ArrowUp className="h-4 w-4 mr-1" />
                  ) : (
                    <ArrowDown className="h-4 w-4 mr-1" />
                  )}
                  <span>{Math.abs(overviewData.dataQualityGrowth)}%</span>
                </div>
              </div>
              <p className="text-xs text-muted-foreground">相比上一时段</p>
            </div>
          </CardContent>
        </Card>
      </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
        <TabsList>
          <TabsTrigger value="overview">数据概览</TabsTrigger>
          <TabsTrigger value="sources">数据源分析</TabsTrigger>
          <TabsTrigger value="quality">数据质量</TabsTrigger>
          <TabsTrigger value="integration">数据整合</TabsTrigger>
        </TabsList>

<TabsContent value="overview" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>用户数据增长趋势</CardTitle>
                <CardDescription>近期用户数据增长情况</CardDescription>
              </CardHeader>
              <CardContent>
                <LineChart data={{}} title="用户数据增长趋势图" />
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>数据源分布</CardTitle>
                <CardDescription>各数据源数据量占比</CardDescription>
              </CardHeader>
              <CardContent>
                <PieChart data={{}} title="数据源分布图" />
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>数据质量趋势</CardTitle>
                <CardDescription>数据质量评分变化趋势</CardDescription>
              </CardHeader>
              <CardContent>
                <LineChart data={{}} title="数据质量趋势图" />
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>数据整合进度</CardTitle>
                <CardDescription>各标识符数据整合进度</CardDescription>
              </CardHeader>
              <CardContent>
                <BarChart data={{}} title="数据整合进度图" />
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="sources" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>数据源统计</CardTitle>
              <CardDescription>各数据源数据量和质量统计</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <table className="min-w-full divide-y divide-border">
                  <thead>
                    <tr className="bg-muted/50">
                      <th className="px-4 py-3 text-left text-sm font-medium">数据源</th>
                      <th className="px-4 py-3 text-left text-sm font-medium">记录数</th>
                      <th className="px-4 py-3 text-left text-sm font-medium">增长率</th>
                      <th className="px-4 py-3 text-left text-sm font-medium">质量评分</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-border">
                    {dataSourceStats.map((source, index) => (
                      <tr key={index}>
                        <td className="px-4 py-3 text-sm font-medium">{source.name}</td>
                        <td className="px-4 py-3 text-sm">{formatNumber(source.records)}</td>
                        <td className="px-4 py-3 text-sm">
                          <div className={`flex items-center ${getGrowthClass(source.growth)}`}>
                            {source.growth > 0 ? (
                              <ArrowUp className="h-4 w-4 mr-1" />
                            ) : (
                              <ArrowDown className="h-4 w-4 mr-1" />
                            )}
                            <span>{Math.abs(source.growth)}%</span>
                          </div>
                        </td>
                        <td className="px-4 py-3 text-sm">{source.quality}/100</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>数据源记录数对比</CardTitle>
                <CardDescription>各数据源记录数量对比</CardDescription>
              </CardHeader>
              <CardContent>
                <BarChart data={{}} title="数据源记录数对比图" />
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>数据源质量对比</CardTitle>
                <CardDescription>各数据源质量评分对比</CardDescription>
              </CardHeader>
              <CardContent>
                <BarChart data={{}} title="数据源质量对比图" />
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="quality" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>数据质量问题</CardTitle>
              <CardDescription>主要数据质量问题统计</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <table className="min-w-full divide-y divide-border">
                  <thead>
                    <tr className="bg-muted/50">
                      <th className="px-4 py-3 text-left text-sm font-medium">问题类型</th>
                      <th className="px-4 py-3 text-left text-sm font-medium">问题数量</th>
                      <th className="px-4 py-3 text-left text-sm font-medium">占比</th>
                      <th className="px-4 py-3 text-left text-sm font-medium">严重程度</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-border">
                    {dataQualityIssues.map((issue, index) => (
                      <tr key={index}>
                        <td className="px-4 py-3 text-sm font-medium">{issue.type}</td>
                        <td className="px-4 py-3 text-sm">{formatNumber(issue.count)}</td>
                        <td className="px-4 py-3 text-sm">{(issue.percentage * 100).toFixed(2)}%</td>
                        <td className="px-4 py-3 text-sm">{getSeverityBadge(issue.severity)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>数据质量问题分布</CardTitle>
                <CardDescription>各类数据质量问题分布</CardDescription>
              </CardHeader>
              <CardContent>
                <PieChart data={{}} title="数据质量问题分布图" />
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>数据质量趋势</CardTitle>
                <CardDescription>数据质量随时间变化趋势</CardDescription>
              </CardHeader>
              <CardContent>
                <LineChart data={{}} title="数据质量趋势图" />
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="integration" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>数据整合状态</CardTitle>
              <CardDescription>基于不同标识符的数据整合状态</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">用户ID整合率</span>
                    <span className="text-green-600 font-medium">95%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div className="bg-green-600 h-2.5 rounded-full" style={{ width: "95%" }}></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">手机号整合率</span>
                    <span className="text-green-600 font-medium">87%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div className="bg-green-600 h-2.5 rounded-full" style={{ width: "87%" }}></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">身份证号整合率</span>
                    <span className="text-yellow-600 font-medium">72%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div className="bg-yellow-600 h-2.5 rounded-full" style={{ width: "72%" }}></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">IMEI设备号整合率</span>
                    <span className="text-yellow-600 font-medium">68%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div className="bg-yellow-600 h-2.5 rounded-full" style={{ width: "68%" }}></div>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">整体数据整合率</span>
                    <span className="text-green-600 font-medium">82%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div className="bg-green-600 h-2.5 rounded-full" style={{ width: "82%" }}></div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>数据整合趋势</CardTitle>
                <CardDescription>数据整合率随时间变化趋势</CardDescription>
              </CardHeader>
              <CardContent>
                <LineChart data={{}} title="数据整合趋势图" />
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>标识符覆盖率</CardTitle>
                <CardDescription>各标识符在用户数据中的覆盖率</CardDescription>
              </CardHeader>
              <CardContent>
                <BarChart data={{}} title="标识符覆盖率图" />
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/data-integration/data-quality-monitor.tsx" isMerged="true"
"use client"

import { Textarea } from "@/components/ui/textarea"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Separator } from "@/components/ui/separator"
import { AlertTriangle, CheckCircle, Bell, RefreshCw, Filter, Download, Search, Clock } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

interface DataQualityIssue {
  id: string
  type: string
  description: string
  affectedRecords: number
  affectedFields: string[]
  severity: "high" | "medium" | "low"
  status: "open" | "in_progress" | "resolved"
  createdAt: string
  dataSource: string
}

interface DataQualityRule {
  id: string
  name: string
  description: string
  type: string
  enabled: boolean
  severity: "high" | "medium" | "low"
  dataSource: string
  lastRun: string
  issuesDetected: number
}

export function DataQualityMonitor() {
  const [activeTab, setActiveTab] = useState("issues")
  const [selectedIssueId, setSelectedIssueId] = useState<string | null>(null)
  const [isAddingRule, setIsAddingRule] = useState(false)
  const [filterSeverity, setFilterSeverity] = useState<string>("all")
  const [filterStatus, setFilterStatus] = useState<string>("all")

// 模拟数据质量问题
  const [dataQualityIssues, setDataQualityIssues] = useState<DataQualityIssue[]>([
    {
      id: "issue-1",
      type: "缺失值",
      description: "用户表中存在大量手机号字段为空的记录",
      affectedRecords: 1250,
      affectedFields: ["phoneNumber"],
      severity: "high",
      status: "open",
      createdAt: "2023-07-20 10:15",
      dataSource: "CRM系统",
    },
    {
      id: "issue-2",
      type: "格式错误",
      description: "部分用户的身份证号格式不正确",
      affectedRecords: 458,
      affectedFields: ["identityNumber"],
      severity: "medium",
      status: "in_progress",
      createdAt: "2023-07-19 15:30",
      dataSource: "用户数据库",
    },
    {
      id: "issue-3",
      type: "重复数据",
      description: "存在多条使用相同手机号的用户记录",
      affectedRecords: 789,
      affectedFields: ["userId", "phoneNumber"],
      severity: "medium",
      status: "open",
      createdAt: "2023-07-18 09:45",
      dataSource: "交易系统",
    },
    {
      id: "issue-4",
      type: "异常值",
      description: "部分用户的年龄字段值异常（超过150岁）",
      affectedRecords: 23,
      affectedFields: ["age"],
      severity: "low",
      status: "resolved",
      createdAt: "2023-07-17 14:20",
      dataSource: "用户数据库",
    },
    {
      id: "issue-5",
      type: "不一致数据",
      description: "用户在不同系统中的姓名不一致",
      affectedRecords: 567,
      affectedFields: ["fullName"],
      severity: "high",
      status: "open",
      createdAt: "2023-07-16 11:05",
      dataSource: "多系统",
    },
  ])

// 模拟数据质量规则
  const [dataQualityRules, setDataQualityRules] = useState<DataQualityRule[]>([
    {
      id: "rule-1",
      name: "手机号格式检查",
      description: "检查手机号是否符合中国大陆手机号格式",
      type: "格式验证",
      enabled: true,
      severity: "high",
      dataSource: "所有数据源",
      lastRun: "2023-07-20 00:00",
      issuesDetected: 458,
    },
    {
      id: "rule-2",
      name: "身份证号验证",
      description: "验证身份证号的格式和校验码",
      type: "格式验证",
      enabled: true,
      severity: "high",
      dataSource: "所有数据源",
      lastRun: "2023-07-20 00:00",
      issuesDetected: 789,
    },
    {
      id: "rule-3",
      name: "必填字段检查",
      description: "检查关键字段是否有值",
      type: "完整性检查",
      enabled: true,
      severity: "medium",
      dataSource: "所有数据源",
      lastRun: "2023-07-20 00:00",
      issuesDetected: 1250,
    },
    {
      id: "rule-4",
      name: "重复数据检测",
      description: "检测并标记重复的用户记录",
      type: "唯一性检查",
      enabled: true,
      severity: "medium",
      dataSource: "所有数据源",
      lastRun: "2023-07-20 00:00",
      issuesDetected: 567,
    },
    {
      id: "rule-5",
      name: "数据一致性检查",
      description: "检查用户在不同系统中的数据是否一致",
      type: "一致性检查",
      enabled: true,
      severity: "high",
      dataSource: "所有数据源",
      lastRun: "2023-07-20 00:00",
      issuesDetected: 567,
    },
  ])

// 模拟数据质量统计
  const qualityStats = {
    totalIssues: 3087,
    openIssues: 2606,
    resolvedIssues: 481,
    highSeverity: 1245,
    mediumSeverity: 1356,
    lowSeverity: 486,
    dataQualityScore: 87,
    completenessScore: 92,
    accuracyScore: 85,
    consistencyScore: 88,
    validityScore: 84,
  }

const getStatusBadge = (status: string) => {
    switch (status) {
      case "open":
        return <Badge className="bg-red-100 text-red-800">未解决</Badge>
      case "in_progress":
        return <Badge className="bg-yellow-100 text-yellow-800">处理中</Badge>
      case "resolved":
        return <Badge className="bg-green-100 text-green-800">已解决</Badge>
      default:
        return <Badge>未知</Badge>
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "open":
        return <AlertTriangle className="h-5 w-5 text-red-500" />
      case "in_progress":
        return <RefreshCw className="h-5 w-5 text-yellow-500" />
      case "resolved":
        return <CheckCircle className="h-5 w-5 text-green-500" />
      default:
        return <AlertTriangle className="h-5 w-5" />
    }
  }

const filteredIssues = dataQualityIssues.filter((issue) => {
    if (filterSeverity !== "all" && issue.severity !== filterSeverity) return false
    if (filterStatus !== "all" && issue.status !== filterStatus) return false
    return true
  })

const selectedIssue = selectedIssueId ? dataQualityIssues.find((issue) => issue.id === selectedIssueId) : null

const updateIssueStatus = (id: string, status: "open" | "in_progress" | "resolved") => {
    setDataQualityIssues(
      dataQualityIssues.map((issue) => {
        if (issue.id === id) {
          return { ...issue, status }
        }
        return issue
      }),
    )
  }

const toggleRuleStatus = (id: string) => {
    setDataQualityRules(
      dataQualityRules.map((rule) => {
        if (rule.id === id) {
          return { ...rule, enabled: !rule.enabled }
        }
        return rule
      }),
    )
  }

return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">数据质量监控</h2>
        <div className="flex items-center gap-2">
          <Button variant="outline">
            <Bell className="mr-2 h-4 w-4" />
            通知设置
          </Button>
          <Button>
            <RefreshCw className="mr-2 h-4 w-4" />
            运行检查
          </Button>
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex flex-col space-y-2">
              <p className="text-sm text-muted-foreground">数据质量评分</p>
              <div className="flex items-end justify-between">
                <h3 className="text-2xl font-bold">{qualityStats.dataQualityScore}/100</h3>
              </div>
              <div className="w-full bg-gray-200 rounded-full h-2.5">
                <div
                  className="bg-green-600 h-2.5 rounded-full"
                  style={{ width: `${qualityStats.dataQualityScore}%` }}
                ></div>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex flex-col space-y-2">
              <p className="text-sm text-muted-foreground">未解决问题</p>
              <div className="flex items-center justify-between">
                <h3 className="text-2xl font-bold">{qualityStats.openIssues}</h3>
                <AlertTriangle className="h-5 w-5 text-red-500" />
              </div>
              <p className="text-xs text-muted-foreground">其中高严重性: {qualityStats.highSeverity} 个问题</p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex flex-col space-y-2">
              <p className="text-sm text-muted-foreground">处理中问题</p>
              <div className="flex items-center justify-between">
                <h3 className="text-2xl font-bold">
                  {dataQualityIssues.filter((issue) => issue.status === "in_progress").length}
                </h3>
                <RefreshCw className="h-5 w-5 text-yellow-500" />
              </div>
              <p className="text-xs text-muted-foreground">正在处理中的数据质量问题</p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex flex-col space-y-2">
              <p className="text-sm text-muted-foreground">已解决问题</p>
              <div className="flex items-center justify-between">
                <h3 className="text-2xl font-bold">{qualityStats.resolvedIssues}</h3>
                <CheckCircle className="h-5 w-5 text-green-500" />
              </div>
              <p className="text-xs text-muted-foreground">
                解决率: {((qualityStats.resolvedIssues / qualityStats.totalIssues) * 100).toFixed(1)}%
              </p>
            </div>
          </CardContent>
        </Card>
      </div>

<TabsContent value="issues" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex justify-between items-center">
                <CardTitle>数据质量问题</CardTitle>
                <div className="flex items-center gap-2">
                  <div className="relative">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input type="text" placeholder="搜索问题..." className="pl-8 w-[200px]" />
                  </div>
                  <Select value={filterSeverity} onValueChange={setFilterSeverity}>
                    <SelectTrigger className="w-[130px]">
                      <Filter className="mr-2 h-4 w-4" />
                      <SelectValue placeholder="严重性" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">所有严重性</SelectItem>
                      <SelectItem value="high">高</SelectItem>
                      <SelectItem value="medium">中</SelectItem>
                      <SelectItem value="low">低</SelectItem>
                    </SelectContent>
                  </Select>
                  <Select value={filterStatus} onValueChange={setFilterStatus}>
                    <SelectTrigger className="w-[130px]">
                      <Filter className="mr-2 h-4 w-4" />
                      <SelectValue placeholder="状态" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">所有状态</SelectItem>
                      <SelectItem value="open">未解决</SelectItem>
                      <SelectItem value="in_progress">处理中</SelectItem>
                      <SelectItem value="resolved">已解决</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-[50px]">状态</TableHead>
                      <TableHead>问题类型</TableHead>
                      <TableHead>描述</TableHead>
                      <TableHead>影响记录数</TableHead>
                      <TableHead>严重性</TableHead>
                      <TableHead>数据源</TableHead>
                      <TableHead>发现时间</TableHead>
                      <TableHead className="text-right">操作</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredIssues.map((issue) => (
                      <TableRow key={issue.id}>
                        <TableCell>{getStatusIcon(issue.status)}</TableCell>
                        <TableCell className="font-medium">{issue.type}</TableCell>
                        <TableCell>{issue.description}</TableCell>
                        <TableCell>{issue.affectedRecords.toLocaleString()}</TableCell>
                        <TableCell>{getSeverityBadge(issue.severity)}</TableCell>
                        <TableCell>{issue.dataSource}</TableCell>
                        <TableCell>{issue.createdAt}</TableCell>
                        <TableCell className="text-right">
                          <Button variant="ghost" size="sm" onClick={() => setSelectedIssueId(issue.id)}>
                            查看详情
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="rules" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex justify-between items-center">
                <CardTitle>数据质量规则</CardTitle>
                <Button onClick={() => setIsAddingRule(true)}>添加规则</Button>
              </div>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>规则名称</TableHead>
                      <TableHead>类型</TableHead>
                      <TableHead>严重性</TableHead>
                      <TableHead>数据源</TableHead>
                      <TableHead>上次运行</TableHead>
                      <TableHead>检测到的问题</TableHead>
                      <TableHead>状态</TableHead>
                      <TableHead className="text-right">操作</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {dataQualityRules.map((rule) => (
                      <TableRow key={rule.id}>
                        <TableCell className="font-medium">{rule.name}</TableCell>
                        <TableCell>{rule.type}</TableCell>
                        <TableCell>{getSeverityBadge(rule.severity)}</TableCell>
                        <TableCell>{rule.dataSource}</TableCell>
                        <TableCell>{rule.lastRun}</TableCell>
                        <TableCell>{rule.issuesDetected.toLocaleString()}</TableCell>
                        <TableCell>
                          <div className="flex items-center space-x-2">
                            <Switch
                              checked={rule.enabled}
                              onCheckedChange={() => toggleRuleStatus(rule.id)}
                              aria-label="Toggle rule"
                            />
                            <span>{rule.enabled ? "启用" : "禁用"}</span>
                          </div>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end space-x-2">
                            <Button variant="ghost" size="sm">
                              编辑
                            </Button>
                            <Button variant="ghost" size="sm">
                              运行
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="metrics" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card>
              <CardHeader>
                <CardTitle>数据完整性</CardTitle>
                <CardDescription>数据字段的完整性评分</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">总体完整性评分</span>
                    <span className="text-green-600 font-medium">{qualityStats.completenessScore}/100</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div
                      className="bg-green-600 h-2.5 rounded-full"
                      style={{ width: `${qualityStats.completenessScore}%` }}
                    ></div>
                  </div>

<div className="space-y-2 mt-4">
                    <h4 className="text-sm font-medium">关键字段完整性</h4>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">用户ID</span>
                        <span className="text-sm">100%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "100%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">手机号</span>
                        <span className="text-sm">87%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "87%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">身份证号</span>
                        <span className="text-sm">72%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "72%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">IMEI设备号</span>
                        <span className="text-sm">68%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "68%" }}></div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>数据准确性</CardTitle>
                <CardDescription>数据值的准确性评分</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">总体准确性评分</span>
                    <span className="text-green-600 font-medium">{qualityStats.accuracyScore}/100</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div
                      className="bg-green-600 h-2.5 rounded-full"
                      style={{ width: `${qualityStats.accuracyScore}%` }}
                    ></div>
                  </div>

<div className="space-y-2 mt-4">
                    <h4 className="text-sm font-medium">字段准确性</h4>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">手机号格式</span>
                        <span className="text-sm">92%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "92%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">身份证号格式</span>
                        <span className="text-sm">85%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "85%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">年龄范围</span>
                        <span className="text-sm">95%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "95%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">邮箱格式</span>
                        <span className="text-sm">78%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "78%" }}></div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>数据一致性</CardTitle>
                <CardDescription>跨系统数据一致性评分</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">总体一致性评分</span>
                    <span className="text-green-600 font-medium">{qualityStats.consistencyScore}/100</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div
                      className="bg-green-600 h-2.5 rounded-full"
                      style={{ width: `${qualityStats.consistencyScore}%` }}
                    ></div>
                  </div>

<div className="space-y-2 mt-4">
                    <h4 className="text-sm font-medium">系统间一致性</h4>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">CRM与交易系统</span>
                        <span className="text-sm">90%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "90%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">用户数据库与行为分析</span>
                        <span className="text-sm">85%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "85%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">交易系统与设备管理</span>
                        <span className="text-sm">78%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "78%" }}></div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>数据有效性</CardTitle>
                <CardDescription>数据业务规则有效性评分</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="font-medium">总体有效性评分</span>
                    <span className="text-green-600 font-medium">{qualityStats.validityScore}/100</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div
                      className="bg-green-600 h-2.5 rounded-full"
                      style={{ width: `${qualityStats.validityScore}%` }}
                    ></div>
                  </div>

<div className="space-y-2 mt-4">
                    <h4 className="text-sm font-medium">业务规则有效性</h4>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">用户注册规则</span>
                        <span className="text-sm">92%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "92%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">交易记录规则</span>
                        <span className="text-sm">88%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "88%" }}></div>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between items-center">
                        <span className="text-sm">用户行为规则</span>
                        <span className="text-sm">75%</span>
                      </div>
                      <div className="w-full bg-gray-200 rounded-full h-1.5">
                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "75%" }}></div>
                      </div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="reports" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex justify-between items-center">
                <CardTitle>数据质量报告</CardTitle>
                <div className="flex items-center gap-2">
                  <Select defaultValue="weekly">
                    <SelectTrigger className="w-[150px]">
                      <Clock className="mr-2 h-4 w-4" />
                      <SelectValue placeholder="报告频率" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="daily">每日报告</SelectItem>
                      <SelectItem value="weekly">每周报告</SelectItem>
                      <SelectItem value="monthly">每月报告</SelectItem>
                    </SelectContent>
                  </Select>
                  <Button variant="outline">
                    <Download className="mr-2 h-4 w-4" />
                    导出报告
                  </Button>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>报告名称</TableHead>
                      <TableHead>生成时间</TableHead>
                      <TableHead>质量评分</TableHead>
                      <TableHead>问题数量</TableHead>
                      <TableHead>严重问题</TableHead>
                      <TableHead className="text-right">操作</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    <TableRow>
                      <TableCell className="font-medium">每周数据质量报告</TableCell>
                      <TableCell>2023-07-21</TableCell>
                      <TableCell>87/100</TableCell>
                      <TableCell>156</TableCell>
                      <TableCell>23</TableCell>
                      <TableCell className="text-right">
                        <Button variant="ghost" size="sm">
                          查看
                        </Button>
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell className="font-medium">每周数据质量报告</TableCell>
                      <TableCell>2023-07-14</TableCell>
                      <TableCell>85/100</TableCell>
                      <TableCell>178</TableCell>
                      <TableCell>31</TableCell>
                      <TableCell className="text-right">
                        <Button variant="ghost" size="sm">
                          查看
                        </Button>
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell className="font-medium">每周数据质量报告</TableCell>
                      <TableCell>2023-07-07</TableCell>
                      <TableCell>82/100</TableCell>
                      <TableCell>203</TableCell>
                      <TableCell>45</TableCell>
                      <TableCell className="text-right">
                        <Button variant="ghost" size="sm">
                          查看
                        </Button>
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell className="font-medium">每月数据质量报告</TableCell>
                      <TableCell>2023-06-30</TableCell>
                      <TableCell>80/100</TableCell>
                      <TableCell>245</TableCell>
                      <TableCell>52</TableCell>
                      <TableCell className="text-right">
                        <Button variant="ghost" size="sm">
                          查看
                        </Button>
                      </TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

{/* 问题详情对话框 */}
      <Dialog open={!!selectedIssueId} onOpenChange={(open) => !open && setSelectedIssueId(null)}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>问题详情</DialogTitle>
            <DialogDescription>查看和处理数据质量问题</DialogDescription>
          </DialogHeader>
          {selectedIssue && (
            <div className="space-y-4 py-4">
              <div className="flex items-center gap-4">
                {getStatusIcon(selectedIssue.status)}
                <div>
                  <h3 className="font-medium text-lg">{selectedIssue.type}</h3>
                  <p className="text-sm text-muted-foreground">{selectedIssue.description}</p>
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <Label className="text-sm text-muted-foreground">严重性</Label>
                  <p className="font-medium">{getSeverityBadge(selectedIssue.severity)}</p>
                </div>
                <div>
                  <Label className="text-sm text-muted-foreground">状态</Label>
                  <p className="font-medium">{getStatusBadge(selectedIssue.status)}</p>
                </div>
                <div>
                  <Label className="text-sm text-muted-foreground">数据源</Label>
                  <p className="font-medium">{selectedIssue.dataSource}</p>
                </div>
                <div>
                  <Label className="text-sm text-muted-foreground">发现时间</Label>
                  <p className="font-medium">{selectedIssue.createdAt}</p>
                </div>
                <div>
                  <Label className="text-sm text-muted-foreground">影响记录数</Label>
                  <p className="font-medium">{selectedIssue.affectedRecords.toLocaleString()}</p>
                </div>
              </div>

<div>
                <Label className="text-sm text-muted-foreground">影响字段</Label>
                <div className="flex flex-wrap gap-2 mt-1">
                  {selectedIssue.affectedFields.map((field, index) => (
                    <Badge key={index} variant="outline">
                      {field}
                    </Badge>
                  ))}
                </div>
              </div>

<div className="space-y-2">
                <Label>处理状态</Label>
                <Select
                  value={selectedIssue.status}
                  onValueChange={(value) =>
                    updateIssueStatus(selectedIssue.id, value as "open" | "in_progress" | "resolved")
                  }
                >
                  <SelectTrigger>
                    <SelectValue placeholder="选择状态" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="open">未解决</SelectItem>
                    <SelectItem value="in_progress">处理中</SelectItem>
                    <SelectItem value="resolved">已解决</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label>处理备注</Label>
                <Textarea placeholder="输入处理备注..." rows={3} />
              </div>
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setSelectedIssueId(null)}>
              关闭
            </Button>
            <Button onClick={() => setSelectedIssueId(null)}>保存更改</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* 添加规则对话框 */}
      <Dialog open={isAddingRule} onOpenChange={setIsAddingRule}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>添加数据质量规则</DialogTitle>
            <DialogDescription>创建新的数据质量检查规则</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="rule-name" className="text-right">
                规则名称
              </Label>
              <Input id="rule-name" className="col-span-3" placeholder="例如：手机号格式检查" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="rule-type" className="text-right">
                规则类型
              </Label>
              <Select>
                <SelectTrigger id="rule-type" className="col-span-3">
                  <SelectValue placeholder="选择规则类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="format">格式验证</SelectItem>
                  <SelectItem value="completeness">完整性检查</SelectItem>
                  <SelectItem value="uniqueness">唯一性检查</SelectItem>
                  <SelectItem value="consistency">一致性检查</SelectItem>
                  <SelectItem value="range">范围检查</SelectItem>
                  <SelectItem value="custom">自定义规则</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="rule-severity" className="text-right">
                严重性
              </Label>
              <Select>
                <SelectTrigger id="rule-severity" className="col-span-3">
                  <SelectValue placeholder="选择严重性" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="high">高</SelectItem>
                  <SelectItem value="medium">中</SelectItem>
                  <SelectItem value="low">低</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="rule-datasource" className="text-right">
                数据源
              </Label>
              <Select>
                <SelectTrigger id="rule-datasource" className="col-span-3">
                  <SelectValue placeholder="选择数据源" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有数据源</SelectItem>
                  <SelectItem value="crm">CRM系统</SelectItem>
                  <SelectItem value="transaction">交易系统</SelectItem>
                  <SelectItem value="user-db">用户数据库</SelectItem>
                  <SelectItem value="behavior">行为分析平台</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-start gap-4">
              <Label htmlFor="rule-description" className="text-right pt-2">
                规则描述
              </Label>
              <Textarea
                id="rule-description"
                className="col-span-3"
                placeholder="描述规则的用途和检查内容..."
                rows={3}
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <div className="text-right">
                <Label htmlFor="rule-enabled">启用规则</Label>
              </div>
              <div className="flex items-center space-x-2 col-span-3">
                <Switch id="rule-enabled" defaultChecked />
                <Label htmlFor="rule-enabled">立即启用此规则</Label>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsAddingRule(false)}>
              取消
            </Button>
            <Button onClick={() => setIsAddingRule(false)}>创建规则</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/documentation/screenshot-capture.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { Card } from "@/components/ui/card"
import { captureScreenshot } from "@/lib/documentation/screenshot-service"

interface ScreenshotCaptureProps {
  pages: Array<{ path: string; title: string; description: string }>
  isCapturing: boolean
  onScreenshotCaptured: (path: string, dataUrl: string) => void
  onCaptureComplete: () => void
  onError: (error: string) => void
}

export default function ScreenshotCapture({
  pages,
  isCapturing,
  onScreenshotCaptured,
  onCaptureComplete,
  onError,
}: ScreenshotCaptureProps) {
  const [currentPageIndex, setCurrentPageIndex] = useState(-1)
  const [currentStatus, setCurrentStatus] = useState("")
  const iframeRef = useRef<HTMLIFrameElement>(null)
  const baseUrl = typeof window !== "undefined" ? window.location.origin : ""

useEffect(() => {
    if (isCapturing && pages.length > 0) {
      // 开始捕获过程
      setCurrentPageIndex(0)
    } else if (!isCapturing) {
      setCurrentPageIndex(-1)
      setCurrentStatus("")
    }
  }, [isCapturing, pages])

useEffect(() => {
    if (currentPageIndex >= 0 && currentPageIndex < pages.length) {
      const capturePage = async () => {
        const page = pages[currentPageIndex]
        const fullPath = `${baseUrl}${page.path}`

try {
          setCurrentStatus(`正在加载页面: ${page.title}`)

// 等待iframe加载完成
          if (iframeRef.current) {
            iframeRef.current.src = fullPath

// 监听iframe加载完成事件
            const handleLoad = async () => {
              try {
                setCurrentStatus(`正在捕获页面: ${page.title}`)

// 给页面一些时间完全渲染
                await new Promise((resolve) => setTimeout(resolve, 2000))

// 捕获截图
                const screenshot = await captureScreenshot(iframeRef.current!)
                onScreenshotCaptured(page.path, screenshot)

// 移动到下一页
                if (currentPageIndex < pages.length - 1) {
                  setCurrentPageIndex(currentPageIndex + 1)
                } else {
                  // 所有页面都已捕获
                  onCaptureComplete()
                }
              } catch (err) {
                onError(`捕获页面 ${page.title} 截图时出错: ${err instanceof Error ? err.message : String(err)}`)
              }
            }

iframeRef.current.onload = handleLoad
          }
        } catch (err) {
          onError(`加载页面 ${page.title} 时出错: ${err instanceof Error ? err.message : String(err)}`)

// 尝试继续下一页
          if (currentPageIndex < pages.length - 1) {
            setCurrentPageIndex(currentPageIndex + 1)
          } else {
            onCaptureComplete()
          }
        }
      }

capturePage()
    }
  }, [currentPageIndex, pages, onScreenshotCaptured, onCaptureComplete, onError, baseUrl])

return (
    <div className="space-y-4">
      {isCapturing && currentPageIndex >= 0 && currentPageIndex < pages.length && (
        <div className="space-y-2">
          <p className="text-sm text-gray-500">{currentStatus}</p>
          <p className="text-sm font-medium">
            正在处理: {currentPageIndex + 1} / {pages.length} - {pages[currentPageIndex].title}
          </p>

<Card className="overflow-hidden border-2 border-blue-200 bg-blue-50">
            <div className="relative pt-[56.25%]">
              {" "}
              {/* 16:9 宽高比 */}
              <iframe ref={iframeRef} className="absolute top-0 left-0 w-full h-full" title="页面预览" />
            </div>
          </Card>
        </div>
      )}

{!isCapturing && (
        <div className="text-center py-8 text-gray-500">
          <p>点击"开始捕获"按钮开始截图过程</p>
          <p className="text-sm mt-2">将依次捕获 {pages.length} 个页面的截图</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/documentation/export-controls.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { FileDown, FileText, Copy } from "lucide-react"

interface ExportControlsProps {
  documentUrl: string | null
  onError: (error: string) => void
}

export default function ExportControls({ documentUrl, onError }: ExportControlsProps) {
  const handleDownload = () => {
    if (!documentUrl) {
      onError("没有可下载的文档")
      return
    }

try {
      // 创建一个临时链接并触发下载
      const link = document.createElement("a")
      link.href = documentUrl
      link.download = "用户数据资产中台使用手册.docx"
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    } catch (err) {
      onError(`下载文档时出错: ${err instanceof Error ? err.message : String(err)}`)
    }
  }

const handlePreview = () => {
    if (!documentUrl) {
      onError("没有可预览的文档")
      return
    }

try {
      // 在新窗口中打开文档
      window.open(documentUrl, "_blank")
    } catch (err) {
      onError(`预览文档时出错: ${err instanceof Error ? err.message : String(err)}`)
    }
  }

const handleCopyLink = () => {
    if (!documentUrl) {
      onError("没有可复制的文档链接")
      return
    }

try {
      // 复制链接到剪贴板
      navigator.clipboard
        .writeText(documentUrl)
        .then(() => {
          alert("文档链接已复制到剪贴板")
        })
        .catch((err) => {
          onError(`复制链接时出错: ${err instanceof Error ? err.message : String(err)}`)
        })
    } catch (err) {
      onError(`复制链接时出错: ${err instanceof Error ? err.message : String(err)}`)
    }
  }

return (
    <div className="space-y-6">
      {documentUrl ? (
        <div className="space-y-4">
          <div className="flex flex-col sm:flex-row gap-3">
            <Button onClick={handleDownload} className="flex items-center gap-2">
              <FileDown className="h-4 w-4" />
              <span>下载Word文档</span>
            </Button>

<div className="p-4 bg-gray-50 rounded-md border text-sm">
            <p className="font-medium mb-2">文档已生成</p>
            <p className="text-gray-500 break-all">{documentUrl}</p>
          </div>
        </div>
      ) : (
        <div className="text-center py-8 text-gray-500">
          <p>尚未生成文档</p>
          <p className="text-sm mt-2">请先完成文档生成步骤</p>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/documentation/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"

export default function DocumentationLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <div className="min-h-screen bg-gray-50">{children}</div>
}
[V0_FILE]typescriptreact:file="components/documentation/document-generator.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Loader2, FileText, AlertTriangle } from "lucide-react"
import { generateDocx } from "@/lib/documentation/docx-generator"

interface DocumentSection {
  title: string
  path: string
  description: string
  screenshot: string
}

interface DocumentGeneratorProps {
  pages: Array<{ path: string; title: string; description: string }>
  screenshots: Record<string, string>
  onDocumentGenerated: (url: string) => void
}

export default function DocumentGenerator({ pages, screenshots, onDocumentGenerated }: DocumentGeneratorProps) {
  const [isGenerating, setIsGenerating] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [sections, setSections] = useState<DocumentSection[]>([])
  const [descriptions, setDescriptions] = useState<Record<string, string>>({})

// 初始化页面描述
  useEffect(() => {
    const initialDescriptions: Record<string, string> = {}
    pages.forEach((page) => {
      initialDescriptions[page.path] = page.description || ""
    })
    setDescriptions(initialDescriptions)
  }, [pages])

// 更新页面描述
  const updateDescription = (path: string, description: string) => {
    setDescriptions((prev) => ({
      ...prev,
      [path]: description,
    }))
  }

// 准备文档部分
  useEffect(() => {
    const newSections = pages
      .filter((page) => screenshots[page.path])
      .map((page) => ({
        title: page.title,
        path: page.path,
        description: descriptions[page.path] || page.description || "",
        screenshot: screenshots[page.path],
      }))

setSections(newSections)
  }, [pages, screenshots, descriptions])

// 生成文档
  const generateDocument = async () => {
    if (sections.length === 0) {
      setError("没有可用的截图，请先捕获页面截图")
      return
    }

setIsGenerating(true)
    setError(null)

try {
      console.log("开始生成文档...")
      console.log("文档部分数量:", sections.length)

// 准备文档数据
      const documentData = {
        title: "用户数据资产中台使用手册",
        author: "系统管理员",
        date: new Date().toLocaleDateString("zh-CN"),
        sections: sections,
      }

console.log("文档数据准备完成")

// 生成Word文档
      const docxUrl = await generateDocx(documentData)
      console.log("文档生成成功:", docxUrl)

// 调用回调函数
      onDocumentGenerated(docxUrl)
    } catch (error) {
      console.error("生成文档时出错:", error)
      setError(`生成文档时出错: ${error instanceof Error ? error.message : String(error)}`)
    } finally {
      setIsGenerating(false)
    }
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-xl font-semibold">文档内容编辑</h2>
        <Button
          onClick={generateDocument}
          disabled={isGenerating || sections.length === 0}
          className="flex items-center gap-2"
        >
          {isGenerating ? (
            <>
              <Loader2 className="h-4 w-4 animate-spin" />
              生成中...
            </>
          ) : (
            <>
              <FileText className="h-4 w-4" />
              生成文档
            </>
          )}
        </Button>
      </div>

{error && (
        <Alert variant="destructive">
          <AlertTriangle className="h-4 w-4" />
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

{sections.length === 0 ? (
        <div className="text-center py-8">
          <p className="text-gray-500">没有可用的截图</p>
          <p className="text-sm text-gray-400 mt-1">请先捕获页面截图</p>
        </div>
      ) : (
        <div className="space-y-4">
          <p className="text-sm text-gray-500">
            已捕获 {sections.length} 个页面的截图。您可以编辑每个页面的描述，然后生成文档。
          </p>

{sections.map((section) => (
            <Card key={section.path} className="overflow-hidden">
              <CardContent className="p-4">
                <div className="flex flex-col md:flex-row gap-4">
                  <div className="md:w-1/3">
                    <div className="border rounded-md overflow-hidden">
                      <img
                        src={section.screenshot || "/placeholder.svg"}
                        alt={section.title}
                        className="w-full h-auto object-contain"
                      />
                    </div>
                    <p className="text-sm font-medium mt-2">{section.title}</p>
                    <p className="text-xs text-gray-500">{section.path}</p>
                  </div>
                  <div className="md:w-2/3">
                    <div className="space-y-2">
                      <Label htmlFor={`desc-${section.path}`}>页面描述</Label>
                      <Textarea
                        id={`desc-${section.path}`}
                        value={descriptions[section.path] || ""}
                        onChange={(e) => updateDescription(section.path, e.target.value)}
                        placeholder="输入此页面的详细描述"
                        rows={6}
                      />
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/ui/card.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import * as React from "react"
import { cn } from "@/lib/utils"

const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("glass-card transition-all duration-300 hover:shadow-glass-lg", className)} {...props} />
))
Card.displayName = "Card"

const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3
      ref={ref}
      className={cn(
        "text-2xl font-semibold leading-none tracking-tight bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent",
        className,
      )}
      {...props}
    />
  ),
)
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => <p ref={ref} className={cn("text-sm text-gray-600", className)} {...props} />,
)
CardDescription.displayName = "CardDescription"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="app/components/ui/button.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-xl text-sm font-medium transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default:
          "glass-button bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600 hover:scale-105 shadow-glass",
        destructive:
          "glass-button bg-gradient-to-r from-red-500 to-pink-500 text-white hover:from-red-600 hover:to-pink-600 hover:scale-105",
        outline: "glass-light border-2 border-white/30 hover:glass-heavy hover:scale-105",
        secondary: "glass-light text-gray-700 hover:glass-heavy hover:scale-105",
        ghost: "hover:glass-light hover:scale-105 rounded-xl",
        link: "text-blue-600 underline-offset-4 hover:underline hover:text-blue-700",
      },
      size: {
        default: "h-11 px-6 py-2",
        sm: "h-9 rounded-lg px-4",
        lg: "h-12 rounded-xl px-8",
        icon: "h-11 w-11",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, children, ...props }, ref) => {
    // If asChild is true and the first child is a valid element, clone it with the button props
    if (asChild && React.isValidElement(children)) {
      return React.cloneElement(children, {
        className: cn(buttonVariants({ variant, size, className })),
        ref,
        ...props,
        ...children.props,
      })
    }

return (
      <button className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props}>
        {children}
      </button>
    )
  },
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]javascript:file="tailwind.config.js" isEdit="true" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "1rem",
      screens: {
        sm: "640px",
        md: "768px",
        lg: "1024px",
        xl: "1280px",
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        glass: {
          light: "rgba(255, 255, 255, 0.1)",
          medium: "rgba(255, 255, 255, 0.2)",
          heavy: "rgba(255, 255, 255, 0.3)",
          dark: "rgba(0, 0, 0, 0.1)",
        },
      },
      backdropBlur: {
        xs: "2px",
        sm: "4px",
        md: "8px",
        lg: "12px",
        xl: "16px",
        "2xl": "24px",
        "3xl": "40px",
      },
      backgroundImage: {
        "gradient-glass": "linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))",
        "gradient-glass-dark": "linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02))",
      },
      boxShadow: {
        glass: "0 8px 32px 0 rgba(31, 38, 135, 0.37)",
        "glass-sm": "0 2px 16px 0 rgba(31, 38, 135, 0.2)",
        "glass-lg": "0 16px 64px 0 rgba(31, 38, 135, 0.5)",
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
        "slide-in": {
          from: { transform: "translateX(-100%)" },
          to: { transform: "translateX(0)" },
        },
        "slide-out": {
          from: { transform: "translateX(0)" },
          to: { transform: "translateX(-100%)" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "slide-in": "slide-in 0.3s ease-out",
        "slide-out": "slide-out 0.3s ease-out",
      },
      spacing: {
        "safe-top": "env(safe-area-inset-top)",
        "safe-bottom": "env(safe-area-inset-bottom)",
        "safe-left": "env(safe-area-inset-left)",
        "safe-right": "env(safe-area-inset-right)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
[V0_FILE]typescriptreact:file="app/settings/page.tsx" isMoved="true" isMovedFrom="app/profile/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Settings, Database, Shield, Bell, HelpCircle } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export default function SettingsPage() {
  const [notifications, setNotifications] = useState(true)
  const [dataSync, setDataSync] = useState(true)
  const [autoAnalysis, setAutoAnalysis] = useState(false)

return (
    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white pb-16">
      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
        <div className="flex justify-between items-center p-4">
          <h1 className="text-xl font-semibold text-blue-600">系统设置</h1>
        </div>
      </header>

<div className="p-4 space-y-6">
        {/* 用户信息卡片 */}
        <Card className="p-6">
          <div className="flex items-center space-x-4">
            <Avatar className="w-20 h-20">
              <AvatarImage src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?w=400&h=400&auto=format&fit=crop" />
              <AvatarFallback>管理员</AvatarFallback>
            </Avatar>
            <div className="flex-1">
              <h2 className="text-xl font-semibold text-blue-600">系统管理员</h2>
              <p className="text-gray-500">用户数字资产中台</p>
            </div>
          </div>
        </Card>

{/* 系统设置 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Settings className="w-5 h-5 mr-2" />
              系统设置
            </CardTitle>
            <CardDescription>配置系统运行参数</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="notifications">消息通知</Label>
                <p className="text-sm text-gray-500">接收系统通知和提醒</p>
              </div>
              <Switch id="notifications" checked={notifications} onCheckedChange={setNotifications} />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="dataSync">数据同步</Label>
                <p className="text-sm text-gray-500">自动同步用户数据</p>
              </div>
              <Switch id="dataSync" checked={dataSync} onCheckedChange={setDataSync} />
            </div>

<div className="flex items-center justify-between">
              <div className="space-y-0.5">
                <Label htmlFor="autoAnalysis">自动分析</Label>
                <p className="text-sm text-gray-500">启用AI自动分析功能</p>
              </div>
              <Switch id="autoAnalysis" checked={autoAnalysis} onCheckedChange={setAutoAnalysis} />
            </div>
          </CardContent>
        </Card>

{/* 数据管理 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <Database className="w-5 h-5 mr-2" />
              数据管理
            </CardTitle>
            <CardDescription>管理系统数据和存储</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <Button variant="outline" className="w-full justify-start bg-transparent">
              <Database className="w-4 h-4 mr-2" />
              数据备份
            </Button>
            <Button variant="outline" className="w-full justify-start bg-transparent">
              <Shield className="w-4 h-4 mr-2" />
              数据清理
            </Button>
          </CardContent>
        </Card>

{/* 帮助与支持 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center">
              <HelpCircle className="w-5 h-5 mr-2" />
              帮助与支持
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            <Button variant="outline" className="w-full justify-start bg-transparent">
              <HelpCircle className="w-4 h-4 mr-2" />
              使用帮助
            </Button>
            <Button variant="outline" className="w-full justify-start bg-transparent">
              <Bell className="w-4 h-4 mr-2" />
              系统状态
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/user-value/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Input } from "@/components/ui/input"
import {
  ArrowUpRight,
  Download,
  Filter,
  RefreshCw,
  Target,
  TrendingUp,
  Users,
  Layers,
  Tag,
  BarChart3,
  Search,
  HelpCircle,
  ChevronRight,
  ChevronDown,
} from "lucide-react"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"

// 使用通用公司名称和当天时间线的用户数据
const mockUsers = [
  {
    id: "1",
    name: "张明华",
    company: "科技创新有限公司",
    recency: 1,
    frequency: 28,
    monetary: 45600,
    rfmScore: 95,
    level: "高价值",
    growth: "+8.5%",
    upgradeFromDays: 45,
    nextUpgrade: "VIP客户",
    upgradeProbability: 85,
    lastActive: "今天 14:30",
  },
  {
    id: "2",
    name: "李雨婷",
    company: "数字营销公司",
    recency: 3,
    frequency: 22,
    monetary: 32800,
    rfmScore: 88,
    level: "高价值",
    growth: "+6.2%",
    upgradeFromDays: 28,
    nextUpgrade: "白金会员",
    upgradeProbability: 78,
    lastActive: "今天 13:45",
  },
  {
    id: "3",
    name: "王建国",
    company: "软件开发工作室",
    recency: 2,
    frequency: 25,
    monetary: 38900,
    rfmScore: 91,
    level: "高价值",
    growth: "+7.8%",
    upgradeFromDays: 38,
    nextUpgrade: "企业VIP",
    upgradeProbability: 82,
    lastActive: "今天 12:20",
  },
  {
    id: "4",
    name: "刘思琪",
    company: "数据分析咨询",
    recency: 7,
    frequency: 18,
    monetary: 25400,
    rfmScore: 76,
    level: "中高价值",
    growth: "+4.1%",
    upgradeFromDays: 12,
    nextUpgrade: "高价值用户",
    upgradeProbability: 68,
    lastActive: "今天 11:15",
  },
  {
    id: "5",
    name: "陈浩然",
    company: "云计算服务商",
    recency: 4,
    frequency: 20,
    monetary: 28700,
    rfmScore: 82,
    level: "中高价值",
    growth: "+5.3%",
    upgradeFromDays: 22,
    nextUpgrade: "高价值用户",
    upgradeProbability: 72,
    lastActive: "今天 10:30",
  },
  {
    id: "6",
    name: "周欣妍",
    company: "用户体验设计",
    recency: 12,
    frequency: 15,
    monetary: 18600,
    rfmScore: 65,
    level: "中等价值",
    growth: "+3.2%",
    upgradeFromDays: 8,
    nextUpgrade: "中高价值用户",
    upgradeProbability: 55,
    lastActive: "今天 09:45",
  },
  {
    id: "7",
    name: "马志强",
    company: "企业解决方案",
    recency: 6,
    frequency: 16,
    monetary: 22100,
    rfmScore: 71,
    level: "中等价值",
    growth: "+4.8%",
    upgradeFromDays: 15,
    nextUpgrade: "中高价值用户",
    upgradeProbability: 61,
    lastActive: "今天 08:20",
  },
  {
    id: "8",
    name: "赵丽娟",
    company: "品牌营销策划",
    recency: 15,
    frequency: 12,
    monetary: 15800,
    rfmScore: 58,
    level: "中等价值",
    growth: "+2.1%",
    upgradeFromDays: 5,
    nextUpgrade: "中高价值用户",
    upgradeProbability: 45,
    lastActive: "今天 07:30",
  },
]

export default function UserValuePage() {
  const [timeRange, setTimeRange] = useState("30days")
  const [searchQuery, setSearchQuery] = useState("")
  const [showModelDialog, setShowModelDialog] = useState(false)
  const [showUpgradeDialog, setShowUpgradeDialog] = useState(false)
  const [expandedSections, setExpandedSections] = useState({
    overview: true,
    model: false,
    analysis: true,
    upgradePaths: false,
  })

const filteredUsers = mockUsers.filter(
    (user) =>
      user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.company.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const getRFMLevelColor = (level: string) => {
    switch (level) {
      case "高价值":
        return "bg-green-100 text-green-800"
      case "中高价值":
        return "bg-blue-100 text-blue-800"
      case "中等价值":
        return "bg-yellow-100 text-yellow-800"
      case "低价值":
        return "bg-gray-100 text-gray-800"
      case "流失风险":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const toggleSection = (section: string) => {
    setExpandedSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

return (
    <div className="container mx-auto p-4 space-y-4 md:space-y-6">
      {/* 页面标题和工具栏 */}
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold">价值评估</h1>
          <p className="text-sm md:text-base text-muted-foreground mt-1">用户价值分析与升级路径</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-[120px] md:w-[140px] text-sm">
              <SelectValue placeholder="时间范围" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="7days">近7天</SelectItem>
              <SelectItem value="30days">近30天</SelectItem>
              <SelectItem value="90days">近90天</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
            <Filter className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
            <RefreshCw className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="sm" className="hidden md:flex bg-transparent">
            <Download className="mr-2 h-4 w-4" />
            导出
          </Button>
        </div>
      </div>

{/* 用户估值概览 */}
      <Collapsible
        open={expandedSections.overview}
        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, overview: open }))}
      >
        <Card className="border-none shadow-md">
          <CollapsibleTrigger className="w-full">
            <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b hover:from-green-100 hover:to-emerald-100 transition-colors cursor-pointer py-3 md:py-4">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <Target className="h-4 w-4 md:h-5 md:w-5 text-green-600" />
                  <div className="text-left">
                    <CardTitle className="text-base md:text-lg">价值概览</CardTitle>
                    <CardDescription className="text-xs md:text-sm">用户价值评估整体情况</CardDescription>
                  </div>
                </div>
                {expandedSections.overview ? (
                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                ) : (
                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                )}
              </div>
            </CardHeader>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <CardContent className="p-4">
              <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
                <Card className="bg-gradient-to-br from-green-50 to-emerald-50 border-none shadow-sm">
                  <CardContent className="p-3 md:p-4">
                    <div className="flex justify-between items-start">
                      <div>
                        <div className="text-xs md:text-sm font-medium text-green-600">平均估值</div>
                        <div className="text-lg md:text-2xl font-bold mt-1 md:mt-2">¥3,248</div>
                        <div className="text-xs text-green-600 mt-1 flex items-center">
                          <ArrowUpRight className="h-3 w-3 md:h-4 md:w-4 mr-1" />
                          +8.2%
                        </div>
                      </div>
                      <div className="bg-green-100 p-1.5 md:p-2 rounded-full">
                        <Target className="h-3 w-3 md:h-5 md:w-5 text-green-600" />
                      </div>
                    </div>
                    <div className="mt-2 md:mt-3">
                      <div className="flex justify-between text-xs mb-1">
                        <span>目标</span>
                        <span>94%</span>
                      </div>
                      <Progress value={94} className="h-1 md:h-1.5 bg-green-100" />
                    </div>
                  </CardContent>
                </Card>

<Card className="bg-gradient-to-br from-purple-50 to-pink-50 border-none shadow-sm">
                  <CardContent className="p-3 md:p-4">
                    <div className="flex justify-between items-start">
                      <div>
                        <div className="text-xs md:text-sm font-medium text-purple-600">高价值用户</div>
                        <div className="text-lg md:text-2xl font-bold mt-1 md:mt-2">45,678</div>
                        <div className="text-xs text-green-600 mt-1 flex items-center">
                          <ArrowUpRight className="h-3 w-3 md:h-4 md:w-4 mr-1" />
                          +12.3%
                        </div>
                      </div>
                      <div className="bg-purple-100 p-1.5 md:p-2 rounded-full">
                        <TrendingUp className="h-3 w-3 md:h-5 md:w-5 text-purple-600" />
                      </div>
                    </div>
                    <div className="mt-2 md:mt-3">
                      <div className="flex justify-between text-xs mb-1">
                        <span>占比</span>
                        <span>28.6%</span>
                      </div>
                      <Progress value={28.6} className="h-1 md:h-1.5 bg-purple-100" />
                    </div>
                  </CardContent>
                </Card>

<Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-none shadow-sm">
                  <CardContent className="p-3 md:p-4">
                    <div className="flex justify-between items-start">
                      <div>
                        <div className="text-xs md:text-sm font-medium text-blue-600">价值增长率</div>
                        <div className="text-lg md:text-2xl font-bold mt-1 md:mt-2">15.8%</div>
                        <div className="text-xs text-green-600 mt-1 flex items-center">
                          <ArrowUpRight className="h-3 w-3 md:h-4 md:w-4 mr-1" />
                          +2.1%
                        </div>
                      </div>
                      <div className="bg-blue-100 p-1.5 md:p-2 rounded-full">
                        <BarChart3 className="h-3 w-3 md:h-5 md:w-5 text-blue-600" />
                      </div>
                    </div>
                    <div className="mt-2 md:mt-3">
                      <div className="flex justify-between text-xs mb-1">
                        <span>行业平均</span>
                        <span>11.2%</span>
                      </div>
                      <Progress value={141} className="h-1 md:h-1.5 bg-blue-100" />
                    </div>
                  </CardContent>
                </Card>

{/* RFM估值模型 */}
      <Collapsible
        open={expandedSections.model}
        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, model: open }))}
      >
        <Card className="border-none shadow-md">
          <CollapsibleTrigger className="w-full">
            <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b hover:from-blue-100 hover:to-indigo-100 transition-colors cursor-pointer py-3 md:py-4">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <BarChart3 className="h-4 w-4 md:h-5 md:w-5 text-blue-600" />
                  <div className="text-left">
                    <CardTitle className="flex items-center gap-2 text-base md:text-lg">
                      RFM估值模型
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={(e) => {
                          e.stopPropagation()
                          setShowModelDialog(true)
                        }}
                        className="h-5 w-5 md:h-6 md:w-6 p-0"
                      >
                        <HelpCircle className="h-3 w-3 md:h-4 md:w-4" />
                      </Button>
                    </CardTitle>
                    <CardDescription className="text-xs md:text-sm">基于用户行为的价值评估</CardDescription>
                  </div>
                </div>
                {expandedSections.model ? (
                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                ) : (
                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                )}
              </div>
            </CardHeader>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <CardContent className="p-4">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
                <div className="space-y-2">
                  <h3 className="font-semibold flex items-center text-sm md:text-base">
                    <span className="bg-red-100 text-red-800 w-5 h-5 md:w-6 md:h-6 rounded-full flex items-center justify-center mr-2 text-xs md:text-sm">
                      R
                    </span>
                    最近消费时间
                  </h3>
                  <p className="text-xs md:text-sm text-muted-foreground">时间间隔越短价值越高</p>
                  <div className="bg-gray-50 p-2 md:p-3 rounded-md">
                    <div className="text-xs md:text-sm space-y-1">
                      <div className="flex justify-between">
                        <span>1-3天</span>
                        <span className="font-medium">5分</span>
                      </div>
                      <div className="flex justify-between">
                        <span>4-7天</span>
                        <span className="font-medium">4分</span>
                      </div>
                      <div className="flex justify-between">
                        <span>8-14天</span>
                        <span className="font-medium">3分</span>
                      </div>
                      <div className="flex justify-between">
                        <span>15-30天</span>
                        <span className="font-medium">2分</span>
                      </div>
                      <div className="flex justify-between">
                        <span>30天以上</span>
                        <span className="font-medium">1分</span>
                      </div>
                    </div>
                  </div>
                </div>

<div className="space-y-2">
                  <h3 className="font-semibold flex items-center text-sm md:text-base">
                    <span className="bg-green-100 text-green-800 w-5 h-5 md:w-6 md:h-6 rounded-full flex items-center justify-center mr-2 text-xs md:text-sm">
                      F
                    </span>
                    消费频率
                  </h3>
                  <p className="text-xs md:text-sm text-muted-foreground">频率越高价值越高</p>
                  <div className="bg-gray-50 p-2 md:p-3 rounded-md">
                    <div className="text-xs md:text-sm space-y-1">
                      <div className="flex justify-between">
                        <span>25次以上/月</span>
                        <span className="font-medium">5分</span>
                      </div>
                      <div className="flex justify-between">
                        <span>20-24次/月</span>
                        <span className="font-medium">4分</span>
                      </div>
                      <div className="flex justify-between">
                        <span>15-19次/月</span>
                        <span className="font-medium">3分</span>
                      </div>
                      <div className="flex justify-between">
                        <span>10-14次/月</span>
                        <span className="font-medium">2分</span>
                      </div>
                      <div className="flex justify-between">
                        <span>1-9次/月</span>
                        <span className="font-medium">1分</span>
                      </div>
                    </div>
                  </div>
                </div>

<div className="space-y-2">
                  <h3 className="font-semibold flex items-center text-sm md:text-base">
                    <span className="bg-blue-100 text-blue-800 w-5 h-5 md:w-6 md:h-6 rounded-full flex items-center justify-center mr-2 text-xs md:text-sm">
                      M
                    </span>
                    消费金额
                  </h3>
                  <p className="text-xs md:text-sm text-muted-foreground">金额越高价值越高</p>
                  <div className="bg-gray-50 p-2 md:p-3 rounded-md">
                    <div className="text-xs md:text-sm space-y-1">
                      <div className="flex justify-between">
                        <span>30000元以上</span>
                        <span className="font-medium">5分</span>
                      </div>
                      <div className="flex justify-between">
                        <span>20000-29999元</span>
                        <span className="font-medium">4分</span>
                      </div>
                      <div className="flex justify-between">
                        <span>10000-19999元</span>
                        <span className="font-medium">3分</span>
                      </div>
                      <div className="flex justify-between">
                        <span>5000-9999元</span>
                        <span className="font-medium">2分</span>
                      </div>
                      <div className="flex justify-between">
                        <span>5000元以下</span>
                        <span className="font-medium">1分</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

<div className="mt-4 md:mt-6">
                <h3 className="font-semibold mb-3 text-sm md:text-base">RFM评分等级</h3>
                <div className="grid grid-cols-2 md:grid-cols-5 gap-2 md:gap-3">
                  <div className="bg-green-100 p-2 md:p-3 rounded-md text-center">
                    <p className="font-medium text-green-800 text-xs md:text-sm">高价值用户</p>
                    <p className="text-xs text-green-700">85-100分</p>
                  </div>
                  <div className="bg-blue-100 p-2 md:p-3 rounded-md text-center">
                    <p className="font-medium text-blue-800 text-xs md:text-sm">中高价值用户</p>
                    <p className="text-xs text-blue-700">70-84分</p>
                  </div>
                  <div className="bg-yellow-100 p-2 md:p-3 rounded-md text-center">
                    <p className="font-medium text-yellow-800 text-xs md:text-sm">中等价值用户</p>
                    <p className="text-xs text-yellow-700">55-69分</p>
                  </div>
                  <div className="bg-gray-100 p-2 md:p-3 rounded-md text-center">
                    <p className="font-medium text-gray-800 text-xs md:text-sm">低价值用户</p>
                    <p className="text-xs text-gray-700">40-54分</p>
                  </div>
                  <div className="bg-red-100 p-2 md:p-3 rounded-md text-center">
                    <p className="font-medium text-red-800 text-xs md:text-sm">流失风险用户</p>
                    <p className="text-xs text-red-700">0-39分</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </CollapsibleContent>
        </Card>
      </Collapsible>

{/* 用户价值分析 */}
      <Collapsible
        open={expandedSections.analysis}
        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, analysis: open }))}
      >
        <Card className="border-none shadow-md">
          <CollapsibleTrigger className="w-full">
            <CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 border-b hover:from-purple-100 hover:to-pink-100 transition-colors cursor-pointer py-3 md:py-4">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <Users className="h-4 w-4 md:h-5 md:w-5 text-purple-600" />
                  <div className="text-left">
                    <CardTitle className="text-base md:text-lg">价值分析</CardTitle>
                    <CardDescription className="text-xs md:text-sm">
                      用户价值详细数据 ({filteredUsers.length})
                    </CardDescription>
                  </div>
                </div>
                {expandedSections.analysis ? (
                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                ) : (
                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                )}
              </div>
            </CardHeader>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <CardContent className="p-4">
              <div className="mb-4">
                <div className="relative w-full md:w-64">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    type="search"
                    placeholder="搜索用户或公司..."
                    className="pl-8 text-sm"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                  />
                </div>
              </div>

{/* 移动端卡片布局 */}
              <div className="space-y-3 md:hidden">
                {filteredUsers.map((user) => (
                  <div key={user.id} className="bg-white border rounded-lg p-3 space-y-2">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium text-sm">{user.name}</p>
                        <p className="text-xs text-gray-500">{user.company}</p>
                      </div>
                      <Badge className={`${getRFMLevelColor(user.level)} text-xs`}>{user.rfmScore}</Badge>
                    </div>
                    <div className="grid grid-cols-3 gap-2 text-xs">
                      <div className="text-center">
                        <p className="text-gray-500">R值</p>
                        <p className="font-medium">{user.recency}天</p>
                      </div>
                      <div className="text-center">
                        <p className="text-gray-500">F值</p>
                        <p className="font-medium">{user.frequency}次</p>
                      </div>
                      <div className="text-center">
                        <p className="text-gray-500">M值</p>
                        <p className="font-medium">¥{(user.monetary / 1000).toFixed(0)}K</p>
                      </div>
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-xs text-gray-500">{user.lastActive}</span>
                      <span className="text-xs text-green-600">{user.growth}</span>
                    </div>
                  </div>
                ))}
              </div>

{/* 桌面端表格布局 */}
              <div className="hidden md:block rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>用户</TableHead>
                      <TableHead>公司</TableHead>
                      <TableHead className="text-center">RFM评分</TableHead>
                      <TableHead className="text-center">R值</TableHead>
                      <TableHead className="text-center">F值</TableHead>
                      <TableHead className="text-center">M值</TableHead>
                      <TableHead className="text-right">增长率</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredUsers.map((user) => (
                      <TableRow key={user.id} className="hover:bg-gray-50">
                        <TableCell className="font-medium">{user.name}</TableCell>
                        <TableCell>{user.company}</TableCell>
                        <TableCell className="text-center">
                          <Badge className={`${getRFMLevelColor(user.level)}`}>
                            {user.rfmScore} ({user.level})
                          </Badge>
                        </TableCell>
                        <TableCell className="text-center">{user.recency}天</TableCell>
                        <TableCell className="text-center">{user.frequency}次/月</TableCell>
                        <TableCell className="text-center">¥{user.monetary.toLocaleString()}</TableCell>
                        <TableCell className="text-right text-green-600">{user.growth}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </CollapsibleContent>
        </Card>
      </Collapsible>

{/* 用户升级路径分析 */}
      <Collapsible
        open={expandedSections.upgradePaths}
        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, upgradePaths: open }))}
      >
        <Card className="border-none shadow-md">
          <CollapsibleTrigger className="w-full">
            <CardHeader className="bg-gradient-to-r from-orange-50 to-red-50 border-b hover:from-orange-100 hover:to-red-100 transition-colors cursor-pointer py-3 md:py-4">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <TrendingUp className="h-4 w-4 md:h-5 md:w-5 text-orange-600" />
                  <div className="text-left">
                    <CardTitle className="flex items-center gap-2 text-base md:text-lg">
                      升级路径分析
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={(e) => {
                          e.stopPropagation()
                          setShowUpgradeDialog(true)
                        }}
                        className="h-5 w-5 md:h-6 md:w-6 p-0"
                      >
                        <HelpCircle className="h-3 w-3 md:h-4 md:w-4" />
                      </Button>
                    </CardTitle>
                    <CardDescription className="text-xs md:text-sm">用户价值提升路径与策略</CardDescription>
                  </div>
                </div>
                {expandedSections.upgradePaths ? (
                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                ) : (
                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                )}
              </div>
            </CardHeader>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <CardContent className="p-4">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-4 mb-4 md:mb-6">
                <Card className="bg-white shadow-sm">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm md:text-lg flex items-center">
                      <Target className="h-4 w-4 md:h-5 md:w-5 mr-2 text-green-600" />
                      升级潜力
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="text-xs md:text-sm">
                    <div className="space-y-1 md:space-y-2">
                      <div className="flex justify-between items-center">
                        <span>高潜力用户</span>
                        <span className="font-medium">2,345</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span>中潜力用户</span>
                        <span className="font-medium">5,678</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span>低潜力用户</span>
                        <span className="font-medium">1,234</span>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card className="bg-white shadow-sm">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm md:text-lg flex items-center">
                      <Layers className="h-4 w-4 md:h-5 md:w-5 mr-2 text-blue-600" />
                      升级成功率
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="text-xs md:text-sm">
                    <div className="space-y-1 md:space-y-2">
                      <div className="flex justify-between items-center">
                        <span>本月升级率</span>
                        <span className="font-medium">12.5%</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span>平均升级周期</span>
                        <span className="font-medium">28天</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span>预期升级用户</span>
                        <span className="font-medium">1,856</span>
                      </div>
                    </div>
                  </CardContent>
                </Card>

<Card className="bg-white shadow-sm">
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm md:text-lg flex items-center">
                      <Tag className="h-4 w-4 md:h-5 md:w-5 mr-2 text-purple-600" />
                      价值贡献
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="text-xs md:text-sm">
                    <div className="space-y-1 md:space-y-2">
                      <div className="flex justify-between items-center">
                        <span>升级价值增长</span>
                        <span className="font-medium">¥2.3M</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span>平均价值提升</span>
                        <span className="font-medium">¥1,245</span>
                      </div>
                      <div className="flex justify-between items-center">
                        <span>ROI提升</span>
                        <span className="font-medium">35.8%</span>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

<div className="space-y-3 md:space-y-4">
                <h3 className="text-sm md:text-lg font-medium">个人升级路径推荐</h3>
                <div className="space-y-2 md:space-y-3">
                  {filteredUsers.slice(0, 5).map((user) => (
                    <div
                      key={user.id}
                      className="flex flex-col md:flex-row md:items-center justify-between p-3 md:p-4 border rounded-lg hover:bg-gray-50 space-y-2 md:space-y-0"
                    >
                      <div className="flex items-center gap-3 md:gap-4">
                        <div>
                          <p className="font-medium text-sm md:text-base">{user.name}</p>
                          <p className="text-xs md:text-sm text-gray-500">{user.company}</p>
                        </div>
                        <Badge className={`${getRFMLevelColor(user.level)} text-xs`}>{user.level}</Badge>
                      </div>
                      <div className="flex flex-col md:flex-row items-start md:items-center gap-2 md:gap-4">
                        <div className="text-left md:text-right">
                          <p className="text-xs md:text-sm font-medium">下一级别: {user.nextUpgrade}</p>
                          <p className="text-xs text-gray-500">升级概率: {user.upgradeProbability}%</p>
                        </div>
                        <div className="w-full md:w-24">
                          <Progress value={user.upgradeProbability} className="h-1.5 md:h-2" />
                        </div>
                        <Button variant="outline" size="sm" className="text-xs bg-transparent">
                          查看策略
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </CardContent>
          </CollapsibleContent>
        </Card>
      </Collapsible>

{/* RFM模型说明对话框 */}
      <Dialog open={showModelDialog} onOpenChange={setShowModelDialog}>
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>RFM模型说明</DialogTitle>
            <DialogDescription>RFM模型是一种用于客户价值评估的经典方法</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="p-4 bg-blue-50 rounded-lg">
              <h4 className="font-medium mb-2">什么是RFM模型？</h4>
              <p className="text-sm text-gray-600">
                RFM模型是一种用于分析客户价值和客户创利能力的重要工具，通过分析客户的Recency（最近一次购买时间）、Frequency（购买频率）和Monetary（购买金额）三个维度来评估客户价值。
              </p>
            </div>
            <div className="p-4 bg-green-50 rounded-lg">
              <h4 className="font-medium mb-2">如何使用RFM评分？</h4>
              <p className="text-sm text-gray-600">
                每个维度按1-5分评分，总分15分。我们将总分转换为0-100的百分制，便于理解和比较。高分用户是我们的核心客户，需要重点维护和深度挖掘。
              </p>
            </div>
          </div>
        </DialogContent>
      </Dialog>

{/* 升级路径说明对话框 */}
      <Dialog open={showUpgradeDialog} onOpenChange={setShowUpgradeDialog}>
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>用户升级路径分析</DialogTitle>
            <DialogDescription>基于用户行为数据预测用户价值提升路径</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="p-4 bg-purple-50 rounded-lg">
              <h4 className="font-medium mb-2">升级路径是什么？</h4>
              <p className="text-sm text-gray-600">
                升级路径是基于用户当前的RFM评分、行为模式和历史数据，预测用户可能的价值提升方向和概率。帮助制定个性化的用户运营策略。
              </p>
            </div>
            <div className="p-4 bg-orange-50 rounded-lg">
              <h4 className="font-medium mb-2">如何制定升级策略？</h4>
              <p className="text-sm text-gray-600">
                系统会根据用户的弱势维度（R、F、M中得分较低的）推荐相应的运营策略，如优惠券刺激消费频率、个性化推荐提升客单价等。
              </p>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescript:file="dependencies.ts" isEdit="true" isMerged="true"
// 强制安装缺失的依赖包
import "cmdk"
import "@radix-ui/react-separator"
[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/user-discovery/page.tsx" isMerged="true"
"use client"

export default function UserDiscoveryPage() {
  const [timeRange, setTimeRange] = useState("today")
  const [searchQuery, setSearchQuery] = useState("")
  const [expandedSections, setExpandedSections] = useState({
    overview: true,
    behavior: true,
    segmentation: false,
    engagement: false,
  })

// 用户发现数据
  const discoveryData = {
    overview: {
      totalUsers: 125678,
      activeUsers: 45678,
      newUsers: 1234,
      engagement: 87.5,
      growth: "+12.3%",
    },
    behaviorPatterns: [
      {
        pattern: "购买决策路径",
        users: 12456,
        avgTime: "3.2天",
        conversion: "23.5%",
        trend: "+8.2%",
      },
      {
        pattern: "内容浏览偏好",
        users: 8765,
        avgTime: "15分钟",
        conversion: "45.8%",
        trend: "+12.1%",
      },
      {
        pattern: "社交分享行为",
        users: 6543,
        avgTime: "2.1分钟",
        conversion: "67.3%",
        trend: "+5.7%",
      },
      {
        pattern: "移动端使用习惯",
        users: 9876,
        avgTime: "8.5分钟",
        conversion: "34.2%",
        trend: "+15.4%",
      },
    ],
    userSegments: [
      {
        name: "高价值活跃用户",
        count: 12456,
        percentage: 28.6,
        characteristics: ["高频使用", "高消费", "高推荐"],
        color: "bg-green-100 text-green-800",
      },
      {
        name: "潜力增长用户",
        count: 18765,
        percentage: 43.2,
        characteristics: ["中频使用", "增长潜力", "易转化"],
        color: "bg-blue-100 text-blue-800",
      },
      {
        name: "新注册用户",
        count: 8234,
        percentage: 18.9,
        characteristics: ["新用户", "探索期", "需引导"],
        color: "bg-purple-100 text-purple-800",
      },
      {
        name: "流失风险用户",
        count: 4123,
        percentage: 9.3,
        characteristics: ["低活跃", "流失风险", "需挽回"],
        color: "bg-red-100 text-red-800",
      },
    ],
    engagementMetrics: {
      dailyActive: 45678,
      weeklyActive: 89234,
      monthlyActive: 125678,
      avgSessionTime: "12.5分钟",
      bounceRate: "23.4%",
      returnRate: "67.8%",
    },
  }

const toggleSection = (section: string) => {
    setExpandedSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

return (
    <div className="container mx-auto py-4 md:py-6 space-y-4 md:space-y-6">
      {/* 页面标题和工具栏 */}
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold">用户发现</h1>
          <p className="text-sm md:text-base text-muted-foreground mt-1">用户行为洞察与分析</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-[120px] text-sm">
              <SelectValue placeholder="时间范围" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="today">今日</SelectItem>
              <SelectItem value="week">本周</SelectItem>
              <SelectItem value="month">本月</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
            <Filter className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
            <RefreshCw className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="sm" className="hidden md:flex bg-transparent">
            <Download className="mr-2 h-4 w-4" />
            导出
          </Button>
        </div>
      </div>

{/* 用户发现概览 */}
      <Collapsible
        open={expandedSections.overview}
        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, overview: open }))}
      >
        <Card className="border-none shadow-md">
          <CollapsibleTrigger className="w-full">
            <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b hover:from-green-100 hover:to-emerald-100 transition-colors cursor-pointer py-3 md:py-4">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <Search className="h-4 w-4 md:h-5 md:w-5 text-green-600" />
                  <div className="text-left">
                    <CardTitle className="text-base md:text-lg">发现概览</CardTitle>
                    <CardDescription className="text-xs md:text-sm">用户行为整体洞察</CardDescription>
                  </div>
                </div>
                {expandedSections.overview ? (
                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                ) : (
                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                )}
              </div>
            </CardHeader>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <CardContent className="p-4">
              <div className="grid grid-cols-2 md:grid-cols-5 gap-3 md:gap-4">
                <div className="bg-blue-50 p-3 rounded-lg text-center">
                  <div className="text-lg md:text-2xl font-bold text-blue-600">
                    {discoveryData.overview.totalUsers.toLocaleString()}
                  </div>
                  <div className="text-xs text-blue-700">总用户数</div>
                </div>
                <div className="bg-green-50 p-3 rounded-lg text-center">
                  <div className="text-lg md:text-2xl font-bold text-green-600">
                    {discoveryData.overview.activeUsers.toLocaleString()}
                  </div>
                  <div className="text-xs text-green-700">活跃用户</div>
                </div>
                <div className="bg-purple-50 p-3 rounded-lg text-center">
                  <div className="text-lg md:text-2xl font-bold text-purple-600">
                    {discoveryData.overview.newUsers.toLocaleString()}
                  </div>
                  <div className="text-xs text-purple-700">新增用户</div>
                </div>
                <div className="bg-orange-50 p-3 rounded-lg text-center">
                  <div className="text-lg md:text-2xl font-bold text-orange-600">
                    {discoveryData.overview.engagement}%
                  </div>
                  <div className="text-xs text-orange-700">参与度</div>
                </div>
                <div className="bg-pink-50 p-3 rounded-lg text-center">
                  <div className="text-lg md:text-2xl font-bold text-pink-600">{discoveryData.overview.growth}</div>
                  <div className="text-xs text-pink-700">增长率</div>
                </div>
              </div>
            </CardContent>
          </CollapsibleContent>
        </Card>
      </Collapsible>

{/* 行为模式分析 */}
      <Collapsible
        open={expandedSections.behavior}
        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, behavior: open }))}
      >
        <Card className="border-none shadow-md">
          <CollapsibleTrigger className="w-full">
            <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b hover:from-blue-100 hover:to-indigo-100 transition-colors cursor-pointer py-3 md:py-4">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <BarChart3 className="h-4 w-4 md:h-5 md:w-5 text-blue-600" />
                  <div className="text-left">
                    <CardTitle className="text-base md:text-lg">行为模式分析</CardTitle>
                    <CardDescription className="text-xs md:text-sm">用户行为模式识别</CardDescription>
                  </div>
                </div>
                {expandedSections.behavior ? (
                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                ) : (
                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                )}
              </div>
            </CardHeader>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <CardContent className="p-4">
              <div className="space-y-3">
                {discoveryData.behaviorPatterns.map((pattern, index) => (
                  <div key={index} className="bg-white border rounded-lg p-3 md:p-4">
                    <div className="flex flex-col md:flex-row md:items-center justify-between gap-2">
                      <div className="flex-1">
                        <h3 className="font-medium text-sm md:text-base">{pattern.pattern}</h3>
                        <p className="text-xs text-gray-500">{pattern.users.toLocaleString()} 用户参与</p>
                      </div>
                      <div className="grid grid-cols-3 gap-3 md:gap-4 text-center">
                        <div>
                          <div className="text-sm font-bold">{pattern.avgTime}</div>
                          <div className="text-xs text-gray-500">平均时长</div>
                        </div>
                        <div>
                          <div className="text-sm font-bold">{pattern.conversion}</div>
                          <div className="text-xs text-gray-500">转化率</div>
                        </div>
                        <div>
                          <div className="text-sm font-bold text-green-600">{pattern.trend}</div>
                          <div className="text-xs text-gray-500">趋势</div>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </CollapsibleContent>
        </Card>
      </Collapsible>

{/* 用户分群 */}
      <Collapsible
        open={expandedSections.segmentation}
        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, segmentation: open }))}
      >
        <Card className="border-none shadow-md">
          <CollapsibleTrigger className="w-full">
            <CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 border-b hover:from-purple-100 hover:to-pink-100 transition-colors cursor-pointer py-3 md:py-4">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <Users className="h-4 w-4 md:h-5 md:w-5 text-purple-600" />
                  <div className="text-left">
                    <CardTitle className="text-base md:text-lg">智能用户分群</CardTitle>
                    <CardDescription className="text-xs md:text-sm">基于行为的用户分类</CardDescription>
                  </div>
                </div>
                {expandedSections.segmentation ? (
                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                ) : (
                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                )}
              </div>
            </CardHeader>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <CardContent className="p-4">
              <div className="space-y-3">
                {discoveryData.userSegments.map((segment, index) => (
                  <div key={index} className="bg-white border rounded-lg p-3 md:p-4">
                    <div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <Badge className={segment.color}>{segment.name}</Badge>
                          <span className="text-sm font-bold">{segment.count.toLocaleString()}</span>
                          <span className="text-xs text-gray-500">({segment.percentage}%)</span>
                        </div>
                        <div className="flex flex-wrap gap-1">
                          {segment.characteristics.map((char, charIndex) => (
                            <Badge key={charIndex} variant="outline" className="text-xs">
                              {char}
                            </Badge>
                          ))}
                        </div>
                      </div>
                      <div className="w-full md:w-32">
                        <Progress value={segment.percentage} className="h-2" />
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </CollapsibleContent>
        </Card>
      </Collapsible>

{/* 参与度指标 */}
      <Collapsible
        open={expandedSections.engagement}
        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, engagement: open }))}
      >
        <Card className="border-none shadow-md">
          <CollapsibleTrigger className="w-full">
            <CardHeader className="bg-gradient-to-r from-orange-50 to-red-50 border-b hover:from-orange-100 hover:to-red-100 transition-colors cursor-pointer py-3 md:py-4">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <TrendingUp className="h-4 w-4 md:h-5 md:w-5 text-orange-600" />
                  <div className="text-left">
                    <CardTitle className="text-base md:text-lg">参与度指标</CardTitle>
                    <CardDescription className="text-xs md:text-sm">用户参与度深度分析</CardDescription>
                  </div>
                </div>
                {expandedSections.engagement ? (
                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                ) : (
                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                )}
              </div>
            </CardHeader>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <CardContent className="p-4">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div className="bg-blue-50 p-4 rounded-lg">
                  <div className="flex items-center gap-2 mb-2">
                    <Clock className="h-4 w-4 text-blue-600" />
                    <span className="text-sm font-medium">活跃度指标</span>
                  </div>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-xs text-gray-600">日活跃</span>
                      <span className="text-sm font-bold">
                        {discoveryData.engagementMetrics.dailyActive.toLocaleString()}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-xs text-gray-600">周活跃</span>
                      <span className="text-sm font-bold">
                        {discoveryData.engagementMetrics.weeklyActive.toLocaleString()}
                      </span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-xs text-gray-600">月活跃</span>
                      <span className="text-sm font-bold">
                        {discoveryData.engagementMetrics.monthlyActive.toLocaleString()}
                      </span>
                    </div>
                  </div>
                </div>

<div className="bg-green-50 p-4 rounded-lg">
                  <div className="flex items-center gap-2 mb-2">
                    <Eye className="h-4 w-4 text-green-600" />
                    <span className="text-sm font-medium">会话指标</span>
                  </div>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-xs text-gray-600">平均会话时长</span>
                      <span className="text-sm font-bold">{discoveryData.engagementMetrics.avgSessionTime}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-xs text-gray-600">跳出率</span>
                      <span className="text-sm font-bold">{discoveryData.engagementMetrics.bounceRate}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-xs text-gray-600">回访率</span>
                      <span className="text-sm font-bold">{discoveryData.engagementMetrics.returnRate}</span>
                    </div>
                  </div>
                </div>

<div className="bg-purple-50 p-4 rounded-lg">
                  <div className="flex items-center gap-2 mb-2">
                    <Smartphone className="h-4 w-4 text-purple-600" />
                    <span className="text-sm font-medium">设备分布</span>
                  </div>
                  <div className="space-y-2">
                    <div className="flex justify-between">
                      <span className="text-xs text-gray-600">移动端</span>
                      <span className="text-sm font-bold">68.5%</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-xs text-gray-600">桌面端</span>
                      <span className="text-sm font-bold">24.3%</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-xs text-gray-600">平板端</span>
                      <span className="text-sm font-bold">7.2%</span>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </CollapsibleContent>
        </Card>
      </Collapsible>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/user-discovery/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/user-valuation/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Input } from "@/components/ui/input"
import {
  ArrowUpRight,
  Download,
  Filter,
  RefreshCw,
  Target,
  TrendingUp,
  Users,
  Layers,
  Tag,
  BarChart3,
  Search,
  HelpCircle,
  ChevronRight,
  ChevronDown,
} from "lucide-react"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"

export default function UserValuationPage() {
  const [timeRange, setTimeRange] = useState("30days")
  const [searchQuery, setSearchQuery] = useState("")
  const [showModelDialog, setShowModelDialog] = useState(false)
  const [showUpgradeDialog, setShowUpgradeDialog] = useState(false)
  const [expandedSections, setExpandedSections] = useState({
    overview: true,
    model: false,
    analysis: true,
    upgradePaths: false,
  })

const filteredUsers = mockUsers.filter(
    (user) =>
      user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.company.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const toggleSection = (section: string) => {
    setExpandedSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

return (
    <div className="container mx-auto p-4 space-y-4 md:space-y-6">
      {/* 页面标题和工具栏 */}
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold">用户估值</h1>
          <p className="text-sm md:text-base text-muted-foreground mt-1">用户价值评估与升级路径分析</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-[120px] md:w-[140px] text-sm">
              <SelectValue placeholder="时间范围" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="7days">近7天</SelectItem>
              <SelectItem value="30days">近30天</SelectItem>
              <SelectItem value="90days">近90天</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
            <Filter className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
            <RefreshCw className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="sm" className="hidden md:flex bg-transparent">
            <Download className="mr-2 h-4 w-4" />
            导出
          </Button>
        </div>
      </div>

{/* 用户估值概览 */}
      <Collapsible
        open={expandedSections.overview}
        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, overview: open }))}
      >
        <Card className="border-none shadow-md">
          <CollapsibleTrigger className="w-full">
            <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b hover:from-green-100 hover:to-emerald-100 transition-colors cursor-pointer py-3 md:py-4">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <Target className="h-4 w-4 md:h-5 md:w-5 text-green-600" />
                  <div className="text-left">
                    <CardTitle className="text-base md:text-lg flex items-center gap-2">
                      估值概览
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={(e) => {
                          e.stopPropagation()
                          setShowModelDialog(true)
                        }}
                        className="h-5 w-5 md:h-6 md:w-6 p-0"
                      >
                        <HelpCircle className="h-3 w-3 md:h-4 md:w-4" />
                      </Button>
                    </CardTitle>
                    <CardDescription className="text-xs md:text-sm">用户价值评估整体情况</CardDescription>
                  </div>
                </div>
                {expandedSections.overview ? (
                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                ) : (
                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                )}
              </div>
            </CardHeader>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <CardContent className="p-4">
              <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
                <Card className="bg-gradient-to-br from-green-50 to-emerald-50 border-none shadow-sm">
                  <CardContent className="p-3 md:p-4">
                    <div className="flex justify-between items-start">
                      <div>
                        <div className="text-xs md:text-sm font-medium text-green-600">平均估值</div>
                        <div className="text-lg md:text-2xl font-bold mt-1 md:mt-2">¥3,248</div>
                        <div className="text-xs text-green-600 mt-1 flex items-center">
                          <ArrowUpRight className="h-3 w-3 md:h-4 md:w-4 mr-1" />
                          +8.2%
                        </div>
                      </div>
                      <div className="bg-green-100 p-1.5 md:p-2 rounded-full">
                        <Target className="h-3 w-3 md:h-5 md:w-5 text-green-600" />
                      </div>
                    </div>
                    <div className="mt-2 md:mt-3">
                      <div className="flex justify-between text-xs mb-1">
                        <span>目标</span>
                        <span>94%</span>
                      </div>
                      <Progress value={94} className="h-1 md:h-1.5 bg-green-100" />
                    </div>
                  </CardContent>
                </Card>

{/* RFM模型说明对话框 */}
      <Dialog open={showModelDialog} onOpenChange={setShowModelDialog}>
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>RFM估值模型说明</DialogTitle>
            <DialogDescription>RFM模型是一种用于客户价值评估的经典方法</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="p-4 bg-blue-50 rounded-lg">
              <h4 className="font-medium mb-2">什么是RFM模型？</h4>
              <p className="text-sm text-gray-600">
                RFM模型是一种用于分析客户价值和客户创利能力的重要工具，通过分析客户的Recency（最近一次购买时间）、Frequency（购买频率）和Monetary（购买金额）三个维度来评估客户价值。
              </p>
            </div>
            <div className="p-4 bg-green-50 rounded-lg">
              <h4 className="font-medium mb-2">如何使用RFM评分？</h4>
              <p className="text-sm text-gray-600">
                每个维度按1-5分评分，总分15分。我们将总分转换为0-100的百分制，便于理解和比较。高分用户是我们的核心客户，需要重点维护和深度挖掘。
              </p>
            </div>
            <div className="p-4 bg-purple-50 rounded-lg">
              <h4 className="font-medium mb-2">用户价值分析因素</h4>
              <p className="text-sm text-gray-600">
                除了RFM三个维度，我们还考虑用户的行为模式、参与度、推荐价值、生命周期阶段等多个因素，构建更全面的用户价值评估体系。
              </p>
            </div>
          </div>
        </DialogContent>
      </Dialog>

{/* 升级路径说明对话框 */}
      <Dialog open={showUpgradeDialog} onOpenChange={setShowUpgradeDialog}>
        <DialogContent className="sm:max-w-lg">
          <DialogHeader>
            <DialogTitle>用户升级路径分析</DialogTitle>
            <DialogDescription>基于用户行为数据预测用户价值提升路径</DialogDescription>
          </DialogHeader>
          <div className="space-y-4">
            <div className="p-4 bg-purple-50 rounded-lg">
              <h4 className="font-medium mb-2">升级路径是什么？</h4>
              <p className="text-sm text-gray-600">
                升级路径是基于用户当前的RFM评分、行为模式和历史数据，预测用户可能的价值提升方向和概率。帮助制定个性化的用户运营策略。
              </p>
            </div>
            <div className="p-4 bg-orange-50 rounded-lg">
              <h4 className="font-medium mb-2">如何制定升级策略？</h4>
              <p className="text-sm text-gray-600">
                系统会根据用户的弱势维度（R、F、M中得分较低的）推荐相应的运营策略，如优惠券刺激消费频率、个性化推荐提升客单价等。
              </p>
            </div>
            <div className="p-4 bg-green-50 rounded-lg">
              <h4 className="font-medium mb-2">用户丰富策略</h4>
              <p className="text-sm text-gray-600">
                通过个性化推荐、定向促销、会员权益、社交互动等多种方式，提升用户参与度和忠诚度，实现用户价值的持续增长。
              </p>
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/user-valuation/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/ai-analysis/page.tsx" isMerged="true"
"use client"

export default function AIAnalysisPage() {
  const [timeRange, setTimeRange] = useState("today")
  const [expandedSections, setExpandedSections] = useState({
    overview: true,
    trends: true,
    anomaly: false,
    predictions: false,
  })

// AI分析数据
  const aiData = {
    overview: {
      totalInsights: 156,
      trendsIdentified: 23,
      anomaliesDetected: 3,
      predictionsGenerated: 89,
      accuracy: 94.2,
      modelPerformance: 97.8,
    },
    trendAnalysis: [
      {
        trend: "用户活跃度上升趋势",
        confidence: 95.8,
        impact: "高",
        timeframe: "未来7天",
        description: "基于用户行为模式分析，预测用户活跃度将持续上升",
        recommendation: "增加内容推送频率，优化用户体验",
      },
      {
        trend: "移动端使用增长",
        confidence: 89.2,
        impact: "中高",
        timeframe: "未来14天",
        description: "移动端用户访问量呈现明显增长趋势",
        recommendation: "优化移动端界面，提升响应速度",
      },
      {
        trend: "高价值用户转化提升",
        confidence: 92.5,
        impact: "高",
        timeframe: "未来30天",
        description: "高价值用户转化率预计将显著提升",
        recommendation: "制定针对性营销策略，加强用户维护",
      },
    ],
    anomalyDetection: [
      {
        type: "流量异常",
        severity: "中等",
        detected: "今天 13:45",
        description: "检测到异常流量峰值，比平时高出45%",
        status: "已处理",
        action: "已启动自动扩容机制",
      },
      {
        type: "用户行为异常",
        severity: "低",
        detected: "今天 11:20",
        description: "部分用户群体行为模式发生变化",
        status: "监控中",
        action: "持续观察用户行为变化",
      },
      {
        type: "数据质量异常",
        severity: "高",
        detected: "今天 09:15",
        description: "数据源同步出现延迟，影响实时分析",
        status: "已修复",
        action: "已重新同步数据，恢复正常",
      },
    ],
    predictiveModels: [
      {
        model: "用户流失预测模型",
        accuracy: 94.2,
        lastTrained: "今天 06:00",
        predictions: 1245,
        status: "运行中",
        description: "预测用户流失风险，准确率达94.2%",
      },
      {
        model: "价值提升预测模型",
        accuracy: 91.8,
        lastTrained: "今天 05:30",
        predictions: 856,
        status: "运行中",
        description: "预测用户价值提升潜力，指导运营策略",
      },
      {
        model: "内容推荐模型",
        accuracy: 87.5,
        lastTrained: "今天 04:45",
        predictions: 2341,
        status: "运行中",
        description: "个性化内容推荐，提升用户参与度",
      },
    ],
  }

const toggleSection = (section: string) => {
    setExpandedSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

const getImpactColor = (impact: string) => {
    switch (impact) {
      case "高":
        return "bg-red-100 text-red-800"
      case "中高":
        return "bg-orange-100 text-orange-800"
      case "中":
        return "bg-yellow-100 text-yellow-800"
      case "低":
        return "bg-green-100 text-green-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getSeverityColor = (severity: string) => {
    switch (severity) {
      case "高":
        return "bg-red-100 text-red-800"
      case "中等":
        return "bg-yellow-100 text-yellow-800"
      case "低":
        return "bg-green-100 text-green-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "运行中":
        return "bg-green-100 text-green-800"
      case "已处理":
        return "bg-blue-100 text-blue-800"
      case "监控中":
        return "bg-yellow-100 text-yellow-800"
      case "已修复":
        return "bg-green-100 text-green-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <div className="container mx-auto py-4 md:py-6 space-y-4 md:space-y-6">
      {/* 页面标题和工具栏 */}
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold">AI分析</h1>
          <p className="text-sm md:text-base text-muted-foreground mt-1">智能数据洞察与预测分析</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-[120px] text-sm">
              <SelectValue placeholder="时间范围" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="today">今日</SelectItem>
              <SelectItem value="week">本周</SelectItem>
              <SelectItem value="month">本月</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
            <Filter className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
            <RefreshCw className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="sm" className="hidden md:flex bg-transparent">
            <Download className="mr-2 h-4 w-4" />
            导出
          </Button>
        </div>
      </div>

{/* AI分析概览 */}
      <Collapsible
        open={expandedSections.overview}
        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, overview: open }))}
      >
        <Card className="border-none shadow-md">
          <CollapsibleTrigger className="w-full">
            <CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 border-b hover:from-purple-100 hover:to-pink-100 transition-colors cursor-pointer py-3 md:py-4">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <Brain className="h-4 w-4 md:h-5 md:w-5 text-purple-600" />
                  <div className="text-left">
                    <CardTitle className="text-base md:text-lg">AI分析概览</CardTitle>
                    <CardDescription className="text-xs md:text-sm">智能分析引擎运行状态</CardDescription>
                  </div>
                </div>
                {expandedSections.overview ? (
                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                ) : (
                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                )}
              </div>
            </CardHeader>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <CardContent className="p-4">
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 md:gap-4">
                <div className="bg-purple-50 p-3 rounded-lg text-center">
                  <div className="text-lg md:text-2xl font-bold text-purple-600">{aiData.overview.totalInsights}</div>
                  <div className="text-xs text-purple-700">AI洞察</div>
                </div>
                <div className="bg-blue-50 p-3 rounded-lg text-center">
                  <div className="text-lg md:text-2xl font-bold text-blue-600">{aiData.overview.trendsIdentified}</div>
                  <div className="text-xs text-blue-700">趋势识别</div>
                </div>
                <div className="bg-orange-50 p-3 rounded-lg text-center">
                  <div className="text-lg md:text-2xl font-bold text-orange-600">
                    {aiData.overview.anomaliesDetected}
                  </div>
                  <div className="text-xs text-orange-700">异常检测</div>
                </div>
                <div className="bg-green-50 p-3 rounded-lg text-center">
                  <div className="text-lg md:text-2xl font-bold text-green-600">
                    {aiData.overview.predictionsGenerated}
                  </div>
                  <div className="text-xs text-green-700">预测生成</div>
                </div>
                <div className="bg-indigo-50 p-3 rounded-lg text-center">
                  <div className="text-lg md:text-2xl font-bold text-indigo-600">{aiData.overview.accuracy}%</div>
                  <div className="text-xs text-indigo-700">预测准确率</div>
                </div>
                <div className="bg-pink-50 p-3 rounded-lg text-center">
                  <div className="text-lg md:text-2xl font-bold text-pink-600">{aiData.overview.modelPerformance}%</div>
                  <div className="text-xs text-pink-700">模型性能</div>
                </div>
              </div>
            </CardContent>
          </CollapsibleContent>
        </Card>
      </Collapsible>

{/* 趋势识别 */}
      <Collapsible
        open={expandedSections.trends}
        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, trends: open }))}
      >
        <Card className="border-none shadow-md">
          <CollapsibleTrigger className="w-full">
            <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b hover:from-blue-100 hover:to-indigo-100 transition-colors cursor-pointer py-3 md:py-4">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <TrendingUp className="h-4 w-4 md:h-5 md:w-5 text-blue-600" />
                  <div className="text-left">
                    <CardTitle className="text-base md:text-lg">趋势识别</CardTitle>
                    <CardDescription className="text-xs md:text-sm">AI驱动的趋势预测分析</CardDescription>
                  </div>
                </div>
                {expandedSections.trends ? (
                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                ) : (
                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                )}
              </div>
            </CardHeader>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <CardContent className="p-4">
              <div className="space-y-3">
                {aiData.trendAnalysis.map((trend, index) => (
                  <div key={index} className="bg-white border rounded-lg p-3 md:p-4">
                    <div className="flex flex-col md:flex-row md:items-start justify-between gap-3">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <h3 className="font-medium text-sm md:text-base">{trend.trend}</h3>
                          <Badge className={getImpactColor(trend.impact)}>{trend.impact}影响</Badge>
                        </div>
                        <p className="text-xs md:text-sm text-gray-600 mb-2">{trend.description}</p>
                        <p className="text-xs text-blue-600 font-medium">建议: {trend.recommendation}</p>
                      </div>
                      <div className="flex flex-col md:items-end gap-2">
                        <div className="text-right">
                          <div className="text-sm font-bold text-green-600">{trend.confidence}%</div>
                          <div className="text-xs text-gray-500">置信度</div>
                        </div>
                        <div className="text-right">
                          <div className="text-sm font-medium">{trend.timeframe}</div>
                          <div className="text-xs text-gray-500">预测时间</div>
                        </div>
                      </div>
                    </div>
                    <div className="mt-3">
                      <div className="flex justify-between text-xs mb-1">
                        <span>置信度</span>
                        <span>{trend.confidence}%</span>
                      </div>
                      <Progress value={trend.confidence} className="h-1.5" />
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </CollapsibleContent>
        </Card>
      </Collapsible>

{/* 异常检测 */}
      <Collapsible
        open={expandedSections.anomaly}
        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, anomaly: open }))}
      >
        <Card className="border-none shadow-md">
          <CollapsibleTrigger className="w-full">
            <CardHeader className="bg-gradient-to-r from-orange-50 to-red-50 border-b hover:from-orange-100 hover:to-red-100 transition-colors cursor-pointer py-3 md:py-4">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <AlertTriangle className="h-4 w-4 md:h-5 md:w-5 text-orange-600" />
                  <div className="text-left">
                    <CardTitle className="text-base md:text-lg">异常检测</CardTitle>
                    <CardDescription className="text-xs md:text-sm">智能异常监控与预警</CardDescription>
                  </div>
                </div>
                {expandedSections.anomaly ? (
                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                ) : (
                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                )}
              </div>
            </CardHeader>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <CardContent className="p-4">
              <div className="space-y-3">
                {aiData.anomalyDetection.map((anomaly, index) => (
                  <div key={index} className="bg-white border rounded-lg p-3 md:p-4">
                    <div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <h3 className="font-medium text-sm md:text-base">{anomaly.type}</h3>
                          <Badge className={getSeverityColor(anomaly.severity)}>{anomaly.severity}</Badge>
                          <Badge className={getStatusColor(anomaly.status)}>{anomaly.status}</Badge>
                        </div>
                        <p className="text-xs md:text-sm text-gray-600 mb-2">{anomaly.description}</p>
                        <p className="text-xs text-blue-600 font-medium">处理措施: {anomaly.action}</p>
                      </div>
                      <div className="text-right">
                        <div className="text-sm font-medium">{anomaly.detected}</div>
                        <div className="text-xs text-gray-500">检测时间</div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </CollapsibleContent>
        </Card>
      </Collapsible>

{/* 预测模型 */}
      <Collapsible
        open={expandedSections.predictions}
        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, predictions: open }))}
      >
        <Card className="border-none shadow-md">
          <CollapsibleTrigger className="w-full">
            <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b hover:from-green-100 hover:to-emerald-100 transition-colors cursor-pointer py-3 md:py-4">
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <Zap className="h-4 w-4 md:h-5 md:w-5 text-green-600" />
                  <div className="text-left">
                    <CardTitle className="text-base md:text-lg">预测模型</CardTitle>
                    <CardDescription className="text-xs md:text-sm">机器学习预测模型管理</CardDescription>
                  </div>
                </div>
                {expandedSections.predictions ? (
                  <ChevronDown className="h-4 w-4 md:h-5 md:w-5" />
                ) : (
                  <ChevronRight className="h-4 w-4 md:h-5 md:w-5" />
                )}
              </div>
            </CardHeader>
          </CollapsibleTrigger>
          <CollapsibleContent>
            <CardContent className="p-4">
              <div className="space-y-3">
                {aiData.predictiveModels.map((model, index) => (
                  <div key={index} className="bg-white border rounded-lg p-3 md:p-4">
                    <div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <h3 className="font-medium text-sm md:text-base">{model.model}</h3>
                          <Badge className={getStatusColor(model.status)}>{model.status}</Badge>
                        </div>
                        <p className="text-xs md:text-sm text-gray-600 mb-2">{model.description}</p>
                        <div className="flex flex-wrap gap-4 text-xs">
                          <span>最后训练: {model.lastTrained}</span>
                          <span>预测数量: {model.predictions.toLocaleString()}</span>
                        </div>
                      </div>
                      <div className="text-right">
                        <div className="text-lg font-bold text-green-600">{model.accuracy}%</div>
                        <div className="text-xs text-gray-500">准确率</div>
                      </div>
                    </div>
                    <div className="mt-3">
                      <div className="flex justify-between text-xs mb-1">
                        <span>模型准确率</span>
                        <span>{model.accuracy}%</span>
                      </div>
                      <Progress value={model.accuracy} className="h-1.5" />
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </CollapsibleContent>
        </Card>
      </Collapsible>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/ai-analysis/loading.tsx" isMerged="true"
export default function AIAnalysisLoading() {
  return (
    <div className="container mx-auto py-4 md:py-6 space-y-4 md:space-y-6">
      {/* 页面标题骨架 */}
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <div className="h-8 bg-gray-200 rounded w-32 mb-2 animate-pulse"></div>
          <div className="h-4 bg-gray-200 rounded w-48 animate-pulse"></div>
        </div>
        <div className="flex gap-2">
          <div className="h-9 w-24 bg-gray-200 rounded animate-pulse"></div>
          <div className="h-9 w-9 bg-gray-200 rounded animate-pulse"></div>
          <div className="h-9 w-9 bg-gray-200 rounded animate-pulse"></div>
        </div>
      </div>

{/* 概览卡片骨架 */}
      <div className="bg-white rounded-lg shadow-md p-4">
        <div className="h-6 bg-gray-200 rounded w-32 mb-4 animate-pulse"></div>
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 md:gap-4">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="bg-gray-50 p-3 rounded-lg">
              <div className="h-8 bg-gray-200 rounded w-12 mb-2 animate-pulse"></div>
              <div className="h-3 bg-gray-200 rounded w-16 animate-pulse"></div>
            </div>
          ))}
        </div>
      </div>

{/* 内容卡片骨架 */}
      {Array.from({ length: 3 }).map((_, i) => (
        <div key={i} className="bg-white rounded-lg shadow-md p-4">
          <div className="h-6 bg-gray-200 rounded w-40 mb-4 animate-pulse"></div>
          <div className="space-y-3">
            {Array.from({ length: 2 }).map((_, j) => (
              <div key={j} className="bg-gray-50 border rounded-lg p-3">
                <div className="h-5 bg-gray-200 rounded w-48 mb-2 animate-pulse"></div>
                <div className="h-4 bg-gray-200 rounded w-full mb-2 animate-pulse"></div>
                <div className="h-3 bg-gray-200 rounded w-32 animate-pulse"></div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/data-platform/loading.tsx" isEdit="true" isMerged="true"
export default function DataPlatformLoading() {
  return (
    <div className="container mx-auto py-4 md:py-6 space-y-4 md:space-y-6">
      {/* 页面标题骨架 */}
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <div className="h-8 bg-gray-200 rounded w-32 mb-2 animate-pulse"></div>
          <div className="h-4 bg-gray-200 rounded w-48 animate-pulse"></div>
        </div>
        <div className="flex gap-2">
          <div className="h-9 w-24 bg-gray-200 rounded animate-pulse"></div>
          <div className="h-9 w-9 bg-gray-200 rounded animate-pulse"></div>
          <div className="h-9 w-9 bg-gray-200 rounded animate-pulse"></div>
        </div>
      </div>

{/* 概览卡片骨架 */}
      <div className="bg-white rounded-lg shadow-md p-4">
        <div className="h-6 bg-gray-200 rounded w-32 mb-4 animate-pulse"></div>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <div key={i} className="bg-gray-50 p-3 rounded-lg">
              <div className="h-8 bg-gray-200 rounded w-12 mb-2 animate-pulse"></div>
              <div className="h-3 bg-gray-200 rounded w-16 animate-pulse"></div>
            </div>
          ))}
        </div>
      </div>

{/* 数据源卡片骨架 */}
      <div className="bg-white rounded-lg shadow-md p-4">
        <div className="h-6 bg-gray-200 rounded w-40 mb-4 animate-pulse"></div>
        <div className="space-y-3">
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className="bg-gray-50 border rounded-lg p-3">
              <div className="h-5 bg-gray-200 rounded w-48 mb-2 animate-pulse"></div>
              <div className="h-4 bg-gray-200 rounded w-full mb-2 animate-pulse"></div>
              <div className="h-3 bg-gray-200 rounded w-32 animate-pulse"></div>
            </div>
          ))}
        </div>
      </div>

{/* 其他内容骨架 */}
      {Array.from({ length: 2 }).map((_, i) => (
        <div key={i} className="bg-white rounded-lg shadow-md p-4">
          <div className="h-6 bg-gray-200 rounded w-40 mb-4 animate-pulse"></div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {Array.from({ length: 3 }).map((_, j) => (
              <div key={j} className="bg-gray-50 p-4 rounded-lg">
                <div className="h-4 bg-gray-200 rounded w-24 mb-2 animate-pulse"></div>
                <div className="h-6 bg-gray-200 rounded w-16 mb-2 animate-pulse"></div>
                <div className="h-2 bg-gray-200 rounded w-full animate-pulse"></div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}
[V0_FILE]typescript:file="lib/documentation/page-registry.ts" isEdit="true" isMerged="true"
interface PageInfo {
  path: string
  name: string
  description?: string
  category?: string
}

class PageRegistry {
  private pages: PageInfo[] = [
    {
      path: "/",
      name: "数据概览",
      description: "平台整体数据分析",
      category: "核心功能",
    },
    {
      path: "/data-platform",
      name: "数据中台",
      description: "多源数据整合中心",
      category: "核心功能",
    },
    {
      path: "/user-discovery",
      name: "用户发现",
      description: "用户行为洞察分析",
      category: "用户分析",
    },
    {
      path: "/user-valuation",
      name: "用户估值",
      description: "用户价值评估模型",
      category: "价值分析",
    },
    {
      path: "/ai-analysis",
      name: "AI分析",
      description: "智能数据洞察",
      category: "AI功能",
    },
    {
      path: "/devices",
      name: "设备管理",
      description: "设备状态监控",
      category: "系统管理",
    },
    {
      path: "/traffic-pool",
      name: "流量池",
      description: "流量数据管理",
      category: "系统管理",
    },
    {
      path: "/documentation",
      name: "文档生成",
      description: "自动文档生成",
      category: "工具",
    },
  ]

getAllPages(): PageInfo[] {
    return this.pages
  }

getPagesByCategory(category: string): PageInfo[] {
    return this.pages.filter((page) => page.category === category)
  }

getPageByPath(path: string): PageInfo | undefined {
    return this.pages.find((page) => page.path === path)
  }

addPage(page: PageInfo): void {
    this.pages.push(page)
  }

removePage(path: string): void {
    this.pages = this.pages.filter((page) => page.path !== path)
  }

getCategories(): string[] {
    const categories = new Set(this.pages.map((page) => page.category).filter(Boolean))
    return Array.from(categories) as string[]
  }
}

export const pageRegistry = new PageRegistry()
export type { PageInfo }
[V0_FILE]typescript:file="lib/documentation/screenshot-service.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
/**
 * 增强版截图服务
 * 结合多种技术方案确保能够成功捕获页面截图
 */

export interface ScreenshotOptions {
  format?: "png" | "jpeg" | "webp"
  quality?: number
  scale?: number
  backgroundColor?: string
  timeout?: number
  width?: number
  height?: number
}

export interface ScreenshotResult {
  success: boolean
  dataUrl?: string
  error?: string
  method?: string
}

class ScreenshotService {
  async captureViewport(options: ScreenshotOptions = {}): Promise<ScreenshotResult> {
    try {
      // 方法1: 使用 html2canvas
      if (typeof window !== "undefined" && window.html2canvas) {
        const canvas = await window.html2canvas(document.body, {
          backgroundColor: options.backgroundColor || "#ffffff",
          scale: options.scale || 1,
          width: options.width,
          height: options.height,
          useCORS: true,
          allowTaint: true,
        })

const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.9)

return {
          success: true,
          dataUrl,
          method: "html2canvas",
        }
      }

// 方法2: 使用 dom-to-image
      if (typeof window !== "undefined" && window.domtoimage) {
        const dataUrl = await window.domtoimage.toPng(document.body, {
          bgcolor: options.backgroundColor || "#ffffff",
          width: options.width,
          height: options.height,
          style: {
            transform: `scale(${options.scale || 1})`,
            transformOrigin: "top left",
          },
        })

return {
          success: true,
          dataUrl,
          method: "dom-to-image",
        }
      }

// 方法3: 使用 Canvas API (基础实现)
      const canvas = document.createElement("canvas")
      const ctx = canvas.getContext("2d")

if (!ctx) {
        throw new Error("无法获取Canvas上下文")
      }

canvas.width = options.width || window.innerWidth
      canvas.height = options.height || window.innerHeight

// 设置背景色
      ctx.fillStyle = options.backgroundColor || "#ffffff"
      ctx.fillRect(0, 0, canvas.width, canvas.height)

// 简单的文本渲染作为占位符
      ctx.fillStyle = "#333333"
      ctx.font = "16px Arial"
      ctx.fillText("页面截图占位符", 50, 50)
      ctx.fillText(`URL: ${window.location.href}`, 50, 80)
      ctx.fillText(`时间: ${new Date().toLocaleString()}`, 50, 110)

const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.9)

return {
        success: true,
        dataUrl,
        method: "canvas-fallback",
      }
    } catch (error) {
      console.error("截图失败:", error)
      return {
        success: false,
        error: error instanceof Error ? error.message : "未知错误",
      }
    }
  }

async captureElement(element: HTMLElement, options: ScreenshotOptions = {}): Promise<ScreenshotResult> {
    try {
      // 使用 html2canvas 截取特定元素
      if (typeof window !== "undefined" && window.html2canvas) {
        const canvas = await window.html2canvas(element, {
          backgroundColor: options.backgroundColor || "#ffffff",
          scale: options.scale || 1,
          width: options.width,
          height: options.height,
          useCORS: true,
          allowTaint: true,
        })

const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.9)

return {
          success: true,
          dataUrl,
          method: "html2canvas-element",
        }
      }

// 使用 dom-to-image 截取特定元素
      if (typeof window !== "undefined" && window.domtoimage) {
        const dataUrl = await window.domtoimage.toPng(element, {
          bgcolor: options.backgroundColor || "#ffffff",
          width: options.width,
          height: options.height,
        })

return {
          success: true,
          dataUrl,
          method: "dom-to-image-element",
        }
      }

throw new Error("没有可用的截图库")
    } catch (error) {
      console.error("元素截图失败:", error)
      return {
        success: false,
        error: error instanceof Error ? error.message : "未知错误",
      }
    }
  }
}

export const screenshotService = new ScreenshotService()

// 扩展 Window 接口以包含截图库
declare global {
  interface Window {
    html2canvas?: any
    domtoimage?: any
  }
}

// 动态导入所需库
let htmlToImageModule: any = null
let domToImageModule: any = null

// 加载所需库
async function loadScreenshotLibraries() {
  if (!htmlToImageModule) {
    try {
      htmlToImageModule = await import("html-to-image")
      console.log("html-to-image库加载成功")
    } catch (error) {
      console.warn("html-to-image库加载失败:", error)
    }
  }

if (!domToImageModule) {
    try {
      domToImageModule = await import("dom-to-image")
      console.log("dom-to-image库加载成功")
    } catch (error) {
      console.warn("dom-to-image库加载失败:", error)
    }
  }

return {
    htmlToImage: htmlToImageModule,
    domToImage: domToImageModule,
  }
}

/**
 * 使用多种方法尝试捕获页面截图
 * @param targetElement 目标元素（iframe或窗口）
 * @param url 页面URL
 * @param options 配置选项
 * @returns 截图的base64数据URL
 */
export async function captureScreenshot(
  targetElement: HTMLIFrameElement | Window,
  url: string,
  options: {
    maxRetries?: number
    retryDelay?: number
    useDirectCapture?: boolean
    useWindowOpen?: boolean
  } = {},
): Promise<string> {
  const { maxRetries = 3, retryDelay = 1000, useDirectCapture = true, useWindowOpen = false } = options

let lastError: any = null

// 尝试多种方法捕获截图
  for (let retry = 0; retry < maxRetries; retry++) {
    try {
      // 如果重试，等待一段时间
      if (retry > 0) {
        await new Promise((resolve) => setTimeout(resolve, retryDelay))
        console.log(`尝试第 ${retry + 1} 次捕获截图...`)
      }

// 方法1: 使用html-to-image或dom-to-image库
      if (useDirectCapture) {
        const libraries = await loadScreenshotLibraries()

// 确定目标元素
        let element: HTMLElement | null = null

if (targetElement instanceof HTMLIFrameElement) {
          try {
            // 尝试访问iframe内容
            const iframeDocument = targetElement.contentDocument || targetElement.contentWindow?.document
            if (iframeDocument) {
              element = iframeDocument.documentElement
            }
          } catch (error) {
            console.warn("无法访问iframe内容，可能是跨域限制:", error)
          }
        } else if (targetElement instanceof Window) {
          element = targetElement.document.documentElement
        }

if (element) {
          // 尝试使用html-to-image
          if (libraries.htmlToImage) {
            try {
              console.log("使用html-to-image捕获截图...")
              const dataUrl = await libraries.htmlToImage.toPng(element, {
                quality: options.quality || 0.95,
                cacheBust: true,
                pixelRatio: options.scale || 2,
                skipAutoScale: true,
                style: {
                  "background-color": options.backgroundColor || "#ffffff",
                },
              })
              if (dataUrl && dataUrl.startsWith("data:image/png;base64,")) {
                console.log("html-to-image捕获成功!")
                return dataUrl
              }
            } catch (error) {
              console.warn("html-to-image捕获失败:", error)
            }
          }

// 尝试使用dom-to-image
          if (libraries.domToImage) {
            try {
              console.log("使用dom-to-image捕获截图...")
              const dataUrl = await libraries.domToImage.toPng(element, {
                quality: options.quality || 0.95,
                bgcolor: options.backgroundColor || "#ffffff",
                scale: options.scale || 2,
              })
              if (dataUrl && dataUrl.startsWith("data:image/png;base64,")) {
                console.log("dom-to-image捕获成功!")
                return dataUrl
              }
            } catch (error) {
              console.warn("dom-to-image捕获失败:", error)
            }
          }
        }
      }

// 方法2: 使用Canvas API
      try {
        console.log("使用Canvas API捕获截图...")
        const screenshot = await captureWithCanvas(targetElement)
        if (screenshot) {
          console.log("Canvas API捕获成功!")
          return screenshot
        }
      } catch (error) {
        console.warn("Canvas API捕获失败:", error)
        lastError = error
      }

// 方法3: 使用postMessage通信
      if (targetElement instanceof HTMLIFrameElement) {
        try {
          console.log("使用postMessage尝试捕获截图...")
          const screenshot = await captureWithPostMessage(targetElement)
          if (screenshot) {
            console.log("postMessage捕获成功!")
            return screenshot
          }
        } catch (error) {
          console.warn("postMessage捕获失败:", error)
          lastError = error
        }
      }

// 方法4: 使用window.open打开页面
      if (useWindowOpen) {
        try {
          console.log("使用window.open尝试捕获截图...")
          const screenshot = await captureWithWindowOpen(url)
          if (screenshot) {
            console.log("window.open捕获成功!")
            return screenshot
          }
        } catch (error) {
          console.warn("window.open捕获失败:", error)
          lastError = error
        }
      }
    } catch (error) {
      console.error(`第 ${retry + 1} 次捕获截图失败:`, error)
      lastError = error
    }
  }

// 所有方法都失败，使用备用方案
  console.warn("所有截图方法都失败，使用备用方案")
  return createFallbackScreenshot(url, lastError)
}

/**
 * 使用Canvas API捕获截图
 */
async function captureWithCanvas(target: HTMLIFrameElement | Window): Promise<string | null> {
  try {
    let document: Document | null = null
    let width = 1200
    let height = 800

if (target instanceof HTMLIFrameElement) {
      if (!target.contentDocument && !target.contentWindow?.document) {
        throw new Error("无法访问iframe内容")
      }
      document = target.contentDocument || target.contentWindow?.document || null
      width = target.offsetWidth || width
      height = target.offsetHeight || height
    } else {
      document = target.document
      width = target.innerWidth
      height = target.innerHeight
    }

if (!document) {
      throw new Error("无法获取文档对象")
    }

// 创建canvas
    const canvas = document.createElement("canvas")
    canvas.width = width
    canvas.height = height

const ctx = canvas.getContext("2d")
    if (!ctx) {
      throw new Error("无法创建canvas上下文")
    }

// 绘制白色背景
    ctx.fillStyle = "#ffffff"
    ctx.fillRect(0, 0, width, height)

// 创建一个图像对象
    const img = new Image()
    img.crossOrigin = "anonymous"

// 将文档转换为SVG数据URL
    const data = new XMLSerializer().serializeToString(document.documentElement)
    const svg = new Blob([data], { type: "image/svg+xml" })
    const svgUrl = URL.createObjectURL(svg)

// 等待图像加载
    await new Promise((resolve, reject) => {
      img.onload = resolve
      img.onerror = reject
      img.src = svgUrl
    })

// 绘制图像
    ctx.drawImage(img, 0, 0, width, height)
    URL.revokeObjectURL(svgUrl)

// 返回数据URL
    return canvas.toDataURL("image/png")
  } catch (error) {
    console.error("Canvas捕获失败:", error)
    return null
  }
}

/**
 * 使用postMessage与iframe通信捕获截图
 */
async function captureWithPostMessage(iframe: HTMLIFrameElement): Promise<string | null> {
  return new Promise((resolve, reject) => {
    // 设置超时
    const timeout = setTimeout(() => {
      window.removeEventListener("message", messageHandler)
      reject(new Error("postMessage截图超时"))
    }, options.timeout || 5000)

// 消息处理函数
    function messageHandler(event: MessageEvent) {
      if (event.data && event.data.type === "screenshot" && event.data.dataUrl) {
        clearTimeout(timeout)
        window.removeEventListener("message", messageHandler)
        resolve(event.data.dataUrl)
      }
    }

// 监听消息
    window.addEventListener("message", messageHandler)

// 向iframe发送消息
    try {
      iframe.contentWindow?.postMessage({ type: "requestScreenshot" }, "*")
    } catch (error) {
      clearTimeout(timeout)
      window.removeEventListener("message", messageHandler)
      reject(error)
    }
  })
}

/**
 * 使用window.open打开页面并捕获截图
 */
async function captureWithWindowOpen(url: string): Promise<string | null> {
  return new Promise((resolve, reject) => {
    try {
      // 打开新窗口
      const newWindow = window.open(url, "_blank", "width=1200,height=800")

if (!newWindow) {
        reject(new Error("无法打开新窗口，可能被浏览器阻止"))
        return
      }

// 设置超时
      const timeout = setTimeout(() => {
        if (newWindow) newWindow.close()
        reject(new Error("window.open截图超时"))
      }, 10000)

// 等待页面加载完成
      newWindow.onload = async () => {
        try {
          // 等待一段时间，确保页面完全渲染
          await new Promise((resolve) => setTimeout(resolve, 2000))

// 尝试捕获截图
          const libraries = await loadScreenshotLibraries()
          let screenshot = null

if (libraries.htmlToImage) {
            try {
              screenshot = await libraries.htmlToImage.toPng(newWindow.document.documentElement)
            } catch (error) {
              console.warn("html-to-image捕获失败:", error)
            }
          }

if (!screenshot && libraries.domToImage) {
            try {
              screenshot = await libraries.domToImage.toPng(newWindow.document.documentElement)
            } catch (error) {
              console.warn("dom-to-image捕获失败:", error)
            }
          }

// 关闭窗口
          newWindow.close()
          clearTimeout(timeout)

if (screenshot) {
            resolve(screenshot)
          } else {
            reject(new Error("无法捕获新窗口的截图"))
          }
        } catch (error) {
          newWindow.close()
          clearTimeout(timeout)
          reject(error)
        }
      }

// 处理加载错误
      newWindow.onerror = (event) => {
        newWindow.close()
        clearTimeout(timeout)
        reject(new Error("新窗口加载出错"))
      }
    } catch (error) {
      reject(error)
    }
  })
}

/**
 * 创建备用截图
 * 当所有方法都失败时，生成一个包含页面信息的模拟截图
 */
function createFallbackScreenshot(url: string, error: any): string {
  // 提取页面标题
  const pathParts = url.split("/")
  const pageName = pathParts[pathParts.length - 1] || "页面"

// 创建canvas
  const canvas = document.createElement("canvas")
  const ctx = canvas.getContext("2d")

if (!ctx) {
    throw new Error("无法创建canvas上下文")
  }

// 设置canvas尺寸
  const width = 1200
  const height = 800
  canvas.width = width
  canvas.height = height

// 绘制背景
  ctx.fillStyle = "#ffffff"
  ctx.fillRect(0, 0, width, height)

// 绘制边框
  ctx.strokeStyle = "#e5e7eb"
  ctx.lineWidth = 2
  ctx.strokeRect(1, 1, width - 2, height - 2)

// 绘制页面信息
  ctx.fillStyle = "#f9fafb"
  ctx.fillRect(0, 0, width, 80)

ctx.fillStyle = "#111827"
  ctx.font = "bold 24px system-ui"
  ctx.fillText(pageName, 20, 40)

ctx.fillStyle = "#6b7280"
  ctx.font = "14px system-ui"
  ctx.fillText(url, 20, 65)

// 绘制内容区域
  ctx.fillStyle = "#f3f4f6"
  ctx.fillRect(20, 100, width - 40, height - 120)

// 添加错误信息
  ctx.fillStyle = "#ef4444"
  ctx.font = "16px system-ui"
  ctx.fillText("截图捕获失败", 40, 140)

ctx.fillStyle = "#6b7280"
  ctx.font = "14px system-ui"
  ctx.fillText(`错误信息: ${error ? error.message || "未知错误" : "未知错误"}`, 40, 170)
  ctx.fillText(`URL: ${url}`, 40, 200)
  ctx.fillText("请尝试手动截图或刷新页面后重试", 40, 230)

// 添加水印
  ctx.save()
  ctx.globalAlpha = 0.1
  ctx.fillStyle = "#000000"
  ctx.font = "bold 48px system-ui"
  ctx.translate(width / 2, height / 2)
  ctx.rotate(-Math.PI / 6)
  ctx.textAlign = "center"
  ctx.fillText("备用截图", 0, 0)
  ctx.restore()

// 返回base64数据
  return canvas.toDataURL("image/png")
}

/**
 * 注入截图脚本到页面
 * 这个函数会向页面注入一个脚本，使页面能够响应截图请求
 */
export function injectScreenshotScript(window: Window): void {
  try {
    const script = window.document.createElement("script")
    script.textContent = `
      // 监听截图请求
      window.addEventListener('message', async function(event) {
        if (event.data && event.data.type === 'requestScreenshot') {
          try {
            // 动态加载html2canvas
            const script = document.createElement('script');
            script.src = 'https://html2canvas.hertzen.com/dist/html2canvas.min.js';
            script.onload = async function() {
              try {
                // 使用html2canvas捕获页面
                const canvas = await html2canvas(document.documentElement, {
                  allowTaint: true,
                  useCORS: true,
                  scale: ${options.scale || 2},
                  backgroundColor: '${options.backgroundColor || "#ffffff"}'
                });
                
                // 发送截图数据
                const dataUrl = canvas.toDataURL('image/${options.format || "png"}', ${options.quality || 0.9});
                window.parent.postMessage({
                  type: 'screenshot',
                  dataUrl: dataUrl
                }, '*');
              } catch (error) {
                console.error('html2canvas捕获失败:', error);
                window.parent.postMessage({
                  type: 'screenshotError',
                  error: error.toString()
                }, '*');
              }
            };
            script.onerror = function(error) {
              console.error('加载html2canvas失败:', error);
              window.parent.postMessage({
                type: 'screenshotError',
                error: 'Failed to load html2canvas'
              }, '*');
            };
            document.head.appendChild(script);
          } catch (error) {
            console.error('处理截图请求时出错:', error);
            window.parent.postMessage({
              type: 'screenshotError',
              error: error.toString()
            }, '*');
          }
        }
      });
      
      console.log('截图脚本已注入');
    `
    window.document.head.appendChild(script)
  } catch (error) {
    console.error("注入截图脚本失败:", error)
  }
}

/**
 * 使用服务器端API捕获截图
 * 注意：这需要后端支持
 */
export async function captureWithServerAPI(url: string): Promise<string | null> {
  try {
    // 这里应该调用后端API
    // 由于我们没有实际的后端API，这里只是一个示例
    console.log("尝试使用服务器端API捕获截图:", url)

// 模拟API调用
    const response = await fetch("/api/screenshot", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ url }),
    })

if (!response.ok) {
      throw new Error(`API请求失败: ${response.status} ${response.statusText}`)
    }

const data = await response.json()
    if (data.success && data.screenshot) {
      return data.screenshot
    } else {
      throw new Error(data.error || "未知错误")
    }
  } catch (error) {
    console.error("服务器端API捕获失败:", error)
    return null
  }
}
[V0_FILE]typescript:file="lib/documentation/enhanced-screenshot-service.ts" isEdit="true" isMerged="true"
import { screenshotService, type ScreenshotOptions, type ScreenshotResult } from "./screenshot-service"

export interface EnhancedScreenshotOptions extends ScreenshotOptions {
  waitForImages?: boolean
  waitForFonts?: boolean
  removeElements?: string[]
  addWatermark?: boolean
  watermarkText?: string
}

class EnhancedScreenshotService {
  async captureViewport(options: EnhancedScreenshotOptions = {}): Promise<ScreenshotResult> {
    try {
      // 等待页面完全加载
      await this.waitForPageLoad(options)

// 移除不需要的元素
      const removedElements = this.removeElements(options.removeElements || [])

try {
        // 调用基础截图服务
        const result = await screenshotService.captureViewport(options)

// 添加水印
        if (options.addWatermark && result.success && result.dataUrl) {
          result.dataUrl = await this.addWatermark(result.dataUrl, options.watermarkText)
        }

return result
      } finally {
        // 恢复移除的元素
        this.restoreElements(removedElements)
      }
    } catch (error) {
      console.error("增强截图失败:", error)
      return {
        success: false,
        error: error instanceof Error ? error.message : "未知错误",
      }
    }
  }

async captureElement(element: HTMLElement, options: EnhancedScreenshotOptions = {}): Promise<ScreenshotResult> {
    try {
      // 等待页面完全加载
      await this.waitForPageLoad(options)

// 调用基础截图服务
      const result = await screenshotService.captureElement(element, options)

// 添加水印
      if (options.addWatermark && result.success && result.dataUrl) {
        result.dataUrl = await this.addWatermark(result.dataUrl, options.watermarkText)
      }

return result
    } catch (error) {
      console.error("增强元素截图失败:", error)
      return {
        success: false,
        error: error instanceof Error ? error.message : "未知错误",
      }
    }
  }

private async waitForPageLoad(options: EnhancedScreenshotOptions): Promise<void> {
    // 等待图片加载
    if (options.waitForImages) {
      await this.waitForImages()
    }

// 等待字体加载
    if (options.waitForFonts) {
      await this.waitForFonts()
    }

// 额外等待时间确保渲染完成
    await new Promise((resolve) => setTimeout(resolve, 1000))
  }

private async waitForImages(): Promise<void> {
    const images = Array.from(document.images)
    const promises = images.map((img) => {
      if (img.complete) return Promise.resolve()

return new Promise((resolve, reject) => {
        img.onload = resolve
        img.onerror = resolve // 即使图片加载失败也继续
        setTimeout(resolve, 5000) // 5秒超时
      })
    })

await Promise.all(promises)
  }

private async waitForFonts(): Promise<void> {
    if ("fonts" in document) {
      try {
        await document.fonts.ready
      } catch (error) {
        console.warn("字体加载等待失败:", error)
      }
    }
  }

private removeElements(selectors: string[]): Array<{ element: Element; parent: Node; nextSibling: Node | null }> {
    const removedElements: Array<{ element: Element; parent: Node; nextSibling: Node | null }> = []

selectors.forEach((selector) => {
      const elements = document.querySelectorAll(selector)
      elements.forEach((element) => {
        if (element.parentNode) {
          removedElements.push({
            element,
            parent: element.parentNode,
            nextSibling: element.nextSibling,
          })
          element.parentNode.removeChild(element)
        }
      })
    })

return removedElements
  }

private restoreElements(removedElements: Array<{ element: Element; parent: Node; nextSibling: Node | null }>): void {
    removedElements.forEach(({ element, parent, nextSibling }) => {
      if (nextSibling) {
        parent.insertBefore(element, nextSibling)
      } else {
        parent.appendChild(element)
      }
    })
  }

private async addWatermark(dataUrl: string, watermarkText?: string): Promise<string> {
    return new Promise((resolve) => {
      const canvas = document.createElement("canvas")
      const ctx = canvas.getContext("2d")
      const img = new Image()

img.onload = () => {
        canvas.width = img.width
        canvas.height = img.height

// 绘制原图
        ctx?.drawImage(img, 0, 0)

if (ctx && watermarkText) {
          // 添加水印
          ctx.font = "16px Arial"
          ctx.fillStyle = "rgba(0, 0, 0, 0.5)"
          ctx.textAlign = "right"
          ctx.fillText(
            watermarkText || `截图时间: ${new Date().toLocaleString()}`,
            canvas.width - 20,
            canvas.height - 20,
          )
        }

resolve(canvas.toDataURL("image/png"))
      }

img.src = dataUrl
    })
  }
}

export const enhancedScreenshotService = new EnhancedScreenshotService()
export type { EnhancedScreenshotOptions }
[V0_FILE]typescript:file="lib/documentation/docx-generator.ts" isEdit="true" isMerged="true"
import { Document, Packer, Paragraph, ImageRun, TextRun, HeadingLevel } from "docx"

interface Screenshot {
  id: string
  name: string
  url: string
  dataUrl?: string
  timestamp: Date
  status: string
}

interface DocumentSettings {
  title: string
  author: string
  description: string
  includeTimestamp: boolean
  includePageUrls: boolean
  imageFormat: string
  imageQuality: number
  pageSize: string
  orientation: string
}

export async function generateDocx(screenshots: Screenshot[], settings: DocumentSettings): Promise<ArrayBuffer> {
  try {
    const children: Paragraph[] = []

// 添加标题
    children.push(
      new Paragraph({
        children: [
          new TextRun({
            text: settings.title,
            bold: true,
            size: 32,
          }),
        ],
        heading: HeadingLevel.TITLE,
      }),
    )

// 添加描述
    if (settings.description) {
      children.push(
        new Paragraph({
          children: [
            new TextRun({
              text: settings.description,
              size: 24,
            }),
          ],
        }),
      )
    }

// 添加生成信息
    if (settings.includeTimestamp) {
      children.push(
        new Paragraph({
          children: [
            new TextRun({
              text: `生成时间: ${new Date().toLocaleString()}`,
              size: 20,
              italics: true,
            }),
          ],
        }),
      )
    }

children.push(
      new Paragraph({
        children: [
          new TextRun({
            text: `作者: ${settings.author}`,
            size: 20,
            italics: true,
          }),
        ],
      }),
    )

// 添加分隔符
    children.push(
      new Paragraph({
        children: [
          new TextRun({
            text: "─".repeat(50),
            size: 20,
          }),
        ],
      }),
    )

// 添加每个截图
    for (const screenshot of screenshots) {
      // 页面标题
      children.push(
        new Paragraph({
          children: [
            new TextRun({
              text: screenshot.name,
              bold: true,
              size: 28,
            }),
          ],
          heading: HeadingLevel.HEADING_1,
        }),
      )

// 页面URL
      if (settings.includePageUrls) {
        children.push(
          new Paragraph({
            children: [
              new TextRun({
                text: `页面地址: ${screenshot.url}`,
                size: 20,
                color: "666666",
              }),
            ],
          }),
        )
      }

// 截图时间
      if (settings.includeTimestamp) {
        children.push(
          new Paragraph({
            children: [
              new TextRun({
                text: `截图时间: ${screenshot.timestamp.toLocaleString()}`,
                size: 20,
                color: "666666",
              }),
            ],
          }),
        )
      }

// 添加截图
      if (screenshot.dataUrl) {
        try {
          // 将 dataUrl 转换为 ArrayBuffer
          const base64Data = screenshot.dataUrl.split(",")[1]
          const binaryString = atob(base64Data)
          const bytes = new Uint8Array(binaryString.length)
          for (let i = 0; i < binaryString.length; i++) {
            bytes[i] = binaryString.charCodeAt(i)
          }

children.push(
            new Paragraph({
              children: [
                new ImageRun({
                  data: bytes,
                  transformation: {
                    width: 600,
                    height: 400,
                  },
                }),
              ],
            }),
          )
        } catch (error) {
          console.error("添加图片失败:", error)
          children.push(
            new Paragraph({
              children: [
                new TextRun({
                  text: "[图片加载失败]",
                  color: "FF0000",
                  italics: true,
                }),
              ],
            }),
          )
        }
      }

// 添加分隔符
      children.push(
        new Paragraph({
          children: [
            new TextRun({
              text: "",
            }),
          ],
        }),
      )
    }

// 创建文档
    const doc = new Document({
      sections: [
        {
          properties: {},
          children: children,
        },
      ],
    })

// 生成文档
    const buffer = await Packer.toBuffer(doc)
    return buffer
  } catch (error) {
    console.error("生成文档失败:", error)
    throw new Error(`文档生成失败: ${error instanceof Error ? error.message : "未知错误"}`)
  }
}
[V0_FILE]typescriptreact:file="app/documentation/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { toast } from "@/components/ui/use-toast"
import {
  Camera,
  Download,
  FileText,
  ImageIcon,
  Settings,
  Eye,
  Trash2,
  RefreshCw,
  Monitor,
  Smartphone,
  Tablet,
  Globe,
  CheckCircle,
  XCircle,
  Clock,
  Zap,
} from "lucide-react"
import {
  enhancedScreenshotService,
  type EnhancedScreenshotOptions,
} from "@/lib/documentation/enhanced-screenshot-service"
import { generateDocx } from "@/lib/documentation/docx-generator"
import { pageRegistry } from "@/lib/documentation/page-registry"

interface Screenshot {
  id: string
  name: string
  url: string
  dataUrl?: string
  timestamp: Date
  status: "pending" | "success" | "failed" | "capturing"
  error?: string
  method?: string
  size?: { width: number; height: number }
}

interface DocumentSettings {
  title: string
  author: string
  description: string
  includeTimestamp: boolean
  includePageUrls: boolean
  imageFormat: "png" | "jpeg" | "webp"
  imageQuality: number
  pageSize: "A4" | "A3" | "Letter"
  orientation: "portrait" | "landscape"
}

export default function DocumentationPage() {
  const [screenshots, setScreenshots] = useState<Screenshot[]>([])
  const [selectedPages, setSelectedPages] = useState<string[]>([])
  const [isCapturing, setIsCapturing] = useState(false)
  const [captureProgress, setCaptureProgress] = useState(0)
  const [isGeneratingDoc, setIsGeneratingDoc] = useState(false)
  const [previewMode, setPreviewMode] = useState<"desktop" | "tablet" | "mobile">("desktop")
  const [currentPreviewUrl, setCurrentPreviewUrl] = useState("")
  const [documentSettings, setDocumentSettings] = useState<DocumentSettings>({
    title: "用户数据资产中台文档",
    author: "系统管理员",
    description: "自动生成的系统文档",
    includeTimestamp: true,
    includePageUrls: true,
    imageFormat: "png",
    imageQuality: 0.9,
    pageSize: "A4",
    orientation: "portrait",
  })

const previewRef = useRef<HTMLIFrameElement>(null)
  const [screenshotOptions, setScreenshotOptions] = useState<EnhancedScreenshotOptions>({
    format: "png",
    quality: 0.9,
    scale: 1,
    backgroundColor: "#ffffff",
    timeout: 30000,
    waitForImages: true,
    waitForFonts: true,
    addWatermark: true,
  })

const pages = pageRegistry.getAllPages()

useEffect(() => {
    setSelectedPages(pages.map((p) => p.path))
  }, [])

const handlePageSelection = (pagePath: string, checked: boolean) => {
    if (checked) {
      setSelectedPages((prev) => [...prev, pagePath])
    } else {
      setSelectedPages((prev) => prev.filter((p) => p !== pagePath))
    }
  }

const selectAllPages = () => {
    setSelectedPages(pages.map((p) => p.path))
  }

const deselectAllPages = () => {
    setSelectedPages([])
  }

const getViewportSize = () => {
    switch (previewMode) {
      case "mobile":
        return { width: 375, height: 667 }
      case "tablet":
        return { width: 768, height: 1024 }
      default:
        return { width: 1920, height: 1080 }
    }
  }

const captureScreenshot = async (page: (typeof pages)[0]): Promise<Screenshot> => {
    const screenshot: Screenshot = {
      id: `${page.path}-${Date.now()}`,
      name: page.name,
      url: page.path,
      timestamp: new Date(),
      status: "capturing",
    }

try {
      const result = await enhancedScreenshotService.captureViewport({
        ...screenshotOptions,
        ...getViewportSize(),
        watermarkText: `${page.name} - ${new Date().toLocaleString()}`,
      })

if (result.success && result.dataUrl) {
        return {
          ...screenshot,
          status: "success",
          dataUrl: result.dataUrl,
          method: result.method,
          size: getViewportSize(),
        }
      } else {
        throw new Error(result.error || "截图失败")
      }
    } catch (error) {
      console.error(`截图失败 ${page.name}:`, error)
      return {
        ...screenshot,
        status: "failed",
        error: error instanceof Error ? error.message : "未知错误",
      }
    }
  }

const startCapture = async () => {
    if (selectedPages.length === 0) {
      toast({
        title: "请选择页面",
        description: "请至少选择一个页面进行截图",
        variant: "destructive",
      })
      return
    }

setIsCapturing(true)
    setCaptureProgress(0)
    setScreenshots([])

const selectedPageObjects = pages.filter((p) => selectedPages.includes(p.path))
    const newScreenshots: Screenshot[] = []

for (let i = 0; i < selectedPageObjects.length; i++) {
      const page = selectedPageObjects[i]

setCaptureProgress((i / selectedPageObjects.length) * 100)

const pendingScreenshot: Screenshot = {
        id: `${page.path}-${Date.now()}`,
        name: page.name,
        url: page.path,
        timestamp: new Date(),
        status: "capturing",
      }

newScreenshots.push(pendingScreenshot)
      setScreenshots([...newScreenshots])

try {
        const screenshot = await captureScreenshot(page)

const updatedScreenshots = [...newScreenshots]
        updatedScreenshots[i] = screenshot
        setScreenshots(updatedScreenshots)
        newScreenshots[i] = screenshot

if (screenshot.status === "success") {
          toast({
            title: "截图成功",
            description: `${page.name} 截图完成`,
          })
        } else {
          toast({
            title: "截图失败",
            description: `${page.name}: ${screenshot.error}`,
            variant: "destructive",
          })
        }
      } catch (error) {
        console.error(`截图过程出错:`, error)
        const failedScreenshot: Screenshot = {
          ...pendingScreenshot,
          status: "failed",
          error: error instanceof Error ? error.message : "未知错误",
        }

const updatedScreenshots = [...newScreenshots]
        updatedScreenshots[i] = failedScreenshot
        setScreenshots(updatedScreenshots)
        newScreenshots[i] = failedScreenshot
      }

if (i < selectedPageObjects.length - 1) {
        await new Promise((resolve) => setTimeout(resolve, 1000))
      }
    }

setCaptureProgress(100)
    setIsCapturing(false)

const successCount = newScreenshots.filter((s) => s.status === "success").length
    const failedCount = newScreenshots.filter((s) => s.status === "failed").length

toast({
      title: "截图完成",
      description: `成功: ${successCount}, 失败: ${failedCount}`,
      variant: successCount > 0 ? "default" : "destructive",
    })
  }

const generateDocument = async () => {
    const successfulScreenshots = screenshots.filter((s) => s.status === "success" && s.dataUrl)

if (successfulScreenshots.length === 0) {
      toast({
        title: "没有可用的截图",
        description: "请先成功截图至少一个页面",
        variant: "destructive",
      })
      return
    }

setIsGeneratingDoc(true)

try {
      const docBuffer = await generateDocx(successfulScreenshots, documentSettings)

const blob = new Blob([docBuffer], {
        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      })

const url = URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = `${documentSettings.title.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, "_")}_${new Date().toISOString().split("T")[0]}.docx`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)

toast({
        title: "文档生成成功",
        description: `已生成包含 ${successfulScreenshots.length} 个截图的文档`,
      })
    } catch (error) {
      console.error("文档生成失败:", error)
      toast({
        title: "文档生成失败",
        description: error instanceof Error ? error.message : "未知错误",
        variant: "destructive",
      })
    } finally {
      setIsGeneratingDoc(false)
    }
  }

const deleteScreenshot = (id: string) => {
    setScreenshots((prev) => prev.filter((s) => s.id !== id))
    toast({
      title: "截图已删除",
      description: "截图已从列表中移除",
    })
  }

const clearAllScreenshots = () => {
    setScreenshots([])
    toast({
      title: "已清空所有截图",
      description: "所有截图已从列表中移除",
    })
  }

const previewPage = (url: string) => {
    setCurrentPreviewUrl(url)
  }

const getStatusIcon = (status: Screenshot["status"]) => {
    switch (status) {
      case "success":
        return <CheckCircle className="h-4 w-4 text-green-500" />
      case "failed":
        return <XCircle className="h-4 w-4 text-red-500" />
      case "capturing":
        return <Clock className="h-4 w-4 text-blue-500 animate-spin" />
      default:
        return <Clock className="h-4 w-4 text-gray-400" />
    }
  }

const getPreviewIcon = () => {
    switch (previewMode) {
      case "mobile":
        return <Smartphone className="h-4 w-4" />
      case "tablet":
        return <Tablet className="h-4 w-4" />
      default:
        return <Monitor className="h-4 w-4" />
    }
  }

return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">文档生成器</h1>
          <p className="text-muted-foreground mt-1">自动截图并生成系统文档</p>
        </div>
        <div className="flex items-center space-x-2">
          <Badge variant="outline" className="flex items-center space-x-1">
            <Zap className="h-3 w-3" />
            <span>增强版截图</span>
          </Badge>
        </div>
      </div>

<TabsContent value="capture" className="space-y-6">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div className="lg:col-span-2">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Globe className="h-5 w-5" />
                    <span>选择页面</span>
                  </CardTitle>
                  <CardDescription>选择需要截图的页面，支持多选</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                      <Button variant="outline" size="sm" onClick={selectAllPages}>
                        全选
                      </Button>
                      <Button variant="outline" size="sm" onClick={deselectAllPages}>
                        取消全选
                      </Button>
                    </div>
                    <Badge variant="secondary">
                      已选择 {selectedPages.length} / {pages.length} 个页面
                    </Badge>
                  </div>

<ScrollArea className="h-[400px]">
                    <div className="space-y-2">
                      {pages.map((page) => (
                        <div
                          key={page.path}
                          className="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50"
                        >
                          <Checkbox
                            checked={selectedPages.includes(page.path)}
                            onCheckedChange={(checked) => handlePageSelection(page.path, checked as boolean)}
                          />
                          <div className="flex-1 min-w-0">
                            <div className="font-medium">{page.name}</div>
                            <div className="text-sm text-muted-foreground truncate">{page.path}</div>
                            {page.description && (
                              <div className="text-xs text-muted-foreground mt-1">{page.description}</div>
                            )}
                          </div>
                          <Button variant="ghost" size="sm" onClick={() => previewPage(page.path)}>
                            <Eye className="h-4 w-4" />
                          </Button>
                        </div>
                      ))}
                    </div>
                  </ScrollArea>
                </CardContent>
              </Card>
            </div>

<div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Camera className="h-5 w-5" />
                    <span>开始截图</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  {isCapturing && (
                    <div className="space-y-2">
                      <div className="flex items-center justify-between text-sm">
                        <span>截图进度</span>
                        <span>{Math.round(captureProgress)}%</span>
                      </div>
                      <Progress value={captureProgress} />
                    </div>
                  )}

<Button
                    onClick={startCapture}
                    disabled={isCapturing || selectedPages.length === 0}
                    className="w-full"
                  >
                    {isCapturing ? (
                      <>
                        <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                        截图中...
                      </>
                    ) : (
                      <>
                        <Camera className="mr-2 h-4 w-4" />
                        开始截图
                      </>
                    )}
                  </Button>

<div className="text-sm text-muted-foreground">
                    <div className="flex items-center justify-between">
                      <span>总页面数:</span>
                      <span>{pages.length}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span>已选择:</span>
                      <span>{selectedPages.length}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <span>已截图:</span>
                      <span>{screenshots.length}</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </TabsContent>

<TabsContent value="screenshots" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                  <ImageIcon className="h-5 w-5" />
                  <span>截图管理</span>
                </div>
                <div className="flex items-center space-x-2">
                  <Badge variant="outline">{screenshots.filter((s) => s.status === "success").length} 成功</Badge>
                  <Badge variant="destructive">{screenshots.filter((s) => s.status === "failed").length} 失败</Badge>
                  {screenshots.length > 0 && (
                    <Button variant="outline" size="sm" onClick={clearAllScreenshots}>
                      <Trash2 className="h-4 w-4 mr-1" />
                      清空
                    </Button>
                  )}
                </div>
              </CardTitle>
              <CardDescription>管理已截取的页面截图</CardDescription>
            </CardHeader>
            <CardContent>
              {screenshots.length === 0 ? (
                <div className="text-center py-12 text-muted-foreground">
                  <ImageIcon className="h-12 w-12 mx-auto mb-4 opacity-50" />
                  <p>暂无截图</p>
                  <p className="text-sm">请先在"页面截图"标签页中截取页面</p>
                </div>
              ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  {screenshots.map((screenshot) => (
                    <Card key={screenshot.id} className="overflow-hidden">
                      <div className="aspect-video bg-gray-100 relative">
                        {screenshot.dataUrl ? (
                          <img
                            src={screenshot.dataUrl || "/placeholder.svg"}
                            alt={screenshot.name}
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          <div className="flex items-center justify-center h-full">
                            {screenshot.status === "capturing" ? (
                              <RefreshCw className="h-8 w-8 animate-spin text-blue-500" />
                            ) : (
                              <ImageIcon className="h-8 w-8 text-gray-400" />
                            )}
                          </div>
                        )}
                        <div className="absolute top-2 right-2">{getStatusIcon(screenshot.status)}</div>
                      </div>
                      <CardContent className="p-4">
                        <div className="space-y-2">
                          <div className="font-medium truncate">{screenshot.name}</div>
                          <div className="text-sm text-muted-foreground truncate">{screenshot.url}</div>
                          {screenshot.method && (
                            <Badge variant="outline" className="text-xs">
                              {screenshot.method}
                            </Badge>
                          )}
                          {screenshot.error && <div className="text-xs text-red-500 truncate">{screenshot.error}</div>}
                          <div className="text-xs text-muted-foreground">{screenshot.timestamp.toLocaleString()}</div>
                          <div className="flex items-center justify-between">
                            <div className="text-xs text-muted-foreground">
                              {screenshot.size && `${screenshot.size.width}×${screenshot.size.height}`}
                            </div>
                            <Button variant="ghost" size="sm" onClick={() => deleteScreenshot(screenshot.id)}>
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>

{screenshots.some((s) => s.status === "success") && (
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <FileText className="h-5 w-5" />
                  <span>生成文档</span>
                </CardTitle>
                <CardDescription>将成功的截图生成为Word文档</CardDescription>
              </CardHeader>
              <CardContent>
                <Button onClick={generateDocument} disabled={isGeneratingDoc} className="w-full">
                  {isGeneratingDoc ? (
                    <>
                      <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
                      生成中...
                    </>
                  ) : (
                    <>
                      <Download className="mr-2 h-4 w-4" />
                      生成Word文档
                    </>
                  )}
                </Button>
              </CardContent>
            </Card>
          )}
        </TabsContent>

<TabsContent value="settings" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Settings className="h-5 w-5" />
                <span>文档设置</span>
              </CardTitle>
              <CardDescription>配置生成的Word文档格式和内容</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium">文档标题</label>
                    <Input
                      value={documentSettings.title}
                      onChange={(e) =>
                        setDocumentSettings((prev) => ({
                          ...prev,
                          title: e.target.value,
                        }))
                      }
                      placeholder="输入文档标题"
                    />
                  </div>

<div className="space-y-2">
                    <label className="text-sm font-medium">作者</label>
                    <Input
                      value={documentSettings.author}
                      onChange={(e) =>
                        setDocumentSettings((prev) => ({
                          ...prev,
                          author: e.target.value,
                        }))
                      }
                      placeholder="输入作者姓名"
                    />
                  </div>

<div className="space-y-2">
                    <label className="text-sm font-medium">文档描述</label>
                    <Textarea
                      value={documentSettings.description}
                      onChange={(e) =>
                        setDocumentSettings((prev) => ({
                          ...prev,
                          description: e.target.value,
                        }))
                      }
                      placeholder="输入文档描述"
                      rows={3}
                    />
                  </div>
                </div>

<div className="space-y-4">
                  <div className="space-y-3">
                    <label className="text-sm font-medium">包含内容</label>
                    <div className="space-y-2">
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          checked={documentSettings.includeTimestamp}
                          onCheckedChange={(checked) =>
                            setDocumentSettings((prev) => ({
                              ...prev,
                              includeTimestamp: checked as boolean,
                            }))
                          }
                        />
                        <label className="text-sm">包含时间戳</label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          checked={documentSettings.includePageUrls}
                          onCheckedChange={(checked) =>
                            setDocumentSettings((prev) => ({
                              ...prev,
                              includePageUrls: checked as boolean,
                            }))
                          }
                        />
                        <label className="text-sm">包含页面URL</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/MobileHeader.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Menu, Search, Bell, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

interface MobileHeaderProps {
  onMenuToggle: () => void
  title?: string
}

export default function MobileHeader({ onMenuToggle, title = "卡若数据资产中台" }: MobileHeaderProps) {
  const [showSearch, setShowSearch] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")

return (
    <header className="glass-nav safe-area-top sticky top-0 z-50 mx-2 mt-2 mb-4">
      <div className="flex items-center justify-between px-4 py-3">
        {!showSearch ? (
          <>
            <div className="flex items-center space-x-3">
              <Button variant="ghost" size="icon" onClick={onMenuToggle} className="glass-light rounded-xl">
                <Menu className="h-5 w-5" />
              </Button>
              <h1 className="text-lg font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate">
                {title}
              </h1>
            </div>
            <div className="flex items-center space-x-2">
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setShowSearch(true)}
                className="glass-light rounded-xl"
              >
                <Search className="h-5 w-5" />
              </Button>
              <Button variant="ghost" size="icon" className="glass-light rounded-xl">
                <Bell className="h-5 w-5" />
              </Button>
            </div>
          </>
        ) : (
          <div className="flex items-center space-x-3 w-full">
            <div className="flex-1">
              <Input
                type="text"
                placeholder="搜索用户、IMEI、手机号..."
                className="glass-input border-none focus-visible:ring-0 focus-visible:ring-offset-0"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                autoFocus
              />
            </div>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => {
                setShowSearch(false)
                setSearchQuery("")
              }}
              className="glass-light rounded-xl"
            >
              <X className="h-5 w-5" />
            </Button>
          </div>
        )}
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/components/Header.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Bell, Search, Moon, Sun } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { useTheme } from "next-themes"

export default function Header() {
  const [searchQuery, setSearchQuery] = useState("")
  const { setTheme } = useTheme()

return (
    <header className="border-b border-border bg-card px-6 py-3">
      <div className="flex items-center justify-between">
        <div className="flex items-center w-full max-w-md">
          <Search className="h-4 w-4 text-muted-foreground mr-2" />
          <Input
            type="text"
            placeholder="搜索用户、IMEI、手机号、标签..."
            className="border-none focus-visible:ring-0 focus-visible:ring-offset-0"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
        <div className="flex items-center space-x-3">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="icon">
                <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
                <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                <span className="sr-only">切换主题</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => setTheme("light")}>浅色</DropdownMenuItem>
              <DropdownMenuItem onClick={() => setTheme("dark")}>深色</DropdownMenuItem>
              <DropdownMenuItem onClick={() => setTheme("system")}>系统</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          <Button variant="outline" size="icon">
            <Bell className="h-5 w-5" />
          </Button>
        </div>
      </div>
    </header>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import ClientLayout from "./ClientLayout"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "卡若数据资产中台",
  description: "基于IMEI、手机号的用户数据资产管理平台",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <ClientLayout>{children}</ClientLayout>
}
[V0_FILE]typescriptreact:file="app/user-pool/loading.tsx" isEdit="true" isMerged="true"
export default function Loading() {
  return (
    <div className="container mx-auto py-6 space-y-6">
      <div className="animate-pulse">
        <div className="h-8 bg-gray-200 rounded w-1/4 mb-2"></div>
        <div className="h-4 bg-gray-200 rounded w-1/2"></div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-5 gap-4">
        {[...Array(5)].map((_, i) => (
          <div key={i} className="animate-pulse">
            <div className="h-20 bg-gray-200 rounded"></div>
          </div>
        ))}
      </div>

<div className="animate-pulse">
        <div className="h-64 bg-gray-200 rounded"></div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/mongodb-mock-connector.ts" isMerged="true"
// lib/mongodb-mock-connector.ts
// 这是一个模拟 MongoDB 数据库连接器，用于在前端环境中模拟后端 MongoDB 的数据结构和操作。
// 在实际的 Next.js 应用中，您会使用 'mongodb' 或 'mongoose' 等库在服务器端建立真实的连接。

// 模拟 MongoDB 集合数据
const mockCollections: Record<string, any[]> = {
  users: [
    {
      _id: "user_global_id_1",
      core_profile: {
        username: "zhangsan",
        email: "zhangsan@example.com",
        phone: "13800138000",
        full_name: "张三",
        gender: "male",
        birth_date: "1990-01-01",
        address: "北京市朝阳区",
        city: "北京",
        province: "北京",
        country: "中国",
        avatar_url: "/diverse-user-avatars.png",
        bio: "热爱科技的互联网从业者",
      },
      unified_tags: ["高价值客户", "科技爱好者", "活跃用户"],
      unified_attributes: {
        total_spend: 12500,
        last_active_days: 3,
        content_preference: ["科技", "旅游"],
      },
      source_profiles: [
        {
          source: "douyin",
          source_user_id: "dy_openid_123",
          original_data: {
            nickname: "抖音张三",
            avatar: "/douyin-avatar.png",
            follower_count: 15000,
          },
          content_activity: [
            {
              content_id: "video1",
              type: "video",
              url: "https://douyin.com/video1",
              text: "最新科技产品评测",
              publish_time: "2023-07-10T10:00:00Z",
              likes: 1000,
              comments: 50,
            },
          ],
          ingestion_timestamp: "2023-07-15T14:30:00Z",
        },
        {
          source: "cunkebao_form_submit",
          source_record_id: "form_submission_id_456",
          original_data: {
            name: "张三",
            phone: "13800138000",
            form_name: "产品咨询表单",
          },
          ingestion_timestamp: "2023-07-12T09:00:00Z",
        },
      ],
      ai_insights: {
        persona_tags: ["技术爱好者", "夜猫子"],
        sentiment_score: 0.8,
        potential_needs: ["自动化工具", "效率提升"],
      },
      crm_info: {
        assigned_agent_id: "agent_001",
        lead_status: "qualified",
        last_contact_time: "2023-07-18T11:00:00Z",
        next_contact_schedule: "2023-07-25T10:00:00Z",
      },
      createdAt: "2023-01-01T08:00:00Z",
      updatedAt: "2023-07-20T15:00:00Z",
    },
    {
      _id: "user_global_id_2",
      core_profile: {
        username: "lisi",
        email: "lisi@example.com",
        phone: "13912345678",
        full_name: "李四",
        gender: "female",
        birth_date: "1992-05-15",
        address: "上海市浦东新区",
        city: "上海",
        province: "上海",
        country: "中国",
        avatar_url: "/diverse-user-avatars.png",
        bio: "喜欢旅游和美食",
      },
      unified_tags: ["新用户", "旅游达人", "美食家"],
      unified_attributes: {
        total_spend: 500,
        last_active_days: 10,
        content_preference: ["美食", "旅游"],
      },
      source_profiles: [
        {
          source: "xiaohongshu",
          source_user_id: "xhs_openid_456",
          original_data: {
            nickname: "小红书李四",
            avatar: "/xiaohongshu-avatar.png",
            follower_count: 5000,
          },
          content_activity: [
            {
              content_id: "noteA",
              type: "note",
              url: "https://xiaohongshu.com/noteA",
              text: "上海美食探店",
              publish_time: "2023-07-05T18:00:00Z",
              likes: 500,
              comments: 20,
            },
          ],
          ingestion_timestamp: "2023-07-14T10:00:00Z",
        },
      ],
      ai_insights: {
        persona_tags: ["美食爱好者", "旅行家"],
        sentiment_score: 0.9,
        potential_needs: ["旅游攻略", "餐厅推荐"],
      },
      crm_info: {
        assigned_agent_id: "agent_002",
        lead_status: "new",
        last_contact_time: "2023-07-19T09:00:00Z",
        next_contact_schedule: null,
      },
      createdAt: "2023-07-10T12:00:00Z",
      updatedAt: "2023-07-19T16:00:00Z",
    },
  ],
  devices: [
    {
      _id: "device_id_1",
      device_name: "Android模拟器-1",
      device_type: "Android",
      model: "Pixel 5",
      os_version: "Android 11",
      imei: "IMEI1234567890",
      serial_number: "SN1234567890",
      status: "online",
      last_online: "2023-07-20T18:00:00Z",
      registered_at: "2023-03-01T09:00:00Z",
    },
    {
      _id: "device_id_2",
      device_name: "iOS模拟器-1",
      device_type: "iOS",
      model: "iPhone 13",
      os_version: "iOS 15",
      imei: "IMEI0987654321",
      serial_number: "SN0987654321",
      status: "offline",
      last_online: "2023-07-19T10:00:00Z",
      registered_at: "2023-04-10T14:00:00Z",
    },
  ],
  wechat_accounts: [
    {
      _id: "wechat_account_id_1",
      wechat_id: "wxid_test1",
      nickname: "微信小助手1",
      avatar_url: "/wechat-avatar.png",
      qr_code_url: "/placeholder-8b0n0.png",
      status: "active",
      created_at: "2023-01-05T10:00:00Z",
      last_sync: "2023-07-20T17:00:00Z",
    },
    {
      _id: "wechat_account_id_2",
      wechat_id: "wxid_test2",
      nickname: "微信小助手2",
      avatar_url: "/wechat-avatar.png",
      qr_code_url: "/placeholder-8b0n0.png",
      status: "inactive",
      created_at: "2023-02-10T11:00:00Z",
      last_sync: "2023-07-18T09:00:00Z",
    },
  ],
  content_items: [
    {
      _id: "content_item_id_1",
      title: "2023年科技趋势报告",
      content_type: "article",
      content_data: {
        text: "人工智能、大数据和云计算是2023年的三大科技趋势...",
        images: ["/tech-report-abstract.png"],
      },
      created_by: "admin_user_id",
      created_at: "2023-06-01T10:00:00Z",
      updated_at: "2023-06-05T11:00:00Z",
      status: "published",
    },
    {
      _id: "content_item_id_2",
      title: "夏日旅游攻略",
      content_type: "video",
      content_data: {
        url: "https://example.com/travel-video.mp4",
        thumbnail: "/travel-video-thumbnail.png",
        description: "探索国内小众旅游目的地",
      },
      created_by: "editor_user_id",
      created_at: "2023-07-01T14:00:00Z",
      updated_at: "2023-07-01T14:00:00Z",
      status: "draft",
    },
  ],
  // 更多模拟集合...
}

// 模拟数据库名称，对应 MongoDB 的数据库概念
const mockDatabases = [
  { Database: "cunkebao_user_platform" },
  { Database: "cunkebao_traffic_analysis" },
  { Database: "cunkebao_content_library" },
  { Database: "cunkebao_wechat_management" },
  { Database: "cunkebao_device_management" },
]

// 模拟获取所有数据库（在这里是集合的逻辑分组）
export async function getDatabases() {
  return mockDatabases
}

// 模拟获取指定“数据库”中的所有“表”（在这里是集合）
export async function getTables(database: string) {
  // 根据模拟的数据库名称返回对应的集合列表
  if (database === "cunkebao_user_platform") {
    return [{ Tables_in_database: "users" }]
  } else if (database === "cunkebao_device_management") {
    return [{ Tables_in_database: "devices" }]
  } else if (database === "cunkebao_wechat_management") {
    return [{ Tables_in_database: "wechat_accounts" }]
  } else if (database === "cunkebao_content_library") {
    return [{ Tables_in_database: "content_items" }]
  }
  return []
}

// 模拟获取集合结构（MongoDB 没有严格的表结构，这里模拟返回字段示例）
export async function getTableStructure(database: string, collection: string) {
  // 这是一个简化的模拟，实际 MongoDB 不会返回这种 SQL 风格的结构
  // 而是通过分析文档来推断 schema
  if (mockCollections[collection]) {
    // 假设我们只返回第一个文档的键作为字段示例
    const sampleDoc = mockCollections[collection][0]
    if (sampleDoc) {
      return Object.keys(sampleDoc).map((key) => ({
        Field: key,
        Type: typeof sampleDoc[key] === "object" && sampleDoc[key] !== null ? "json" : typeof sampleDoc[key],
        Null: "YES", // MongoDB 默认允许 null
        Key: key === "_id" ? "PRI" : "", // 模拟主键
        Default: null,
        Extra: "",
      }))
    }
  }
  return []
}

// 模拟获取数据库完整结构信息
export async function getDatabaseStructure(database: string) {
  const structure: Record<string, any[]> = {}
  if (database === "cunkebao_user_platform") {
    structure.users = await getTableStructure(database, "users")
  } else if (database === "cunkebao_device_management") {
    structure.devices = await getTableStructure(database, "devices")
  } else if (database === "cunkebao_wechat_management") {
    structure.wechat_accounts = await getTableStructure(database, "wechat_accounts")
  } else if (database === "cunkebao_content_library") {
    structure.content_items = await getTableStructure(database, "content_items")
  }
  return structure
}

// 模拟获取集合中的数据
export async function getCollectionData(collectionName: string) {
  return mockCollections[collectionName] || []
}
[V0_FILE]typescript:file="app/api/database-structure/route.ts" isEdit="true" isMerged="true"
import { NextResponse } from "next/server"
import { getDatabases, getDatabaseStructure } from "@/lib/mongodb-mock-connector" // 更新导入路径

export async function GET(request: Request) {
  try {
    const { searchParams } = new URL(request.url)
    const database = searchParams.get("database")

if (database) {
      // 获取指定数据库的结构
      const structure = await getDatabaseStructure(database)
      return NextResponse.json({ success: true, data: structure })
    } else {
      // 获取所有数据库列表
      const databases = await getDatabases()
      return NextResponse.json({ success: true, data: databases })
    }
  } catch (error) {
    console.error("数据库结构查询失败:", error)
    return NextResponse.json(
      { success: false, message: "数据库结构查询失败", error: (error as Error).message },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="components/data-integration/ai-analysis-tools.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Checkbox } from "@/components/ui/checkbox"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  Brain,
  Lightbulb,
  BarChart,
  PieChart,
  Users,
  Tag,
  Play,
  Settings,
  Search,
  Filter,
  Copy,
  Check,
  Zap,
  Plus,
  Download,
} from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog"
import { useToast } from "@/components/ui/use-toast"
import { Textarea } from "@/components/ui/textarea"

interface AIAnalysisTask {
  id: string
  name: string
  type: string
  status: "pending" | "running" | "completed" | "failed"
  progress: number
  createdAt: string
  completedAt: string | null
  dataSource: string
  parameters: Record<string, any>
  result: any | null
}

interface AIModel {
  id: string
  name: string
  provider: string
  type: string
  capabilities: string[]
  apiEndpoint: string
  apiKey: string
  status: "active" | "inactive"
}

export function AIAnalysisTools() {
  const { toast } = useToast()
  const [activeTab, setActiveTab] = useState("analysis-tasks")
  const [isCreatingTask, setIsCreatingTask] = useState(false)
  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null)
  const [isAddingModel, setIsAddingModel] = useState(false)
  const [copiedText, setCopiedText] = useState<string | null>(null)

// 模拟AI分析任务
  const [aiTasks, setAiTasks] = useState<AIAnalysisTask[]>([
    {
      id: "task-1",
      name: "用户行为分析",
      type: "behavior-analysis",
      status: "completed",
      progress: 100,
      createdAt: "2023-07-20 10:15",
      completedAt: "2023-07-20 10:25",
      dataSource: "行为分析平台",
      parameters: {
        userSegment: "高价值用户",
        timeRange: "近30天",
        analysisDepth: "深度",
      },
      result: {
        summary: "高价值用户在过去30天内主要活跃在晚间时段，偏好浏览科技和旅游类内容，平均会话时长较长。",
        insights: [
          "用户主要在晚上9点至11点活跃",
          "科技类内容点击率高于平均水平58%",
          "平均会话时长为8.5分钟，高于普通用户3.2分钟",
          "移动端访问占比87%，其中iOS设备占65%",
        ],
        recommendations: [
          "在晚间时段推送个性化内容",
          "增加科技和旅游类内容的推荐权重",
          "针对长会话时长优化页面加载速度",
          "优化iOS端用户体验",
        ],
      },
    },
    {
      id: "task-2",
      name: "用户分群自动发现",
      type: "segment-discovery",
      status: "completed",
      progress: 100,
      createdAt: "2023-07-19 14:30",
      completedAt: "2023-07-19 15:10",
      dataSource: "用户数据库",
      parameters: {
        clusteringMethod: "K-Means",
        features: ["消费行为", "活跃度", "内容偏好"],
        maxClusters: 8,
      },
      result: {
        summary: "系统自动发现了5个明显的用户分群，其中包括高消费低活跃、高活跃低消费等特征明显的群体。",
        clusters: [
          {
            name: "高消费科技爱好者",
            size: 12500,
            characteristics: ["高消费", "科技内容偏好", "中等活跃度"],
          },
          {
            name: "活跃社交用户",
            size: 28900,
            characteristics: ["高活跃度", "社交内容偏好", "中等消费"],
          },
          {
            name: "奢侈品偶尔购买者",
            size: 8700,
            characteristics: ["低活跃度", "高单次消费", "奢侈品偏好"],
          },
          {
            name: "日常必需品购买者",
            size: 45600,
            characteristics: ["高频次低金额消费", "中等活跃度", "生活类内容偏好"],
          },
          {
            name: "休眠用户",
            size: 15400,
            characteristics: ["极低活跃度", "低消费", "无明显内容偏好"],
          },
        ],
      },
    },
    {
      id: "task-3",
      name: "用户流失预测",
      type: "churn-prediction",
      status: "running",
      progress: 65,
      createdAt: "2023-07-21 09:45",
      completedAt: null,
      dataSource: "用户数据库 & 行为分析平台",
      parameters: {
        predictionHorizon: "30天",
        modelType: "随机森林",
        features: ["活跃度", "消费频率", "客服交互", "产品使用情况"],
      },
      result: null,
    },
    {
      id: "task-4",
      name: "营销策略生成",
      type: "strategy-generation",
      status: "pending",
      progress: 0,
      createdAt: "2023-07-21 10:30",
      completedAt: null,
      dataSource: "用户画像 & 行为分析",
      parameters: {
        targetSegment: "流失风险用户",
        campaignGoal: "提高留存率",
        budgetConstraint: "中等",
        channelPreference: ["短信", "应用内推送", "邮件"],
      },
      result: null,
    },
    {
      id: "task-5",
      name: "自动标签生成",
      type: "tag-generation",
      status: "completed",
      progress: 100,
      createdAt: "2023-07-18 11:20",
      completedAt: "2023-07-18 12:05",
      dataSource: "用户数据库 & 行为分析平台",
      parameters: {
        tagCategories: ["兴趣", "消费习惯", "活跃模式"],
        minConfidence: 0.7,
        maxTagsPerUser: 10,
      },
      result: {
        summary: "系统为85%的用户生成了新标签，平均每用户5.3个标签。",
        tagCategories: [
          {
            name: "兴趣标签",
            count: 28,
            coverage: "92%",
            examples: ["科技爱好者", "旅游达人", "美食家", "运动健身"],
          },
          {
            name: "消费习惯",
            count: 15,
            coverage: "88%",
            examples: ["奢侈品偏好", "理性消费", "冲动购物", "价格敏感"],
          },
          {
            name: "活跃模式",
            count: 12,
            coverage: "95%",
            examples: ["工作时间活跃", "夜间活跃", "周末活跃", "低频高质"],
          },
        ],
      },
    },
  ])

// 模拟AI模型
  const [aiModels, setAiModels] = useState<AIModel[]>([
    {
      id: "model-1",
      name: "GPT-4",
      provider: "OpenAI",
      type: "大语言模型",
      capabilities: ["文本生成", "内容分析", "情感分析", "摘要生成"],
      apiEndpoint: "https://api.openai.com/v1/chat/completions",
      apiKey: "sk-***********",
      status: "active",
    },
    {
      id: "model-2",
      name: "Claude 2",
      provider: "Anthropic",
      type: "大语言模型",
      capabilities: ["文本生成", "内容分析", "代码生成", "问答"],
      apiEndpoint: "https://api.anthropic.com/v1/complete",
      apiKey: "sk-ant-***********",
      status: "active",
    },
    {
      id: "model-3",
      name: "MCP SERVER AI",
      provider: "内部服务",
      type: "专用分析模型",
      capabilities: ["用户行为分析", "分群发现", "标签生成", "预测模型"],
      apiEndpoint: "https://mcp.example.com/api/analyze",
      apiKey: "mcp-***********",
      status: "active",
    },
    {
      id: "model-4",
      name: "DALL-E 3",
      provider: "OpenAI",
      type: "图像生成模型",
      capabilities: ["图像生成", "图像编辑", "风格迁移"],
      apiEndpoint: "https://api.openai.com/v1/images/generations",
      apiKey: "sk-***********",
      status: "inactive",
    },
  ])

// 模拟分析模板
  const analysisTemplates = [
    {
      id: "template-1",
      name: "用户行为分析",
      description: "分析用户的行为模式、偏好和习惯",
      type: "behavior-analysis",
      parameters: {
        userSegment: "所有用户",
        timeRange: "近30天",
        analysisDepth: "标准",
      },
    },
    {
      id: "template-2",
      name: "用户分群发现",
      description: "自动发现数据中的用户分群",
      type: "segment-discovery",
      parameters: {
        clusteringMethod: "K-Means",
        features: ["消费行为", "活跃度", "内容偏好"],
        maxClusters: 8,
      },
    },
    {
      id: "template-3",
      name: "用户流失预测",
      description: "预测未来可能流失的用户",
      type: "churn-prediction",
      parameters: {
        predictionHorizon: "30天",
        modelType: "随机森林",
        features: ["活跃度", "消费频率", "客服交互", "产品使用情况"],
      },
    },
    {
      id: "template-4",
      name: "营销策略生成",
      description: "为特定用户分群生成营销策略",
      type: "strategy-generation",
      parameters: {
        targetSegment: "流失风险用户",
        campaignGoal: "提高留存率",
        budgetConstraint: "中等",
        channelPreference: ["短信", "应用内推送", "邮件"],
      },
    },
    {
      id: "template-5",
      name: "自动标签生成",
      description: "基于用户数据自动生成用户标签",
      type: "tag-generation",
      parameters: {
        tagCategories: ["兴趣", "消费习惯", "活跃模式"],
        minConfidence: 0.7,
        maxTagsPerUser: 10,
      },
    },
  ]

const getStatusBadge = (status: string) => {
    switch (status) {
      case "pending":
        return <Badge className="bg-gray-100 text-gray-800">等待中</Badge>
      case "running":
        return <Badge className="bg-blue-100 text-blue-800">运行中</Badge>
      case "completed":
        return <Badge className="bg-green-100 text-green-800">已完成</Badge>
      case "failed":
        return <Badge className="bg-red-100 text-red-800">失败</Badge>
      case "active":
        return <Badge className="bg-green-100 text-green-800">已启用</Badge>
      case "inactive":
        return <Badge className="bg-gray-100 text-gray-800">已禁用</Badge>
      default:
        return <Badge>未知</Badge>
    }
  }

const getTaskTypeIcon = (type: string) => {
    switch (type) {
      case "behavior-analysis":
        return <Users className="h-5 w-5 text-blue-500" />
      case "segment-discovery":
        return <PieChart className="h-5 w-5 text-purple-500" />
      case "churn-prediction":
        return <BarChart className="h-5 w-5 text-orange-500" />
      case "strategy-generation":
        return <Lightbulb className="h-5 w-5 text-yellow-500" />
      case "tag-generation":
        return <Tag className="h-5 w-5 text-green-500" />
      default:
        return <Brain className="h-5 w-5" />
    }
  }

const selectedTask = selectedTaskId ? aiTasks.find((task) => task.id === selectedTaskId) : null

const handleCopyText = (text: string) => {
    navigator.clipboard.writeText(text)
    setCopiedText(text)
    toast({
      title: "已复制到剪贴板",
      description: "文本已成功复制到剪贴板",
    })
    setTimeout(() => setCopiedText(null), 2000)
  }

const toggleModelStatus = (id: string) => {
    setAiModels(
      aiModels.map((model) => {
        if (model.id === id) {
          return {
            ...model,
            status: model.status === "active" ? "inactive" : "active",
          }
        }
        return model
      }),
    )
  }

return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">AI分析工具</h2>
        <div className="flex items-center gap-2">
          <Button variant="outline">
            <Settings className="mr-2 h-4 w-4" />
            AI设置
          </Button>
          <Button onClick={() => setIsCreatingTask(true)}>
            <Brain className="mr-2 h-4 w-4" />
            创建分析任务
          </Button>
        </div>
      </div>

<TabsContent value="analysis-tasks" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex justify-between items-center">
                <CardTitle>AI分析任务</CardTitle>
                <div className="flex items-center gap-2">
                  <div className="relative">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input type="text" placeholder="搜索任务..." className="pl-8 w-[200px]" />
                  </div>
                  <Select defaultValue="all">
                    <SelectTrigger className="w-[150px]">
                      <Filter className="mr-2 h-4 w-4" />
                      <SelectValue placeholder="任务状态" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">所有状态</SelectItem>
                      <SelectItem value="pending">等待中</SelectItem>
                      <SelectItem value="running">运行中</SelectItem>
                      <SelectItem value="completed">已完成</SelectItem>
                      <SelectItem value="failed">失败</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-[50px]">类型</TableHead>
                      <TableHead>任务名称</TableHead>
                      <TableHead>数据源</TableHead>
                      <TableHead>创建时间</TableHead>
                      <TableHead>状态</TableHead>
                      <TableHead>进度</TableHead>
                      <TableHead className="text-right">操作</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {aiTasks.map((task) => (
                      <TableRow key={task.id}>
                        <TableCell>{getTaskTypeIcon(task.type)}</TableCell>
                        <TableCell className="font-medium">{task.name}</TableCell>
                        <TableCell>{task.dataSource}</TableCell>
                        <TableCell>{task.createdAt}</TableCell>
                        <TableCell>{getStatusBadge(task.status)}</TableCell>
                        <TableCell>
                          <div className="w-full bg-gray-200 rounded-full h-2.5">
                            <div
                              className={`h-2.5 rounded-full ${
                                task.status === "completed"
                                  ? "bg-green-600"
                                  : task.status === "running"
                                    ? "bg-blue-600"
                                    : task.status === "failed"
                                      ? "bg-red-600"
                                      : "bg-gray-400"
                              }`}
                              style={{ width: `${task.progress}%` }}
                            ></div>
                          </div>
                        </TableCell>
                        <TableCell className="text-right">
                          <Button variant="ghost" size="sm" onClick={() => setSelectedTaskId(task.id)}>
                            查看详情
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="ai-models" className="space-y-4">
          <Card>
            <CardHeader>
              <div className="flex justify-between items-center">
                <CardTitle>AI模型管理</CardTitle>
                <Button onClick={() => setIsAddingModel(true)}>添加模型</Button>
              </div>
            </CardHeader>
            <CardContent>
              <div className="rounded-md border">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>模型名称</TableHead>
                      <TableHead>提供商</TableHead>
                      <TableHead>类型</TableHead>
                      <TableHead>能力</TableHead>
                      <TableHead>API端点</TableHead>
                      <TableHead>状态</TableHead>
                      <TableHead className="text-right">操作</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {aiModels.map((model) => (
                      <TableRow key={model.id}>
                        <TableCell className="font-medium">{model.name}</TableCell>
                        <TableCell>{model.provider}</TableCell>
                        <TableCell>{model.type}</TableCell>
                        <TableCell>
                          <div className="flex flex-wrap gap-1">
                            {model.capabilities.slice(0, 2).map((capability, index) => (
                              <Badge key={index} variant="outline">
                                {capability}
                              </Badge>
                            ))}
                            {model.capabilities.length > 2 && (
                              <Badge variant="outline">+{model.capabilities.length - 2}</Badge>
                            )}
                          </div>
                        </TableCell>
                        <TableCell className="max-w-[200px] truncate">{model.apiEndpoint}</TableCell>
                        <TableCell>
                          <div className="flex items-center space-x-2">
                            <Switch
                              checked={model.status === "active"}
                              onCheckedChange={() => toggleModelStatus(model.id)}
                              aria-label="Toggle model"
                            />
                            <span>{getStatusBadge(model.status)}</span>
                          </div>
                        </TableCell>
                        <TableCell className="text-right">
                          <div className="flex justify-end space-x-2">
                            <Button variant="ghost" size="sm">
                              编辑
                            </Button>
                            <Button variant="ghost" size="sm">
                              测试
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>MCP SERVER配置</CardTitle>
              <CardDescription>配置MCP SERVER AI工具的分析参数</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="mcp-server-url">服务器地址</Label>
                  <Input id="mcp-server-url" defaultValue="https://mcp.example.com/api" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="mcp-api-key">API密钥</Label>
                  <Input id="mcp-api-key" type="password" defaultValue="••••••••••••••••" />
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="mcp-model">AI模型选择</Label>
                <Select defaultValue="gpt-4">
                  <SelectTrigger id="mcp-model">
                    <SelectValue placeholder="选择AI模型" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="gpt-4">GPT-4</SelectItem>
                    <SelectItem value="gpt-3.5-turbo">GPT-3.5 Turbo</SelectItem>
                    <SelectItem value="claude-2">Claude 2</SelectItem>
                    <SelectItem value="llama-2">Llama 2</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label>分析能力配置</Label>
                <div className="grid grid-cols-2 gap-2">
                  <div className="flex items-center space-x-2">
                    <Switch id="behavior-analysis" defaultChecked />
                    <Label htmlFor="behavior-analysis">行为分析</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Switch id="segment-discovery" defaultChecked />
                    <Label htmlFor="segment-discovery">分群发现</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Switch id="churn-prediction" defaultChecked />
                    <Label htmlFor="churn-prediction">流失预测</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Switch id="tag-generation" defaultChecked />
                    <Label htmlFor="tag-generation">标签生成</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Switch id="strategy-generation" defaultChecked />
                    <Label htmlFor="strategy-generation">策略生成</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Switch id="content-generation" defaultChecked />
                    <Label htmlFor="content-generation">内容生成</Label>
                  </div>
                </div>
              </div>

<div className="flex justify-end">
                <Button>保存MCP配置</Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="templates" className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {analysisTemplates.map((template) => (
              <Card key={template.id} className="border shadow-sm">
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      {getTaskTypeIcon(template.type)}
                      <CardTitle className="text-lg">{template.name}</CardTitle>
                    </div>
                    <Button variant="ghost" size="icon">
                      <Settings className="h-4 w-4" />
                    </Button>
                  </div>
                  <CardDescription>{template.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-2">
                    <h4 className="text-sm font-medium">默认参数</h4>
                    <div className="text-sm">
                      {Object.entries(template.parameters).map(([key, value]) => (
                        <div key={key} className="flex justify-between py-1 border-b border-dashed border-gray-200">
                          <span className="text-muted-foreground">{key}:</span>
                          <span className="font-medium">
                            {Array.isArray(value) ? value.join(", ") : value.toString()}
                          </span>
                        </div>
                      ))}
                    </div>
                  </div>
                  <div className="mt-4 flex justify-end">
                    <Button onClick={() => setIsCreatingTask(true)}>
                      <Play className="mr-2 h-4 w-4" />
                      使用模板
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}

<Card className="border shadow-sm border-dashed">
              <CardContent className="p-6 flex flex-col items-center justify-center h-full">
                <div className="rounded-full bg-muted p-3 mb-4">
                  <Plus className="h-6 w-6 text-muted-foreground" />
                </div>
                <h3 className="text-lg font-medium mb-2">创建新模板</h3>
                <p className="text-sm text-muted-foreground text-center mb-4">创建自定义分析模板，保存常用的分析配置</p>
                <Button variant="outline">创建模板</Button>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="settings" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>AI分析设置</CardTitle>
              <CardDescription>配置AI分析的全局设置</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label htmlFor="enable-ai">启用AI分析</Label>
                  <Switch id="enable-ai" defaultChecked />
                </div>
                <p className="text-sm text-muted-foreground">关闭后，所有AI分析功能将暂停</p>
              </div>

<div className="space-y-2">
                <Label htmlFor="default-model">默认AI模型</Label>
                <Select defaultValue="model-3">
                  <SelectTrigger id="default-model">
                    <SelectValue placeholder="选择默认模型" />
                  </SelectTrigger>
                  <SelectContent>
                    {aiModels
                      .filter((model) => model.status === "active")
                      .map((model) => (
                        <SelectItem key={model.id} value={model.id}>
                          {model.name} ({model.provider})
                        </SelectItem>
                      ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="analysis-concurrency">并发分析任务数</Label>
                <Select defaultValue="3">
                  <SelectTrigger id="analysis-concurrency">
                    <SelectValue placeholder="选择并发任务数" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="1">1</SelectItem>
                    <SelectItem value="3">3</SelectItem>
                    <SelectItem value="5">5</SelectItem>
                    <SelectItem value="10">10</SelectItem>
                  </SelectContent>
                </Select>
                <p className="text-sm text-muted-foreground">设置同时执行的AI分析任务数量，数值越大系统负载越高</p>
              </div>

<div className="space-y-2">
                <Label>数据访问权限</Label>
                <div className="grid grid-cols-2 gap-2">
                  <div className="flex items-center space-x-2">
                    <Checkbox id="access-user-db" defaultChecked />
                    <Label htmlFor="access-user-db">用户数据库</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="access-transaction" defaultChecked />
                    <Label htmlFor="access-transaction">交易系统</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="access-behavior" defaultChecked />
                    <Label htmlFor="access-behavior">行为分析平台</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="access-user-value" defaultChecked />
                    <Label htmlFor="access-user-value">用户价值模型</Label>
                  </div>
                </div>
              </div>

<div className="space-y-2">
                <Label>数据处理设置</Label>
                <div className="grid grid-cols-2 gap-2">
                  <div className="flex items-center space-x-2">
                    <Checkbox id="anonymize-data" defaultChecked />
                    <Label htmlFor="anonymize-data">数据匿名化</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="cache-results" defaultChecked />
                    <Label htmlFor="cache-results">缓存分析结果</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="auto-update" defaultChecked />
                    <Label htmlFor="auto-update">自动更新分析</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="save-history" defaultChecked />
                    <Label htmlFor="save-history">保存分析历史</Label>
                  </div>
                </div>
              </div>

<div className="space-y-2">
                <Label>通知设置</Label>
                <div className="grid grid-cols-2 gap-2">
                  <div className="flex items-center space-x-2">
                    <Checkbox id="notify-completion" defaultChecked />
                    <Label htmlFor="notify-completion">分析完成通知</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="notify-error" defaultChecked />
                    <Label htmlFor="notify-error">错误通知</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="notify-insight" defaultChecked />
                    <Label htmlFor="notify-insight">重要洞察通知</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <Checkbox id="notify-email" defaultChecked />
                    <Label htmlFor="notify-email">邮件通知</Label>
                  </div>
                </div>
              </div>

{/* 任务详情对话框 */}
      <Dialog open={!!selectedTaskId} onOpenChange={(open) => !open && setSelectedTaskId(null)}>
        <DialogContent className="sm:max-w-[700px]">
          <DialogHeader>
            <DialogTitle>分析任务详情</DialogTitle>
            <DialogDescription>查看AI分析任务的详细信息和结果</DialogDescription>
          </DialogHeader>
          {selectedTask && (
            <div className="space-y-4 py-4">
              <div className="flex items-center gap-4">
                {getTaskTypeIcon(selectedTask.type)}
                <div>
                  <h3 className="font-medium text-lg">{selectedTask.name}</h3>
                  <p className="text-sm text-muted-foreground">
                    {selectedTask.dataSource} | 创建于 {selectedTask.createdAt}
                  </p>
                </div>
                <div className="ml-auto">{getStatusBadge(selectedTask.status)}</div>
              </div>

<div className="space-y-2">
                <h4 className="text-sm font-medium">分析参数</h4>
                <div className="grid grid-cols-2 gap-2">
                  {Object.entries(selectedTask.parameters).map(([key, value]) => (
                    <div key={key} className="flex justify-between py-1 border-b border-dashed border-gray-200">
                      <span className="text-sm text-muted-foreground">{key}:</span>
                      <span className="text-sm font-medium">
                        {Array.isArray(value) ? value.join(", ") : value.toString()}
                      </span>
                    </div>
                  ))}
                </div>
              </div>

{selectedTask.status === "running" && (
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <h4 className="text-sm font-medium">分析进度</h4>
                    <span className="text-sm font-medium">{selectedTask.progress}%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div
                      className="bg-blue-600 h-2.5 rounded-full"
                      style={{ width: `${selectedTask.progress}%` }}
                    ></div>
                  </div>
                  <p className="text-xs text-muted-foreground">
                    正在处理数据...预计剩余时间: {Math.round((100 - selectedTask.progress) / 10)} 分钟
                  </p>
                </div>
              )}

{selectedTask.result && (
                <div className="space-y-4">
                  <Separator />

<div className="space-y-2">
                    <div className="flex justify-between items-center">
                      <h4 className="text-sm font-medium">分析摘要</h4>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => handleCopyText(selectedTask.result.summary)}
                        className="h-7"
                      >
                        {copiedText === selectedTask.result.summary ? (
                          <Check className="h-3 w-3 mr-1" />
                        ) : (
                          <Copy className="h-3 w-3 mr-1" />
                        )}
                        复制
                      </Button>
                    </div>
                    <div className="p-3 bg-muted rounded-md text-sm">{selectedTask.result.summary}</div>
                  </div>

{selectedTask.result.insights && (
                    <div className="space-y-2">
                      <h4 className="text-sm font-medium">关键洞察</h4>
                      <div className="space-y-1">
                        {selectedTask.result.insights.map((insight: string, index: number) => (
                          <div key={index} className="flex items-start gap-2">
                            <Lightbulb className="h-4 w-4 text-yellow-500 mt-0.5" />
                            <p className="text-sm">{insight}</p>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

{selectedTask.result.recommendations && (
                    <div className="space-y-2">
                      <h4 className="text-sm font-medium">建议</h4>
                      <div className="space-y-1">
                        {selectedTask.result.recommendations.map((recommendation: string, index: number) => (
                          <div key={index} className="flex items-start gap-2">
                            <Zap className="h-4 w-4 text-blue-500 mt-0.5" />
                            <p className="text-sm">{recommendation}</p>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}

{selectedTask.result.clusters && (
                    <div className="space-y-2">
                      <h4 className="text-sm font-medium">发现的用户分群</h4>
                      <div className="rounded-md border">
                        <Table>
                          <TableHeader>
                            <TableRow>
                              <TableHead>分群名称</TableHead>
                              <TableHead>用户数</TableHead>
                              <TableHead>特征</TableHead>
                            </TableRow>
                          </TableHeader>
                          <TableBody>
                            {selectedTask.result.clusters.map((cluster: any, index: number) => (
                              <TableRow key={index}>
                                <TableCell className="font-medium">{cluster.name}</TableCell>
                                <TableCell>{cluster.size.toLocaleString()}</TableCell>
                                <TableCell>
                                  <div className="flex flex-wrap gap-1">
                                    {cluster.characteristics.map((char: string, charIndex: number) => (
                                      <Badge key={charIndex} variant="outline">
                                        {char}
                                      </Badge>
                                    ))}
                                  </div>
                                </TableCell>
                              </TableRow>
                            ))}
                          </TableBody>
                        </Table>
                      </div>
                    </div>
                  )}

{selectedTask.result.tagCategories && (
                    <div className="space-y-2">
                      <h4 className="text-sm font-medium">生成的标签分类</h4>
                      <div className="rounded-md border">
                        <Table>
                          <TableHeader>
                            <TableRow>
                              <TableHead>分类名称</TableHead>
                              <TableHead>标签数量</TableHead>
                              <TableHead>覆盖率</TableHead>
                              <TableHead>示例标签</TableHead>
                            </TableRow>
                          </TableHeader>
                          <TableBody>
                            {selectedTask.result.tagCategories.map((category: any, index: number) => (
                              <TableRow key={index}>
                                <TableCell className="font-medium">{category.name}</TableCell>
                                <TableCell>{category.count}</TableCell>
                                <TableCell>{category.coverage}</TableCell>
                                <TableCell>
                                  <div className="flex flex-wrap gap-1">
                                    {category.examples.map((example: string, exampleIndex: number) => (
                                      <Badge key={exampleIndex} variant="outline">
                                        {example}
                                      </Badge>
                                    ))}
                                  </div>
                                </TableCell>
                              </TableRow>
                            ))}
                          </TableBody>
                        </Table>
                      </div>
                    </div>
                  )}
                </div>
              )}
            </div>
          )}
          <DialogFooter>
            <Button variant="outline" onClick={() => setSelectedTaskId(null)}>
              关闭
            </Button>
            {selectedTask?.status === "completed" && (
              <Button>
                <Download className="mr-2 h-4 w-4" />
                下载报告
              </Button>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* 添加模型对话框 */}
      <Dialog open={isAddingModel} onOpenChange={setIsAddingModel}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>添加AI模型</DialogTitle>
            <DialogDescription>配置新的AI模型连接</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="model-name" className="text-right">
                模型名称
              </Label>
              <Input id="model-name" className="col-span-3" placeholder="例如：GPT-4" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="model-provider" className="text-right">
                提供商
              </Label>
              <Input id="model-provider" className="col-span-3" placeholder="例如：OpenAI" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="model-type" className="text-right">
                模型类型
              </Label>
              <Select>
                <SelectTrigger id="model-type" className="col-span-3">
                  <SelectValue placeholder="选择模型类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="llm">大语言模型</SelectItem>
                  <SelectItem value="image-gen">图像生成模型</SelectItem>
                  <SelectItem value="custom">专用分析模型</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="api-endpoint" className="text-right">
                API端点
              </Label>
              <Input id="api-endpoint" className="col-span-3" placeholder="例如：https://api.openai.com/v1/chat" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="api-key" className="text-right">
                API密钥
              </Label>
              <Input id="api-key" type="password" className="col-span-3" placeholder="输入API密钥" />
            </div>
            <div className="grid grid-cols-4 items-start gap-4">
              <Label htmlFor="capabilities" className="text-right pt-2">
                能力
              </Label>
              <Textarea id="capabilities" className="col-span-3" placeholder="例如：文本生成, 内容分析" rows={3} />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <div className="text-right">
                <Label htmlFor="model-status">启用模型</Label>
              </div>
              <div className="flex items-center space-x-2 col-span-3">
                <Switch id="model-status" defaultChecked />
                <Label htmlFor="model-status">立即启用此模型</Label>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsAddingModel(false)}>
              取消
            </Button>
            <Button onClick={() => setIsAddingModel(false)}>添加模型</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

{/* 创建分析任务对话框 */}
      <Dialog open={isCreatingTask} onOpenChange={setIsCreatingTask}>
        <DialogContent className="sm:max-w-[600px]">
          <DialogHeader>
            <DialogTitle>创建新的分析任务</DialogTitle>
            <DialogDescription>选择分析类型并配置参数</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="task-name" className="text-right">
                任务名称
              </Label>
              <Input id="task-name" className="col-span-3" placeholder="例如：高价值用户流失预测" />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="task-type" className="text-right">
                分析类型
              </Label>
              <Select>
                <SelectTrigger id="task-type" className="col-span-3">
                  <SelectValue placeholder="选择分析类型" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="behavior-analysis">用户行为分析</SelectItem>
                  <SelectItem value="segment-discovery">用户分群自动发现</SelectItem>
                  <SelectItem value="churn-prediction">用户流失预测</SelectItem>
                  <SelectItem value="strategy-generation">营销策略生成</SelectItem>
                  <SelectItem value="tag-generation">自动标签生成</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="task-datasource" className="text-right">
                数据源
              </Label>
              <Select>
                <SelectTrigger id="task-datasource" className="col-span-3">
                  <SelectValue placeholder="选择数据源" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有数据源</SelectItem>
                  <SelectItem value="user-db">用户数据库</SelectItem>
                  <SelectItem value="transaction">交易系统</SelectItem>
                  <SelectItem value="behavior">行为分析平台</SelectItem>
                  <SelectItem value="user-value">用户价值模型</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="grid grid-cols-4 items-start gap-4">
              <Label htmlFor="task-parameters" className="text-right pt-2">
                分析参数
              </Label>
              <Textarea
                id="task-parameters"
                className="col-span-3"
                placeholder="输入JSON格式的分析参数，例如：{ 'userSegment': '高价值用户', 'timeRange': '近30天' }"
                rows={5}
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <div className="text-right">
                <Label htmlFor="schedule-task">定期运行</Label>
              </div>
              <div className="flex items-center space-x-2 col-span-3">
                <Switch id="schedule-task" />
                <Label htmlFor="schedule-task">定期执行此任务</Label>
              </div>
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsCreatingTask(false)}>
              取消
            </Button>
            <Button onClick={() => setIsCreatingTask(false)}>
              <Play className="mr-2 h-4 w-4" />
              创建任务
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]png:file="public/diverse-user-avatars.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/diverse-user-avatars-jNaliJbW5b5ccprrlYjj99XE0SOY9L.png" isMerged="true"
[V0_FILE]png:file="public/douyin-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/douyin-avatar-IP7cbbCvNkyJfy7pWvfTJJdlsqdCSY.png" isMerged="true"
[V0_FILE]png:file="public/xiaohongshu-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/xiaohongshu-avatar-AqUNjWWZQtrAhGJ3R9rtSyw81lHLwd.png" isMerged="true"
[V0_FILE]png:file="public/wechat-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wechat-avatar-r9ozDugao3byoQzsEZy0PMnhKruPQW.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-8b0n0.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/tech-report-abstract.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tech-report-abstract-ZcTjGYO925HWx69YeHdGQOwIQFkdRj.png" isMerged="true"
[V0_FILE]png:file="public/travel-video-thumbnail.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/travel-video-thumbnail-5A8BhxvgDCFns6CXfanxKY0cCYbXjq.png" isMerged="true"
[V0_FILE]typescript:file="lib/data-dictionary.ts" isMerged="true"
// 数据字典和映射规则管理
// 根据需求文档中的要求，创建动态维护的数据字典

export interface DataField {
  name: string
  type: "string" | "number" | "boolean" | "date" | "json" | "array"
  description: string
  isRequired: boolean
  isPII: boolean // 个人身份信息标识
  isIdentityKey: boolean // 身份识别关键字段
  isAIFeature: boolean // 用于AI分析的特征字段
  isDistributionKey: boolean // 用于分销/返点计算的关联字段
}

export interface SourceMapping {
  sourceSystem: string
  sourceField: string
  targetField: string
  transformRule?: string
  validationRule?: string
}

export interface DataDictionary {
  coreFields: Record<string, DataField>
  unifiedTags: string[]
  unifiedAttributes: Record<string, DataField>
  sourceMappings: Record<string, SourceMapping[]>
}

// 核心数据字典定义
export const DATA_DICTIONARY: DataDictionary = {
  coreFields: {
    userId: {
      name: "userId",
      type: "string",
      description: "全局唯一用户ID",
      isRequired: true,
      isPII: false,
      isIdentityKey: true,
      isAIFeature: false,
      isDistributionKey: true,
    },
    username: {
      name: "username",
      type: "string",
      description: "用户名",
      isRequired: false,
      isPII: true,
      isIdentityKey: true,
      isAIFeature: true,
      isDistributionKey: false,
    },
    email: {
      name: "email",
      type: "string",
      description: "邮箱地址",
      isRequired: false,
      isPII: true,
      isIdentityKey: true,
      isAIFeature: false,
      isDistributionKey: false,
    },
    phone: {
      name: "phone",
      type: "string",
      description: "手机号码",
      isRequired: false,
      isPII: true,
      isIdentityKey: true,
      isAIFeature: false,
      isDistributionKey: false,
    },
    fullName: {
      name: "fullName",
      type: "string",
      description: "真实姓名",
      isRequired: false,
      isPII: true,
      isIdentityKey: true,
      isAIFeature: true,
      isDistributionKey: false,
    },
    gender: {
      name: "gender",
      type: "string",
      description: "性别",
      isRequired: false,
      isPII: false,
      isIdentityKey: false,
      isAIFeature: true,
      isDistributionKey: false,
    },
    birthDate: {
      name: "birthDate",
      type: "date",
      description: "出生日期",
      isRequired: false,
      isPII: true,
      isIdentityKey: false,
      isAIFeature: true,
      isDistributionKey: false,
    },
    city: {
      name: "city",
      type: "string",
      description: "所在城市",
      isRequired: false,
      isPII: false,
      isIdentityKey: false,
      isAIFeature: true,
      isDistributionKey: false,
    },
    province: {
      name: "province",
      type: "string",
      description: "所在省份",
      isRequired: false,
      isPII: false,
      isIdentityKey: false,
      isAIFeature: true,
      isDistributionKey: false,
    },
  },
  unifiedTags: [
    "高价值客户",
    "新用户",
    "活跃用户",
    "流失风险",
    "科技爱好者",
    "内容创作者",
    "90后",
    "00后",
    "北京地区",
    "上海地区",
    "游戏爱好者",
    "旅游达人",
    "美食家",
  ],
  unifiedAttributes: {
    totalSpend: {
      name: "totalSpend",
      type: "number",
      description: "总消费金额",
      isRequired: false,
      isPII: false,
      isIdentityKey: false,
      isAIFeature: true,
      isDistributionKey: true,
    },
    lastActiveDays: {
      name: "lastActiveDays",
      type: "number",
      description: "最后活跃天数",
      isRequired: false,
      isPII: false,
      isIdentityKey: false,
      isAIFeature: true,
      isDistributionKey: false,
    },
    contentPreference: {
      name: "contentPreference",
      type: "array",
      description: "内容偏好",
      isRequired: false,
      isPII: false,
      isIdentityKey: false,
      isAIFeature: true,
      isDistributionKey: false,
    },
    distributionLevel: {
      name: "distributionLevel",
      type: "number",
      description: "分销层级",
      isRequired: false,
      isPII: false,
      isIdentityKey: false,
      isAIFeature: false,
      isDistributionKey: true,
    },
  },
  sourceMappings: {
    douyin: [
      { sourceSystem: "douyin", sourceField: "openid", targetField: "userId", transformRule: "prefix_dy_" },
      { sourceSystem: "douyin", sourceField: "nickname", targetField: "username" },
      { sourceSystem: "douyin", sourceField: "avatar", targetField: "avatarUrl" },
    ],
    xiaohongshu: [
      { sourceSystem: "xiaohongshu", sourceField: "openid", targetField: "userId", transformRule: "prefix_xhs_" },
      { sourceSystem: "xiaohongshu", sourceField: "nickname", targetField: "username" },
    ],
    cunkebao_form: [
      { sourceSystem: "cunkebao_form", sourceField: "name", targetField: "fullName" },
      { sourceSystem: "cunkebao_form", sourceField: "phone", targetField: "phone" },
      { sourceSystem: "cunkebao_form", sourceField: "email", targetField: "email" },
    ],
    touchkebao_call: [
      { sourceSystem: "touchkebao_call", sourceField: "phone_number", targetField: "phone" },
      { sourceSystem: "touchkebao_call", sourceField: "call_time", targetField: "lastContactTime" },
    ],
  },
}

// 获取字段映射规则
export function getFieldMapping(sourceSystem: string, sourceField: string): SourceMapping | undefined {
  const mappings = DATA_DICTIONARY.sourceMappings[sourceSystem]
  return mappings?.find((mapping) => mapping.sourceField === sourceField)
}

// 获取身份识别关键字段
export function getIdentityKeyFields(): string[] {
  return Object.entries(DATA_DICTIONARY.coreFields)
    .filter(([_, field]) => field.isIdentityKey)
    .map(([name, _]) => name)
}

// 获取AI特征字段
export function getAIFeatureFields(): string[] {
  return Object.entries(DATA_DICTIONARY.coreFields)
    .filter(([_, field]) => field.isAIFeature)
    .map(([name, _]) => name)
}

// 获取分销关联字段
export function getDistributionKeyFields(): string[] {
  return Object.entries(DATA_DICTIONARY.coreFields)
    .filter(([_, field]) => field.isDistributionKey)
    .map(([name, _]) => name)
}
[V0_FILE]typescript:file="services/IdentityService.ts" isMerged="true"
// 身份识别与合并服务
// 实现基于数据字典标识的关键字段的匹配逻辑

import { getIdentityKeyFields } from "@/lib/data-dictionary"

export interface IdentityMatch {
  userId: string
  confidence: number
  matchedFields: string[]
  matchType: "exact" | "fuzzy" | "partial"
}

export interface UserIdentity {
  userId: string
  identityFields: Record<string, any>
}

export class IdentityService {
  private static instance: IdentityService
  private userIdentities: Map<string, UserIdentity> = new Map()

private constructor() {
    // 初始化一些模拟数据
    this.initializeMockData()
  }

public static getInstance(): IdentityService {
    if (!IdentityService.instance) {
      IdentityService.instance = new IdentityService()
    }
    return IdentityService.instance
  }

private initializeMockData() {
    // 模拟已存在的用户身份数据
    const mockUsers = [
      {
        userId: "user_global_id_1",
        identityFields: {
          phone: "13800138000",
          email: "zhangsan@example.com",
          username: "zhangsan",
          fullName: "张三",
        },
      },
      {
        userId: "user_global_id_2",
        identityFields: {
          phone: "13912345678",
          email: "lisi@example.com",
          username: "lisi",
          fullName: "李四",
        },
      },
    ]

mockUsers.forEach((user) => {
      this.userIdentities.set(user.userId, user)
    })
  }

// 根据输入数据查找匹配的用户身份
  public async findMatchingIdentity(inputData: Record<string, any>): Promise<IdentityMatch[]> {
    const identityKeyFields = getIdentityKeyFields()
    const matches: IdentityMatch[] = []

for (const [userId, userIdentity] of this.userIdentities) {
      const matchResult = this.calculateMatch(inputData, userIdentity.identityFields, identityKeyFields)
      if (matchResult.confidence > 0) {
        matches.push({
          userId,
          ...matchResult,
        })
      }
    }

// 按置信度排序
    return matches.sort((a, b) => b.confidence - a.confidence)
  }

// 计算匹配度
  private calculateMatch(
    inputData: Record<string, any>,
    existingData: Record<string, any>,
    keyFields: string[],
  ): { confidence: number; matchedFields: string[]; matchType: "exact" | "fuzzy" | "partial" } {
    const matchedFields: string[] = []
    let exactMatches = 0
    let fuzzyMatches = 0
    let totalFields = 0

for (const field of keyFields) {
      if (inputData[field] && existingData[field]) {
        totalFields++

if (this.isExactMatch(inputData[field], existingData[field])) {
          exactMatches++
          matchedFields.push(field)
        } else if (this.isFuzzyMatch(inputData[field], existingData[field])) {
          fuzzyMatches++
          matchedFields.push(field)
        }
      }
    }

if (totalFields === 0) {
      return { confidence: 0, matchedFields: [], matchType: "partial" }
    }

const confidence = (exactMatches * 1.0 + fuzzyMatches * 0.7) / totalFields

let matchType: "exact" | "fuzzy" | "partial" = "partial"
    if (exactMatches > 0 && fuzzyMatches === 0) {
      matchType = "exact"
    } else if (exactMatches > 0 || fuzzyMatches > 0) {
      matchType = "fuzzy"
    }

return { confidence, matchedFields, matchType }
  }

// 精确匹配
  private isExactMatch(value1: any, value2: any): boolean {
    if (typeof value1 === "string" && typeof value2 === "string") {
      return value1.toLowerCase().trim() === value2.toLowerCase().trim()
    }
    return value1 === value2
  }

// 模糊匹配
  private isFuzzyMatch(value1: any, value2: any): boolean {
    if (typeof value1 === "string" && typeof value2 === "string") {
      const str1 = value1.toLowerCase().trim()
      const str2 = value2.toLowerCase().trim()

// 简单的相似度计算
      const similarity = this.calculateStringSimilarity(str1, str2)
      return similarity > 0.8
    }
    return false
  }

// 计算字符串相似度
  private calculateStringSimilarity(str1: string, str2: string): number {
    const longer = str1.length > str2.length ? str1 : str2
    const shorter = str1.length > str2.length ? str2 : str1

if (longer.length === 0) {
      return 1.0
    }

const editDistance = this.levenshteinDistance(longer, shorter)
    return (longer.length - editDistance) / longer.length
  }

// 计算编辑距离
  private levenshteinDistance(str1: string, str2: string): number {
    const matrix = []

for (let i = 0; i <= str2.length; i++) {
      matrix[i] = [i]
    }

for (let j = 0; j <= str1.length; j++) {
      matrix[0][j] = j
    }

for (let i = 1; i <= str2.length; i++) {
      for (let j = 1; j <= str1.length; j++) {
        if (str2.charAt(i - 1) === str1.charAt(j - 1)) {
          matrix[i][j] = matrix[i - 1][j - 1]
        } else {
          matrix[i][j] = Math.min(matrix[i - 1][j - 1] + 1, matrix[i][j - 1] + 1, matrix[i - 1][j] + 1)
        }
      }
    }

return matrix[str2.length][str1.length]
  }

// 创建新的用户身份
  public async createNewIdentity(inputData: Record<string, any>): Promise<string> {
    const userId = `user_global_id_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
    const identityKeyFields = getIdentityKeyFields()

const identityFields: Record<string, any> = {}
    identityKeyFields.forEach((field) => {
      if (inputData[field]) {
        identityFields[field] = inputData[field]
      }
    })

this.userIdentities.set(userId, {
      userId,
      identityFields,
    })

return userId
  }

// 更新用户身份信息
  public async updateIdentity(userId: string, updateData: Record<string, any>): Promise<void> {
    const existingIdentity = this.userIdentities.get(userId)
    if (existingIdentity) {
      const identityKeyFields = getIdentityKeyFields()
      identityKeyFields.forEach((field) => {
        if (updateData[field]) {
          existingIdentity.identityFields[field] = updateData[field]
        }
      })
      this.userIdentities.set(userId, existingIdentity)
    }
  }

// 合并用户身份
  public async mergeIdentities(primaryUserId: string, secondaryUserId: string): Promise<void> {
    const primaryIdentity = this.userIdentities.get(primaryUserId)
    const secondaryIdentity = this.userIdentities.get(secondaryUserId)

if (primaryIdentity && secondaryIdentity) {
      // 合并身份字段，优先保留主身份的数据
      Object.keys(secondaryIdentity.identityFields).forEach((field) => {
        if (!primaryIdentity.identityFields[field] && secondaryIdentity.identityFields[field]) {
          primaryIdentity.identityFields[field] = secondaryIdentity.identityFields[field]
        }
      })

this.userIdentities.set(primaryUserId, primaryIdentity)
      this.userIdentities.delete(secondaryUserId)
    }
  }
}
[V0_FILE]typescript:file="services/IngestionService.ts" isMerged="true"
// 数据接入服务
// 实现数据映射、转换、标准化和关联全局userId的核心逻辑

import { DATA_DICTIONARY } from "@/lib/data-dictionary"
import { IdentityService } from "./IdentityService"
import { getCollectionData } from "@/lib/mongodb-mock-connector"

export interface IngestionRequest {
  source: string
  sourceUserId?: string
  sourceRecordId?: string
  originalData: Record<string, any>
  timestamp?: string
}

export interface ProcessedUserData {
  userId: string
  coreProfile: Record<string, any>
  unifiedTags: string[]
  unifiedAttributes: Record<string, any>
  sourceProfiles: Array<{
    source: string
    sourceUserId?: string
    sourceRecordId?: string
    originalData: Record<string, any>
    contentActivity?: any[]
    interactionHistory?: any[]
    ingestionTimestamp: string
  }>
  aiInsights?: Record<string, any>
  crmInfo?: Record<string, any>
  createdAt?: string
  updatedAt: string
}

export class IngestionService {
  private static instance: IngestionService
  private identityService: IdentityService

private constructor() {
    this.identityService = IdentityService.getInstance()
  }

public static getInstance(): IngestionService {
    if (!IngestionService.instance) {
      IngestionService.instance = new IngestionService()
    }
    return IngestionService.instance
  }

// 处理数据接入请求
  public async processIngestionRequest(request: IngestionRequest): Promise<ProcessedUserData> {
    try {
      // 1. 数据映射与转换
      const mappedData = await this.mapAndTransformData(request)

// 2. 身份识别与关联
      const userId = await this.identifyOrCreateUser(mappedData)

// 3. 构建统一用户数据结构
      const processedData = await this.buildUnifiedUserData(userId, request, mappedData)

// 4. 数据质量检查
      await this.validateDataQuality(processedData)

// 5. 存储到数据库（这里是模拟）
      await this.storeUserData(processedData)

return processedData
    } catch (error) {
      console.error("数据接入处理失败:", error)
      throw new Error(`数据接入处理失败: ${(error as Error).message}`)
    }
  }

// 数据映射与转换
  private async mapAndTransformData(request: IngestionRequest): Promise<Record<string, any>> {
    const mappedData: Record<string, any> = {}
    const sourceMappings = DATA_DICTIONARY.sourceMappings[request.source] || []

for (const [sourceField, sourceValue] of Object.entries(request.originalData)) {
      const mapping = sourceMappings.find((m) => m.sourceField === sourceField)

if (mapping) {
        let transformedValue = sourceValue

// 应用转换规则
        if (mapping.transformRule) {
          transformedValue = this.applyTransformRule(sourceValue, mapping.transformRule)
        }

// 应用验证规则
        if (mapping.validationRule) {
          const isValid = this.applyValidationRule(transformedValue, mapping.validationRule)
          if (!isValid) {
            console.warn(`字段 ${sourceField} 验证失败，跳过映射`)
            continue
          }
        }

mappedData[mapping.targetField] = transformedValue
      } else {
        // 如果没有映射规则，保留原始字段名
        mappedData[sourceField] = sourceValue
      }
    }

return mappedData
  }

// 应用转换规则
  private applyTransformRule(value: any, rule: string): any {
    switch (rule) {
      case "prefix_dy_":
        return `dy_${value}`
      case "prefix_xhs_":
        return `xhs_${value}`
      case "lowercase":
        return typeof value === "string" ? value.toLowerCase() : value
      case "uppercase":
        return typeof value === "string" ? value.toUpperCase() : value
      case "trim":
        return typeof value === "string" ? value.trim() : value
      default:
        return value
    }
  }

// 应用验证规则
  private applyValidationRule(value: any, rule: string): boolean {
    switch (rule) {
      case "required":
        return value !== null && value !== undefined && value !== ""
      case "email":
        return typeof value === "string" && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
      case "phone":
        return typeof value === "string" && /^1[3-9]\d{9}$/.test(value)
      default:
        return true
    }
  }

// 身份识别与关联
  private async identifyOrCreateUser(mappedData: Record<string, any>): Promise<string> {
    // 查找匹配的用户身份
    const matches = await this.identityService.findMatchingIdentity(mappedData)

if (matches.length > 0 && matches[0].confidence > 0.8) {
      // 找到高置信度匹配，使用现有用户ID
      const bestMatch = matches[0]
      await this.identityService.updateIdentity(bestMatch.userId, mappedData)
      return bestMatch.userId
    } else {
      // 创建新用户身份
      return await this.identityService.createNewIdentity(mappedData)
    }
  }

// 构建统一用户数据结构
  private async buildUnifiedUserData(
    userId: string,
    request: IngestionRequest,
    mappedData: Record<string, any>,
  ): Promise<ProcessedUserData> {
    // 获取现有用户数据（模拟）
    const existingUsers = await getCollectionData("users")
    const existingUser = existingUsers.find((user: any) => user._id === userId)

const now = new Date().toISOString()

// 构建核心档案
    const coreProfile: Record<string, any> = {}
    Object.keys(DATA_DICTIONARY.coreFields).forEach((field) => {
      if (mappedData[field]) {
        coreProfile[field] = mappedData[field]
      } else if (existingUser?.core_profile?.[field]) {
        coreProfile[field] = existingUser.core_profile[field]
      }
    })

// 构建统一标签
    const unifiedTags = this.generateUnifiedTags(mappedData, request.source)

// 构建统一属性
    const unifiedAttributes = this.generateUnifiedAttributes(mappedData, request.source)

// 构建源档案
    const newSourceProfile = {
      source: request.source,
      sourceUserId: request.sourceUserId,
      sourceRecordId: request.sourceRecordId,
      originalData: request.originalData,
      contentActivity: this.extractContentActivity(request.originalData, request.source),
      interactionHistory: this.extractInteractionHistory(request.originalData, request.source),
      ingestionTimestamp: request.timestamp || now,
    }

const sourceProfiles = existingUser?.source_profiles || []

// 检查是否已存在相同来源的档案
    const existingSourceIndex = sourceProfiles.findIndex(
      (profile: any) =>
        profile.source === request.source &&
        (profile.sourceUserId === request.sourceUserId || profile.sourceRecordId === request.sourceRecordId),
    )

if (existingSourceIndex >= 0) {
      // 更新现有源档案
      sourceProfiles[existingSourceIndex] = newSourceProfile
    } else {
      // 添加新的源档案
      sourceProfiles.push(newSourceProfile)
    }

// 生成AI洞察
    const aiInsights = this.generateAIInsights(mappedData, request.source)

return {
      userId,
      coreProfile,
      unifiedTags: [...new Set([...(existingUser?.unified_tags || []), ...unifiedTags])],
      unifiedAttributes: { ...(existingUser?.unified_attributes || {}), ...unifiedAttributes },
      sourceProfiles,
      aiInsights: { ...(existingUser?.ai_insights || {}), ...aiInsights },
      crmInfo: existingUser?.crm_info || {},
      createdAt: existingUser?.createdAt || now,
      updatedAt: now,
    }
  }

// 生成统一标签
  private generateUnifiedTags(mappedData: Record<string, any>, source: string): string[] {
    const tags: string[] = []

// 基于来源生成标签
    if (source === "douyin") {
      tags.push("抖音用户")
      if (mappedData.followerCount > 10000) {
        tags.push("抖音达人")
      }
    } else if (source === "xiaohongshu") {
      tags.push("小红书用户")
    } else if (source === "cunkebao_form") {
      tags.push("表单用户")
    } else if (source === "touchkebao_call") {
      tags.push("电话咨询用户")
    }

// 基于数据内容生成标签
    if (mappedData.city) {
      tags.push(`${mappedData.city}地区`)
    }

if (mappedData.birthDate) {
      const birthYear = new Date(mappedData.birthDate).getFullYear()
      const currentYear = new Date().getFullYear()
      const age = currentYear - birthYear

if (age >= 18 && age < 30) {
        tags.push("年轻用户")
      } else if (age >= 30 && age < 50) {
        tags.push("中年用户")
      }
    }

return tags
  }

// 生成统一属性
  private generateUnifiedAttributes(mappedData: Record<string, any>, source: string): Record<string, any> {
    const attributes: Record<string, any> = {}

// 基于来源设置属性
    if (source === "douyin" && mappedData.followerCount) {
      attributes.socialInfluence = mappedData.followerCount
    }

if (source === "touchkebao_call") {
      attributes.lastContactTime = mappedData.callTime || new Date().toISOString()
      attributes.contactChannel = "phone"
    }

if (source === "cunkebao_form") {
      attributes.lastContactTime = new Date().toISOString()
      attributes.contactChannel = "form"
    }

// 设置活跃度
    attributes.lastActiveDays = 0 // 刚接入的数据认为是活跃的

return attributes
  }

// 提取内容活动
  private extractContentActivity(originalData: Record<string, any>, source: string): any[] {
    const activities: any[] = []

if (source === "douyin" && originalData.videos) {
      originalData.videos.forEach((video: any) => {
        activities.push({
          contentId: video.id,
          type: "video",
          url: video.url,
          text: video.description,
          publishTime: video.createTime,
          likes: video.likeCount,
          comments: video.commentCount,
        })
      })
    }

if (source === "xiaohongshu" && originalData.notes) {
      originalData.notes.forEach((note: any) => {
        activities.push({
          contentId: note.id,
          type: "note",
          url: note.url,
          text: note.content,
          publishTime: note.createTime,
          likes: note.likeCount,
          comments: note.commentCount,
        })
      })
    }

return activities
  }

// 提取互动历史
  private extractInteractionHistory(originalData: Record<string, any>, source: string): any[] {
    const interactions: any[] = []

if (originalData.interactions) {
      originalData.interactions.forEach((interaction: any) => {
        interactions.push({
          type: interaction.type,
          targetId: interaction.targetId,
          content: interaction.content,
          time: interaction.time,
        })
      })
    }

return interactions
  }

// 生成AI洞察
  private generateAIInsights(mappedData: Record<string, any>, source: string): Record<string, any> {
    const insights: Record<string, any> = {}

// 基于数据生成人设标签
    const personaTags: string[] = []

if (source === "douyin") {
      personaTags.push("视频爱好者")
    }
    if (source === "xiaohongshu") {
      personaTags.push("生活分享者")
    }
    if (mappedData.city === "北京") {
      personaTags.push("一线城市用户")
    }

insights.personaTags = personaTags
    insights.sentimentScore = 0.7 // 默认中性偏正面
    insights.potentialNeeds = this.inferPotentialNeeds(mappedData, source)

return insights
  }

// 推断潜在需求
  private inferPotentialNeeds(mappedData: Record<string, any>, source: string): string[] {
    const needs: string[] = []

if (source === "touchkebao_call") {
      needs.push("产品咨询", "客服支持")
    }
    if (source === "cunkebao_form") {
      needs.push("产品了解", "营销活动")
    }
    if (source === "douyin") {
      needs.push("内容创作工具", "社交媒体管理")
    }

return needs
  }

// 数据质量检查
  private async validateDataQuality(data: ProcessedUserData): Promise<void> {
    const errors: string[] = []

// 检查必需字段
    if (!data.userId) {
      errors.push("缺少用户ID")
    }

// 检查数据完整性
    if (!data.coreProfile || Object.keys(data.coreProfile).length === 0) {
      errors.push("核心档案为空")
    }

// 检查源档案
    if (!data.sourceProfiles || data.sourceProfiles.length === 0) {
      errors.push("缺少源档案数据")
    }

if (errors.length > 0) {
      throw new Error(`数据质量检查失败: ${errors.join(", ")}`)
    }
  }

// 存储用户数据（模拟）
  private async storeUserData(data: ProcessedUserData): Promise<void> {
    // 在实际应用中，这里会将数据存储到MongoDB
    console.log("存储用户数据:", {
      userId: data.userId,
      coreProfileFields: Object.keys(data.coreProfile).length,
      tagsCount: data.unifiedTags.length,
      sourceProfilesCount: data.sourceProfiles.length,
    })
  }

// 批量处理数据接入
  public async processBatchIngestion(requests: IngestionRequest[]): Promise<ProcessedUserData[]> {
    const results: ProcessedUserData[] = []
    const errors: Array<{ request: IngestionRequest; error: string }> = []

for (const request of requests) {
      try {
        const result = await this.processIngestionRequest(request)
        results.push(result)
      } catch (error) {
        errors.push({
          request,
          error: (error as Error).message,
        })
      }
    }

if (errors.length > 0) {
      console.warn("批量处理中的错误:", errors)
    }

return results
  }
}
[V0_FILE]typescript:file="app/api/ingest/route.ts" isEdit="true" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"
import { IngestionService, type IngestionRequest } from "@/services/IngestionService"

// POST /api/ingest - 数据接入端点
export async function POST(request: NextRequest) {
  try {
    const body = await request.json()

// 验证请求数据
    if (!body.source || !body.originalData) {
      return NextResponse.json({ error: "缺少必需字段: source 和 originalData" }, { status: 400 })
    }

const ingestionRequest: IngestionRequest = {
      source: body.source,
      sourceUserId: body.sourceUserId,
      sourceRecordId: body.sourceRecordId,
      originalData: body.originalData,
      timestamp: body.timestamp || new Date().toISOString(),
    }

const ingestionService = IngestionService.getInstance()
    const result = await ingestionService.processIngestionRequest(ingestionRequest)

return NextResponse.json({
      success: true,
      data: {
        userId: result.userId,
        coreProfileFields: Object.keys(result.coreProfile).length,
        tagsCount: result.unifiedTags.length,
        sourceProfilesCount: result.sourceProfiles.length,
      },
      message: "数据接入成功",
    })
  } catch (error) {
    console.error("数据接入API错误:", error)
    return NextResponse.json(
      {
        error: "数据接入失败",
        details: (error as Error).message,
      },
      { status: 500 },
    )
  }
}

// POST /api/ingest/batch - 批量数据接入端点
export async function PUT(request: NextRequest) {
  try {
    const body = await request.json()

if (!Array.isArray(body.requests)) {
      return NextResponse.json({ error: "requests 必须是数组" }, { status: 400 })
    }

const ingestionService = IngestionService.getInstance()
    const results = await ingestionService.processBatchIngestion(body.requests)

return NextResponse.json({
      success: true,
      data: {
        processedCount: results.length,
        totalRequests: body.requests.length,
        results: results.map((result) => ({
          userId: result.userId,
          coreProfileFields: Object.keys(result.coreProfile).length,
          tagsCount: result.unifiedTags.length,
        })),
      },
      message: `批量处理完成，成功处理 ${results.length}/${body.requests.length} 条记录`,
    })
  } catch (error) {
    console.error("批量数据接入API错误:", error)
    return NextResponse.json(
      {
        error: "批量数据接入失败",
        details: (error as Error).message,
      },
      { status: 500 },
    )
  }
}

// GET /api/ingest/status - 获取数据接入状态
export async function GET(request: NextRequest) {
  try {
    // 模拟获取接入状态数据
    const status = {
      totalIngested: 125678,
      todayIngested: 1234,
      activeSources: 8,
      lastIngestionTime: new Date().toISOString(),
      dataQuality: 94.6,
      processingQueue: 23,
    }

return NextResponse.json({
      success: true,
      data: status,
    })
  } catch (error) {
    console.error("获取接入状态API错误:", error)
    return NextResponse.json({ error: "获取状态失败" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/data-ingestion/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Database,
  Upload,
  Download,
  RefreshCw,
  CheckCircle,
  AlertCircle,
  Clock,
  Settings,
  Pause,
  BarChart3,
  TrendingUp,
  Zap,
} from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { useToast } from "@/components/ui/use-toast"

export default function DataIngestionPage() {
  const { toast } = useToast()
  const [activeTab, setActiveTab] = useState("overview")
  const [ingestionStatus, setIngestionStatus] = useState<any>(null)
  const [isManualIngesting, setIsManualIngesting] = useState(false)

// 模拟数据接入状态
  const [mockStatus] = useState({
    totalIngested: 125678,
    todayIngested: 1234,
    activeSources: 8,
    lastIngestionTime: "2分钟前",
    dataQuality: 94.6,
    processingQueue: 23,
    recentIngestions: [
      {
        id: "ing_001",
        source: "抖音API",
        recordsCount: 156,
        status: "completed",
        startTime: "14:30",
        duration: "2分钟",
        quality: 96.8,
      },
      {
        id: "ing_002",
        source: "触客宝后台",
        recordsCount: 89,
        status: "completed",
        startTime: "14:25",
        duration: "1分钟",
        quality: 95.2,
      },
      {
        id: "ing_003",
        source: "表单提交",
        recordsCount: 234,
        status: "processing",
        startTime: "14:32",
        duration: "进行中",
        quality: 0,
      },
      {
        id: "ing_004",
        source: "小红书API",
        recordsCount: 67,
        status: "failed",
        startTime: "14:20",
        duration: "失败",
        quality: 0,
      },
    ],
    sourceStats: [
      { name: "抖音API", records: 45678, quality: 96.8, status: "active" },
      { name: "小红书API", records: 23456, quality: 92.5, status: "active" },
      { name: "触客宝后台", records: 12345, quality: 95.1, status: "active" },
      { name: "表单提交", records: 34567, quality: 97.2, status: "active" },
      { name: "飞书妙记", records: 5678, quality: 91.3, status: "active" },
      { name: "微信公众号", records: 8901, quality: 93.7, status: "inactive" },
    ],
  })

useEffect(() => {
    // 模拟获取接入状态
    setIngestionStatus(mockStatus)
  }, [])

const handleManualIngest = async (formData: any) => {
    setIsManualIngesting(true)

try {
      const response = await fetch("/api/ingest", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      })

const result = await response.json()

if (result.success) {
        toast({
          title: "数据接入成功",
          description: `成功处理用户数据，用户ID: ${result.data.userId}`,
        })
      } else {
        throw new Error(result.error)
      }
    } catch (error) {
      toast({
        title: "数据接入失败",
        description: (error as Error).message,
        variant: "destructive",
      })
    } finally {
      setIsManualIngesting(false)
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "completed":
        return "bg-green-100 text-green-800"
      case "processing":
        return "bg-yellow-100 text-yellow-800"
      case "failed":
        return "bg-red-100 text-red-800"
      case "active":
        return "bg-green-100 text-green-800"
      case "inactive":
        return "bg-gray-100 text-gray-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "completed":
        return <CheckCircle className="h-4 w-4 text-green-600" />
      case "processing":
        return <Clock className="h-4 w-4 text-yellow-600 animate-spin" />
      case "failed":
        return <AlertCircle className="h-4 w-4 text-red-600" />
      case "active":
        return <CheckCircle className="h-4 w-4 text-green-600" />
      case "inactive":
        return <Pause className="h-4 w-4 text-gray-600" />
      default:
        return <AlertCircle className="h-4 w-4 text-gray-600" />
    }
  }

if (!ingestionStatus) {
    return <div className="container mx-auto py-8">加载中...</div>
  }

return (
    <div className="container mx-auto py-4 md:py-6 space-y-4 md:space-y-6">
      {/* 页面标题和工具栏 */}
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <h1 className="text-2xl md:text-3xl font-bold">数据接入管理</h1>
          <p className="text-sm md:text-base text-muted-foreground mt-1">多源数据接入监控与管理</p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Dialog>
            <DialogTrigger asChild>
              <Button>
                <Upload className="mr-2 h-4 w-4" />
                手动接入
              </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[600px]">
              <DialogHeader>
                <DialogTitle>手动数据接入</DialogTitle>
                <DialogDescription>手动提交数据进行接入处理</DialogDescription>
              </DialogHeader>
              <ManualIngestionForm onSubmit={handleManualIngest} isLoading={isManualIngesting} />
            </DialogContent>
          </Dialog>
          <Button variant="outline" size="icon" className="h-9 w-9 bg-transparent">
            <RefreshCw className="h-4 w-4" />
          </Button>
          <Button variant="outline" size="sm" className="hidden md:flex bg-transparent">
            <Download className="mr-2 h-4 w-4" />
            导出日志
          </Button>
        </div>
      </div>

<TabsContent value="overview" className="space-y-6">
          {/* 接入概览 */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <Card>
              <CardContent className="p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">总接入量</p>
                    <p className="text-2xl font-bold">{ingestionStatus.totalIngested.toLocaleString()}</p>
                  </div>
                  <Database className="h-8 w-8 text-blue-600" />
                </div>
              </CardContent>
            </Card>

<Card>
              <CardContent className="p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">今日接入</p>
                    <p className="text-2xl font-bold">{ingestionStatus.todayIngested.toLocaleString()}</p>
                  </div>
                  <TrendingUp className="h-8 w-8 text-green-600" />
                </div>
              </CardContent>
            </Card>

<Card>
              <CardContent className="p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">活跃数据源</p>
                    <p className="text-2xl font-bold">{ingestionStatus.activeSources}</p>
                  </div>
                  <Zap className="h-8 w-8 text-purple-600" />
                </div>
              </CardContent>
            </Card>

<Card>
              <CardContent className="p-4">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-muted-foreground">数据质量</p>
                    <p className="text-2xl font-bold">{ingestionStatus.dataQuality}%</p>
                  </div>
                  <BarChart3 className="h-8 w-8 text-orange-600" />
                </div>
              </CardContent>
            </Card>
          </div>

{/* 实时状态 */}
          <Card>
            <CardHeader>
              <CardTitle>实时接入状态</CardTitle>
              <CardDescription>当前数据接入处理状态</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <span className="text-sm">处理队列</span>
                  <Badge variant="outline">{ingestionStatus.processingQueue} 条待处理</Badge>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm">最后接入时间</span>
                  <span className="text-sm font-medium">{ingestionStatus.lastIngestionTime}</span>
                </div>
                <div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span>数据质量评分</span>
                    <span>{ingestionStatus.dataQuality}%</span>
                  </div>
                  <Progress value={ingestionStatus.dataQuality} className="h-2" />
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="sources" className="space-y-6">
          {/* 数据源状态 */}
          <Card>
            <CardHeader>
              <CardTitle>数据源管理</CardTitle>
              <CardDescription>各数据源的接入状态和质量监控</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {ingestionStatus.sourceStats.map((source: any, index: number) => (
                  <div key={index} className="flex items-center justify-between p-4 border rounded-lg">
                    <div className="flex items-center gap-4">
                      {getStatusIcon(source.status)}
                      <div>
                        <h3 className="font-medium">{source.name}</h3>
                        <p className="text-sm text-muted-foreground">{source.records.toLocaleString()} 条记录</p>
                      </div>
                    </div>
                    <div className="flex items-center gap-4">
                      <div className="text-right">
                        <p className="text-sm font-medium">{source.quality}%</p>
                        <p className="text-xs text-muted-foreground">数据质量</p>
                      </div>
                      <Badge className={getStatusColor(source.status)}>
                        {source.status === "active" ? "活跃" : "非活跃"}
                      </Badge>
                      <Button variant="outline" size="sm">
                        <Settings className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="history" className="space-y-6">
          {/* 接入历史 */}
          <Card>
            <CardHeader>
              <CardTitle>最近接入记录</CardTitle>
              <CardDescription>最近的数据接入处理记录</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {ingestionStatus.recentIngestions.map((ingestion: any) => (
                  <div key={ingestion.id} className="flex items-center justify-between p-4 border rounded-lg">
                    <div className="flex items-center gap-4">
                      {getStatusIcon(ingestion.status)}
                      <div>
                        <h3 className="font-medium">{ingestion.source}</h3>
                        <p className="text-sm text-muted-foreground">
                          {ingestion.recordsCount} 条记录 • {ingestion.startTime} • {ingestion.duration}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-4">
                      {ingestion.quality > 0 && (
                        <div className="text-right">
                          <p className="text-sm font-medium">{ingestion.quality}%</p>
                          <p className="text-xs text-muted-foreground">质量评分</p>
                        </div>
                      )}
                      <Badge className={getStatusColor(ingestion.status)}>
                        {ingestion.status === "completed"
                          ? "完成"
                          : ingestion.status === "processing"
                            ? "处理中"
                            : "失败"}
                      </Badge>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="monitoring" className="space-y-6">
          {/* 监控统计 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>接入趋势</CardTitle>
                <CardDescription>过去7天的数据接入趋势</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="h-[200px] flex items-center justify-center text-muted-foreground">
                  <BarChart3 className="h-12 w-12 mb-2" />
                  <p>接入趋势图表</p>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>质量分布</CardTitle>
                <CardDescription>各数据源的质量分布情况</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {ingestionStatus.sourceStats.slice(0, 5).map((source: any, index: number) => (
                    <div key={index} className="space-y-1">
                      <div className="flex justify-between text-sm">
                        <span>{source.name}</span>
                        <span>{source.quality}%</span>
                      </div>
                      <Progress value={source.quality} className="h-2" />
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}

// 手动接入表单组件
function ManualIngestionForm({ onSubmit, isLoading }: { onSubmit: (data: any) => void; isLoading: boolean }) {
  const [formData, setFormData] = useState({
    source: "",
    sourceUserId: "",
    sourceRecordId: "",
    originalData: "",
  })

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

try {
      const parsedData = JSON.parse(formData.originalData)
      onSubmit({
        ...formData,
        originalData: parsedData,
      })
    } catch (error) {
      alert("原始数据必须是有效的JSON格式")
    }
  }

return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="source">数据源</Label>
        <Select value={formData.source} onValueChange={(value) => setFormData({ ...formData, source: value })}>
          <SelectTrigger>
            <SelectValue placeholder="选择数据源" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="douyin">抖音</SelectItem>
            <SelectItem value="xiaohongshu">小红书</SelectItem>
            <SelectItem value="cunkebao_form">存客宝表单</SelectItem>
            <SelectItem value="touchkebao_call">触客宝呼入</SelectItem>
            <SelectItem value="feishu_notes">飞书妙记</SelectItem>
          </SelectContent>
        </Select>
      </div>

<div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="sourceUserId">源用户ID</Label>
          <Input
            id="sourceUserId"
            value={formData.sourceUserId}
            onChange={(e) => setFormData({ ...formData, sourceUserId: e.target.value })}
            placeholder="可选"
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor="sourceRecordId">源记录ID</Label>
          <Input
            id="sourceRecordId"
            value={formData.sourceRecordId}
            onChange={(e) => setFormData({ ...formData, sourceRecordId: e.target.value })}
            placeholder="可选"
          />
        </div>
      </div>

<div className="space-y-2">
        <Label htmlFor="originalData">原始数据 (JSON格式)</Label>
        <Textarea
          id="originalData"
          value={formData.originalData}
          onChange={(e) => setFormData({ ...formData, originalData: e.target.value })}
          placeholder='{"name": "张三", "phone": "13800138000", "email": "zhangsan@example.com"}'
          rows={8}
          required
        />
      </div>

<div className="flex justify-end gap-2">
        <Button type="button" variant="outline" disabled={isLoading}>
          取消
        </Button>
        <Button type="submit" disabled={isLoading || !formData.source || !formData.originalData}>
          {isLoading ? (
            <>
              <Clock className="mr-2 h-4 w-4 animate-spin" />
              处理中...
            </>
          ) : (
            <>
              <Upload className="mr-2 h-4 w-4" />
              提交接入
            </>
          )}
        </Button>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="app/overview/dashboard/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  BarChart3,
  TrendingUp,
  Users,
  Database,
  Activity,
  RefreshCw,
  Download,
  Eye,
  Zap,
  Target,
  AlertCircle,
} from "lucide-react"

export default function DashboardPage() {
  const [timeRange, setTimeRange] = useState("today")

const dashboardStats = {
    totalUsers: 125678,
    activeUsers: 45678,
    dataVolume: 1245678,
    aiAccuracy: 96.8,
    growthRate: 12.5,
    qualityScore: 94.2,
  }

const recentActivities = [
    {
      id: 1,
      type: "data_sync",
      message: "用户数据同步完成",
      time: "2分钟前",
      status: "success",
    },
    {
      id: 2,
      type: "ai_analysis",
      message: "AI模型训练完成",
      time: "5分钟前",
      status: "success",
    },
    {
      id: 3,
      type: "quality_check",
      message: "数据质量检查通过",
      time: "10分钟前",
      status: "warning",
    },
  ]

return (
    <div className="container mx-auto py-6 space-y-6">
      {/* 页面标题 */}
      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">数据总览</h1>
          <p className="text-muted-foreground">全局数据资产概览与监控</p>
        </div>
        <div className="flex gap-2">
          <Select value={timeRange} onValueChange={setTimeRange}>
            <SelectTrigger className="w-[120px]">
              <SelectValue placeholder="时间范围" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="today">今日</SelectItem>
              <SelectItem value="week">本周</SelectItem>
              <SelectItem value="month">本月</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" size="icon">
            <RefreshCw className="h-4 w-4" />
          </Button>
          <Button variant="outline">
            <Download className="mr-2 h-4 w-4" />
            导出
          </Button>
        </div>
      </div>

{/* 核心指标卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Card className="bg-gradient-to-r from-blue-50 to-cyan-50 border-none shadow-md">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-medium">总用户数</CardTitle>
              <Users className="h-4 w-4 text-blue-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-blue-600">{dashboardStats.totalUsers.toLocaleString()}</div>
            <div className="flex items-center mt-2">
              <TrendingUp className="h-3 w-3 text-green-500 mr-1" />
              <span className="text-xs text-green-600">+{dashboardStats.growthRate}%</span>
            </div>
          </CardContent>
        </Card>

<Card className="bg-gradient-to-r from-green-50 to-emerald-50 border-none shadow-md">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-medium">活跃用户</CardTitle>
              <Activity className="h-4 w-4 text-green-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">{dashboardStats.activeUsers.toLocaleString()}</div>
            <div className="text-xs text-muted-foreground mt-2">
              活跃率 {((dashboardStats.activeUsers / dashboardStats.totalUsers) * 100).toFixed(1)}%
            </div>
          </CardContent>
        </Card>

<Card className="bg-gradient-to-r from-purple-50 to-pink-50 border-none shadow-md">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-medium">数据量</CardTitle>
              <Database className="h-4 w-4 text-purple-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-purple-600">{dashboardStats.dataVolume.toLocaleString()}</div>
            <div className="text-xs text-muted-foreground mt-2">条记录</div>
          </CardContent>
        </Card>

<Card className="bg-gradient-to-r from-orange-50 to-red-50 border-none shadow-md">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-medium">AI准确率</CardTitle>
              <Target className="h-4 w-4 text-orange-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-orange-600">{dashboardStats.aiAccuracy}%</div>
            <div className="text-xs text-muted-foreground mt-2">模型置信度</div>
          </CardContent>
        </Card>
      </div>

{/* 详细分析 */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* 数据质量监控 */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <BarChart3 className="h-5 w-5 text-blue-600" />
              数据质量监控
            </CardTitle>
            <CardDescription>实时数据质量评估</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div>
                <div className="flex justify-between text-sm mb-2">
                  <span>整体质量评分</span>
                  <span className="font-medium">{dashboardStats.qualityScore}%</span>
                </div>
                <Progress value={dashboardStats.qualityScore} className="h-2" />
              </div>
              <div>
                <div className="flex justify-between text-sm mb-2">
                  <span>数据完整性</span>
                  <span className="font-medium">98.5%</span>
                </div>
                <Progress value={98.5} className="h-2" />
              </div>
              <div>
                <div className="flex justify-between text-sm mb-2">
                  <span>数据准确性</span>
                  <span className="font-medium">96.2%</span>
                </div>
                <Progress value={96.2} className="h-2" />
              </div>
              <div>
                <div className="flex justify-between text-sm mb-2">
                  <span>数据一致性</span>
                  <span className="font-medium">94.8%</span>
                </div>
                <Progress value={94.8} className="h-2" />
              </div>
            </div>
          </CardContent>
        </Card>

{/* 实时活动 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Activity className="h-5 w-5 text-green-600" />
              实时活动
            </CardTitle>
            <CardDescription>系统活动监控</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {recentActivities.map((activity) => (
                <div key={activity.id} className="flex items-start gap-3 p-2 hover:bg-gray-50 rounded-lg">
                  <div
                    className={`p-1 rounded-full ${
                      activity.status === "success"
                        ? "text-green-600"
                        : activity.status === "warning"
                          ? "text-yellow-600"
                          : "text-red-600"
                    }`}
                  >
                    {activity.status === "success" ? (
                      <Zap className="h-4 w-4" />
                    ) : activity.status === "warning" ? (
                      <AlertCircle className="h-4 w-4" />
                    ) : (
                      <AlertCircle className="h-4 w-4" />
                    )}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium truncate">{activity.message}</p>
                    <p className="text-xs text-gray-500">{activity.time}</p>
                  </div>
                </div>
              ))}
            </div>
            <Button variant="outline" className="w-full mt-4 bg-transparent">
              查看全部活动
            </Button>
          </CardContent>
        </Card>
      </div>

{/* 快速操作 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Zap className="h-5 w-5 text-yellow-600" />
            快速操作
          </CardTitle>
          <CardDescription>常用功能快捷入口</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            <Button variant="outline" className="h-16 flex flex-col gap-1 bg-transparent">
              <Eye className="h-5 w-5" />
              <span className="text-xs">查看报告</span>
            </Button>
            <Button variant="outline" className="h-16 flex flex-col gap-1 bg-transparent">
              <Database className="h-5 w-5" />
              <span className="text-xs">数据导入</span>
            </Button>
            <Button variant="outline" className="h-16 flex flex-col gap-1 bg-transparent">
              <Users className="h-5 w-5" />
              <span className="text-xs">用户管理</span>
            </Button>
            <Button variant="outline" className="h-16 flex flex-col gap-1 bg-transparent">
              <Target className="h-5 w-5" />
              <span className="text-xs">AI分析</span>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/overview/monitoring/page.tsx" isMerged="true"
"use client"

export default function MonitoringPage() {
  const [isRefreshing, setIsRefreshing] = useState(false)
  const [lastUpdate, setLastUpdate] = useState(new Date())

const systemMetrics = {
    cpu: 45.2,
    memory: 67.8,
    disk: 34.5,
    network: 23.1,
  }

const serviceStatus = [
    { name: "数据接入服务", status: "running", uptime: "99.9%", responseTime: "120ms" },
    { name: "AI分析引擎", status: "running", uptime: "99.7%", responseTime: "340ms" },
    { name: "用户画像服务", status: "warning", uptime: "98.5%", responseTime: "580ms" },
    { name: "数据存储服务", status: "running", uptime: "99.8%", responseTime: "45ms" },
    { name: "搜索引擎", status: "running", uptime: "99.6%", responseTime: "89ms" },
  ]

const alerts = [
    {
      id: 1,
      level: "warning",
      message: "用户画像服务响应时间超过阈值",
      time: "5分钟前",
      service: "用户画像服务",
    },
    {
      id: 2,
      level: "info",
      message: "数据同步任务完成",
      time: "10分钟前",
      service: "数据接入服务",
    },
    {
      id: 3,
      level: "success",
      message: "AI模型训练完成",
      time: "15分钟前",
      service: "AI分析引擎",
    },
  ]

const handleRefresh = () => {
    setIsRefreshing(true)
    setTimeout(() => {
      setIsRefreshing(false)
      setLastUpdate(new Date())
    }, 2000)
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "running":
        return <CheckCircle className="h-4 w-4 text-green-500" />
      case "warning":
        return <AlertTriangle className="h-4 w-4 text-yellow-500" />
      case "error":
        return <XCircle className="h-4 w-4 text-red-500" />
      default:
        return <CheckCircle className="h-4 w-4 text-gray-500" />
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "running":
        return "bg-green-100 text-green-800"
      case "warning":
        return "bg-yellow-100 text-yellow-800"
      case "error":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getAlertIcon = (level: string) => {
    switch (level) {
      case "warning":
        return <AlertTriangle className="h-4 w-4 text-yellow-500" />
      case "error":
        return <XCircle className="h-4 w-4 text-red-500" />
      case "success":
        return <CheckCircle className="h-4 w-4 text-green-500" />
      default:
        return <Bell className="h-4 w-4 text-blue-500" />
    }
  }

{/* 系统资源监控 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <Card className="bg-gradient-to-r from-blue-50 to-cyan-50 border-none shadow-md">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-medium">CPU使用率</CardTitle>
              <Cpu className="h-4 w-4 text-blue-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-blue-600">{systemMetrics.cpu}%</div>
            <Progress value={systemMetrics.cpu} className="mt-2 h-2" />
            <div className="text-xs text-muted-foreground mt-1">正常范围</div>
          </CardContent>
        </Card>

<Card className="bg-gradient-to-r from-green-50 to-emerald-50 border-none shadow-md">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-medium">内存使用率</CardTitle>
              <HardDrive className="h-4 w-4 text-green-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-green-600">{systemMetrics.memory}%</div>
            <Progress value={systemMetrics.memory} className="mt-2 h-2" />
            <div className="text-xs text-muted-foreground mt-1">正常范围</div>
          </CardContent>
        </Card>

<Card className="bg-gradient-to-r from-purple-50 to-pink-50 border-none shadow-md">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-medium">磁盘使用率</CardTitle>
              <Database className="h-4 w-4 text-purple-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-purple-600">{systemMetrics.disk}%</div>
            <Progress value={systemMetrics.disk} className="mt-2 h-2" />
            <div className="text-xs text-muted-foreground mt-1">充足空间</div>
          </CardContent>
        </Card>

<Card className="bg-gradient-to-r from-orange-50 to-red-50 border-none shadow-md">
          <CardHeader className="pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-sm font-medium">网络流量</CardTitle>
              <Network className="h-4 w-4 text-orange-600" />
            </div>
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-orange-600">{systemMetrics.network}%</div>
            <Progress value={systemMetrics.network} className="mt-2 h-2" />
            <div className="text-xs text-muted-foreground mt-1">流量正常</div>
          </CardContent>
        </Card>
      </div>

{/* 服务状态监控 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Server className="h-5 w-5 text-blue-600" />
              服务状态
            </CardTitle>
            <CardDescription>各服务模块运行状态</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {serviceStatus.map((service, index) => (
                <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                  <div className="flex items-center gap-3">
                    {getStatusIcon(service.status)}
                    <div>
                      <p className="font-medium text-sm">{service.name}</p>
                      <p className="text-xs text-muted-foreground">响应时间: {service.responseTime}</p>
                    </div>
                  </div>
                  <div className="text-right">
                    <Badge className={getStatusColor(service.status)}>
                      {service.status === "running" ? "运行中" : service.status === "warning" ? "警告" : "错误"}
                    </Badge>
                    <p className="text-xs text-muted-foreground mt-1">可用性: {service.uptime}</p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

{/* 告警信息 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Bell className="h-5 w-5 text-yellow-600" />
              告警信息
            </CardTitle>
            <CardDescription>系统告警与通知</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {alerts.map((alert) => (
                <div key={alert.id} className="flex items-start gap-3 p-3 border rounded-lg">
                  {getAlertIcon(alert.level)}
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium">{alert.message}</p>
                    <div className="flex items-center gap-2 mt-1">
                      <span className="text-xs text-muted-foreground">{alert.service}</span>
                      <span className="text-xs text-muted-foreground">•</span>
                      <span className="text-xs text-muted-foreground">{alert.time}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <Button variant="outline" className="w-full mt-4 bg-transparent">
              查看全部告警
            </Button>
          </CardContent>
        </Card>
      </div>

{/* 性能趋势 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="h-5 w-5 text-green-600" />
            性能趋势
          </CardTitle>
          <CardDescription>系统性能历史趋势分析</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="text-center p-4 bg-blue-50 rounded-lg">
              <div className="text-2xl font-bold text-blue-600">99.8%</div>
              <div className="text-sm text-muted-foreground">系统可用性</div>
              <div className="text-xs text-green-600 mt-1">↑ 0.2%</div>
            </div>
            <div className="text-center p-4 bg-green-50 rounded-lg">
              <div className="text-2xl font-bold text-green-600">156ms</div>
              <div className="text-sm text-muted-foreground">平均响应时间</div>
              <div className="text-xs text-green-600 mt-1">↓ 12ms</div>
            </div>
            <div className="text-center p-4 bg-purple-50 rounded-lg">
              <div className="text-2xl font-bold text-purple-600">1.2M</div>
              <div className="text-sm text-muted-foreground">日处理请求</div>
              <div className="text-xs text-green-600 mt-1">↑ 15%</div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/overview/search/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Avatar } from "@/components/ui/avatar"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Search,
  Filter,
  SortAsc,
  User,
  Tag,
  Database,
  BrainCircuit,
  Phone,
  Mail,
  MapPin,
  Calendar,
  TrendingUp,
  Eye,
  RefreshCw,
} from "lucide-react"

export default function SearchPage() {
  const [searchQuery, setSearchQuery] = useState("")
  const [searchType, setSearchType] = useState("all")
  const [sortBy, setSortBy] = useState("relevance")
  const [isSearching, setIsSearching] = useState(false)
  const [searchResults, setSearchResults] = useState<any[]>([])

// 模拟搜索数据
  const mockSearchData = [
    {
      id: "user_001",
      type: "user",
      name: "张明华",
      phone: "13800138000",
      email: "zhangsan@example.com",
      company: "科技创新有限公司",
      tags: ["高价值", "技术决策者", "活跃用户", "iOS用户"],
      aiInsights: ["科技爱好者", "决策影响者", "高消费潜力"],
      lastActive: "2小时前",
      location: "北京市",
      avatar: "/placeholder.svg?height=40&width=40",
      rfmScore: 95,
      sources: ["抖音", "微信", "表单提交"],
      joinDate: "2023-06-15",
      relevanceScore: 98,
    },
    {
      id: "user_002",
      type: "user",
      name: "李雨婷",
      phone: "13900139001",
      email: "lisi@example.com",
      company: "数字营销公司",
      tags: ["中高价值", "产品经理", "内容创作者"],
      aiInsights: ["创意思维", "社交活跃", "品牌敏感"],
      lastActive: "1天前",
      location: "上海市",
      avatar: "/placeholder.svg?height=40&width=40",
      rfmScore: 78,
      sources: ["小红书", "微信", "客服咨询"],
      joinDate: "2023-08-22",
      relevanceScore: 85,
    },
    {
      id: "tag_001",
      type: "tag",
      name: "高价值用户",
      description: "RFM评分超过80分的用户",
      userCount: 12456,
      category: "价值分类",
      createdDate: "2023-05-10",
      relevanceScore: 92,
    },
    {
      id: "insight_001",
      type: "insight",
      title: "用户行为模式分析",
      description: "基于AI分析的用户行为偏好洞察",
      confidence: 94.5,
      affectedUsers: 8765,
      createdDate: "2023-12-01",
      relevanceScore: 88,
    },
  ]

// 搜索处理
  const handleSearch = async (query: string) => {
    if (!query.trim()) {
      setSearchResults([])
      return
    }

setIsSearching(true)

// 模拟搜索延迟
    setTimeout(() => {
      const filtered = mockSearchData.filter((item) => {
        const searchText = query.toLowerCase()

if (searchType !== "all" && item.type !== searchType) {
          return false
        }

// 根据不同类型进行搜索
        switch (item.type) {
          case "user":
            return (
              item.name.toLowerCase().includes(searchText) ||
              item.phone.includes(searchText) ||
              item.email.toLowerCase().includes(searchText) ||
              item.company.toLowerCase().includes(searchText) ||
              item.tags.some((tag: string) => tag.toLowerCase().includes(searchText)) ||
              item.aiInsights.some((insight: string) => insight.toLowerCase().includes(searchText)) ||
              item.location.toLowerCase().includes(searchText)
            )
          case "tag":
            return (
              item.name.toLowerCase().includes(searchText) ||
              item.description.toLowerCase().includes(searchText) ||
              item.category.toLowerCase().includes(searchText)
            )
          case "insight":
            return item.title.toLowerCase().includes(searchText) || item.description.toLowerCase().includes(searchText)
          default:
            return false
        }
      })

// 排序
      if (sortBy === "relevance") {
        filtered.sort((a, b) => b.relevanceScore - a.relevanceScore)
      } else if (sortBy === "date") {
        filtered.sort(
          (a, b) => new Date(b.createdDate || b.joinDate).getTime() - new Date(a.createdDate || a.joinDate).getTime(),
        )
      } else if (sortBy === "name") {
        filtered.sort((a, b) => (a.name || a.title).localeCompare(b.name || b.title))
      }

setSearchResults(filtered)
      setIsSearching(false)
    }, 800)
  }

// 搜索输入处理
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (searchQuery) {
        handleSearch(searchQuery)
      }
    }, 500)

return () => clearTimeout(timeoutId)
  }, [searchQuery, searchType, sortBy])

const getTypeIcon = (type: string) => {
    switch (type) {
      case "user":
        return <User className="h-4 w-4 text-blue-500" />
      case "tag":
        return <Tag className="h-4 w-4 text-green-500" />
      case "insight":
        return <BrainCircuit className="h-4 w-4 text-purple-500" />
      default:
        return <Database className="h-4 w-4 text-gray-500" />
    }
  }

const getTypeBadgeColor = (type: string) => {
    switch (type) {
      case "user":
        return "bg-blue-100 text-blue-700"
      case "tag":
        return "bg-green-100 text-green-700"
      case "insight":
        return "bg-purple-100 text-purple-700"
      default:
        return "bg-gray-100 text-gray-700"
    }
  }

{/* 搜索栏 */}
      <Card className="bg-gradient-to-r from-purple-50 to-blue-50 border-none shadow-lg">
        <CardContent className="p-6">
          <div className="space-y-4">
            {/* 主搜索框 */}
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
              <Input
                type="text"
                placeholder="搜索用户、标签、洞察或任何相关信息..."
                className="pl-10 h-12 text-base border-2 border-purple-200 focus:border-purple-400"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
              {isSearching && (
                <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
                  <RefreshCw className="h-5 w-5 animate-spin text-purple-500" />
                </div>
              )}
            </div>

{/* 搜索选项 */}
            <div className="flex flex-wrap gap-4">
              <div className="flex items-center gap-2">
                <Filter className="h-4 w-4 text-muted-foreground" />
                <Select value={searchType} onValueChange={setSearchType}>
                  <SelectTrigger className="w-[120px]">
                    <SelectValue placeholder="类型" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部</SelectItem>
                    <SelectItem value="user">用户</SelectItem>
                    <SelectItem value="tag">标签</SelectItem>
                    <SelectItem value="insight">洞察</SelectItem>
                  </SelectContent>
                </Select>
              </div>

{/* 搜索结果 */}
      {searchQuery && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center justify-between">
              <span>搜索结果</span>
              <Badge variant="outline">{searchResults.length} 个结果</Badge>
            </CardTitle>
            <CardDescription>
              搜索关键词: "{searchQuery}"{searchType !== "all" && ` · 类型: ${searchType}`}
            </CardDescription>
          </CardHeader>
          <CardContent>
            {searchResults.length > 0 ? (
              <div className="space-y-4">
                {searchResults.map((result) => (
                  <div
                    key={result.id}
                    className="flex items-start gap-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
                  >
                    {/* 类型图标 */}
                    <div className="flex-shrink-0 mt-1">
                      {result.type === "user" ? (
                        <Avatar className="h-10 w-10">
                          <img src={result.avatar || "/placeholder.svg"} alt={result.name} />
                        </Avatar>
                      ) : (
                        <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
                          {getTypeIcon(result.type)}
                        </div>
                      )}
                    </div>

{/* 内容 */}
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-2">
                        <h3 className="font-semibold text-lg truncate">{result.name || result.title}</h3>
                        <Badge className={getTypeBadgeColor(result.type)}>
                          {result.type === "user" ? "用户" : result.type === "tag" ? "标签" : "洞察"}
                        </Badge>
                        {result.relevanceScore && (
                          <Badge variant="outline" className="text-xs">
                            相关性: {result.relevanceScore}%
                          </Badge>
                        )}
                      </div>

{/* 用户信息 */}
                      {result.type === "user" && (
                        <div className="space-y-2">
                          <div className="flex items-center gap-4 text-sm text-muted-foreground">
                            <span className="flex items-center gap-1">
                              <Phone className="h-3 w-3" />
                              {result.phone}
                            </span>
                            <span className="flex items-center gap-1">
                              <Mail className="h-3 w-3" />
                              {result.email}
                            </span>
                            <span className="flex items-center gap-1">
                              <MapPin className="h-3 w-3" />
                              {result.location}
                            </span>
                          </div>
                          <div className="flex items-center gap-2">
                            <span className="text-sm text-muted-foreground">公司:</span>
                            <span className="text-sm">{result.company}</span>
                            <Badge className="bg-orange-100 text-orange-700 text-xs">RFM: {result.rfmScore}</Badge>
                          </div>
                          <div className="flex flex-wrap gap-1">
                            {result.aiInsights.slice(0, 3).map((insight: string, index: number) => (
                              <Badge key={index} className="text-xs bg-purple-100 text-purple-700">
                                {insight}
                              </Badge>
                            ))}
                          </div>
                        </div>
                      )}

{/* 标签信息 */}
                      {result.type === "tag" && (
                        <div className="space-y-2">
                          <p className="text-sm text-muted-foreground">{result.description}</p>
                          <div className="flex items-center gap-4 text-sm">
                            <span className="flex items-center gap-1">
                              <User className="h-3 w-3" />
                              {result.userCount.toLocaleString()} 用户
                            </span>
                            <span className="flex items-center gap-1">
                              <Tag className="h-3 w-3" />
                              {result.category}
                            </span>
                            <span className="flex items-center gap-1">
                              <Calendar className="h-3 w-3" />
                              {result.createdDate}
                            </span>
                          </div>
                        </div>
                      )}

{/* 洞察信息 */}
                      {result.type === "insight" && (
                        <div className="space-y-2">
                          <p className="text-sm text-muted-foreground">{result.description}</p>
                          <div className="flex items-center gap-4 text-sm">
                            <span className="flex items-center gap-1">
                              <TrendingUp className="h-3 w-3" />
                              置信度: {result.confidence}%
                            </span>
                            <span className="flex items-center gap-1">
                              <User className="h-3 w-3" />
                              影响用户: {result.affectedUsers.toLocaleString()}
                            </span>
                            <span className="flex items-center gap-1">
                              <Calendar className="h-3 w-3" />
                              {result.createdDate}
                            </span>
                          </div>
                        </div>
                      )}
                    </div>

{/* 操作按钮 */}
                    <div className="flex-shrink-0">
                      <Button variant="outline" size="sm">
                        <Eye className="h-4 w-4 mr-1" />
                        查看
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center py-12">
                <Search className="h-12 w-12 mx-auto mb-4 text-muted-foreground opacity-50" />
                <h3 className="text-lg font-medium mb-2">未找到相关结果</h3>
                <p className="text-muted-foreground">尝试使用其他关键词或调整搜索条件</p>
              </div>
            )}
          </CardContent>
        </Card>
      )}

{/* 搜索建议 */}
      {!searchQuery && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <BrainCircuit className="h-5 w-5 text-purple-600" />
              搜索建议
            </CardTitle>
            <CardDescription>热门搜索和智能推荐</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <h4 className="font-medium mb-3">热门搜索</h4>
                <div className="flex flex-wrap gap-2">
                  {["高价值用户", "技术决策者", "活跃用户", "流失风险", "新用户"].map((term) => (
                    <Button
                      key={term}
                      variant="outline"
                      size="sm"
                      onClick={() => setSearchQuery(term)}
                      className="text-xs"
                    >
                      {term}
                    </Button>
                  ))}
                </div>
              </div>
              <div>
                <h4 className="font-medium mb-3">智能推荐</h4>
                <div className="space-y-2">
                  <div className="text-sm text-muted-foreground">• 搜索特定用户: 输入姓名、手机号或邮箱</div>
                  <div className="text-sm text-muted-foreground">• 查找标签: 输入标签名称或描述</div>
                  <div className="text-sm text-muted-foreground">• 发现洞察: 输入行为模式或分析结果</div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/overview/search/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/data-integration/page.tsx" isEdit="true" isMerged="true"
"use client"

export default function DataIntegrationPage() {
  const [activeTab, setActiveTab] = useState("overview")

const integrationStats = {
    totalSources: 12,
    activeSources: 10,
    dailyVolume: 2456789,
    successRate: 98.5,
    avgLatency: 156,
    qualityScore: 94.2,
  }

const dataSources = [
    {
      id: 1,
      name: "MySQL主库",
      type: "database",
      status: "connected",
      lastSync: "2分钟前",
      records: 1245678,
      quality: 98.5,
    },
    {
      id: 2,
      name: "触客宝API",
      type: "api",
      status: "connected",
      lastSync: "5分钟前",
      records: 456789,
      quality: 96.2,
    },
    {
      id: 3,
      name: "抖音内容平台",
      type: "api",
      status: "warning",
      lastSync: "1小时前",
      records: 234567,
      quality: 89.3,
    },
    {
      id: 4,
      name: "小红书API",
      type: "api",
      status: "connected",
      lastSync: "10分钟前",
      records: 123456,
      quality: 95.8,
    },
    {
      id: 5,
      name: "微信视频号",
      type: "api",
      status: "connected",
      lastSync: "15分钟前",
      records: 98765,
      quality: 92.4,
    },
    {
      id: 6,
      name: "飞书妙记API",
      type: "api",
      status: "error",
      lastSync: "2小时前",
      records: 45678,
      quality: 78.9,
    },
  ]

const recentActivities = [
    {
      id: 1,
      type: "sync_complete",
      message: "MySQL主库数据同步完成",
      time: "2分钟前",
      status: "success",
    },
    {
      id: 2,
      type: "quality_check",
      message: "触客宝API数据质量检查通过",
      time: "8分钟前",
      status: "success",
    },
    {
      id: 3,
      type: "sync_warning",
      message: "抖音内容平台同步延迟",
      time: "1小时前",
      status: "warning",
    },
    {
      id: 4,
      type: "sync_error",
      message: "飞书妙记API连接失败",
      time: "2小时前",
      status: "error",
    },
  ]

const getStatusIcon = (status: string) => {
    switch (status) {
      case "connected":
        return <CheckCircle className="h-4 w-4 text-green-500" />
      case "warning":
        return <AlertTriangle className="h-4 w-4 text-yellow-500" />
      case "error":
        return <AlertTriangle className="h-4 w-4 text-red-500" />
      default:
        return <Clock className="h-4 w-4 text-gray-500" />
    }
  }

const getStatusColor = (status: string) => {
    switch (status) {
      case "connected":
        return "bg-green-100 text-green-800"
      case "warning":
        return "bg-yellow-100 text-yellow-800"
      case "error":
        return "bg-red-100 text-red-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

const getActivityIcon = (type: string) => {
    switch (type) {
      case "sync_complete":
        return <CheckCircle className="h-4 w-4 text-green-500" />
      case "quality_check":
        return <Shield className="h-4 w-4 text-blue-500" />
      case "sync_warning":
        return <AlertTriangle className="h-4 w-4 text-yellow-500" />
      case "sync_error":
        return <AlertTriangle className="h-4 w-4 text-red</article></body></html>