sundynix/sundynix-radio-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 重构页面布局，样式

Browse Source
This commit is contained in:
Blizzard
2026-03-02 15:00:37 +08:00
parent da7ac70eeb
commit 4dfd7f87c7
18 changed files with 2875 additions and 965 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2 -2
View File
@@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/jpeg" href="/favicon.jpg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>morning-radio-frontend</title> <title>Good Morning</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
package-lock.json
Generated
+420 -1
View File
@@ -13,6 +13,7 @@
"axios": "^1.13.6", "axios": "^1.13.6",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"framer-motion": "^12.34.3",
"lucide-react": "^0.575.0", "lucide-react": "^0.575.0",
"next-themes": "^0.4.6", "next-themes": "^0.4.6",
"radix-ui": "^1.4.3", "radix-ui": "^1.4.3",
@@ -20,6 +21,7 @@
"react-dom": "^19.2.0", "react-dom": "^19.2.0",
"react-hook-form": "^7.71.2", "react-hook-form": "^7.71.2",
"react-router-dom": "^7.13.1", "react-router-dom": "^7.13.1",
"recharts": "^3.7.0",
"sonner": "^2.0.7", "sonner": "^2.0.7",
"tailwind-merge": "^3.5.0", "tailwind-merge": "^3.5.0",
"zod": "^4.3.6", "zod": "^4.3.6",
@@ -3218,6 +3220,42 @@
"integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==", "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/@reduxjs/toolkit": {
"version": "2.11.2",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
"integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
"license": "MIT",
"dependencies": {
"@standard-schema/spec": "^1.0.0",
"@standard-schema/utils": "^0.3.0",
"immer": "^11.0.0",
"redux": "^5.0.1",
"redux-thunk": "^3.1.0",
"reselect": "^5.1.0"
},
"peerDependencies": {
"react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
"react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
},
"peerDependenciesMeta": {
"react": {
"optional": true
},
"react-redux": {
"optional": true
}
}
},
"node_modules/@reduxjs/toolkit/node_modules/immer": {
"version": "11.1.4",
"resolved": "https://registry.npmjs.org/immer/-/immer-11.1.4.tgz",
"integrity": "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==",
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/immer"
}
},
"node_modules/@rolldown/pluginutils": { "node_modules/@rolldown/pluginutils": {
"version": "1.0.0-rc.3", "version": "1.0.0-rc.3",
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.3.tgz", "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.3.tgz",
@@ -3570,6 +3608,12 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/@standard-schema/spec": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
"integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
"license": "MIT"
},
"node_modules/@standard-schema/utils": { "node_modules/@standard-schema/utils": {
"version": "0.3.0", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz", "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
@@ -3929,6 +3973,69 @@
"@babel/types": "^7.28.2" "@babel/types": "^7.28.2"
} }
}, },
"node_modules/@types/d3-array": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
"integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
"license": "MIT"
},
"node_modules/@types/d3-color": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
"integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
"license": "MIT"
},
"node_modules/@types/d3-ease": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
"integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
"license": "MIT"
},
"node_modules/@types/d3-interpolate": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
"integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
"license": "MIT",
"dependencies": {
"@types/d3-color": "*"
}
},
"node_modules/@types/d3-path": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
"integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
"license": "MIT"
},
"node_modules/@types/d3-scale": {
"version": "4.0.9",
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
"integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
"license": "MIT",
"dependencies": {
"@types/d3-time": "*"
}
},
"node_modules/@types/d3-shape": {
"version": "3.1.8",
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
"integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
"license": "MIT",
"dependencies": {
"@types/d3-path": "*"
}
},
"node_modules/@types/d3-time": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
"integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
"license": "MIT"
},
"node_modules/@types/d3-timer": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
"integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
"license": "MIT"
},
"node_modules/@types/estree": { "node_modules/@types/estree": {
"version": "1.0.8", "version": "1.0.8",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -3979,6 +4086,12 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/use-sync-external-store": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
"integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
"license": "MIT"
},
"node_modules/@types/validate-npm-package-name": { "node_modules/@types/validate-npm-package-name": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/@types/validate-npm-package-name/-/validate-npm-package-name-4.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/validate-npm-package-name/-/validate-npm-package-name-4.0.2.tgz",
@@ -5028,6 +5141,127 @@
"devOptional": true, "devOptional": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/d3-array": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
"license": "ISC",
"dependencies": {
"internmap": "1 - 2"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-color": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
"license": "ISC",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-ease": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
"license": "BSD-3-Clause",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-format": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
"integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
"license": "ISC",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-interpolate": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
"license": "ISC",
"dependencies": {
"d3-color": "1 - 3"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-path": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
"integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
"license": "ISC",
"engines": {
"node": ">=12"
}
},
"node_modules/d3-scale": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
"license": "ISC",
"dependencies": {
"d3-array": "2.10.0 - 3",
"d3-format": "1 - 3",
"d3-interpolate": "1.2.0 - 3",
"d3-time": "2.1.1 - 3",
"d3-time-format": "2 - 4"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-shape": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
"integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
"license": "ISC",
"dependencies": {
"d3-path": "^3.1.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-time": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
"license": "ISC",
"dependencies": {
"d3-array": "2 - 3"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-time-format": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
"license": "ISC",
"dependencies": {
"d3-time": "1 - 3"
},
"engines": {
"node": ">=12"
}
},
"node_modules/d3-timer": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
"license": "ISC",
"engines": {
"node": ">=12"
}
},
"node_modules/data-uri-to-buffer": { "node_modules/data-uri-to-buffer": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz", "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
@@ -5056,6 +5290,12 @@
} }
} }
}, },
"node_modules/decimal.js-light": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
"integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
"license": "MIT"
},
"node_modules/dedent": { "node_modules/dedent": {
"version": "1.7.1", "version": "1.7.1",
"resolved": "https://registry.npmjs.org/dedent/-/dedent-1.7.1.tgz", "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.7.1.tgz",
@@ -5329,6 +5569,16 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/es-toolkit": {
"version": "1.44.0",
"resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.44.0.tgz",
"integrity": "sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg==",
"license": "MIT",
"workspaces": [
"docs",
"benchmarks"
]
},
"node_modules/esbuild": { "node_modules/esbuild": {
"version": "0.27.3", "version": "0.27.3",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
@@ -5608,6 +5858,12 @@
"node": ">= 0.6" "node": ">= 0.6"
} }
}, },
"node_modules/eventemitter3": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
"integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
"license": "MIT"
},
"node_modules/eventsource": { "node_modules/eventsource": {
"version": "3.0.7", "version": "3.0.7",
"resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz", "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
@@ -6022,6 +6278,33 @@
"node": ">= 0.6" "node": ">= 0.6"
} }
}, },
"node_modules/framer-motion": {
"version": "12.34.3",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.34.3.tgz",
"integrity": "sha512-v81ecyZKYO/DfpTwHivqkxSUBzvceOpoI+wLfgCgoUIKxlFKEXdg0oR9imxwXumT4SFy8vRk9xzJ5l3/Du/55Q==",
"license": "MIT",
"dependencies": {
"motion-dom": "^12.34.3",
"motion-utils": "^12.29.2",
"tslib": "^2.4.0"
},
"peerDependencies": {
"@emotion/is-prop-valid": "*",
"react": "^18.0.0 || ^19.0.0",
"react-dom": "^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@emotion/is-prop-valid": {
"optional": true
},
"react": {
"optional": true
},
"react-dom": {
"optional": true
}
}
},
"node_modules/fresh": { "node_modules/fresh": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz", "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
@@ -6402,6 +6685,16 @@
"node": ">= 4" "node": ">= 4"
} }
}, },
"node_modules/immer": {
"version": "10.2.0",
"resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
"integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/immer"
}
},
"node_modules/import-fresh": { "node_modules/import-fresh": {
"version": "3.3.1", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -6436,6 +6729,15 @@
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/internmap": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
"license": "ISC",
"engines": {
"node": ">=12"
}
},
"node_modules/ip-address": { "node_modules/ip-address": {
"version": "10.0.1", "version": "10.0.1",
"resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz", "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.0.1.tgz",
@@ -7315,6 +7617,21 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/motion-dom": {
"version": "12.34.3",
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.34.3.tgz",
"integrity": "sha512-sYgFe+pR9aIM7o4fhs2aXtOI+oqlUd33N9Yoxcgo1Fv7M20sRkHtCmzE/VRNIcq7uNJ+qio+Xubt1FXH3pQ+eQ==",
"license": "MIT",
"dependencies": {
"motion-utils": "^12.29.2"
}
},
"node_modules/motion-utils": {
"version": "12.29.2",
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.29.2.tgz",
"integrity": "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==",
"license": "MIT"
},
"node_modules/ms": { "node_modules/ms": {
"version": "2.1.3", "version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -8136,6 +8453,36 @@
"react": "^16.8.0 || ^17 || ^18 || ^19" "react": "^16.8.0 || ^17 || ^18 || ^19"
} }
}, },
"node_modules/react-is": {
"version": "19.2.4",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz",
"integrity": "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==",
"license": "MIT",
"peer": true
},
"node_modules/react-redux": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
"license": "MIT",
"dependencies": {
"@types/use-sync-external-store": "^0.0.6",
"use-sync-external-store": "^1.4.0"
},
"peerDependencies": {
"@types/react": "^18.2.25 || ^19",
"react": "^18.0 || ^19",
"redux": "^5.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"redux": {
"optional": true
}
}
},
"node_modules/react-refresh": { "node_modules/react-refresh": {
"version": "0.18.0", "version": "0.18.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
@@ -8283,6 +8630,51 @@
"node": ">= 4" "node": ">= 4"
} }
}, },
"node_modules/recharts": {
"version": "3.7.0",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.7.0.tgz",
"integrity": "sha512-l2VCsy3XXeraxIID9fx23eCb6iCBsxUQDnE8tWm6DFdszVAO7WVY/ChAD9wVit01y6B2PMupYiMmQwhgPHc9Ew==",
"license": "MIT",
"workspaces": [
"www"
],
"dependencies": {
"@reduxjs/toolkit": "1.x.x || 2.x.x",
"clsx": "^2.1.1",
"decimal.js-light": "^2.5.1",
"es-toolkit": "^1.39.3",
"eventemitter3": "^5.0.1",
"immer": "^10.1.1",
"react-redux": "8.x.x || 9.x.x",
"reselect": "5.1.1",
"tiny-invariant": "^1.3.3",
"use-sync-external-store": "^1.2.2",
"victory-vendor": "^37.0.2"
},
"engines": {
"node": ">=18"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/redux": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
"license": "MIT"
},
"node_modules/redux-thunk": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
"integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
"license": "MIT",
"peerDependencies": {
"redux": "^5.0.0"
}
},
"node_modules/require-directory": { "node_modules/require-directory": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -8303,6 +8695,12 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/reselect": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
"integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
"license": "MIT"
},
"node_modules/resolve-from": { "node_modules/resolve-from": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -8922,7 +9320,6 @@
"version": "1.3.3", "version": "1.3.3",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==", "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
"dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/tinyexec": { "node_modules/tinyexec": {
@@ -9314,6 +9711,28 @@
"node": ">= 0.8" "node": ">= 0.8"
} }
}, },
"node_modules/victory-vendor": {
"version": "37.3.6",
"resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
"integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
"license": "MIT AND ISC",
"dependencies": {
"@types/d3-array": "^3.0.3",
"@types/d3-ease": "^3.0.0",
"@types/d3-interpolate": "^3.0.1",
"@types/d3-scale": "^4.0.2",
"@types/d3-shape": "^3.1.0",
"@types/d3-time": "^3.0.0",
"@types/d3-timer": "^3.0.0",
"d3-array": "^3.1.6",
"d3-ease": "^3.0.1",
"d3-interpolate": "^3.0.1",
"d3-scale": "^4.0.2",
"d3-shape": "^3.1.0",
"d3-time": "^3.0.0",
"d3-timer": "^3.0.1"
}
},
"node_modules/vite": { "node_modules/vite": {
"version": "7.3.1", "version": "7.3.1",
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
package.json
+2
View File
@@ -15,6 +15,7 @@
"axios": "^1.13.6", "axios": "^1.13.6",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"framer-motion": "^12.34.3",
"lucide-react": "^0.575.0", "lucide-react": "^0.575.0",
"next-themes": "^0.4.6", "next-themes": "^0.4.6",
"radix-ui": "^1.4.3", "radix-ui": "^1.4.3",
@@ -22,6 +23,7 @@
"react-dom": "^19.2.0", "react-dom": "^19.2.0",
"react-hook-form": "^7.71.2", "react-hook-form": "^7.71.2",
"react-router-dom": "^7.13.1", "react-router-dom": "^7.13.1",
"recharts": "^3.7.0",
"sonner": "^2.0.7", "sonner": "^2.0.7",
"tailwind-merge": "^3.5.0", "tailwind-merge": "^3.5.0",
"zod": "^4.3.6", "zod": "^4.3.6",
public/favicon.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

public/vite.svg
-1
View File
@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

src/api/oss.ts
+2 -2
View File
@@ -9,5 +9,5 @@ export const uploadFileApi = (formData: FormData) => {
}; };
export const getFileListApi = (data: any) => request.post('/oss/getFileList', data); export const getFileListApi = (data: any) => request.post('/oss/getFileList', data);
export const deleteFileApi = (data: { id: number }) => request.post('/oss/delete', data); export const deleteFileApi = (data: { ids: (string | number)[] }) => request.post('/oss/delete', data);
export const getFileDetailApi = (id: number) => request.get('/oss/getFile', { params: { id } }); export const getFileDetailApi = (id: string | number) => request.get('/oss/getFile', { params: { id } });
src/api/radio.ts
+9 -6
View File
@@ -3,21 +3,24 @@ import request from '../utils/request';
// --- Category API --- // --- Category API ---
export const getCategoryPageApi = (data: any) => request.post('/radio/category/page', data); export const getCategoryPageApi = (data: any) => request.post('/radio/category/page', data);
export const getCategoryListApi = (data: any = {}) => request.post('/radio/category/list', data); export const getCategoryListApi = (data: any = {}) => request.post('/radio/category/list', data);
export const getCategoryDetailApi = (id: number) => request.get('/radio/category/detail', { params: { id } }); export const getCategoryDetailApi = (id: string | number) => request.get('/radio/category/detail', { params: { id } });
export const saveCategoryApi = (data: any) => request.post('/radio/category/save', data); export const saveCategoryApi = (data: any) => request.post('/radio/category/save', data);
export const updateCategoryApi = (data: any) => request.post('/radio/category/update', data); export const updateCategoryApi = (data: any) => request.post('/radio/category/update', data);
export const deleteCategoryApi = (data: { id: number }) => request.post('/radio/category/delete', data); export const deleteCategoryApi = (data: { id: string | number }) => request.post('/radio/category/delete', data);
// --- Channel API --- // --- Channel API ---
export const getChannelListApi = (data: any = {}) => request.post('/radio/channel/list', data); export const getChannelListApi = (data: any = {}) => request.post('/radio/channel/list', data);
export const getChannelDetailApi = (id: number) => request.get('/radio/channel/detail', { params: { id } }); export const getChannelDetailApi = (id: string | number) => request.get('/radio/channel/detail', { params: { id } });
export const saveChannelApi = (data: any) => request.post('/radio/channel/save', data); export const saveChannelApi = (data: any) => request.post('/radio/channel/save', data);
export const updateChannelApi = (data: any) => request.post('/radio/channel/update', data); export const updateChannelApi = (data: any) => request.post('/radio/channel/update', data);
export const deleteChannelApi = (data: { id: number }) => request.post('/radio/channel/delete', data); export const deleteChannelApi = (data: { id: string | number }) => request.post('/radio/channel/delete', data);
// --- Program API --- // --- Program API ---
export const getProgramListApi = (data: any = {}) => request.post('/radio/program/list', data); export const getProgramListApi = (data: any = {}) => request.post('/radio/program/list', data);
export const getProgramDetailApi = (id: number) => request.get('/radio/program/detail', { params: { id } }); export const getProgramDetailApi = (id: string | number) => request.get('/radio/program/detail', { params: { id } });
export const saveProgramApi = (data: any) => request.post('/radio/program/save', data); export const saveProgramApi = (data: any) => request.post('/radio/program/save', data);
export const updateProgramApi = (data: any) => request.post('/radio/program/update', data); export const updateProgramApi = (data: any) => request.post('/radio/program/update', data);
export const deleteProgramApi = (data: { id: number }) => request.post('/radio/program/delete', data); export const deleteProgramApi = (data: { ids: (string | number)[] }) => request.post('/radio/program/delete', data);
export const getAllCategoryListApi = () => request.get('/radio/category/list');
export const getCategoryTreeApi = () => request.get('/radio/category/tree');
src/components/DeleteConfirm.tsx
+64
View File
@@ -0,0 +1,64 @@
import {
Dialog,
DialogContent,
DialogDescription,
DialogTitle,
} from "./ui/dialog";
import { Button } from "./ui/button";
import { AlertCircle } from "lucide-react";
interface DeleteConfirmProps {
open: boolean;
onOpenChange: (open: boolean) => void;
onConfirm: () => void;
title?: string;
description?: string;
loading?: boolean;
}
export function DeleteConfirm({
open,
onOpenChange,
onConfirm,
title = "确认删除",
description = "此操作无法撤销。您确定要永久删除此项目吗？",
loading = false
}: DeleteConfirmProps) {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[450px] glass-card warm-noise border-none rounded-[2.5rem] p-0 overflow-hidden shadow-2xl">
<div className="bg-rose-50/50 p-8 flex items-start gap-5 border-b border-rose-100/50">
<div className="w-12 h-12 rounded-2xl bg-rose-100 flex items-center justify-center shrink-0">
<AlertCircle className="w-6 h-6 text-rose-600" />
</div>
<div className="space-y-1">
<DialogTitle className="text-xl font-black text-[#4A3A2C] leading-none">
{title}
</DialogTitle>
<DialogDescription className="text-[#8C7E6C] font-medium text-sm leading-relaxed pt-2">
{description}
</DialogDescription>
</div>
</div>
<div className="p-8 bg-[#FAF5E6]/40 backdrop-blur-xl flex justify-end items-center gap-4">
<Button
variant="ghost"
onClick={() => onOpenChange(false)}
disabled={loading}
className="rounded-2xl h-12 px-8 font-black text-[#4A3A2C]/60 hover:bg-white transition-all"
>
取消
</Button>
<Button
variant="destructive"
onClick={onConfirm}
disabled={loading}
className="rounded-2xl h-12 px-8 font-black shadow-lg shadow-rose-200 hover:scale-105 active:scale-95 transition-all bg-rose-600 hover:bg-rose-700 border-none"
>
{loading ? "正在处理..." : "确认删除"}
</Button>
</div>
</DialogContent>
</Dialog>
);
}
src/components/FileUploader.tsx
+125
View File
@@ -0,0 +1,125 @@
import React, { useState } from 'react';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Upload, X, FileIcon, Loader2 } from 'lucide-react';
import { uploadFileApi } from '../api/oss';
import { toast } from 'sonner';
interface FileUploaderProps {
value?: string | number;
onChange: (id: string) => void;
label: string;
accept?: string;
placeholder?: string;
initialPreview?: string;
}
export function FileUploader({ value, onChange, label, accept = "image/*", placeholder = "点击上传文件", initialPreview }: FileUploaderProps) {
const [uploading, setUploading] = useState(false);
const [previewUrl, setPreviewUrl] = useState<string>('');
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
const formData = new FormData();
formData.append('file', file);
try {
setUploading(true);
const res: any = await uploadFileApi(formData);
// 匹配返回结构: res.data.file.id
const fileData = res.file;
const id = fileData?.id;
const url = fileData?.url;
if (id) {
onChange(String(id));
if (url) setPreviewUrl(url);
toast.success(`${label} 上传成功`);
} else {
toast.error('上传失败：未能获取文件 ID');
}
} catch (error) {
console.error('Upload error:', error);
toast.error(`${label} 上传失败`);
} finally {
setUploading(false);
e.target.value = '';
}
};
const handleClear = (e: React.MouseEvent) => {
e.stopPropagation();
e.preventDefault();
onChange('');
setPreviewUrl('');
};
const isImage = accept.includes('image');
const currentPreview = previewUrl || initialPreview;
return (
<div className="space-y-3">
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">{label}</Label>
<div className={`relative group border-2 border-dashed rounded-[2rem] transition-all duration-300 flex flex-col items-center justify-center p-4 min-h-[120px] shadow-inner ${value ? 'border-[#D28F4F]/30 bg-[#D28F4F]/5' : 'border-[#4A3A2C]/10 bg-white/50 hover:bg-white hover:border-[#D28F4F]/30'
}`}>
{uploading ? (
<div className="flex flex-col items-center gap-3">
<Loader2 className="h-10 w-10 animate-spin text-[#D28F4F]" />
<span className="text-[10px] font-black text-[#8C7E6C]/60 uppercase tracking-widest">同步文件中...</span>
</div>
) : value ? (
<div className="w-full flex flex-col items-center gap-3">
{isImage && (currentPreview || (typeof value === 'string' && value.startsWith('http'))) ? (
<div className="relative w-16 h-16 rounded-2xl overflow-hidden shadow-md border border-white p-1 bg-white">
<img
src={currentPreview || (typeof value === 'string' && value.startsWith('http') ? value : '')}
alt="preview"
className="w-full h-full object-cover rounded-xl"
onError={(e) => {
(e.target as any).style.display = 'none';
}}
/>
<div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<Upload className="w-6 h-6 text-white" />
</div>
</div>
) : (
<div className="flex flex-col items-center gap-2">
<div className="w-14 h-14 rounded-2xl bg-white shadow-sm flex items-center justify-center border border-[#4A3A2C]/5">
<FileIcon className="h-7 w-7 text-[#D28F4F]" />
</div>
{currentPreview && !isImage && <span className="text-[10px] font-black text-[#D28F4F] truncate max-w-[140px] uppercase">已映射资源链</span>}
</div>
)}
<div className="text-[10px] font-bold text-[#8C7E6C]/50 max-w-full truncate px-4 bg-white/50 py-1 rounded-full border border-[#4A3A2C]/5">
REF ID: {value}
</div>
<button
type="button"
onClick={handleClear}
className="absolute top-3 right-3 bg-white/80 backdrop-blur-sm border border-[#4A3A2C]/5 shadow-sm rounded-full w-8 h-8 flex items-center justify-center hover:bg-rose-50 hover:text-rose-600 transition-all font-black"
>
<X className="h-4 w-4" />
</button>
</div>
) : (
<div className="flex flex-col items-center gap-3 text-[#8C7E6C]/30 group-hover:text-[#D28F4F] transition-colors">
<Upload className="h-10 w-10" />
<span className="text-[11px] font-black uppercase tracking-tighter">{placeholder}</span>
</div>
)}
<Input
type="file"
accept={accept}
onChange={handleFileChange}
disabled={uploading}
className="absolute inset-0 opacity-0 cursor-pointer"
/>
</div>
</div>
);
}
src/index.css
+218 -104
View File
@@ -5,120 +5,234 @@
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
@theme inline { @theme inline {
--radius-sm: calc(var(--radius) - 4px); --radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px); --radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius); --radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px); --radius-xl: calc(var(--radius) + 4px);
--radius-2xl: calc(var(--radius) + 8px); --radius-2xl: calc(var(--radius) + 8px);
--radius-3xl: calc(var(--radius) + 12px); --radius-3xl: calc(var(--radius) + 12px);
--radius-4xl: calc(var(--radius) + 16px); --radius-4xl: calc(var(--radius) + 16px);
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--color-card: var(--card); --color-card: var(--card);
--color-card-foreground: var(--card-foreground); --color-card-foreground: var(--card-foreground);
--color-popover: var(--popover); --color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground); --color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary); --color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground); --color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary); --color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground); --color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted); --color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground); --color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent); --color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground); --color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive); --color-destructive: var(--destructive);
--color-border: var(--border); --color-border: var(--border);
--color-input: var(--input); --color-input: var(--input);
--color-ring: var(--ring); --color-ring: var(--ring);
--color-chart-1: var(--chart-1); --color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2); --color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3); --color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4); --color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5); --color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar); --color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border); --color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring); --color-sidebar-ring: var(--sidebar-ring);
} }
:root { :root {
--radius: 0.625rem; --radius: 1.5rem;
--background: oklch(1 0 0); /* 24px */
--foreground: oklch(0.145 0 0); --background: #FAF5E6;
--card: oklch(1 0 0); /* 暖奶油色 */
--card-foreground: oklch(0.145 0 0); --foreground: #4A3A2C;
--popover: oklch(1 0 0); /* 深暖棕色 */
--popover-foreground: oklch(0.145 0 0); --card: rgba(255, 253, 235, 0.85);
--primary: oklch(0.205 0 0); /* 浅黄油色 */
--primary-foreground: oklch(0.985 0 0); --card-foreground: #4A3A2C;
--secondary: oklch(0.97 0 0); --popover: rgba(255, 253, 235, 0.9);
--secondary-foreground: oklch(0.205 0 0); --popover-foreground: #4A3A2C;
--muted: oklch(0.97 0 0); --primary: #D28F4F;
--muted-foreground: oklch(0.556 0 0); /* 柔和的琥珀色 */
--accent: oklch(0.97 0 0); --primary-foreground: #FFFFFF;
--accent-foreground: oklch(0.205 0 0); --secondary: #6A7F6A;
--destructive: oklch(0.577 0.245 27.325); /* 灰绿色 */
--border: oklch(0.922 0 0); --secondary-foreground: #FFFFFF;
--input: oklch(0.922 0 0); --muted: #F2EDE4;
--ring: oklch(0.708 0 0); --muted-foreground: #8C7E6C;
--chart-1: oklch(0.646 0.222 41.116); --accent: rgba(210, 143, 79, 0.1);
--chart-2: oklch(0.6 0.118 184.704); --accent-foreground: #D28F4F;
--chart-3: oklch(0.398 0.07 227.392); --destructive: #A64452;
--chart-4: oklch(0.828 0.189 84.429); --border: rgba(74, 58, 44, 0.08);
--chart-5: oklch(0.769 0.188 70.08); --input: rgba(74, 58, 44, 0.05);
--sidebar: oklch(0.985 0 0); --ring: #D28F4F;
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0); /* Custom Design Tokens */
--sidebar-primary-foreground: oklch(0.985 0 0); --morning-gradient: linear-gradient(135deg, #FDE68A 0%, #FBBF24 50%, #7DD3FC 100%);
--sidebar-accent: oklch(0.97 0 0); --evening-gradient: linear-gradient(135deg, #2D3748 0%, #D28F4F 50%, #1A202C 100%);
--sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-twilight: #263238;
--sidebar-border: oklch(0.922 0 0); --glass-bg: rgba(255, 253, 235, 0.4);
--sidebar-ring: oklch(0.708 0 0); --glass-border: rgba(255, 255, 255, 0.6);
--glass-shadow: 0 20px 50px rgba(74, 58, 44, 0.1);
} }
.dark { .dark {
--background: oklch(0.145 0 0); --background: #1A1A1A;
--foreground: oklch(0.985 0 0); --foreground: #E8E1D9;
--card: oklch(0.205 0 0); --card: rgba(30, 30, 30, 0.8);
--card-foreground: oklch(0.985 0 0); --card-foreground: #E8E1D9;
--popover: oklch(0.205 0 0); --popover: rgba(30, 30, 30, 0.9);
--popover-foreground: oklch(0.985 0 0); --popover-foreground: #E8E1D9;
--primary: oklch(0.922 0 0); --primary: #D28F4F;
--primary-foreground: oklch(0.205 0 0); --primary-foreground: #FFFFFF;
--secondary: oklch(0.269 0 0); --secondary: #6A7F6A;
--secondary-foreground: oklch(0.985 0 0); --secondary-foreground: #FFFFFF;
--muted: oklch(0.269 0 0); --muted: #2D2D2D;
--muted-foreground: oklch(0.708 0 0); --muted-foreground: #8C7E6C;
--accent: oklch(0.269 0 0); --accent: rgba(210, 143, 79, 0.2);
--accent-foreground: oklch(0.985 0 0); --accent-foreground: #D28F4F;
--destructive: oklch(0.704 0.191 22.216); --destructive: #A64452;
--border: oklch(1 0 0 / 10%); --border: rgba(255, 255, 255, 0.1);
--input: oklch(1 0 0 / 15%); --input: rgba(255, 255, 255, 0.1);
--ring: oklch(0.556 0 0); --ring: #D28F4F;
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48); --glass-bg: rgba(30, 30, 30, 0.6);
--chart-3: oklch(0.769 0.188 70.08); --glass-border: rgba(255, 255, 255, 0.05);
--chart-4: oklch(0.627 0.265 303.9); }
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0); .glass-card {
--sidebar-foreground: oklch(0.985 0 0); background: var(--glass-bg);
--sidebar-primary: oklch(0.488 0.243 264.376); backdrop-filter: blur(20px);
--sidebar-primary-foreground: oklch(0.985 0 0); -webkit-backdrop-filter: blur(20px);
--sidebar-accent: oklch(0.269 0 0); border: 1px solid var(--glass-border);
--sidebar-accent-foreground: oklch(0.985 0 0); box-shadow: var(--glass-shadow);
--sidebar-border: oklch(1 0 0 / 10%); overflow: hidden;
--sidebar-ring: oklch(0.556 0 0); }
/* 暖色噪点纹理 */
.warm-noise::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.06;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
z-index: 0;
}
.sidebar-noise {
position: relative;
background-color: var(--sidebar-twilight);
}
.sidebar-noise::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.03;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
/* 侧边栏选中光晕 */
.sidebar-halo {
position: relative;
box-shadow: 0 0 15px rgba(210, 143, 79, 0.3);
border: 1px solid rgba(210, 143, 79, 0.4) !important;
}
.audio-wave {
display: flex;
align-items: flex-end;
gap: 2px;
height: 12px;
}
.audio-wave span {
width: 2px;
background: var(--primary);
border-radius: 1px;
animation: wave 1s ease-in-out infinite;
}
@keyframes wave {
0%,
100% {
transform: scaleY(1);
}
50% {
transform: scaleY(2.5);
}
}
@keyframes wave-slow {
0%,
100% {
transform: scaleY(1);
}
50% {
transform: scaleY(3.5);
}
}
.animate-wave {
animation: wave 1s ease-in-out infinite;
transform-origin: bottom;
}
.animate-wave-slow {
animation: wave-slow 1.5s ease-in-out infinite;
transform-origin: bottom;
}
.audio-wave span:nth-child(2) {
animation-delay: 0.1s;
}
.audio-wave span:nth-child(3) {
animation-delay: 0.2s;
} }
@layer base { @layer base {
* { * {
@apply border-border outline-ring/50; @apply border-border outline-ring/50;
} }
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground font-sans;
} background-image: radial-gradient(at 0% 0%, rgba(210, 143, 79, 0.05) 0px, transparent 50%),
radial-gradient(at 100% 100%, rgba(106, 127, 106, 0.05) 0px, transparent 50%);
}
}
.custom-scrollbar::-webkit-scrollbar {
width: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: rgba(74, 58, 44, 0.1);
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: rgba(74, 58, 44, 0.2);
} }
src/layouts/AdminLayout.tsx
+61 -42
View File
@@ -2,7 +2,6 @@ import { Outlet, Navigate, useNavigate, Link, useLocation } from 'react-router-d
import { useAuthStore } from '../store/authStore'; import { useAuthStore } from '../store/authStore';
import { logoutApi } from '../api/auth'; import { logoutApi } from '../api/auth';
import { import {
Radio,
LayoutDashboard, LayoutDashboard,
ListMusic, ListMusic,
Mic2, Mic2,
@@ -53,47 +52,56 @@ export default function AdminLayout() {
]; ];
return ( return (
<div className="flex h-screen bg-slate-50 dark:bg-slate-950 overflow-hidden"> <div className="flex h-screen bg-[#FAF5E6] dark:bg-[#1A1A1A] overflow-hidden font-sans warm-noise">
{/* Sidebar */} {/* Sidebar */}
<aside className="fixed inset-y-0 left-0 z-50 w-64 bg-slate-900 text-slate-100 hidden md:flex flex-col shadow-xl"> <aside className="fixed inset-y-0 left-0 z-50 w-64 sidebar-noise text-slate-100 hidden md:flex flex-col shadow-2xl border-r border-white/5">
<div className="flex items-center h-16 px-6 border-b border-slate-800 shrink-0"> <div className="flex items-center h-20 px-6 border-b border-white/5 shrink-0">
<div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center mr-3 shadow-lg shadow-primary/20"> <div className="w-12 h-12 rounded-2xl overflow-hidden mr-3 shadow-lg shadow-orange-500/20 ring-1 ring-white/20 flex items-center justify-center bg-white">
<Radio className="w-5 h-5 text-white" /> <img src="/favicon.jpg" alt="logo" className="w-full h-full object-cover p-1 bg-white" />
</div>
<div className="flex flex-col">
<span className="font-black text-lg tracking-tight leading-none text-white">早安和傍晚</span>
<span className="text-[10px] uppercase tracking-[0.2em] text-white/40 mt-1">广播控制台</span>
</div> </div>
<span className="font-bold text-lg tracking-wide uppercase">早安电台</span>
</div> </div>
<div className="flex-1 px-4 py-6 space-y-2 overflow-y-auto custom-scrollbar"> <div className="flex-1 px-4 py-8 space-y-4 overflow-y-auto custom-scrollbar">
{navItems.map((item) => { {navItems.map((item) => {
const isActive = location.pathname === item.path || (item.path !== '/' && location.pathname.startsWith(item.path)); const isActive = location.pathname === item.path || (item.path !== '/' && location.pathname.startsWith(item.path));
return ( return (
<Link key={item.path} to={item.path}> <Link key={item.path} to={item.path}>
<Button <Button
variant="ghost" variant="ghost"
className={`w-full justify-start h-11 px-4 rounded-xl transition-all duration-200 group ${isActive className={`w-full justify-start h-12 px-4 rounded-2xl transition-all duration-300 group relative overflow-hidden ${isActive
? 'bg-primary text-primary-foreground shadow-lg shadow-primary/10' ? 'text-white bg-white/10 sidebar-halo'
: 'text-slate-400 hover:text-slate-100 hover:bg-slate-800' : 'text-white/50 hover:text-white hover:bg-white/5'
}`} }`}
> >
<item.icon className={`w-5 h-5 mr-3 shrink-0 ${isActive ? 'text-white' : 'group-hover:text-primary'}`} /> <item.icon className={`w-5 h-5 mr-3 shrink-0 transition-transform duration-300 ${isActive ? 'text-[#D28F4F]' : 'group-hover:text-[#D28F4F] group-hover:scale-110'}`} />
<span className="font-medium">{item.name}</span> <span className="font-bold tracking-wide">{item.name}</span>
{isActive && (
<div className="ml-auto w-1.5 h-1.5 rounded-full bg-[#D28F4F] shadow-[0_0_12px_#D28F4F]" />
)}
</Button> </Button>
</Link> </Link>
) )
})} })}
</div> </div>
<div className="p-4 border-t border-slate-800 shrink-0"> <div className="p-4 border-t border-white/5 shrink-0">
<div className="bg-slate-800/50 rounded-2xl p-3 flex items-center space-x-3"> <div className="bg-white/5 backdrop-blur-md rounded-[2rem] p-4 flex items-center space-x-3 border border-white/10">
<Avatar className="h-10 w-10 ring-2 ring-slate-700"> <div className="relative">
<AvatarImage src={userInfo?.avatar || ''} /> <Avatar className="h-10 w-10 ring-2 ring-white/10">
<AvatarFallback className="bg-slate-700 text-slate-100"> <AvatarImage src={userInfo?.avatar || ''} />
<UserIcon className="w-5 h-5" /> <AvatarFallback className="bg-white/10 text-white/80">
</AvatarFallback> <UserIcon className="w-5 h-5" />
</Avatar> </AvatarFallback>
</Avatar>
<div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-emerald-500 rounded-full border-2 border-[#263238] animate-pulse" />
</div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="text-sm font-semibold truncate">{userInfo?.nickName || '管理员'}</p> <p className="text-sm font-black truncate text-white">{userInfo?.nickName || '管理员'}</p>
<p className="text-xs text-slate-500 truncate">{userInfo?.account || 'admin'}</p> <p className="text-[10px] text-white/30 uppercase tracking-tighter truncate font-bold">{userInfo?.account || 'admin'}</p>
</div> </div>
</div> </div>
</div> </div>
@@ -102,37 +110,47 @@ export default function AdminLayout() {
{/* Main Area */} {/* Main Area */}
<div className="flex-1 md:ml-64 flex flex-col h-full overflow-hidden relative"> <div className="flex-1 md:ml-64 flex flex-col h-full overflow-hidden relative">
{/* Navbar */} {/* Navbar */}
<header className="h-16 flex items-center justify-between px-8 bg-white dark:bg-slate-900 border-b shrink-0 z-40"> <header className="h-20 flex items-center justify-between px-8 bg-[#FAF5E6]/60 dark:bg-black/40 backdrop-blur-xl border-b border-[#4A3A2C]/10 shrink-0 z-40 sticky top-0 warm-noise">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className="md:hidden"> <div className="md:hidden">
<Radio className="w-6 h-6 text-primary" /> <img src="/favicon.jpg" alt="logo" className="w-8 h-8 rounded-lg object-cover" />
</div>
<div className="flex flex-col">
<h2 className="text-[10px] font-black text-[#D28F4F]/60 uppercase tracking-[0.3em] leading-none mb-1">电台工作台</h2>
<p className="text-xl font-black tracking-tight text-[#4A3A2C]">
{navItems.find(i => i.path === location.pathname)?.name || '控制台'}
</p>
</div> </div>
<h2 className="text-sm font-medium text-slate-500 uppercase tracking-widest hidden sm:block">早安电台后台系统</h2>
</div> </div>
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-6">
<div className="flex items-center space-x-2 bg-[#D28F4F]/5 border border-[#D28F4F]/10 px-4 py-2 rounded-2xl">
<div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_8px_#10b981]" />
<span className="text-[10px] font-black text-[#8C7E6C] uppercase tracking-widest">系统在线</span>
</div>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-10 px-3 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center space-x-2"> <Button variant="ghost" className="h-12 px-2 rounded-2xl hover:bg-white/40 flex items-center space-x-3 transition-all">
<div className="text-right hidden sm:block"> <Avatar className="h-10 w-10 ring-2 ring-[#D28F4F]/20 shadow-lg">
<p className="text-sm font-medium leading-none">{userInfo?.nickName || '管理员'}</p> <AvatarImage src={userInfo?.avatar || ''} />
</div> <AvatarFallback className="bg-[#FAF5E6]"><UserIcon className="text-[#D28F4F]" /></AvatarFallback>
<ChevronDown className="w-4 h-4 text-slate-400" /> </Avatar>
<ChevronDown className="w-4 h-4 text-[#8C7E6C]" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="w-56 mt-2 rounded-xl p-1" align="end" forceMount> <DropdownMenuContent className="w-64 mt-2 rounded-[2.5rem] p-2 glass-card warm-noise border-[#D28F4F]/10" align="end">
<DropdownMenuLabel className="font-normal px-2 py-3"> <DropdownMenuLabel className="font-normal px-4 py-6">
<div className="flex flex-col space-y-1"> <div className="flex flex-col space-y-1">
<p className="text-sm font-bold text-slate-900 dark:text-slate-100">{userInfo?.nickName || '管理员'}</p> <p className="text-lg font-black text-[#4A3A2C]">{userInfo?.nickName || '管理员'}</p>
<p className="text-xs text-slate-500">{userInfo?.account || 'admin'}</p> <p className="text-xs text-[#8C7E6C] font-bold tracking-wide">{userInfo?.account || 'admin'}</p>
</div> </div>
</DropdownMenuLabel> </DropdownMenuLabel>
<DropdownMenuSeparator /> <DropdownMenuSeparator className="bg-[#4A3A2C]/5" />
<DropdownMenuItem <DropdownMenuItem
onClick={handleLogout} onClick={handleLogout}
className="cursor-pointer text-rose-500 focus:bg-rose-50 focus:text-rose-600 rounded-lg p-2 font-medium" className="cursor-pointer text-rose-600 focus:bg-rose-50 focus:text-rose-700 rounded-2xl p-4 font-black transition-all"
> >
<LogOut className="mr-3 h-4 w-4" /> <LogOut className="mr-3 h-5 w-5" />
<span>安全退出</span> <span>安全退出系统</span>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
@@ -140,8 +158,9 @@ export default function AdminLayout() {
</header> </header>
{/* Page Content */} {/* Page Content */}
<main className="flex-1 overflow-y-auto p-4 md:p-10 bg-slate-50/50 dark:bg-slate-950/50 scroll-smooth"> <main className="flex-1 overflow-y-auto p-6 md:p-8 scroll-smooth relative">
<div className="max-w-7xl mx-auto h-full"> <div className="absolute top-0 left-0 w-full h-[500px] bg-gradient-to-b from-[#D28F4F]/5 to-transparent pointer-events-none" />
<div className="max-w-7xl mx-auto h-full relative">
<Outlet /> <Outlet />
</div> </div>
</main> </main>
src/pages/Dashboard/index.tsx
+257 -75
View File
@@ -7,98 +7,280 @@ import {
Users, Users,
Activity, Activity,
ArrowUpRight, ArrowUpRight,
ArrowDownRight ArrowDownRight,
Play,
Zap
} from 'lucide-react'; } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card';
import { Button } from '../../components/ui/button';
import { motion } from 'framer-motion';
import {
AreaChart,
Area,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer
} from 'recharts';
const chartData = [
{ name: '06:00', morning: 400, evening: 240 },
{ name: '09:00', morning: 700, evening: 300 },
{ name: '12:00', morning: 600, evening: 450 },
{ name: '15:00', morning: 800, evening: 500 },
{ name: '18:00', morning: 500, evening: 900 },
{ name: '21:00', morning: 300, evening: 1200 },
{ name: '00:00', morning: 200, evening: 800 },
];
export default function Dashboard() { export default function Dashboard() {
const stats = [ const stats = [
{ name: '总分类数', value: '12', icon: ListMusic, change: '+2', trend: 'up' }, {
{ name: '活跃频道', value: '45', icon: Mic2, change: '+5', trend: 'up' }, name: '总分类数',
{ name: '节目总数', value: '3,284', icon: Disc3, change: '+124', trend: 'up' }, value: '12',
{ name: '订阅用户', value: '12.4K', icon: Users, change: '-24', trend: 'down' }, icon: ListMusic,
change: '+2',
trend: 'up',
color: 'from-[#D28F4F] to-[#A64452]',
iconColor: 'text-[#D28F4F]'
},
{
name: '活跃频道',
value: '45',
icon: Mic2,
change: '+5',
trend: 'up',
color: 'from-[#6C5CE7] to-[#A64452]',
iconColor: 'text-[#6C5CE7]'
},
{
name: '节目总数',
value: '3,284',
icon: Disc3,
change: '+124',
trend: 'up',
color: 'from-[#D28F4F] to-[#E29A66]',
iconColor: 'text-[#D28F4F]'
},
{
name: '订阅用户',
value: '12.4K',
icon: Users,
change: '-24',
trend: 'down',
color: 'from-[#8C7E6C] to-[#4A3A2C]',
iconColor: 'text-[#4A3A2C]'
},
]; ];
return ( return (
<div className="space-y-8 animate-in fade-in duration-500"> <div className="space-y-10 pb-10">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4"> <motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="flex flex-col md:flex-row md:items-center justify-between gap-6"
>
<div> <div>
<h1 className="text-3xl font-extrabold tracking-tight text-slate-900 dark:text-slate-100">欢迎回来，管理员</h1> <h1 className="text-4xl font-black tracking-tight text-[#4A3A2C] flex items-center gap-4">
<p className="text-slate-500 mt-1">这是早安电台管理系统的实时概览。</p> 欢迎回来，管理员
<span className="text-3xl animate-bounce">☕</span>
</h1>
<p className="text-[#8C7E6C] font-medium mt-3 flex items-center gap-3">
<div className="w-8 h-8 rounded-xl bg-[#FAF5E6] flex items-center justify-center shadow-sm border border-[#D28F4F]/10">
<Zap className="w-4 h-4 text-[#D28F4F] fill-[#D28F4F]" />
</div>
系统运行良好。当前有 <span className="text-[#D28F4F] font-black underline decoration-2 underline-offset-4">1,248</span> 名听众正在共度美好时光。
</p>
</div> </div>
<div className="flex items-center space-x-2 bg-white dark:bg-slate-900 border px-4 py-2 rounded-2xl shadow-sm self-start"> <div className="flex items-center space-x-4 bg-white/40 backdrop-blur-3xl border border-[#D28F4F]/10 px-8 py-4 rounded-[2.5rem] shadow-glass self-start relative group">
<Activity className="w-4 h-4 text-emerald-500 animate-pulse" /> <div className="relative">
<span className="text-sm font-medium text-slate-600 dark:text-slate-400 uppercase tracking-widest">系统在线</span> <Activity className="w-5 h-5 text-emerald-500" />
<div className="absolute inset-0 bg-emerald-500 blur-md opacity-40 animate-pulse" />
</div>
<span className="text-[11px] font-black text-[#8C7E6C] uppercase tracking-[0.3em]">实时广播中</span>
<div className="absolute -top-1 -right-1 w-3 h-3 bg-[#D28F4F] rounded-full shadow-[0_0_10px_#D28F4F]" />
</div> </div>
</div> </motion.div>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4"> <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
{stats.map((stat) => ( {stats.map((stat, index) => (
<Card key={stat.name} className="border-none shadow-sm hover:shadow-md transition-shadow group rounded-3xl overflow-hidden bg-white dark:bg-slate-900"> <motion.div
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> key={stat.name}
<CardTitle className="text-sm font-semibold text-slate-500 uppercase tracking-wider">{stat.name}</CardTitle> initial={{ opacity: 0, scale: 0.9 }}
<div className={`p-2 rounded-xl group-hover:scale-110 transition-transform ${stat.trend === 'up' ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600' animate={{ opacity: 1, scale: 1 }}
}`}> transition={{ delay: index * 0.1, type: "spring", stiffness: 100 }}
<stat.icon className="h-5 w-5" /> >
</div> <Card className="glass-card warm-noise border-none group relative overflow-hidden h-full rounded-[2.5rem] p-4">
</CardHeader> <div className={`absolute -top-10 -right-10 w-40 h-40 bg-gradient-to-br ${stat.color} opacity-0 group-hover:opacity-10 blur-3xl transition-opacity duration-700`} />
<CardContent> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-6">
<div className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white mt-1">{stat.value}</div> <CardTitle className="text-[11px] font-black text-[#8C7E6C] uppercase tracking-[0.2em]">{stat.name}</CardTitle>
<p className="text-xs text-slate-500 mt-2 flex items-center"> <div className={`p-4 rounded-[1.5rem] transition-all duration-700 shadow-sm border border-white/40 bg-white/90 ${stat.iconColor} group-hover:rotate-12 group-hover:scale-110 group-hover:shadow-[0_20px_40px_rgba(0,0,0,0.05)]`}>
<span className={`flex items-center font-medium mr-1 ${stat.trend === 'up' ? 'text-emerald-500' : 'text-rose-500' <stat.icon className="h-6 w-6" />
}`}> </div>
{stat.trend === 'up' ? <ArrowUpRight className="w-3 h-3 mr-0.5" /> : <ArrowDownRight className="w-3 h-3 mr-0.5" />} </CardHeader>
{stat.change} <CardContent>
</span> <div className="text-4xl font-black tracking-tight text-[#4A3A2C] mb-4">{stat.value}</div>
较上月 <div className="flex items-center justify-between">
</p> <div className="flex items-center bg-white/60 px-3 py-1.5 rounded-full border border-white/40 backdrop-blur-md shadow-sm">
</CardContent> <span className={`flex items-center text-[11px] font-black ${stat.trend === 'up' ? 'text-emerald-600' : 'text-rose-600'}`}>
</Card> {stat.trend === 'up' ? <ArrowUpRight className="w-3.5 h-3.5 mr-1" /> : <ArrowDownRight className="w-3.5 h-3.5 mr-1" />}
{stat.change}
</span>
</div>
<span className="text-[10px] font-black text-[#8C7E6C]/40 uppercase tracking-[0.2em]">增长率</span>
</div>
</CardContent>
</Card>
</motion.div>
))} ))}
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
<Card className="lg:col-span-2 border-none shadow-sm rounded-3xl bg-white dark:bg-slate-900"> <motion.div
<CardHeader className="pb-0"> className="lg:col-span-2"
<CardTitle className="text-lg font-bold flex items-center"> initial={{ opacity: 0, x: -20 }}
<TrendingUp className="w-5 h-5 mr-2 text-primary" /> animate={{ opacity: 1, x: 0 }}
增长趋势分析 transition={{ delay: 0.4 }}
</CardTitle> >
</CardHeader> <Card className="glass-card warm-noise border-none h-full overflow-hidden rounded-[3rem] p-6 relative z-10">
<CardContent className="h-[300px] flex items-center justify-center text-slate-400 bg-slate-50/50 dark:bg-slate-950/20 m-6 rounded-2xl border-2 border-dashed"> <CardHeader className="p-10 border-b border-[#4A3A2C]/5 flex flex-row items-center justify-between bg-[#FAF5E6]/40 rounded-t-[2.5rem]">
图表占位 (Growth data visualization) <div>
</CardContent> <CardTitle className="text-2xl font-black flex items-center tracking-tight text-[#4A3A2C]">
</Card> <div className="w-10 h-10 rounded-[1.2rem] bg-[#D28F4F] flex items-center justify-center mr-4 shadow-lg shadow-[#D28F4F]/20">
<TrendingUp className="w-5 h-5 text-white" />
<Card className="border-none shadow-sm rounded-3xl bg-white dark:bg-slate-900">
<CardHeader className="pb-0">
<CardTitle className="text-lg font-bold flex items-center">
<Radio className="w-5 h-5 mr-2 text-primary" />
热门频道排行
</CardTitle>
</CardHeader>
<CardContent className="pt-6">
<div className="space-y-4">
{[1, 2, 3, 4, 5].map(i => (
<div key={i} className="flex items-center justify-between p-3 rounded-2xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors cursor-pointer group">
<div className="flex items-center space-x-3">
<div className="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center font-bold text-slate-500 group-hover:bg-primary group-hover:text-white transition-colors">
#{i}
</div>
<div>
<p className="text-sm font-bold text-slate-900 dark:text-slate-100">早安爵士 #{i}</p>
<p className="text-xs text-slate-400">经典古典预设</p>
</div>
</div>
<div className="text-right">
<p className="text-sm font-bold text-slate-900 dark:text-slate-100">{(1000 / i).toFixed(0)}</p>
<p className="text-[10px] text-slate-400 uppercase tracking-tighter">收听量</p>
</div> </div>
收听热度分布
</CardTitle>
<p className="text-[#8C7E6C] text-sm mt-2 font-medium">监测不同时段的声波流向与用户留存</p>
</div>
<div className="flex gap-6">
<div className="flex items-center gap-3">
<div className="w-3 h-3 rounded-full bg-[#D28F4F] shadow-[0_0_12px_#D28F4F]" />
<span className="text-xs font-black text-[#8C7E6C] uppercase underline decoration-[#D28F4F]/20 underline-offset-4">晨间氛围</span>
</div> </div>
))} <div className="flex items-center gap-3">
</div> <div className="w-3 h-3 rounded-full bg-[#A64452] shadow-[0_0_12px_#A64452]" />
</CardContent> <span className="text-xs font-black text-[#8C7E6C] uppercase underline decoration-[#A64452]/20 underline-offset-4">傍晚陪伴</span>
</Card> </div>
</div>
</CardHeader>
<CardContent className="p-10">
<div className="h-[400px] w-full">
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={chartData}>
<defs>
<linearGradient id="colorMorning" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#D28F4F" stopOpacity={0.3} />
<stop offset="95%" stopColor="#D28F4F" stopOpacity={0} />
</linearGradient>
<linearGradient id="colorEvening" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#A64452" stopOpacity={0.3} />
<stop offset="95%" stopColor="#A64452" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#4A3A2C" strokeOpacity={0.05} />
<XAxis
dataKey="name"
axisLine={false}
tickLine={false}
tick={{ fill: '#8C7E6C', fontSize: 11, fontWeight: 900 }}
dy={15}
/>
<YAxis hide />
<Tooltip
contentStyle={{
borderRadius: '24px',
border: 'none',
boxShadow: '0 20px 50px rgba(74, 58, 44, 0.1)',
background: 'rgba(255, 253, 235, 0.9)',
backdropFilter: 'blur(20px)',
padding: '16px',
color: '#4A3A2C'
}}
/>
<Area
type="monotone"
dataKey="morning"
stroke="#D28F4F"
strokeWidth={5}
fillOpacity={1}
fill="url(#colorMorning)"
animationDuration={2000}
/>
<Area
type="monotone"
dataKey="evening"
stroke="#A64452"
strokeWidth={5}
fillOpacity={1}
fill="url(#colorEvening)"
animationDuration={2000}
/>
</AreaChart>
</ResponsiveContainer>
</div>
</CardContent>
</Card>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.5 }}
>
<Card className="glass-card warm-noise border-none h-full overflow-hidden rounded-[3rem] p-6 relative z-10">
<CardHeader className="p-8 border-b border-[#4A3A2C]/5 bg-[#FAF5E6]/40 rounded-t-[2.5rem]">
<CardTitle className="text-xl font-black flex items-center tracking-tight text-[#4A3A2C] uppercase tracking-widest">
<div className="w-10 h-10 rounded-[1.2rem] bg-white flex items-center justify-center mr-4 shadow-sm">
<Radio className="w-5 h-5 text-[#D28F4F]" />
</div>
热门频道排行
</CardTitle>
</CardHeader>
<CardContent className="p-8">
<div className="space-y-6">
{[1, 2, 3, 4, 5].map(i => (
<div
key={i}
className={`flex items-center justify-between p-5 rounded-[2rem] transition-all cursor-pointer group hover:scale-[1.03] border border-[#D28F4F]/5 relative overflow-hidden ${i === 1 ? 'bg-gradient-to-r from-[#D28F4F]/10 to-[#A64452]/5 border-[#D28F4F]/20 shadow-sm' : 'hover:bg-white/60'
}`}
>
<div className="flex items-center space-x-6 relative z-10">
<div className="w-14 h-14 rounded-2xl overflow-hidden relative shadow-md ring-4 ring-white">
<img src={`https://picsum.photos/seed/radio${i}/100/100`} alt="" className="object-cover w-full h-full group-hover:scale-125 transition-transform duration-1000" />
<div className="absolute inset-0 bg-[#4A3A2C]/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<Play className="w-6 h-6 text-white fill-white" />
</div>
</div>
<div>
<div className="flex items-center gap-3">
<p className="text-base font-black text-[#4A3A2C]">爵士小镇 #{i}</p>
{i <= 3 && (
<div className={`w-2 h-2 rounded-full ${i === 1 ? 'bg-[#D28F4F]' : i === 2 ? 'bg-[#8C7E6C]' : 'bg-[#E29A66]'} shadow-[0_0_10px_currentColor]`} />
)}
</div>
<div className="audio-wave mt-2 opacity-40 group-hover:opacity-100 transition-opacity flex gap-0.5">
<span className="w-1 h-3 bg-[#D28F4F] rounded-full animate-wave" />
<span className="w-1 h-5 bg-[#D28F4F] rounded-full animate-wave-slow" />
<span className="w-1 h-2 bg-[#D28F4F] rounded-full animate-wave" />
<span className="w-1 h-4 bg-[#D28F4F] rounded-full animate-wave-slow" />
</div>
</div>
</div>
<div className="text-right relative z-10">
<p className="text-lg font-black text-[#4A3A2C]">{(1240 / i).toFixed(0)}</p>
<p className="text-[10px] text-[#8C7E6C] font-black uppercase tracking-widest">活跃度</p>
</div>
</div>
))}
</div>
<Button variant="ghost" className="w-full mt-10 rounded-[1.5rem] h-14 font-black text-xs uppercase tracking-[0.3em] text-[#8C7E6C] hover:text-[#D28F4F] hover:bg-white transition-all">
查看全量声波图谱
</Button>
</CardContent>
</Card>
</motion.div>
</div> </div>
</div> </div>
); );
src/pages/Login/index.tsx
+164 -89
View File
@@ -3,11 +3,11 @@ import { useNavigate } from 'react-router-dom';
import { useAuthStore } from '../../store/authStore'; import { useAuthStore } from '../../store/authStore';
import { loginApi, getCaptchaApi } from '../../api/auth'; import { loginApi, getCaptchaApi } from '../../api/auth';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card';
import { Button } from '../../components/ui/button'; import { Button } from '../../components/ui/button';
import { Input } from '../../components/ui/input'; import { Input } from '../../components/ui/input';
import { Label } from '../../components/ui/label'; import { Label } from '../../components/ui/label';
import { Radio } from 'lucide-react'; import { ShieldCheck, Disc3, ArrowRight, Heart } from 'lucide-react';
import { motion } from 'framer-motion';
export default function Login() { export default function Login() {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -21,7 +21,6 @@ export default function Login() {
const [captchaImage, setCaptchaImage] = useState(''); const [captchaImage, setCaptchaImage] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
// Guard to ensure we only fetch on mount once
const mounted = useRef(false); const mounted = useRef(false);
const fetchCaptcha = async () => { const fetchCaptcha = async () => {
@@ -48,15 +47,8 @@ export default function Login() {
const handleLogin = async (e: React.FormEvent) => { const handleLogin = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
if (!account || !password) return toast.error('请输入账号和密码');
if (!account || !password) { if (!captcha) return toast.error('请输入验证码');
toast.error('请输入账号和密码');
return;
}
if (!captcha) {
toast.error('请输入验证码');
return;
}
try { try {
setLoading(true); setLoading(true);
@@ -66,7 +58,7 @@ export default function Login() {
captcha, captcha,
captchaId captchaId
}); });
toast.success('登录成功'); toast.success('欢迎回来');
setToken(res.token); setToken(res.token);
setUserInfo(res.user); setUserInfo(res.user);
navigate('/'); navigate('/');
@@ -79,86 +71,169 @@ export default function Login() {
}; };
return ( return (
<div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-slate-950 p-4"> <div className="min-h-screen flex items-center justify-center bg-[#FAF5E6] relative overflow-hidden font-sans warm-noise">
<Card className="w-full max-w-sm border-none shadow-2xl rounded-3xl overflow-hidden bg-white dark:bg-slate-900"> {/* Ambient Background Elements */}
<CardHeader className="space-y-2 flex flex-col items-center pt-10 pb-6 bg-slate-50/50"> <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-gradient-to-br from-[#D28F4F]/10 to-transparent rounded-full blur-[120px] animate-pulse" />
<div className="w-16 h-16 bg-primary text-primary-foreground rounded-2xl flex items-center justify-center mb-2 shadow-xl shadow-primary/20 rotate-3 transform hover:rotate-0 transition-transform"> <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-gradient-to-tr from-[#A64452]/10 to-transparent rounded-full blur-[140px] animate-pulse" />
<Radio className="w-8 h-8" />
</div> <motion.div
<div className="text-center"> initial={{ opacity: 0, scale: 0.95, y: 20 }}
<CardTitle className="text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">早安电台</CardTitle> animate={{ opacity: 1, scale: 1, y: 0 }}
<CardDescription className="text-slate-500 font-medium"> transition={{ duration: 1, ease: "easeOut" }}
后台管理系统 portal className="w-full max-w-[1100px] grid grid-cols-1 lg:grid-cols-2 bg-white/30 backdrop-blur-3xl rounded-[4rem] shadow-glass border border-white/40 overflow-hidden relative z-10 m-4"
</CardDescription> >
</div> {/* Visual Side (Twilight) */}
</CardHeader> <div className="hidden lg:flex flex-col justify-between p-16 sidebar-noise text-white relative overflow-hidden group">
<CardContent className="p-8"> <div className="absolute inset-0 opacity-40 mix-blend-overlay pointer-events-none" />
<form onSubmit={handleLogin} className="space-y-6"> <div className="absolute top-[-20%] right-[-20%] w-80 h-80 bg-[#D28F4F]/30 rounded-full blur-[100px] group-hover:scale-125 transition-transform duration-1000" />
<div className="space-y-2">
<Label htmlFor="account">账号</Label> <div className="relative z-10">
<Input <motion.div
id="account" initial={{ x: -20, opacity: 0 }}
placeholder="请输入管理员账号" animate={{ x: 0, opacity: 1 }}
className="h-12 rounded-xl bg-slate-50 border-none focus:ring-2 focus:ring-primary" transition={{ delay: 0.5 }}
value={account} className="flex items-center gap-4"
onChange={(e) => setAccount(e.target.value)} >
disabled={loading} <div className="w-16 h-16 bg-white rounded-3xl flex items-center justify-center shadow-2xl shadow-[#D28F4F]/20 ring-1 ring-white/20 overflow-hidden relative group p-2">
required <img src="/favicon.jpg" alt="logo" className="w-full h-full object-cover rounded-2xl" />
/> <div className="absolute inset-0 bg-[#D28F4F] opacity-0 group-hover:opacity-10 transition-opacity" />
</div>
<div className="flex flex-col">
<span className="text-xl font-black tracking-tighter uppercase leading-none">Morning Radio</span>
<span className="text-[10px] uppercase font-black tracking-[0.3em] opacity-40 mt-1">Management Console</span>
</div>
</motion.div>
<div className="mt-20 space-y-8">
<h2 className="text-5xl font-black text-white leading-[1.1] tracking-tighter">
声音的<span className="text-[#D28F4F] italic px-2">温度</span><br />
伴随每个<br />
清晨与黄昏。
</h2>
<p className="text-white/40 text-lg font-medium max-w-sm leading-relaxed border-l-2 border-[#D28F4F]/30 pl-6">
重新设计的管理架构，在日式简练与法式优雅间，寻找高效操作的节奏感。
</p>
</div> </div>
<div className="space-y-2"> </div>
<Label htmlFor="password">密码</Label>
<Input <div className="relative z-10 flex items-center gap-10">
id="password" <div className="flex flex-col">
type="password" <span className="text-[#D28F4F] text-3xl font-black">2.5</span>
placeholder="请输入密码" <span className="text-white/20 text-[10px] uppercase font-black tracking-widest mt-1">Version Control</span>
className="h-12 rounded-xl bg-slate-50 border-none focus:ring-2 focus:ring-primary"
value={password}
onChange={(e) => setPassword(e.target.value)}
disabled={loading}
required
/>
</div> </div>
<div className="space-y-2"> <div className="w-px h-10 bg-white/10" />
<Label htmlFor="captcha">验证码</Label> <div className="text-white/60 text-sm font-bold flex items-center gap-2">
<div className="flex gap-3"> <ShieldCheck className="w-4 h-4 text-[#D28F4F]" />
<Input 安全加固基建
id="captcha" </div>
placeholder="验证码" </div>
autoComplete="off" </div>
className="h-12 rounded-xl bg-slate-50 border-none focus:ring-2 focus:ring-primary flex-1"
value={captcha} {/* Form Side (Warm Cream) */}
onChange={(e) => setCaptcha(e.target.value)} <div className="p-10 lg:p-20 flex flex-col justify-center bg-[#FAF5E6]/40 backdrop-blur-md relative overflow-hidden">
disabled={loading} <div className="absolute top-0 right-0 w-32 h-32 bg-[#D28F4F]/5 rounded-full blur-3xl" />
required <div className="max-w-md mx-auto w-full relative z-10">
/> <div className="mb-14">
{captchaImage ? ( <h3 className="text-4xl font-black text-[#4A3A2C] tracking-tight mb-3">欢迎回来</h3>
<div <div className="flex items-center gap-3">
className="h-12 w-32 border rounded-xl overflow-hidden bg-white shrink-0 cursor-pointer hover:opacity-80 transition-opacity" <p className="text-[#8C7E6C]/60 font-black uppercase text-[10px] tracking-[0.4em]">Control Center Access</p>
onClick={() => fetchCaptcha()} <div className="h-px flex-1 bg-[#4A3A2C]/5" />
>
<img
src={captchaImage}
alt="captcha"
className="w-full h-full object-contain p-1"
title="点击刷新"
/>
</div>
) : (
<div className="h-12 w-32 border rounded-xl bg-slate-100 animate-pulse shrink-0" />
)}
</div> </div>
</div> </div>
<Button
className="w-full h-12 text-base font-bold rounded-2xl shadow-lg shadow-primary/20 mt-4 active:scale-[0.98] transition-all" <form onSubmit={handleLogin} className="space-y-10">
type="submit" <div className="space-y-8">
disabled={loading} <div className="space-y-3">
> <Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">管理员身份账号</Label>
{loading ? '验证中...' : '立即登录'} <Input
</Button> placeholder="Username / Email"
</form> className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 placeholder:text-[#8C7E6C]/30"
</CardContent> value={account}
</Card> onChange={(e) => setAccount(e.target.value)}
disabled={loading}
/>
</div>
<div className="space-y-3">
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">受限制加密密码</Label>
<Input
type="password"
placeholder="Security Token"
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 placeholder:text-[#8C7E6C]/30"
value={password}
onChange={(e) => setPassword(e.target.value)}
disabled={loading}
/>
</div>
<div className="space-y-3">
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">即时验证码</Label>
<div className="flex gap-4">
<Input
placeholder="Code"
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 flex-1 placeholder:text-[#8C7E6C]/30"
value={captcha}
onChange={(e) => setCaptcha(e.target.value)}
disabled={loading}
/>
<div
className="h-16 w-36 bg-white rounded-[1.5rem] p-2 shadow-sm border border-[#D28F4F]/10 cursor-pointer hover:ring-4 ring-[#D28F4F]/10 transition-all flex items-center justify-center overflow-hidden group"
onClick={fetchCaptcha}
>
{captchaImage ? (
<img src={captchaImage} alt="captcha" className="h-full object-contain filter group-hover:scale-110 transition-transform" />
) : (
<Disc3 className="w-5 h-5 text-[#8C7E6C]/20 animate-spin" />
)}
</div>
</div>
</div>
</div>
<Button
type="submit"
disabled={loading}
className="w-full h-20 rounded-[2.2rem] bg-gradient-to-r from-[#D28F4F] to-[#A64452] hover:scale-[1.02] active:scale-[0.98] transition-all shadow-2xl shadow-[#D28F4F]/30 border-none group overflow-hidden relative"
>
<div className="relative z-10 flex items-center justify-center gap-4 text-xl font-black tracking-tight text-white">
{loading ? (
<>
<Disc3 className="w-6 h-6 animate-spin" />
同步权限中...
</>
) : (
<>
进入广播控制中心
<ArrowRight className="w-6 h-6 group-hover:translate-x-1.5 transition-transform" />
</>
)}
</div>
<div className="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity" />
</Button>
</form>
<div className="mt-16 pt-10 border-t border-[#4A3A2C]/5 flex items-center justify-between">
<div className="flex items-center gap-2">
<Heart className="w-3.5 h-3.5 text-[#A64452] fill-[#A64452]/20 animate-pulse" />
<span className="text-[10px] font-black text-[#8C7E6C]/40 uppercase tracking-[0.2em]">Crafted with Soul</span>
</div>
<button className="text-[10px] font-black text-[#D28F4F] uppercase tracking-[0.2em] hover:underline underline-offset-4">
无法访问?
</button>
</div>
</div>
</div>
</motion.div>
{/* Micro Interaction Decorative elements */}
<div className="absolute bottom-20 left-20 flex gap-3 rotate-12 opacity-5 pointer-events-none">
<div className="w-3 h-12 bg-[#D28F4F] rounded-full" />
<div className="w-3 h-24 bg-[#D28F4F] rounded-full mt-6" />
<div className="w-3 h-12 bg-[#D28F4F] rounded-full mt-3" />
</div>
<div className="absolute top-20 right-20 flex gap-3 -rotate-12 opacity-5 pointer-events-none">
<div className="w-3 h-12 bg-[#A64452] rounded-full" />
<div className="w-3 h-24 bg-[#A64452] rounded-full mt-6" />
<div className="w-3 h-12 bg-[#A64452] rounded-full mt-3" />
</div>
</div> </div>
); );
} }
src/pages/Radio/Category/index.tsx
+308 -128
View File
@@ -5,44 +5,61 @@ import {
updateCategoryApi, updateCategoryApi,
deleteCategoryApi deleteCategoryApi
} from '../../../api/radio'; } from '../../../api/radio';
import { FileUploader } from '../../../components/FileUploader';
import { DeleteConfirm } from '../../../components/DeleteConfirm';
import { Button } from '../../../components/ui/button'; import { Button } from '../../../components/ui/button';
import { Input } from '../../../components/ui/input'; import { Input } from '../../../components/ui/input';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../components/ui/table'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../components/ui/table';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../../../components/ui/dialog'; import { Dialog, DialogContent, DialogTitle } from '../../../components/ui/dialog';
import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
import { Label } from '../../../components/ui/label'; import { Label } from '../../../components/ui/label';
import { Plus, Edit, Trash2 } from 'lucide-react'; import {
Plus,
Edit,
Trash2,
Search,
Disc3,
Layers,
LayoutGrid,
Image as ImageIcon
} from 'lucide-react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { motion } from 'framer-motion';
export default function Category() { export default function Category() {
const [data, setData] = useState([]); const [data, setData] = useState<any[]>([]);
const [total, setTotal] = useState(0); const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
// Pagination & Search
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [pageSize] = useState(10); const [pageSize] = useState(10);
const [searchName, setSearchName] = useState(''); const [searchName, setSearchName] = useState('');
const [debouncedSearch, setDebouncedSearch] = useState('');
// Dialog State
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [isEdit, setIsEdit] = useState(false); const [isEdit, setIsEdit] = useState(false);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState<any>({
ID: undefined, id: '',
name: '', name: '',
description: '', description: '',
iconId: '',
iconUrl: '',
coverId: '',
coverUrl: '',
sort: 0, sort: 0,
status: 1 status: 1
}); });
const [deleteOpen, setDeleteOpen] = useState(false);
const [deleteId, setDeleteId] = useState<any>(null);
const fetchData = async () => { const fetchData = async () => {
if (loading) return;
setLoading(true); setLoading(true);
try { try {
const res: any = await getCategoryPageApi({ const res: any = await getCategoryPageApi({
current: page, current: page,
pageSize: pageSize, pageSize: pageSize,
keyword: searchName, name: debouncedSearch,
name: searchName,
status: 0 status: 0
}); });
setData(res.list || []); setData(res.list || []);
@@ -54,60 +71,73 @@ export default function Category() {
} }
}; };
// Only trigger fetch on page/pageSize change
useEffect(() => { useEffect(() => {
fetchData(); fetchData();
}, [page, pageSize]); }, [page, pageSize, debouncedSearch]);
// Handle Search specifically to avoid double fetch useEffect(() => {
const handleSearch = () => { const timer = setTimeout(() => {
if (page === 1) { setDebouncedSearch(searchName);
fetchData(); setPage(1);
} else { }, 500);
setPage(1); // Setting page to 1 will trigger the useEffect above return () => clearTimeout(timer);
} }, [searchName]);
};
const handleOpenAdd = () => { const handleOpenAdd = () => {
setIsEdit(false); setIsEdit(false);
setFormData({ ID: undefined, name: '', description: '', sort: 0, status: 1 }); setFormData({ id: '', name: '', description: '', iconId: '', iconUrl: '', coverId: '', coverUrl: '', sort: 0, status: 1 });
setOpen(true); setOpen(true);
}; };
const handleOpenEdit = (record: any) => { const handleOpenEdit = (record: any) => {
setIsEdit(true); setIsEdit(true);
setFormData({ setFormData({
ID: record.ID, id: String(record.ID || record.id || ""),
name: record.name, name: record.name,
description: record.description, description: record.description,
iconId: record.iconId || "",
iconUrl: record.icon?.url || record.iconUrl || "",
coverId: record.coverId || "",
coverUrl: record.cover?.url || record.coverUrl || "",
sort: record.sort, sort: record.sort,
status: record.status status: record.status
}); });
setOpen(true); setOpen(true);
}; };
const handleDelete = async (id: number) => { const handleDeleteClick = (id: any) => {
if (!confirm('确定要删除这个分类吗?')) return; setDeleteId(id);
setDeleteOpen(true);
};
const confirmDelete = async () => {
if (!deleteId) return;
try { try {
await deleteCategoryApi({ id }); await deleteCategoryApi({ id: String(deleteId) });
toast.success('删除成功'); toast.success('删除成功');
fetchData(); fetchData();
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} finally {
setDeleteOpen(false);
setDeleteId(null);
} }
}; };
const handleSubmit = async () => { const handleSubmit = async () => {
if (!formData.name) { if (!formData.name) return toast.error('请填写分类名称');
toast.error('请填写分类名称');
return; const submitData = { ...formData };
if (submitData.sort === "" || submitData.sort === undefined || submitData.sort === null) {
submitData.sort = 0;
} }
try { try {
if (isEdit) { if (isEdit) {
await updateCategoryApi(formData); await updateCategoryApi(submitData);
toast.success('更新成功'); toast.success('更新成功');
} else { } else {
await saveCategoryApi(formData); await saveCategoryApi(submitData);
toast.success('创建成功'); toast.success('创建成功');
} }
setOpen(false); setOpen(false);
@@ -118,118 +148,268 @@ export default function Category() {
}; };
return ( return (
<div className="space-y-4 flex flex-col h-full bg-background rounded-lg border p-6"> <motion.div
<div className="flex justify-between items-center"> initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="space-y-8 pb-10"
>
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
<div> <div>
<h1 className="text-2xl font-bold tracking-tight">频道分类</h1> <h1 className="text-4xl font-black tracking-tight text-[#4A3A2C] flex items-center gap-4">
<p className="text-muted-foreground">管理电台频道所属的分类</p> 频道分类
<div className="w-3 h-3 rounded-full bg-[#D28F4F] shadow-[0_0_20px_rgba(210,143,79,0.5)] animate-pulse" />
</h1>
<p className="text-[#8C7E6C] font-medium mt-2">打理电台分类体系，让每一个好声音有序可循。</p>
</div> </div>
</div> <Button
onClick={handleOpenAdd}
{/* Toolbar */} className="rounded-[1.5rem] h-14 px-8 font-black shadow-xl shadow-[#D28F4F]/20 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none group"
<div className="flex justify-between items-center space-x-2"> >
<div className="flex space-x-2 w-full max-w-sm"> <Plus className="w-5 h-5 mr-3 group-hover:rotate-90 transition-transform" />
<Input 新增架构分类
placeholder="根据名称搜索..."
value={searchName}
onChange={(e) => setSearchName(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
/>
<Button variant="secondary" onClick={handleSearch}>搜索</Button>
</div>
<Button onClick={handleOpenAdd}>
<Plus className="w-4 h-4 mr-2" /> 新增分类
</Button> </Button>
</div> </div>
{/* Data Table */} <Card className="glass-card warm-noise border-none shadow-glass rounded-[2.5rem] overflow-hidden min-h-[600px] relative z-10">
<div className="border rounded-md mt-4 flex-1 overflow-auto"> <CardHeader className="p-10 border-b border-[#4A3A2C]/5 flex flex-col sm:flex-row sm:items-center justify-between gap-6 bg-[#FAF5E6]/40">
<Table> <div className="flex items-center gap-4">
<TableHeader> <div className="p-3 rounded-2xl bg-[#D28F4F]/10">
<TableRow> <Layers className="w-6 h-6 text-[#D28F4F]" />
<TableHead className="w-[80px]">ID</TableHead> </div>
<TableHead>名称</TableHead> <CardTitle className="text-2xl font-black tracking-tight text-[#4A3A2C]">分类架构总览</CardTitle>
<TableHead>描述</TableHead> </div>
<TableHead>排序</TableHead> <div className="relative group w-full max-w-sm">
<TableHead>状态</TableHead> <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[#8C7E6C] group-focus-within:text-[#D28F4F] transition-colors" />
<TableHead className="text-right">操作</TableHead> <Input
</TableRow> placeholder="搜索分类名称..."
</TableHeader> value={searchName}
<TableBody> onChange={(e) => setSearchName(e.target.value)}
{loading && data.length === 0 ? ( className="pl-12 h-12 rounded-2xl border-none bg-[#FAF5E6]/80 focus:bg-white shadow-inner transition-all font-bold text-[#4A3A2C]"
<TableRow> />
<TableCell colSpan={6} className="text-center h-32">加载中...</TableCell> </div>
</TableRow> </CardHeader>
) : data.length === 0 ? ( <CardContent className="p-0">
<TableRow> <div className="overflow-x-auto">
<TableCell colSpan={6} className="text-center h-32 text-muted-foreground">未找到数据</TableCell> <Table>
</TableRow> <TableHeader className="bg-[#FAF5E6]/50">
) : ( <TableRow className="hover:bg-transparent border-[#4A3A2C]/5">
data.map((item: any) => ( <TableHead className="w-[80px] pl-10 py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">图标</TableHead>
<TableRow key={item.ID} className={loading ? 'opacity-50' : ''}> <TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">分类名称</TableHead>
<TableCell>{item.ID}</TableCell> <TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">核心视觉</TableHead>
<TableCell className="font-medium">{item.name}</TableCell> <TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">描述摘要</TableHead>
<TableCell>{item.description}</TableCell> <TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C] text-center">优先级</TableHead>
<TableCell>{item.sort}</TableCell> <TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C] text-center">状态控制</TableHead>
<TableCell>{item.status === 1 ? '开启' : '禁用'}</TableCell> <TableHead className="text-right pr-10 py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">管理指令</TableHead>
<TableCell className="text-right">
<Button variant="ghost" size="icon" onClick={() => handleOpenEdit(item)}>
<Edit className="w-4 h-4 text-blue-500" />
</Button>
<Button variant="ghost" size="icon" onClick={() => handleDelete(item.ID)}>
<Trash2 className="w-4 h-4 text-red-500" />
</Button>
</TableCell>
</TableRow> </TableRow>
)) </TableHeader>
)} <TableBody>
</TableBody> {loading && data.length === 0 ? (
</Table> <TableRow><TableCell colSpan={7} className="h-96 text-center text-[#8C7E6C] font-black uppercase"><Disc3 className="w-12 h-12 mx-auto animate-spin-slow mb-4 text-[#D28F4F]/50" />同步中...</TableCell></TableRow>
</div> ) : data.length === 0 ? (
<TableRow><TableCell colSpan={7} className="h-96 text-center text-[#8C7E6C] text-sm font-black tracking-widest uppercase">暂无分类架构</TableCell></TableRow>
) : (
data.map((item: any) => (
<TableRow
key={item.ID || item.id}
className="group border-[#4A3A2C]/5 hover:bg-[#FAF5E6]/80 transition-all duration-300 transform hover:scale-[1.001]"
>
<TableCell className="pl-10 py-6">
<div className="w-12 h-12 rounded-2xl bg-white shadow-md flex items-center justify-center border border-[#4A3A2C]/5 p-2 overflow-hidden group-hover:rotate-12 transition-transform">
{(item.icon?.url || item.iconUrl) ? (
<img src={item.icon?.url || item.iconUrl} alt="" className="w-full h-full object-contain" />
) : (
<LayoutGrid className="w-6 h-6 text-[#F2EDE4]" />
)}
</div>
</TableCell>
<TableCell className="py-6">
<p className="font-black text-[#4A3A2C] group-hover:text-[#D28F4F] transition-colors text-base tracking-tight">{item.name}</p>
<p className="text-[10px] font-bold text-[#8C7E6C]/50 mt-0.5 tracking-tighter">ID: {item.ID || item.id}</p>
</TableCell>
<TableCell className="py-6">
<div className="w-20 h-12 rounded-2xl overflow-hidden shadow-sm ring-4 ring-white transition-all group-hover:ring-[#D28F4F]/20 bg-[#F2EDE4]">
{(item.cover?.url || item.coverUrl) ? (
<img src={item.cover?.url || item.coverUrl} alt="" className="w-full h-full object-cover group-hover:scale-125 transition-transform duration-1000" />
) : (
<div className="w-full h-full flex items-center justify-center"><ImageIcon className="w-5 h-5 text-[#8C7E6C]/20" /></div>
)}
</div>
</TableCell>
<TableCell className="py-6 max-w-[200px]">
<p className="text-[12px] font-bold text-[#8C7E6C] line-clamp-2 italic leading-relaxed">
{item.description || "— 暂无描述 —"}
</p>
</TableCell>
<TableCell className="py-6 text-center">
<span className="text-[11px] font-black px-4 py-1.5 rounded-full bg-[#FAF5E6] text-[#D28F4F] shadow-sm border border-[#D28F4F]/10">
LV.{item.sort}
</span>
</TableCell>
<TableCell className="py-6 text-center">
<div className={`flex items-center mx-auto w-fit px-3 py-1 rounded-full text-[10px] font-black uppercase border shadow-sm ${item.status === 1
? 'bg-emerald-50 text-emerald-700 border-emerald-200'
: 'bg-rose-50 text-rose-600 border-rose-200'
}`}>
<div className={`w-1.5 h-1.5 rounded-full mr-2 ${item.status === 1 ? 'bg-emerald-500 animate-pulse' : 'bg-rose-500'}`} />
{item.status === 1 ? '启用' : '隐藏'}
</div>
</TableCell>
<TableCell className="text-right pr-10 py-6">
<div className="flex items-center justify-end gap-3 opacity-0 group-hover:opacity-100 transition-all translate-x-4 group-hover:translate-x-0">
<Button
variant="ghost"
size="icon"
onClick={() => handleOpenEdit(item)}
className="w-12 h-12 rounded-[1.2rem] hover:bg-white hover:text-[#D28F4F] transition-all border border-[#4A3A2C]/5 shadow-sm hover:shadow-md"
>
<Edit className="w-5 h-5" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleDeleteClick(item.ID || item.id)}
className="w-12 h-12 rounded-[1.2rem] hover:bg-rose-50 hover:text-rose-600 transition-all border border-[#4A3A2C]/5 shadow-sm"
>
<Trash2 className="w-5 h-5" />
</Button>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
</CardContent>
<div className="p-10 border-t border-[#4A3A2C]/5 flex items-center justify-between bg-[#FAF5E6]/40 backdrop-blur-md">
<div className="flex items-center gap-3">
<span className="text-[10px] font-black text-[#8C7E6C] uppercase tracking-widest">全局统计:</span>
<span className="px-4 py-1.5 bg-white shadow-sm rounded-full text-[11px] font-black text-[#D28F4F]">已建立 {total} 个分类</span>
</div>
<div className="flex items-center gap-4">
<Button
variant="ghost"
onClick={() => setPage(p => Math.max(1, p - 1))}
disabled={page === 1}
className="rounded-2xl h-11 px-6 font-black uppercase tracking-widest text-[10px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
>
上一页
</Button>
<Button
variant="ghost"
onClick={() => setPage(p => p + 1)}
disabled={data.length < pageSize}
className="rounded-2xl h-11 px-6 font-black uppercase tracking-widest text-[10px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
>
下一页
</Button>
</div>
</div>
</Card>
<div className="flex bg-muted p-2 mt-2 rounded items-center justify-between text-sm text-muted-foreground">
<span>总计: {total} 条</span>
<span>每页: {pageSize} 条</span>
</div>
{/* Form Dialog */}
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogContent> <DialogContent className="sm:max-w-[750px] glass-card warm-noise border-none rounded-[3rem] p-0 overflow-hidden shadow-2xl">
<DialogHeader> <div className="bg-gradient-to-r from-[#D28F4F] to-[#A64452] p-12 text-white relative">
<DialogTitle>{isEdit ? '编辑分类' : '新增分类'}</DialogTitle> <DialogTitle className="text-3xl font-black tracking-tight">{isEdit ? '编辑分类方案' : '定义新分类架构'}</DialogTitle>
</DialogHeader> <p className="text-white/60 text-xs font-black uppercase tracking-[0.3em] mt-3">Architecture Blueprinting</p>
<div className="space-y-4 py-4"> <Disc3 className="absolute right-12 top-1/2 -translate-y-1/2 w-24 h-24 text-white/10 animate-spin-slow" />
<div className="space-y-2"> </div>
<Label>分类名称</Label> <div className="p-12 space-y-10 max-h-[70vh] overflow-y-auto custom-scrollbar bg-[#FAF5E6]/60 backdrop-blur-3xl">
<Input <div className="grid grid-cols-2 gap-10">
value={formData.name} <div className="space-y-8">
onChange={e => setFormData({ ...formData, name: e.target.value })} <div className="space-y-3">
placeholder="输入分类名称" <Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">分类名称</Label>
/> <Input
placeholder="输入辨识度高的名称..."
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 text-lg"
/>
</div>
<div className="grid grid-cols-2 gap-6">
<div className="space-y-3">
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">排序权重</Label>
<Input
type="number"
value={formData.sort ?? ""}
onChange={(e) => {
const val = e.target.value;
setFormData({ ...formData, sort: val === "" ? "" : parseInt(val) });
}}
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-center text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all text-lg"
/>
</div>
<div className="space-y-3">
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">可见状态</Label>
<select
className="w-full h-16 rounded-[1.5rem] bg-white shadow-sm px-8 font-bold text-[#4A3A2C] border-none focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none text-lg appearance-none cursor-pointer"
value={formData.status}
onChange={e => setFormData({ ...formData, status: parseInt(e.target.value) })}
>
<option value={1}>公开显示</option>
<option value={0}>后台隐藏</option>
</select>
</div>
</div>
</div>
<div className="space-y-8">
<div className="grid grid-cols-2 gap-6">
<div className="space-y-3 font-bold">
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">分类图标</Label>
<FileUploader
label=""
accept="image/*"
value={formData.iconId}
initialPreview={formData.iconUrl}
onChange={(id) => setFormData({ ...formData, iconId: id })}
/>
</div>
<div className="space-y-3 font-bold">
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">背景封面</Label>
<FileUploader
label=""
accept="image/*"
value={formData.coverId}
initialPreview={formData.coverUrl}
onChange={(id) => setFormData({ ...formData, coverId: id })}
/>
</div>
</div>
</div>
</div> </div>
<div className="space-y-2"> <div className="space-y-3">
<Label>描述</Label> <Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">分类核心描述</Label>
<Input <textarea
className="w-full min-h-[140px] rounded-[2rem] border-none bg-white shadow-sm p-8 font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none resize-none placeholder:text-[#8C7E6C]/30"
placeholder="描述此分类涵盖的内容风格与核心特质..."
value={formData.description} value={formData.description}
onChange={e => setFormData({ ...formData, description: e.target.value })} onChange={(e) => setFormData({ ...formData, description: e.target.value })}
placeholder="分类描述"
/>
</div>
<div className="space-y-2">
<Label>排序</Label>
<Input
type="number"
value={formData.sort}
onChange={e => setFormData({ ...formData, sort: parseInt(e.target.value) || 0 })}
/> />
</div> </div>
</div> </div>
<DialogFooter> <div className="p-10 bg-white/40 backdrop-blur-xl flex justify-between items-center border-t border-[#4A3A2C]/5">
<Button variant="outline" onClick={() => setOpen(false)}>取消</Button> <Button
<Button onClick={handleSubmit}>确定</Button> variant="ghost"
</DialogFooter> onClick={() => setOpen(false)}
className="rounded-[1.5rem] h-14 px-10 font-black uppercase tracking-[0.2em] text-xs hover:bg-white text-[#8C7E6C]"
>
取消
</Button>
<Button
onClick={handleSubmit}
className="rounded-[1.5rem] h-14 px-12 font-black shadow-2xl shadow-[#D28F4F]/30 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none"
>
{isEdit ? '保存架构变更' : '部署新架构节点'}
</Button>
</div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</div>
<DeleteConfirm
open={deleteOpen}
onOpenChange={setDeleteOpen}
onConfirm={confirmDelete}
/>
</motion.div>
); );
} }
src/pages/Radio/Channel/index.tsx
+495 -199
View File
@@ -4,46 +4,67 @@ import {
saveChannelApi, saveChannelApi,
updateChannelApi, updateChannelApi,
deleteChannelApi, deleteChannelApi,
getCategoryListApi getAllCategoryListApi
} from '../../../api/radio'; } from '../../../api/radio';
import { FileUploader } from '../../../components/FileUploader';
import { DeleteConfirm } from '../../../components/DeleteConfirm';
import { Button } from '../../../components/ui/button'; import { Button } from '../../../components/ui/button';
import { Input } from '../../../components/ui/input'; import { Input } from '../../../components/ui/input';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../components/ui/table'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../components/ui/table';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../../../components/ui/dialog'; import { Dialog, DialogContent, DialogTitle } from '../../../components/ui/dialog';
import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
import { Label } from '../../../components/ui/label'; import { Label } from '../../../components/ui/label';
import { Plus, Edit, Trash2 } from 'lucide-react'; import {
Plus,
Edit,
Trash2,
Search,
Disc3,
Crown,
Zap,
LayoutGrid,
CalendarDays
} from 'lucide-react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { motion, AnimatePresence } from 'framer-motion';
export default function Channel() { export default function Channel() {
const [data, setData] = useState([]); const [data, setData] = useState<any[]>([]);
const [total, setTotal] = useState(0); const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [categories, setCategories] = useState([]); const [categories, setCategories] = useState<any[]>([]);
const [selectedCategoryId, setSelectedCategoryId] = useState<string>("");
// Pagination & Search
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [pageSize] = useState(10); const [pageSize] = useState(10);
const [searchName, setSearchName] = useState(''); const [searchName, setSearchName] = useState('');
const [debouncedSearch, setDebouncedSearch] = useState('');
// Dialog State
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [isEdit, setIsEdit] = useState(false); const [isEdit, setIsEdit] = useState(false);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState<any>({
ID: undefined, id: undefined,
categoryId: '', categoryId: '',
name: '', name: '',
description: '', description: '',
price: 0, isFree: 0,
coverId: '',
tags: '',
isVipOnly: 0, isVipOnly: 0,
monthlyPrice: 0,
quarterlyPrice: 0,
annualPrice: 0,
coverId: '',
coverUrl: '',
tags: '',
sort: 0, sort: 0,
status: 1 status: 1
}); });
const [deleteOpen, setDeleteOpen] = useState(false);
const [deleteId, setDeleteId] = useState<any>(null);
const fetchCategories = async () => { const fetchCategories = async () => {
try { try {
const res: any = await getCategoryListApi(); const res: any = await getAllCategoryListApi();
setCategories(res.list || res || []); setCategories(res.list || res || []);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
@@ -51,16 +72,15 @@ export default function Channel() {
} }
const fetchData = async () => { const fetchData = async () => {
if (loading) return;
setLoading(true); setLoading(true);
try { try {
const res: any = await getChannelListApi({ const res: any = await getChannelListApi({
current: page, current: page,
pageSize: pageSize, pageSize: pageSize,
keyword: searchName, name: debouncedSearch || "",
name: searchName categoryId: selectedCategoryId || ""
}); });
setData(res.list || []); setData(res.list || res || []);
setTotal(res.total || 0); setTotal(res.total || 0);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
@@ -69,31 +89,39 @@ export default function Channel() {
} }
}; };
// Table data fetch only on pagination change useEffect(() => {
fetchCategories();
}, []);
useEffect(() => { useEffect(() => {
fetchData(); fetchData();
}, [page, pageSize]); }, [page, pageSize, selectedCategoryId, debouncedSearch]);
// Lazy load categories only when dialog opens
useEffect(() => { useEffect(() => {
if (open) { const timer = setTimeout(() => {
fetchCategories(); setDebouncedSearch(searchName);
}
}, [open]);
const handleSearch = () => {
if (page === 1) {
fetchData();
} else {
setPage(1); setPage(1);
} }, 500);
}; return () => clearTimeout(timer);
}, [searchName]);
const handleOpenAdd = () => { const handleOpenAdd = () => {
setIsEdit(false); setIsEdit(false);
setFormData({ setFormData({
ID: undefined, categoryId: '', name: '', description: '', id: undefined,
price: 0, coverId: '', tags: '', isVipOnly: 0, sort: 0, status: 1 categoryId: selectedCategoryId || '',
name: '',
description: '',
isFree: 0,
isVipOnly: 0,
monthlyPrice: 0,
quarterlyPrice: 0,
annualPrice: 0,
coverId: '',
coverUrl: '',
tags: '',
sort: 0,
status: 1
}); });
setOpen(true); setOpen(true);
}; };
@@ -101,42 +129,59 @@ export default function Channel() {
const handleOpenEdit = (record: any) => { const handleOpenEdit = (record: any) => {
setIsEdit(true); setIsEdit(true);
setFormData({ setFormData({
ID: record.ID, id: String(record.ID || record.id || ""),
categoryId: record.categoryId, categoryId: record.categoryId,
name: record.name, name: record.name,
description: record.description, description: record.description,
price: record.price, isFree: record.isFree || 0,
isVipOnly: record.isVipOnly || 0,
monthlyPrice: record.monthlyPrice || 0,
quarterlyPrice: record.quarterlyPrice || 0,
annualPrice: record.annualPrice || 0,
coverId: record.coverId, coverId: record.coverId,
coverUrl: record.cover?.url || record.coverUrl || "",
tags: record.tags, tags: record.tags,
isVipOnly: record.isVipOnly,
sort: record.sort, sort: record.sort,
status: record.status status: record.status
}); });
setOpen(true); setOpen(true);
}; };
const handleDelete = async (id: number) => { const handleDeleteClick = (id: any) => {
if (!confirm('确定要删除这个频道吗?')) return; setDeleteId(id);
setDeleteOpen(true);
};
const confirmDelete = async () => {
if (!deleteId) return;
try { try {
await deleteChannelApi({ id }); await deleteChannelApi({ id: String(deleteId) });
toast.success('删除成功'); toast.success('删除成功');
fetchData(); fetchData();
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} finally {
setDeleteOpen(false);
setDeleteId(null);
} }
}; };
const handleSubmit = async () => { const handleSubmit = async () => {
if (!formData.name) { if (!formData.name) return toast.error('请填写频道名称');
toast.error('请填写频道名称'); if (!formData.categoryId) return toast.error('请选择所属分类');
return;
} const submitData = { ...formData };
if (submitData.sort === "" || submitData.sort === undefined || submitData.sort === null) submitData.sort = 0;
if (submitData.monthlyPrice === "" || submitData.monthlyPrice === undefined || submitData.monthlyPrice === null) submitData.monthlyPrice = 0;
if (submitData.quarterlyPrice === "" || submitData.quarterlyPrice === undefined || submitData.quarterlyPrice === null) submitData.quarterlyPrice = 0;
if (submitData.annualPrice === "" || submitData.annualPrice === undefined || submitData.annualPrice === null) submitData.annualPrice = 0;
try { try {
if (isEdit) { if (isEdit) {
await updateChannelApi(formData); await updateChannelApi(submitData);
toast.success('更新成功'); toast.success('更新成功');
} else { } else {
await saveChannelApi(formData); await saveChannelApi(submitData);
toast.success('创建成功'); toast.success('创建成功');
} }
setOpen(false); setOpen(false);
@@ -147,179 +192,430 @@ export default function Channel() {
}; };
return ( return (
<div className="space-y-4 flex flex-col h-full bg-background rounded-lg border p-6"> <motion.div
<div className="flex justify-between items-center"> initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="space-y-8 pb-10"
>
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
<div> <div>
<h1 className="text-2xl font-bold tracking-tight">频道管理</h1> <h1 className="text-4xl font-black tracking-tight text-[#4A3A2C] flex items-center gap-4">
<p className="text-muted-foreground">管理所有的电台频道</p> 频道管理
<div className="w-3 h-3 rounded-full bg-[#D28F4F] shadow-[0_0_20px_rgba(210,143,79,0.5)] animate-pulse" />
</h1>
<p className="text-[#8C7E6C] font-medium mt-2">构建多元化的电台生态，管理每一个声音频道。</p>
</div> </div>
</div> <Button
onClick={handleOpenAdd}
{/* Toolbar */} className="rounded-[1.5rem] h-14 px-8 font-black shadow-xl shadow-[#D28F4F]/20 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none group"
<div className="flex justify-between items-center space-x-2"> >
<div className="flex space-x-2 w-full max-sm"> <Plus className="w-5 h-5 mr-3 group-hover:rotate-90 transition-transform" />
<Input 创建新频道
placeholder="根据名称搜索..."
value={searchName}
onChange={(e) => setSearchName(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
/>
<Button variant="secondary" onClick={handleSearch}>搜索</Button>
</div>
<Button onClick={handleOpenAdd}>
<Plus className="w-4 h-4 mr-2" /> 新增频道
</Button> </Button>
</div> </div>
{/* Data Table */} <div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
<div className="border rounded-md mt-4 flex-1 overflow-auto"> <div className="md:col-span-3 lg:col-span-2 space-y-6 sticky top-28">
<Table> <Card className="glass-card warm-noise border-none shadow-glass rounded-[2.5rem] overflow-hidden relative">
<TableHeader> <CardHeader className="p-8 border-b border-[#4A3A2C]/5 bg-[#FAF5E6]/60 backdrop-blur-md">
<TableRow> <CardTitle className="text-[10px] font-black uppercase tracking-[0.3em] text-[#D28F4F] flex items-center gap-3">
<TableHead className="w-[80px]">ID</TableHead> <LayoutGrid className="w-4 h-4" />
<TableHead>分类ID</TableHead> 频道分类
<TableHead>名称</TableHead> </CardTitle>
<TableHead>描述</TableHead> </CardHeader>
<TableHead>标签</TableHead> <CardContent className="p-4 bg-[#FAF5E6]/20">
<TableHead>价格(分)</TableHead> <div className="space-y-3">
<TableHead>仅VIP</TableHead> <button
<TableHead>状态</TableHead> onClick={() => setSelectedCategoryId("")}
<TableHead className="text-right">操作</TableHead> className={`w-full flex items-center px-6 py-4 rounded-3xl text-sm font-black transition-all ${selectedCategoryId === ""
</TableRow> ? 'bg-white shadow-md text-[#D28F4F] ring-4 ring-[#D28F4F]/10'
</TableHeader> : 'text-[#8C7E6C] hover:text-[#4A3A2C] hover:bg-white/40'
<TableBody> }`}
{loading && data.length === 0 ? ( >
<TableRow> 全部频道
<TableCell colSpan={9} className="text-center h-32">加载中...</TableCell> </button>
</TableRow> {categories.map((category: any) => {
) : data.length === 0 ? ( const catId = String(category.ID || category.id || "");
<TableRow> const isSelected = selectedCategoryId === catId;
<TableCell colSpan={9} className="text-center h-32 text-muted-foreground">未找到数据</TableCell> return (
</TableRow> <button
) : ( key={catId}
data.map((item: any) => ( onClick={() => setSelectedCategoryId(catId)}
<TableRow key={item.ID} className={loading ? 'opacity-50' : ''}> className={`w-full flex items-center justify-between px-6 py-4 rounded-3xl text-sm font-black transition-all ${isSelected
<TableCell>{item.ID}</TableCell> ? 'bg-white shadow-md text-[#D28F4F] ring-4 ring-[#D28F4F]/10'
<TableCell>{item.categoryId}</TableCell> : 'text-[#8C7E6C] hover:text-[#4A3A2C] hover:bg-white/40'
<TableCell className="font-medium">{item.name}</TableCell> }`}
<TableCell>{item.description}</TableCell> >
<TableCell>{item.tags}</TableCell> <span className="truncate">{category.name}</span>
<TableCell>{item.price}</TableCell> {isSelected && <div className="w-2 h-2 rounded-full bg-[#D28F4F] shadow-[0_0_10px_var(--primary)]" />}
<TableCell>{item.isVipOnly === 1 ? '是' : '否'}</TableCell> </button>
<TableCell>{item.status === 1 ? '启用' : '禁用'}</TableCell> );
<TableCell className="text-right"> })}
<Button variant="ghost" size="icon" onClick={() => handleOpenEdit(item)}> </div>
<Edit className="w-4 h-4 text-blue-500" /> </CardContent>
</Button> </Card>
<Button variant="ghost" size="icon" onClick={() => handleDelete(item.ID)}> </div>
<Trash2 className="w-4 h-4 text-red-500" />
</Button>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
<div className="flex bg-muted p-2 mt-2 rounded items-center justify-between text-sm text-muted-foreground"> <Card className="md:col-span-9 lg:col-span-10 glass-card warm-noise border-none shadow-glass rounded-[2.5rem] overflow-hidden min-h-[700px] relative z-10">
<span>总计: {total} 条</span> <CardHeader className="p-10 border-b border-[#4A3A2C]/5 flex flex-col sm:flex-row sm:items-center justify-between gap-6 bg-[#FAF5E6]/40">
<span>每页: {pageSize} 条</span> <div className="flex items-center gap-4">
</div> <div className="w-1.5 h-8 bg-[#D28F4F] rounded-full shadow-[0_0_12px_#D28F4F]" />
<CardTitle className="text-2xl font-black tracking-tight text-[#4A3A2C]">
{/* Form Dialog */} {selectedCategoryId ? categories.find(c => String(c.ID || c.id) === selectedCategoryId)?.name : '电台频道全集'}
<Dialog open={open} onOpenChange={setOpen}> </CardTitle>
<DialogContent className="max-w-md"> </div>
<DialogHeader> <div className="relative group w-full max-w-sm">
<DialogTitle>{isEdit ? '编辑频道' : '新增频道'}</DialogTitle> <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[#8C7E6C] group-focus-within:text-[#D28F4F] transition-colors" />
</DialogHeader>
<div className="space-y-4 py-4 max-h-[60vh] overflow-y-auto px-1">
<div className="space-y-2">
<Label>名称</Label>
<Input <Input
value={formData.name} placeholder="搜索频道名称..."
onChange={e => setFormData({ ...formData, name: e.target.value })} value={searchName}
placeholder="输入频道名称" onChange={(e) => setSearchName(e.target.value)}
className="pl-12 h-12 rounded-2xl border-none bg-[#FAF5E6]/80 focus:bg-white shadow-inner transition-all font-bold text-[#4A3A2C]"
/> />
</div> </div>
<div className="space-y-2"> </CardHeader>
<Label>选择分类</Label> <CardContent className="p-0">
<select <div className="overflow-x-auto">
className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm" <Table>
value={formData.categoryId} <TableHeader className="bg-[#FAF5E6]/50">
onChange={e => setFormData({ ...formData, categoryId: e.target.value })} <TableRow className="hover:bg-transparent border-[#4A3A2C]/5">
<TableHead className="w-[100px] pl-10 py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">视觉封面</TableHead>
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">频道信息</TableHead>
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">价格体系 (元)</TableHead>
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C] text-center">准入权限</TableHead>
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">服务状态</TableHead>
<TableHead className="text-right pr-10 py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">管理指令</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{loading ? (
<TableRow><TableCell colSpan={6} className="h-96 text-center text-[#8C7E6C] font-black uppercase"><Disc3 className="w-12 h-12 mx-auto animate-spin-slow mb-4 text-[#D28F4F]/50" />同步数据中...</TableCell></TableRow>
) : data.length === 0 ? (
<TableRow><TableCell colSpan={6} className="h-96 text-center text-[#8C7E6C] text-sm font-black tracking-widest uppercase">未发现相关频道</TableCell></TableRow>
) : (
data.map((item: any) => (
<TableRow
key={item.ID || item.id}
className="group border-[#4A3A2C]/5 hover:bg-[#FAF5E6]/80 transition-all duration-300 transform hover:scale-[1.002] relative"
>
<TableCell className="pl-10 py-6">
<div className="w-20 h-14 rounded-2xl overflow-hidden shadow-md ring-4 ring-white transition-all group-hover:ring-[#D28F4F]/20 bg-[#F2EDE4]">
<img
src={item.cover?.url || item.coverUrl || 'https://picsum.photos/seed/channel/100/100'}
alt=""
className="w-full h-full object-cover group-hover:scale-125 transition-transform duration-1000"
/>
</div>
</TableCell>
<TableCell className="py-6">
<div className="max-w-[200px]">
<p className="font-black text-[#4A3A2C] group-hover:text-[#D28F4F] transition-colors text-base tracking-tight">{item.name}</p>
<p className="text-[11px] font-bold text-[#8C7E6C]/60 mt-1 line-clamp-1 italic">#{categories.find(c => String(c.ID || c.id) === String(item.categoryId))?.name || '未分类'}</p>
</div>
</TableCell>
<TableCell className="py-6">
<div className="flex gap-4">
<div className="text-center group/price hover:translate-y-[-2px] transition-transform">
<p className="text-[10px] font-black text-[#8C7E6C]/50 uppercase">包月</p>
<p className="text-xs font-black text-[#4A3A2C]">¥{(item.monthlyPrice / 100).toFixed(2)}</p>
</div>
<div className="w-px h-8 bg-[#4A3A2C]/5 mt-1" />
<div className="text-center group/price hover:translate-y-[-2px] transition-transform">
<p className="text-[10px] font-black text-[#8C7E6C]/50 uppercase">包季</p>
<p className="text-xs font-black text-[#4A3A2C]">¥{(item.quarterlyPrice / 100).toFixed(2)}</p>
</div>
<div className="w-px h-8 bg-[#4A3A2C]/5 mt-1" />
<div className="text-center group/price hover:translate-y-[-2px] transition-transform">
<p className="text-[10px] font-black text-[#D28F4F]/60 uppercase">包年</p>
<p className="text-xs font-black text-[#D28F4F]">¥{(item.annualPrice / 100).toFixed(2)}</p>
</div>
</div>
</TableCell>
<TableCell className="py-6 text-center">
<div className="flex justify-center">
{item.isVipOnly === 1 ? (
<div className="flex items-center gap-1.5 px-4 py-1 rounded-full bg-amber-50 text-amber-700 border border-amber-200 shadow-sm">
<Crown className="w-3.5 h-3.5 fill-amber-500" />
<span className="text-[10px] font-black uppercase">VIP 专属</span>
</div>
) : item.isFree === 1 ? (
<div className="flex items-center gap-1.5 px-4 py-1 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 shadow-sm">
<Zap className="w-3.5 h-3.5 fill-emerald-500" />
<span className="text-[10px] font-black uppercase tracking-tighter">全员免费</span>
</div>
) : (
<span className="text-[11px] font-black text-[#8C7E6C]/40 uppercase tracking-widest text-shadow-sm">标准访问</span>
)}
</div>
</TableCell>
<TableCell className="py-6 text-center">
<div className={`flex items-center mx-auto w-fit px-3 py-1 rounded-full text-[10px] font-black uppercase border shadow-sm ${item.status === 1
? 'bg-emerald-50 text-emerald-700 border-emerald-200'
: 'bg-rose-50 text-rose-600 border-rose-200'
}`}>
<div className={`w-1.5 h-1.5 rounded-full mr-2 ${item.status === 1 ? 'bg-emerald-500 animate-pulse' : 'bg-rose-500'}`} />
{item.status === 1 ? '启用' : '下架'}
</div>
</TableCell>
<TableCell className="text-right pr-10 py-6">
<div className="flex items-center justify-end gap-3 opacity-0 group-hover:opacity-100 transition-all translate-x-4 group-hover:translate-x-0">
<Button
variant="ghost"
size="icon"
onClick={() => handleOpenEdit(item)}
className="w-12 h-12 rounded-[1.2rem] hover:bg-white hover:text-[#D28F4F] transition-all border border-[#4A3A2C]/5 shadow-sm hover:shadow-md"
>
<Edit className="w-5 h-5" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleDeleteClick(item.ID || item.id)}
className="w-12 h-12 rounded-[1.2rem] hover:bg-rose-50 hover:text-rose-600 transition-all border border-[#4A3A2C]/5 shadow-sm"
>
<Trash2 className="w-5 h-5" />
</Button>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
</CardContent>
<AnimatePresence>
{total > pageSize && (
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
className="p-10 border-t border-[#4A3A2C]/5 flex items-center justify-center bg-[#FAF5E6]/40 backdrop-blur-md"
> >
<option value="" disabled>选择一个分类</option> <div className="flex items-center gap-6">
{categories.map((c: any) => ( <Button
<option key={c.ID} value={c.ID}>{c.name}</option> variant="ghost"
))} onClick={() => setPage(p => Math.max(1, p - 1))}
</select> disabled={page === 1}
className="rounded-2xl px-8 h-12 font-black uppercase tracking-widest text-[11px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
>
上一页
</Button>
<div className="px-8 py-2.5 bg-white/60 backdrop-blur-md rounded-full shadow-inner border border-[#D28F4F]/10 text-[11px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">
第 <span className="text-[#D28F4F]">{page}</span> / {Math.ceil(total / pageSize)} 页
</div>
<Button
variant="ghost"
onClick={() => setPage(p => p + 1)}
disabled={data.length < pageSize}
className="rounded-2xl px-8 h-12 font-black uppercase tracking-widest text-[11px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
>
下一页
</Button>
</div>
</motion.div>
)}
</AnimatePresence>
</Card>
</div>
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="sm:max-w-[850px] glass-card warm-noise border-none rounded-[3.5rem] p-0 overflow-hidden shadow-2xl">
<div className="bg-gradient-to-r from-[#D28F4F] to-[#A64452] p-12 text-white relative">
<DialogTitle className="text-3xl font-black tracking-tight">{isEdit ? '编辑频道方案' : '策划全新广播频道'}</DialogTitle>
<p className="text-white/60 text-xs font-black uppercase tracking-[0.3em] mt-3">Channel Ecosystem Design</p>
<Disc3 className="absolute right-12 top-1/2 -translate-y-1/2 w-24 h-24 text-white/10 animate-spin-slow" />
</div>
<div className="p-12 space-y-10 max-h-[75vh] overflow-y-auto custom-scrollbar bg-[#FAF5E6]/60 backdrop-blur-3xl">
<div className="grid grid-cols-2 gap-10">
<div className="space-y-8">
<div className="space-y-3">
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">频道名称</Label>
<Input
placeholder="输入辨识度高的名称..."
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 text-lg"
/>
</div>
<div className="space-y-3">
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">所属分类</Label>
<select
className="w-full h-16 rounded-[1.5rem] bg-white shadow-sm px-8 font-bold text-[#4A3A2C] border-none focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none text-lg appearance-none cursor-pointer"
value={formData.categoryId}
onChange={e => setFormData({ ...formData, categoryId: e.target.value })}
>
<option value="" disabled>选择一个分类定位</option>
{categories.map((c: any) => (
<option key={String(c.ID || c.id)} value={String(c.ID || c.id)}>{c.name}</option>
))}
</select>
</div>
<div className="grid grid-cols-2 gap-6">
<div className="space-y-3">
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">排序权重</Label>
<Input
type="number"
value={formData.sort ?? ""}
onChange={(e) => {
const val = e.target.value;
setFormData({ ...formData, sort: val === "" ? "" : parseInt(val) });
}}
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-center text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all text-lg"
/>
</div>
<div className="space-y-3">
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">启用状态</Label>
<select
className="w-full h-16 rounded-[1.5rem] bg-white shadow-sm px-8 font-bold text-[#4A3A2C] border-none focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none text-lg appearance-none cursor-pointer"
value={formData.status}
onChange={e => setFormData({ ...formData, status: parseInt(e.target.value) })}
>
<option value={1}>启用</option>
<option value={0}>下架</option>
</select>
</div>
</div>
<div className="grid grid-cols-2 gap-6 p-6 rounded-[2.5rem] bg-[#FAF5E6] border border-[#D28F4F]/10 shadow-inner">
<div className="space-y-3">
<Label className="text-[10px] uppercase font-black text-[#8C7E6C] ml-1">收费模式</Label>
<select
className="w-full h-12 rounded-[1.2rem] bg-white text-sm font-black text-[#4A3A2C] border-none shadow-sm appearance-none px-4"
value={formData.isFree}
onChange={e => {
const val = parseInt(e.target.value);
setFormData({ ...formData, isFree: val });
}}
>
<option value={0}>普通收费</option>
<option value={1}>全员免费</option>
</select>
</div>
<div className="space-y-3">
<Label className="text-[10px] uppercase font-black text-[#8C7E6C] ml-1">VIP权限</Label>
<select
className="w-full h-12 rounded-[1.2rem] bg-white text-sm font-black text-[#4A3A2C] border-none shadow-sm appearance-none px-4"
value={formData.isVipOnly}
onChange={e => {
const val = parseInt(e.target.value);
setFormData({
...formData,
isVipOnly: val,
isFree: val === 1 ? 0 : formData.isFree
});
}}
>
<option value={0}>公开访问</option>
<option value={1}>仅限VIP</option>
</select>
</div>
</div>
</div>
<div className="space-y-8">
<div className="space-y-3 font-bold">
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">视觉封面设计</Label>
<FileUploader
label=""
accept="image/*"
placeholder="上传封面图片 (jpg, png, webp)"
value={formData.coverId}
initialPreview={formData.coverUrl}
onChange={(id) => setFormData({ ...formData, coverId: id })}
/>
</div>
<div className="rounded-[2.5rem] border border-[#D28F4F]/10 shadow-sm bg-white/30 p-8 space-y-6">
<Label className="text-[11px] uppercase font-black tracking-widest text-[#D28F4F] flex items-center gap-2">
<CalendarDays className="w-4 h-4" />
价格策略配置 (元)
</Label>
<div className="grid grid-cols-1 gap-4">
<div className="flex items-center gap-6 bg-white p-4 rounded-[1.5rem] shadow-sm">
<span className="text-[11px] font-black text-[#8C7E6C] uppercase w-12 text-center">包月</span>
<Input
type="number"
step="0.01"
value={formData.monthlyPrice === 0 ? "0" : (formData.monthlyPrice ? (formData.monthlyPrice / 100).toString() : "")}
onChange={e => {
const val = e.target.value;
setFormData({ ...formData, monthlyPrice: val === "" ? "" : Math.round(parseFloat(val) * 100) });
}}
className="h-10 border-none shadow-none font-black text-lg text-right flex-1 bg-transparent text-[#4A3A2C]"
/>
</div>
<div className="flex items-center gap-6 bg-white p-4 rounded-[1.5rem] shadow-sm">
<span className="text-[11px] font-black text-[#8C7E6C] uppercase w-12 text-center">包季</span>
<Input
type="number"
step="0.01"
value={formData.quarterlyPrice === 0 ? "0" : (formData.quarterlyPrice ? (formData.quarterlyPrice / 100).toString() : "")}
onChange={e => {
const val = e.target.value;
setFormData({ ...formData, quarterlyPrice: val === "" ? "" : Math.round(parseFloat(val) * 100) });
}}
className="h-10 border-none shadow-none font-black text-lg text-right flex-1 bg-transparent text-[#4A3A2C]"
/>
</div>
<div className="flex items-center gap-6 bg-[#D28F4F]/5 p-4 rounded-[1.5rem] ring-2 ring-[#D28F4F]/20 shadow-sm">
<span className="text-[11px] font-black text-[#D28F4F] uppercase w-12 text-center">包年</span>
<Input
type="number"
step="0.01"
value={formData.annualPrice === 0 ? "0" : (formData.annualPrice ? (formData.annualPrice / 100).toString() : "")}
onChange={e => {
const val = e.target.value;
setFormData({ ...formData, annualPrice: val === "" ? "" : Math.round(parseFloat(val) * 100) });
}}
className="h-10 border-none shadow-none font-black text-lg text-right flex-1 bg-transparent text-[#D28F4F]"
/>
</div>
</div>
</div>
</div>
</div> </div>
<div className="space-y-2"> <div className="space-y-8">
<Label>描述</Label> <div className="space-y-3">
<Input <Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">专属标签 (逗号隔开)</Label>
value={formData.description}
onChange={e => setFormData({ ...formData, description: e.target.value })}
placeholder="频道描述"
/>
</div>
<div className="space-y-2">
<Label>标签 (逗号分隔)</Label>
<Input
value={formData.tags}
onChange={e => setFormData({ ...formData, tags: e.target.value })}
placeholder="例：音乐,新闻"
/>
</div>
<div className="flex space-x-4">
<div className="space-y-2 flex-1">
<Label>价格 (分)</Label>
<Input <Input
type="number" placeholder="例：故事, 催眠, 纯音乐..."
value={formData.price} value={formData.tags}
onChange={e => setFormData({ ...formData, price: parseInt(e.target.value) || 0 })} onChange={(e) => setFormData({ ...formData, tags: e.target.value })}
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 text-lg"
/> />
</div> </div>
<div className="space-y-2 flex-1"> <div className="space-y-3">
<Label>排序</Label> <Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">频道深度介绍</Label>
<Input <textarea
type="number" className="w-full min-h-[140px] rounded-[2rem] border-none bg-white shadow-sm p-8 font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none resize-none placeholder:text-[#8C7E6C]/30"
value={formData.sort} placeholder="描述此频道的独特魅力与听众受众..."
onChange={e => setFormData({ ...formData, sort: parseInt(e.target.value) || 0 })} value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
/> />
</div> </div>
</div> </div>
<div className="flex space-x-4">
<div className="space-y-2 flex-1">
<Label>仅限VIP</Label>
<select
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
value={formData.isVipOnly}
onChange={e => setFormData({ ...formData, isVipOnly: parseInt(e.target.value) })}
>
<option value={0}>否</option>
<option value={1}>是</option>
</select>
</div>
<div className="space-y-2 flex-1">
<Label>状态</Label>
<select
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
value={formData.status}
onChange={e => setFormData({ ...formData, status: parseInt(e.target.value) })}
>
<option value={1}>启用</option>
<option value={0}>禁用</option>
</select>
</div>
</div>
</div> </div>
<DialogFooter> <div className="p-12 bg-white/40 backdrop-blur-xl flex justify-between items-center border-t border-[#4A3A2C]/5 font-black">
<Button variant="outline" onClick={() => setOpen(false)}>取消</Button> <Button
<Button onClick={handleSubmit}>提交</Button> variant="ghost"
</DialogFooter> onClick={() => setOpen(false)}
className="rounded-[1.5rem] h-14 px-10 uppercase tracking-[0.2em] text-xs hover:bg-white text-[#8C7E6C]"
>
取消返回
</Button>
<Button
onClick={handleSubmit}
className="rounded-[1.5rem] h-14 px-12 shadow-2xl shadow-[#D28F4F]/30 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none"
>
{isEdit ? '保存频道更新' : '立即发布频道'}
</Button>
</div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</div>
<DeleteConfirm
open={deleteOpen}
onOpenChange={setDeleteOpen}
onConfirm={confirmDelete}
/>
</motion.div>
); );
} }
src/pages/Radio/Program/index.tsx
+498 -194
View File
@@ -1,66 +1,113 @@
import { useState, useEffect } from 'react'; import { useState, useEffect, useRef } from 'react';
import { import {
getProgramListApi, getProgramListApi,
saveProgramApi, saveProgramApi,
updateProgramApi, updateProgramApi,
deleteProgramApi, deleteProgramApi,
getChannelListApi getCategoryTreeApi
} from '../../../api/radio'; } from '../../../api/radio';
import { FileUploader } from '../../../components/FileUploader';
import { DeleteConfirm } from '../../../components/DeleteConfirm';
import { Button } from '../../../components/ui/button'; import { Button } from '../../../components/ui/button';
import { Input } from '../../../components/ui/input'; import { Input } from '../../../components/ui/input';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../components/ui/table'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../components/ui/table';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../../../components/ui/dialog'; import { Dialog, DialogContent, DialogTitle } from '../../../components/ui/dialog';
import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
import { Label } from '../../../components/ui/label'; import { Label } from '../../../components/ui/label';
import { Plus, Edit, Trash2 } from 'lucide-react'; import {
Plus,
Edit,
Trash2,
ChevronDown,
ChevronRight,
Play,
Pause,
Headphones,
ListMusic,
Disc3,
ThumbsUp,
Search,
Clock
} from 'lucide-react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { motion, AnimatePresence } from 'framer-motion';
export default function Program() { export default function Program() {
const [data, setData] = useState([]); const [data, setData] = useState<any[]>([]);
const [total, setTotal] = useState(0); const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [channels, setChannels] = useState([]); const [channels, setChannels] = useState<any[]>([]);
const [selectedChannelId, setSelectedChannelId] = useState<string>("");
// Pagination & Search
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10); const [pageSize] = useState(10);
const [searchTitle, setSearchTitle] = useState(''); const [searchTitle, setSearchTitle] = useState('');
const [debouncedSearch, setDebouncedSearch] = useState('');
// Dialog State
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [isEdit, setIsEdit] = useState(false); const [isEdit, setIsEdit] = useState(false);
const [formData, setFormData] = useState({ const [formData, setFormData] = useState<any>({
ID: undefined, id: '',
channelId: '', channelId: '',
title: '', title: '',
description: '', description: '',
content: '', content: '',
duration: 0, duration: 0,
coverId: '',
audioId: '', audioId: '',
audioUrl: '',
tags: '', tags: '',
status: 1 status: 1
}); });
const fetchChannels = async () => { const [treeData, setTreeData] = useState<any[]>([]);
const [expandedCategories, setExpandedCategories] = useState<string[]>([]);
const [playingId, setPlayingId] = useState<string | null>(null);
const audioRef = useRef<HTMLAudioElement | null>(null);
const [deleteOpen, setDeleteOpen] = useState(false);
const [deleteId, setDeleteId] = useState<any>(null);
const fetchTreeData = async () => {
try { try {
const res: any = await getChannelListApi(); const res: any = await getCategoryTreeApi();
setChannels(res.list || res || []); const list = res.list || res || [];
setTreeData(list);
const allChannels: any = [];
list.forEach((cat: any) => {
const channelList = cat.channels || cat.channelList || [];
allChannels.push(...channelList);
});
setChannels(allChannels);
if (list.length > 0) {
const firstCatId = String(list[0].ID || list[0].id || "");
setExpandedCategories(prev => prev.length === 0 ? [firstCatId] : prev);
if (selectedChannelId === "") {
const firstCatChannels = list[0].channels || list[0].channelList || [];
if (firstCatChannels.length > 0) {
const firstChanId = String(firstCatChannels[0].ID || firstCatChannels[0].id || "");
setSelectedChannelId(firstChanId);
}
}
}
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
} }
const fetchData = async () => { const fetchData = async () => {
if (loading) return; if (!selectedChannelId) return;
setLoading(true); setLoading(true);
try { try {
const res: any = await getProgramListApi({ const res: any = await getProgramListApi({
current: page, current: page,
pageSize: pageSize, pageSize: pageSize,
keyword: searchTitle, title: debouncedSearch || "",
title: searchTitle channelId: selectedChannelId || ""
}); });
setData(res.list || []); setData(res.list || res || []);
setTotal(res.total || 0); setTotal(res.total || 0);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
@@ -69,31 +116,68 @@ export default function Program() {
} }
}; };
// Table data fetch only on pagination change
useEffect(() => { useEffect(() => {
fetchData(); fetchTreeData();
}, [page, pageSize]); audioRef.current = new Audio();
return () => {
if (audioRef.current) {
audioRef.current.pause();
audioRef.current.src = "";
}
};
}, []);
// Lazy load channels only when dialog opens
useEffect(() => { useEffect(() => {
if (open) { if (selectedChannelId) fetchData();
fetchChannels(); }, [page, pageSize, selectedChannelId, debouncedSearch]);
}
}, [open]);
const handleSearch = () => { useEffect(() => {
if (page === 1) { const timer = setTimeout(() => {
fetchData(); setDebouncedSearch(searchTitle);
} else {
setPage(1); setPage(1);
}, 500);
return () => clearTimeout(timer);
}, [searchTitle]);
const togglePlay = (record: any) => {
const id = String(record.ID || record.id || "");
const url = record.audio?.url || record.audioUrl;
if (!url || !audioRef.current) {
toast.error("无可播放音频");
return;
}
if (playingId === id) {
audioRef.current.pause();
setPlayingId(null);
} else {
audioRef.current.src = url;
audioRef.current.play().catch(e => {
toast.error("播放失败: " + e.message);
setPlayingId(null);
});
setPlayingId(id);
} }
}; };
if (audioRef.current) {
audioRef.current.onended = () => setPlayingId(null);
}
const handleOpenAdd = () => { const handleOpenAdd = () => {
setIsEdit(false); setIsEdit(false);
setFormData({ setFormData({
ID: undefined, channelId: '', title: '', description: '', content: '', id: '',
duration: 0, coverId: '', audioId: '', tags: '', status: 1 channelId: selectedChannelId,
title: '',
description: '',
content: '',
duration: 0,
audioId: '',
audioUrl: '',
tags: '',
status: 1
}); });
setOpen(true); setOpen(true);
}; };
@@ -101,46 +185,53 @@ export default function Program() {
const handleOpenEdit = (record: any) => { const handleOpenEdit = (record: any) => {
setIsEdit(true); setIsEdit(true);
setFormData({ setFormData({
ID: record.ID, id: String(record.ID || record.id || ""),
channelId: record.channelId, channelId: record.channelId,
title: record.title, title: record.title,
description: record.description, description: record.description,
content: record.content, content: record.content,
duration: record.duration, duration: record.duration,
coverId: record.coverId,
audioId: record.audioId, audioId: record.audioId,
audioUrl: record.audio?.url || record.audioUrl || "",
tags: record.tags, tags: record.tags,
status: record.status status: record.status
}); });
setOpen(true); setOpen(true);
}; };
const handleDelete = async (id: number) => { const handleDeleteClick = (id: any) => {
if (!confirm('确定要删除这个节目吗?')) return; setDeleteId(id);
setDeleteOpen(true);
};
const confirmDelete = async () => {
if (!deleteId) return;
try { try {
await deleteProgramApi({ id }); await deleteProgramApi({ ids: [String(deleteId)] });
toast.success('删除成功'); toast.success('删除成功');
fetchData(); fetchData();
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} finally {
setDeleteOpen(false);
setDeleteId(null);
} }
}; };
const handleSubmit = async () => { const handleSubmit = async () => {
if (!formData.title) { if (!formData.title) return toast.error('请填写标题');
toast.error('请填写节目标题');
return; const submitData = { ...formData };
} if (submitData.duration === "" || submitData.duration === undefined || submitData.duration === null) {
if (!formData.channelId) { submitData.duration = 0;
toast.error('请选择所属频道');
return;
} }
try { try {
if (isEdit) { if (isEdit) {
await updateProgramApi(formData); await updateProgramApi(submitData);
toast.success('更新成功'); toast.success('更新成功');
} else { } else {
await saveProgramApi(formData); await saveProgramApi(submitData);
toast.success('创建成功'); toast.success('创建成功');
} }
setOpen(false); setOpen(false);
@@ -150,169 +241,382 @@ export default function Program() {
} }
}; };
return ( const toggleCategory = (catId: string) => {
<div className="space-y-4 flex flex-col h-full bg-background rounded-lg border p-6"> setExpandedCategories(prev =>
<div className="flex justify-between items-center"> prev.includes(catId) ? prev.filter(id => id !== catId) : [...prev, catId]
<div> );
<h1 className="text-2xl font-bold tracking-tight">节目管理</h1> };
<p className="text-muted-foreground">管理每个频道下的具体广播节目</p>
</div>
</div>
{/* Toolbar */} return (
<div className="flex justify-between items-center space-x-2"> <motion.div
<div className="flex space-x-2 w-full max-w-sm"> initial={{ opacity: 0, y: 20 }}
<Input animate={{ opacity: 1, y: 0 }}
placeholder="根据标题搜索..." className="space-y-8 pb-10"
value={searchTitle} >
onChange={(e) => setSearchTitle(e.target.value)} <div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
onKeyDown={(e) => e.key === 'Enter' && handleSearch()} <div>
/> <h1 className="text-4xl font-black tracking-tight text-[#4A3A2C] flex items-center gap-3">
<Button variant="secondary" onClick={handleSearch}>搜索</Button> 节目管理
<div className="w-3 h-3 rounded-full bg-[#D28F4F] shadow-[0_0_20px_rgba(210,143,79,0.5)] animate-pulse" />
</h1>
<p className="text-[#8C7E6C] font-medium mt-2">管理和分发每一个温暖人心的广播节目信息。</p>
</div> </div>
<Button onClick={handleOpenAdd}> <Button
<Plus className="w-4 h-4 mr-2" /> 新增节目 onClick={handleOpenAdd}
className="rounded-[1.5rem] h-14 px-8 font-black shadow-xl shadow-[#D28F4F]/20 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none group"
>
<Plus className="w-5 h-5 mr-3 group-hover:rotate-90 transition-transform" />
发布新节目
</Button> </Button>
</div> </div>
{/* Data Table */} <div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
<div className="border rounded-md mt-4 flex-1 overflow-auto"> <div className="md:col-span-3 lg:col-span-2 space-y-6 sticky top-28">
<Table> <Card className="glass-card warm-noise border-none shadow-glass rounded-[2.5rem] overflow-hidden relative z-10">
<TableHeader> <CardHeader className="p-8 border-b border-[#4A3A2C]/5 bg-[#FAF5E6]/60 backdrop-blur-md">
<TableRow> <CardTitle className="text-[10px] font-black uppercase tracking-[0.25em] text-[#D28F4F] flex items-center gap-3">
<TableHead className="w-[80px]">ID</TableHead> <ListMusic className="w-4 h-4" />
<TableHead>标题</TableHead> 频道导航
<TableHead>频道ID</TableHead> </CardTitle>
<TableHead>时长(秒)</TableHead> </CardHeader>
<TableHead>标签</TableHead> <CardContent className="p-4 max-h-[calc(100vh-320px)] overflow-y-auto custom-scrollbar bg-[#FAF5E6]/20">
<TableHead>播放数</TableHead> <div className="space-y-3">
<TableHead>点赞数</TableHead> {treeData.map((category: any) => {
<TableHead>状态</TableHead> const catId = String(category.ID || category.id || "");
<TableHead className="text-right">操作</TableHead> const isExpanded = expandedCategories.includes(catId);
</TableRow> return (
</TableHeader> <div key={catId} className="space-y-2">
<TableBody> <button
{loading && data.length === 0 ? ( onClick={() => toggleCategory(catId)}
<TableRow> className={`w-full flex items-center justify-between px-5 py-4 rounded-3xl transition-all group ${isExpanded ? 'bg-[#D28F4F]/10 text-[#D28F4F] shadow-sm' : 'hover:bg-white/50 text-[#8C7E6C]'
<TableCell colSpan={9} className="text-center h-32">加载中...</TableCell> }`}
</TableRow> >
) : data.length === 0 ? ( <div className="flex items-center gap-3">
<TableRow> <div className={`w-2 h-2 rounded-full transition-all ${isExpanded ? 'bg-[#D28F4F] scale-125 shadow-[0_0_10px_var(--primary)]' : 'bg-[#D28F4F]/20'
<TableCell colSpan={9} className="text-center h-32 text-muted-foreground">未找到数据</TableCell> }`} />
</TableRow> <span className="text-sm font-black tracking-tight">{category.name}</span>
) : ( </div>
data.map((item: any) => ( {isExpanded ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4 opacity-40 group-hover:opacity-100" />}
<TableRow key={item.ID} className={loading ? 'opacity-50' : ''}> </button>
<TableCell>{item.ID}</TableCell>
<TableCell className="font-medium">{item.title}</TableCell> <AnimatePresence>
<TableCell>{item.channelId}</TableCell> {isExpanded && (
<TableCell>{item.duration}</TableCell> <motion.div
<TableCell>{item.tags}</TableCell> initial={{ opacity: 0, height: 0 }}
<TableCell>{item.playCount}</TableCell> animate={{ opacity: 1, height: 'auto' }}
<TableCell>{item.likeCount}</TableCell> exit={{ opacity: 0, height: 0 }}
<TableCell>{item.status === 1 ? '已发布' : '已下架'}</TableCell> className="space-y-2 pl-6 overflow-hidden mt-1"
<TableCell className="text-right"> >
<Button variant="ghost" size="icon" onClick={() => handleOpenEdit(item)}> {(category.channels || category.channelList || []).map((channel: any) => {
<Edit className="w-4 h-4 text-blue-500" /> const chanId = String(channel.ID || channel.id || "");
</Button> const isSelected = chanId === String(selectedChannelId);
<Button variant="ghost" size="icon" onClick={() => handleDelete(item.ID)}> return (
<Trash2 className="w-4 h-4 text-red-500" /> <button
</Button> key={chanId}
</TableCell> onClick={() => { setSelectedChannelId(chanId); setPage(1); }}
</TableRow> className={`w-full flex items-center px-4 py-3 rounded-2xl text-[11px] font-black transition-all ${isSelected
)) ? 'bg-white shadow-md text-[#D28F4F] ring-4 ring-[#D28F4F]/5'
: 'text-[#8C7E6C] hover:text-[#4A3A2C] hover:translate-x-1'
}`}
>
<div className={`w-1.5 h-1.5 rounded-full mr-3 ${isSelected ? 'bg-[#D28F4F]' : 'bg-transparent'}`} />
{channel.name}
</button>
);
})}
</motion.div>
)}
</AnimatePresence>
</div>
);
})}
</div>
</CardContent>
</Card>
</div>
<div className="md:col-span-9 lg:col-span-10 space-y-8">
<Card className="glass-card warm-noise border-none shadow-glass rounded-[2.5rem] overflow-hidden min-h-[600px] relative z-10">
<CardHeader className="p-10 border-b border-[#4A3A2C]/5 flex flex-col sm:flex-row sm:items-center justify-between gap-6 bg-[#FAF5E6]/40">
<div className="flex items-center gap-4">
<div className="w-1.5 h-8 bg-[#D28F4F] rounded-full shadow-[0_0_12px_#D28F4F]" />
<CardTitle className="text-2xl font-black tracking-tight text-[#4A3A2C]">
{channels.find(c => String(c.ID || c.id) === selectedChannelId)?.name || '节目大厅'}
</CardTitle>
</div>
<div className="relative group w-full max-w-sm">
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[#8C7E6C] group-focus-within:text-[#D28F4F] transition-colors" />
<Input
placeholder="搜索节目标题关键词..."
value={searchTitle}
onChange={(e) => setSearchTitle(e.target.value)}
className="pl-12 h-12 rounded-2xl border-none bg-[#FAF5E6]/80 focus:bg-white shadow-inner transition-all font-bold text-[#4A3A2C]"
/>
</div>
</CardHeader>
<CardContent className="p-0">
<Table>
<TableHeader className="bg-[#FAF5E6]/50">
<TableRow className="hover:bg-transparent border-[#4A3A2C]/5">
<TableHead className="w-[100px] pl-10 py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">播控</TableHead>
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">节目详情</TableHead>
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">时长</TableHead>
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">数据统计</TableHead>
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">状态标签</TableHead>
<TableHead className="text-right pr-10 py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">管理指令</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{loading ? (
<TableRow><TableCell colSpan={6} className="h-96 text-center text-[#8C7E6C] font-black uppercase"><Disc3 className="w-12 h-12 mx-auto animate-spin-slow mb-4 text-[#D28F4F]/50" />同步中...</TableCell></TableRow>
) : data.length === 0 ? (
<TableRow><TableCell colSpan={6} className="h-96 text-center text-[#8C7E6C] text-sm font-black tracking-widest uppercase">暂无已排期节目</TableCell></TableRow>
) : (
data.map((item: any) => {
const id = String(item.ID || item.id || "");
const isPlaying = playingId === id;
return (
<TableRow key={id} className="group border-[#4A3A2C]/5 hover:bg-[#FAF5E6]/80 transition-all duration-300 transform hover:scale-[1.002]">
<TableCell className="pl-10 py-6">
<Button
variant="ghost"
size="icon"
onClick={() => togglePlay(item)}
className={`w-14 h-14 rounded-2xl transition-all shadow-md group-hover:scale-110 ${isPlaying
? 'bg-[#D28F4F] text-white scale-110 shadow-[#D28F4F]/30 ring-4 ring-[#D28F4F]/20'
: 'bg-white text-[#8C7E6C] hover:text-[#D28F4F] hover:bg-[#D28F4F]/5'
}`}
>
{isPlaying ? <Pause className="fill-current" /> : <Play className="fill-current ml-1" />}
</Button>
</TableCell>
<TableCell className="py-6">
<div className="max-w-[280px]">
<p className="font-black text-[#4A3A2C] group-hover:text-[#D28F4F] transition-colors text-base tracking-tight mb-1">{item.title}</p>
<p className="text-[11px] font-bold text-[#8C7E6C]/60 line-clamp-1 italic italic">
{item.description || "— 暂无节目简介 —"}
</p>
</div>
</TableCell>
<TableCell className="py-6">
<div className="flex items-center gap-2">
<Clock className="w-3.5 h-3.5 text-[#D28F4F]/40" />
<span className="text-xs font-black text-[#4A3A2C]">
{Math.floor(item.duration / 60)}:{(item.duration % 60).toString().padStart(2, '0')}
</span>
</div>
</TableCell>
<TableCell className="py-6">
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2">
<Headphones className="w-3.5 h-3.5 text-emerald-600/60" />
<span className="text-[11px] font-black text-[#8C7E6C]">{item.playCount || 0} 次收听</span>
</div>
<div className="flex items-center gap-2">
<ThumbsUp className="w-3.5 h-3.5 text-blue-600/60" />
<span className="text-[10px] font-black text-[#8C7E6C]/60">{item.likeCount || 0} 喜欢</span>
</div>
</div>
</TableCell>
<TableCell className="py-6">
<div className="flex flex-wrap gap-2">
{item.tags?.split(',').filter(Boolean).map((tag: string) => (
<span key={tag} className="px-3 py-1 rounded-full bg-[#FAF5E6] text-[10px] font-black text-[#8C7E6C]/80 uppercase tracking-tighter border border-[#D28F4F]/10 shadow-sm">
{tag}
</span>
))}
<div className={`flex items-center px-4 py-1 rounded-full text-[10px] font-black uppercase border shadow-sm ${item.status === 1
? 'bg-emerald-50 text-emerald-700 border-emerald-200'
: 'bg-rose-50 text-rose-600 border-rose-200'
}`}>
<div className={`w-1.5 h-1.5 rounded-full mr-2 ${item.status === 1 ? 'bg-emerald-500 animate-pulse' : 'bg-rose-500'}`} />
{item.status === 1 ? '启用' : '隐藏'}
</div>
</div>
</TableCell>
<TableCell className="text-right pr-10 py-6">
<div className="flex items-center justify-end gap-3 opacity-0 group-hover:opacity-100 transition-all translate-x-4 group-hover:translate-x-0">
<Button
variant="ghost"
size="icon"
onClick={() => handleOpenEdit(item)}
className="w-12 h-12 rounded-[1.2rem] hover:bg-white hover:text-[#D28F4F] transition-all border border-[#4A3A2C]/5 shadow-sm hover:shadow-md"
>
<Edit className="w-5 h-5" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleDeleteClick(id)}
className="w-12 h-12 rounded-[1.2rem] hover:bg-rose-50 hover:text-rose-600 transition-all border border-[#4A3A2C]/5 shadow-sm"
>
<Trash2 className="w-5 h-5" />
</Button>
</div>
</TableCell>
</TableRow>
);
})
)}
</TableBody>
</Table>
</CardContent>
{total > pageSize && (
<div className="p-10 border-t border-[#4A3A2C]/5 flex items-center justify-center bg-[#FAF5E6]/40 backdrop-blur-md">
<div className="flex items-center gap-6">
<Button
variant="ghost"
onClick={() => setPage(p => Math.max(1, p - 1))}
disabled={page === 1}
className="rounded-2xl px-8 h-12 font-black uppercase tracking-widest text-[11px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
>
上一页
</Button>
<div className="px-8 py-2.5 bg-white/60 backdrop-blur-md rounded-full shadow-inner border border-[#D28F4F]/10 text-[11px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">
第 <span className="text-[#D28F4F]">{page}</span> / {Math.ceil(total / pageSize)} 页
</div>
<Button
variant="ghost"
onClick={() => setPage(p => p + 1)}
disabled={data.length < pageSize}
className="rounded-2xl px-8 h-12 font-black uppercase tracking-widest text-[11px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
>
下一页
</Button>
</div>
</div>
)} )}
</TableBody> </Card>
</Table> </div>
</div> </div>
<div className="flex bg-muted p-2 mt-2 rounded items-center justify-between text-sm text-muted-foreground"> <audio ref={audioRef} />
<span>总计: {total} 条</span>
<span>每页: {pageSize} 条</span>
</div>
{/* Form Dialog */}
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="max-w-xl"> <DialogContent className="sm:max-w-[800px] glass-card warm-noise border-none rounded-[3.5rem] p-0 overflow-hidden shadow-2xl">
<DialogHeader> <div className="bg-gradient-to-r from-[#D28F4F] to-[#A64452] p-12 text-white relative">
<DialogTitle>{isEdit ? '编辑节目' : '新增节目'}</DialogTitle> <DialogTitle className="text-3xl font-black tracking-tight">{isEdit ? '编辑节目方案' : '策划全新广播节目'}</DialogTitle>
</DialogHeader> <p className="text-white/60 text-xs font-black uppercase tracking-[0.3em] mt-3">Program Content Design</p>
<div className="space-y-4 py-4 max-h-[60vh] overflow-y-auto px-1"> <Disc3 className="absolute right-12 top-1/2 -translate-y-1/2 w-24 h-24 text-white/10 animate-spin-slow" />
<div className="space-y-2"> </div>
<Label>节目标题</Label> <div className="p-12 space-y-10 max-h-[75vh] overflow-y-auto custom-scrollbar bg-[#FAF5E6]/60 backdrop-blur-3xl">
<Input <div className="grid grid-cols-2 gap-10">
value={formData.title} <div className="space-y-8">
onChange={e => setFormData({ ...formData, title: e.target.value })} <div className="space-y-3">
placeholder="输入节目标题" <Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">节目标题</Label>
/> <Input
</div> placeholder="输入辨识度高的标题..."
<div className="space-y-2"> value={formData.title}
<Label>所属频道</Label> onChange={e => setFormData({ ...formData, title: e.target.value })}
<select className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 text-lg"
className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm" />
value={formData.channelId} </div>
onChange={e => setFormData({ ...formData, channelId: e.target.value })} <div className="space-y-3">
> <Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">所属频道</Label>
<option value="" disabled>选择一个频道</option> <select
{channels.map((c: any) => ( className="w-full h-16 rounded-[1.5rem] bg-white shadow-sm px-8 font-bold text-[#4A3A2C] border-none focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none text-lg appearance-none cursor-pointer"
<option key={c.ID} value={c.ID}>{c.name}</option> value={formData.channelId}
))} onChange={e => setFormData({ ...formData, channelId: e.target.value })}
</select> >
</div> <option value="" disabled>选择所属广播频道</option>
<div className="space-y-2"> {channels.map((c: any) => (
<Label>描述</Label> <option key={String(c.ID || c.id)} value={String(c.ID || c.id)}>{c.name}</option>
<Input ))}
value={formData.description} </select>
onChange={e => setFormData({ ...formData, description: e.target.value })} </div>
placeholder="节目描述" <div className="grid grid-cols-2 gap-6">
/> <div className="space-y-3">
</div> <Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">音轨时长 (秒)</Label>
<div className="space-y-2"> <Input
<Label>详情内容</Label> type="number"
<textarea value={formData.duration ?? ""}
className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm" onChange={e => {
value={formData.content} const val = e.target.value;
onChange={e => setFormData({ ...formData, content: e.target.value })} setFormData({ ...formData, duration: val === "" ? "" : parseInt(val) });
placeholder="节目具体详情内容" }}
/> className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-center text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all text-lg"
</div> />
<div className="flex space-x-4"> </div>
<div className="space-y-2 flex-1"> <div className="space-y-3">
<Label>时长 (秒)</Label> <Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">服务状态</Label>
<Input <select
type="number" className="w-full h-16 rounded-[1.5rem] bg-white shadow-sm px-8 font-bold text-[#4A3A2C] border-none focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none text-lg appearance-none cursor-pointer"
value={formData.duration} value={formData.status}
onChange={e => setFormData({ ...formData, duration: parseInt(e.target.value) || 0 })} onChange={e => setFormData({ ...formData, status: parseInt(e.target.value) })}
/> >
<option value={1}>正式发布</option>
<option value={0}>存入草稿</option>
</select>
</div>
</div>
</div> </div>
<div className="space-y-2 flex-1"> <div className="space-y-8">
<Label>标签 (逗号分隔)</Label> <div className="space-y-3 font-bold">
<Input <Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">音频资产部署</Label>
value={formData.tags} <FileUploader
onChange={e => setFormData({ ...formData, tags: e.target.value })} label=""
placeholder="例：搞笑,音乐" accept="audio/*"
/> placeholder="上传音频文件 (mp3, wav, etc.)"
value={formData.audioId}
initialPreview={formData.audioUrl}
onChange={(id) => setFormData({ ...formData, audioId: id })}
/>
</div>
<div className="space-y-3">
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">专属标签 (逗号隔开)</Label>
<Input
placeholder="例：纯音乐, 睡眠, 治愈..."
value={formData.tags}
onChange={e => setFormData({ ...formData, tags: e.target.value })}
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 text-lg"
/>
</div>
</div> </div>
</div> </div>
<div className="space-y-8">
<div className="space-y-2"> <div className="space-y-3">
<Label>状态</Label> <Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">节目简短介绍</Label>
<select <Input
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" placeholder="一句话吸引听众..."
value={formData.status} value={formData.description}
onChange={e => setFormData({ ...formData, status: parseInt(e.target.value) })} onChange={e => setFormData({ ...formData, description: e.target.value })}
> className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 text-lg"
<option value={1}>发布</option> />
<option value={0}>下架</option> </div>
</select> <div className="space-y-3">
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">深度播送内容</Label>
<textarea
className="w-full min-h-[160px] rounded-[2rem] border-none bg-white shadow-sm p-8 font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none resize-none placeholder:text-[#8C7E6C]/30"
placeholder="输入该节目的具体文字剧本或深度介绍..."
value={formData.content}
onChange={e => setFormData({ ...formData, content: e.target.value })}
/>
</div>
</div> </div>
</div> </div>
<DialogFooter> <div className="p-12 bg-white/40 backdrop-blur-xl flex justify-between items-center border-t border-[#4A3A2C]/5 font-black">
<Button variant="outline" onClick={() => setOpen(false)}>取消</Button> <Button
<Button onClick={handleSubmit}>提交</Button> variant="ghost"
</DialogFooter> onClick={() => setOpen(false)}
className="rounded-[1.5rem] h-14 px-10 uppercase tracking-[0.2em] text-xs hover:bg-white text-[#8C7E6C]"
>
取消返回
</Button>
<Button
onClick={handleSubmit}
className="rounded-[1.5rem] h-14 px-12 shadow-2xl shadow-[#D28F4F]/30 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none"
>
{isEdit ? '保存节目更新' : '立即发布节目'}
</Button>
</div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</div>
<DeleteConfirm
open={deleteOpen}
onOpenChange={setDeleteOpen}
onConfirm={confirmDelete}
/>
</motion.div>
); );
} }
src/pages/System/Oss/index.tsx
+250 -119
View File
@@ -4,36 +4,51 @@ import {
deleteFileApi, deleteFileApi,
uploadFileApi uploadFileApi
} from '../../../api/oss'; } from '../../../api/oss';
import { DeleteConfirm } from '../../../components/DeleteConfirm';
import { Button } from '../../../components/ui/button'; import { Button } from '../../../components/ui/button';
import { Input } from '../../../components/ui/input'; import { Input } from '../../../components/ui/input';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../components/ui/table'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../components/ui/table';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../../../components/ui/dialog'; import { Dialog, DialogContent, DialogTitle } from '../../../components/ui/dialog';
import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
import { Label } from '../../../components/ui/label'; import { Label } from '../../../components/ui/label';
import { Plus, Trash2, Copy, FileIcon } from 'lucide-react'; import {
Trash2,
Copy,
FileIcon,
Search,
CloudUpload,
ExternalLink,
HardDrive,
Disc3,
Image as ImageIcon
} from 'lucide-react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { motion, AnimatePresence } from 'framer-motion';
export default function Oss() { export default function Oss() {
const [data, setData] = useState([]); const [data, setData] = useState<any[]>([]);
const [total, setTotal] = useState(0); const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
// Pagination
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10); const [pageSize] = useState(10);
const [keyword, setKeyword] = useState(''); const [keyword, setKeyword] = useState('');
const [debouncedSearch, setDebouncedSearch] = useState('');
// Upload Dialog State
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [file, setFile] = useState<File | null>(null); const [file, setFile] = useState<File | null>(null);
const [uploading, setUploading] = useState(false); const [uploading, setUploading] = useState(false);
const [deleteOpen, setDeleteOpen] = useState(false);
const [deleteId, setDeleteId] = useState<any>(null);
const fetchData = async () => { const fetchData = async () => {
setLoading(true); setLoading(true);
try { try {
const res: any = await getFileListApi({ const res: any = await getFileListApi({
current: page, current: page,
pageSize: pageSize, pageSize: pageSize,
keyword keyword: debouncedSearch
}); });
setData(res.list || []); setData(res.list || []);
setTotal(res.total || 0); setTotal(res.total || 0);
@@ -46,16 +61,32 @@ export default function Oss() {
useEffect(() => { useEffect(() => {
fetchData(); fetchData();
}, [page, pageSize]); }, [page, pageSize, debouncedSearch]);
const handleDelete = async (id: number) => { useEffect(() => {
if (!confirm('确定要删除这个文件吗?')) return; const timer = setTimeout(() => {
setDebouncedSearch(keyword);
setPage(1);
}, 500);
return () => clearTimeout(timer);
}, [keyword]);
const handleDeleteClick = (id: any) => {
setDeleteId(id);
setDeleteOpen(true);
};
const confirmDelete = async () => {
if (!deleteId) return;
try { try {
await deleteFileApi({ id }); await deleteFileApi({ ids: [String(deleteId)] });
toast.success('删除成功'); toast.success('删除成功');
fetchData(); fetchData();
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} finally {
setDeleteOpen(false);
setDeleteId(null);
} }
}; };
@@ -71,10 +102,7 @@ export default function Oss() {
}; };
const handleUpload = async () => { const handleUpload = async () => {
if (!file) { if (!file) return toast.error('请选择一个文件');
toast.error('请选择一个文件');
return;
}
const formData = new FormData(); const formData = new FormData();
formData.append('file', file); formData.append('file', file);
try { try {
@@ -88,126 +116,229 @@ export default function Oss() {
console.error(e); console.error(e);
} finally { } finally {
setUploading(false); setUploading(false);
const fileInput: any = document.getElementById('file-upload');
if (fileInput) fileInput.value = '';
} }
}; };
return ( return (
<div className="space-y-4 flex flex-col h-full bg-background rounded-lg border p-6"> <motion.div
<div className="flex justify-between items-center"> initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="space-y-8 pb-10"
>
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
<div> <div>
<h1 className="text-2xl font-bold tracking-tight">文件管理 (OSS)</h1> <h1 className="text-4xl font-black tracking-tight text-[#4A3A2C] flex items-center gap-4">
<p className="text-muted-foreground">管理上传的媒体文件、图片等资源</p> 云端资源
<div className="w-3 h-3 rounded-full bg-[#D28F4F] shadow-[0_0_20px_rgba(210,143,79,0.5)] animate-pulse" />
</h1>
<p className="text-[#8C7E6C] font-medium mt-2">统一管理电台媒体资产，驱动全球分发。</p>
</div> </div>
</div> <Button
onClick={() => setOpen(true)}
{/* Toolbar */} className="rounded-[1.5rem] h-14 px-8 font-black shadow-xl shadow-[#D28F4F]/20 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none group"
<div className="flex justify-between items-center space-x-2"> >
<div className="flex space-x-2 w-full max-w-sm"> <CloudUpload className="w-5 h-5 mr-3 group-hover:-translate-y-1 transition-transform" />
<Input 部署新资源
placeholder="关键字搜索..."
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
/>
<Button variant="secondary" onClick={() => { setPage(1); fetchData(); }}>搜索</Button>
</div>
<Button onClick={() => setOpen(true)}>
<Plus className="w-4 h-4 mr-2" /> 上传文件
</Button> </Button>
</div> </div>
{/* Data Table */} <Card className="glass-card warm-noise border-none shadow-glass rounded-[2.5rem] overflow-hidden min-h-[600px] relative z-10">
<div className="border rounded-md mt-4 flex-1 overflow-auto"> <CardHeader className="p-10 border-b border-[#4A3A2C]/5 flex flex-col sm:flex-row sm:items-center justify-between gap-6 bg-[#FAF5E6]/40">
<Table> <div className="flex items-center gap-4">
<TableHeader> <div className="p-3 rounded-2xl bg-[#D28F4F]/10">
<TableRow> <HardDrive className="w-6 h-6 text-[#D28F4F]" />
<TableHead className="w-[80px]">ID</TableHead> </div>
<TableHead>预览</TableHead> <CardTitle className="text-2xl font-black tracking-tight text-[#4A3A2C]">资源资产仓库</CardTitle>
<TableHead>名称</TableHead> </div>
<TableHead>后缀</TableHead> <div className="relative group w-full max-w-sm">
<TableHead>链接</TableHead> <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[#8C7E6C] group-focus-within:text-[#D28F4F] transition-colors" />
<TableHead className="text-right">操作</TableHead> <Input
</TableRow> placeholder="搜索资源名称、关键词..."
</TableHeader> value={keyword}
<TableBody> onChange={(e) => setKeyword(e.target.value)}
{loading ? ( className="pl-12 h-12 rounded-2xl border-none bg-[#FAF5E6]/80 focus:bg-white shadow-inner transition-all font-bold text-[#4A3A2C]"
<TableRow> />
<TableCell colSpan={6} className="text-center h-32">加载中...</TableCell> </div>
</TableRow> </CardHeader>
) : data.length === 0 ? ( <CardContent className="p-0">
<TableRow> <div className="overflow-x-auto">
<TableCell colSpan={6} className="text-center h-32 text-muted-foreground">未找到数据</TableCell> <Table>
</TableRow> <TableHeader className="bg-[#FAF5E6]/50">
) : ( <TableRow className="hover:bg-transparent border-[#4A3A2C]/5">
data.map((item: any) => ( <TableHead className="w-[120px] pl-10 py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">视觉预览</TableHead>
<TableRow key={item.ID}> <TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">元数据摘要</TableHead>
<TableCell>{item.ID}</TableCell> <TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">格式封装</TableHead>
<TableCell> <TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">分发分链 (URL)</TableHead>
{['jpg', 'png', 'jpeg', 'gif', 'webp'].includes(item.suffix?.toLowerCase()) ? ( <TableHead className="text-right pr-10 py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">资源管控</TableHead>
<img src={item.url} alt="preview" className="w-8 h-8 object-cover rounded shadow-sm" />
) : (
<div className="w-8 h-8 flex items-center justify-center bg-muted rounded">
<FileIcon className="w-4 h-4 text-muted-foreground" />
</div>
)}
</TableCell>
<TableCell className="font-medium max-w-[200px] truncate" title={item.name}>
{item.name}
</TableCell>
<TableCell>{item.suffix}</TableCell>
<TableCell className="max-w-[250px] truncate text-muted-foreground" title={item.url}>
{item.url}
</TableCell>
<TableCell className="text-right space-x-2">
<Button variant="ghost" size="icon" onClick={() => handleCopyUrl(item.url)} title="复制链接">
<Copy className="w-4 h-4 text-blue-500" />
</Button>
<Button variant="ghost" size="icon" onClick={() => handleDelete(item.ID)} title="删除文件">
<Trash2 className="w-4 h-4 text-red-500" />
</Button>
</TableCell>
</TableRow> </TableRow>
)) </TableHeader>
)} <TableBody>
</TableBody> {loading && data.length === 0 ? (
</Table> <TableRow><TableCell colSpan={5} className="h-96 text-center text-[#8C7E6C] font-black uppercase"><Disc3 className="w-12 h-12 mx-auto animate-spin-slow mb-4 text-[#D28F4F]/50" />同步资源库...</TableCell></TableRow>
</div> ) : data.length === 0 ? (
<TableRow><TableCell colSpan={5} className="h-96 text-center text-[#8C7E6C] text-sm font-black tracking-widest uppercase">暂无云端资产记录</TableCell></TableRow>
) : (
data.map((item: any) => (
<TableRow
key={item.ID}
className="group border-[#4A3A2C]/5 hover:bg-[#FAF5E6]/80 transition-all duration-300 transform hover:scale-[1.001]"
>
<TableCell className="pl-10 py-6">
<div className="w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center border border-[#4A3A2C]/5 p-1.5 overflow-hidden group-hover:rotate-6 transition-transform">
{['jpg', 'png', 'jpeg', 'gif', 'webp'].includes(item.suffix?.toLowerCase()) ? (
<img src={item.url} alt="" className="w-full h-full object-cover rounded-xl" />
) : (
<FileIcon className="w-7 h-7 text-[#F2EDE4]" />
)}
</div>
</TableCell>
<TableCell className="py-6">
<p className="font-black text-[#4A3A2C] group-hover:text-[#D28F4F] transition-colors text-sm tracking-tight truncate max-w-[200px]" title={item.name}>{item.name}</p>
<p className="text-[10px] font-bold text-[#8C7E6C]/50 mt-1 uppercase tracking-tighter">REF: {item.ID}</p>
</TableCell>
<TableCell className="py-6">
<span className="px-4 py-1.5 bg-[#FAF5E6] rounded-full text-[10px] font-black text-[#D28F4F] uppercase tracking-widest border border-[#D28F4F]/10 shadow-sm">
.{item.suffix}
</span>
</TableCell>
<TableCell className="py-6">
<div className="flex items-center gap-3 max-w-[300px] overflow-hidden group/link">
<p className="text-[11px] font-medium text-[#8C7E6C] truncate italic cursor-alias hover:text-[#D28F4F] transition-colors" onClick={() => handleCopyUrl(item.url)}>
{item.url}
</p>
<ExternalLink className="w-3 h-3 text-[#F2EDE4] group-hover/link:text-[#D28F4F] transition-colors opacity-0 group-hover/link:opacity-100" />
</div>
</TableCell>
<TableCell className="text-right pr-10 py-6">
<div className="flex items-center justify-end gap-3 opacity-0 group-hover:opacity-100 transition-all translate-x-4 group-hover:translate-x-0">
<Button
variant="ghost"
size="icon"
onClick={() => handleCopyUrl(item.url)}
className="w-12 h-12 rounded-[1.2rem] hover:bg-white hover:text-[#D28F4F] transition-all border border-[#4A3A2C]/5 shadow-sm hover:shadow-md"
>
<Copy className="w-4.5 h-4.5" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleDeleteClick(item.ID)}
className="w-12 h-12 rounded-[1.2rem] hover:bg-rose-50 hover:text-rose-600 transition-all border border-[#4A3A2C]/5 shadow-sm"
>
<Trash2 className="w-4.5 h-4.5" />
</Button>
</div>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</div>
</CardContent>
<div className="p-10 border-t border-[#4A3A2C]/5 flex items-center justify-between bg-[#FAF5E6]/40 backdrop-blur-md">
<div className="flex items-center gap-3">
<span className="text-[10px] font-black text-[#8C7E6C] uppercase tracking-widest">资源统计:</span>
<span className="px-4 py-1.5 bg-white shadow-sm rounded-full text-[11px] font-black text-[#D28F4F]">云端共有 {total} 个索引文件</span>
</div>
<div className="flex items-center gap-4">
<Button
variant="ghost"
onClick={() => setPage(p => Math.max(1, p - 1))}
disabled={page === 1}
className="rounded-2xl h-11 px-6 font-black uppercase tracking-widest text-[10px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
>
上一页
</Button>
<Button
variant="ghost"
onClick={() => setPage(p => p + 1)}
disabled={data.length < pageSize}
className="rounded-2xl h-11 px-6 font-black uppercase tracking-widest text-[10px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
>
下一页
</Button>
</div>
</div>
</Card>
<div className="flex bg-muted p-2 mt-2 rounded items-center justify-between text-sm text-muted-foreground">
<span>总计: {total} 条</span>
<span>每页: {pageSize} 条</span>
</div>
{/* Upload Dialog */}
<Dialog open={open} onOpenChange={setOpen}> <Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="max-w-md"> <DialogContent className="sm:max-w-[550px] glass-card warm-noise border-none rounded-[3.5rem] p-0 overflow-hidden shadow-2xl">
<DialogHeader> <div className="bg-gradient-to-r from-[#D28F4F] to-[#A64452] p-12 text-white relative">
<DialogTitle>上传文件</DialogTitle> <DialogTitle className="text-3xl font-black tracking-tight">部署新资产资源</DialogTitle>
</DialogHeader> <p className="text-white/60 text-xs font-black uppercase tracking-[0.3em] mt-3">Cloud Asset Deployment</p>
<div className="space-y-4 py-4"> <CloudUpload className="absolute right-12 top-1/2 -translate-y-1/2 w-20 h-20 text-white/10 animate-bounce" />
<div className="space-y-2"> </div>
<Label>选择文件</Label> <div className="p-12 space-y-10 bg-[#FAF5E6]/60 backdrop-blur-3xl">
<Input <div className="space-y-4">
id="file-upload" <Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">选择目标媒介文件</Label>
type="file" <div className="relative group">
onChange={handleFileChange} <Input
/> type="file"
{file && ( onChange={handleFileChange}
<p className="text-sm text-muted-foreground mt-2"> className="h-32 rounded-[2.5rem] border-2 border-dashed border-[#4A3A2C]/10 bg-white shadow-inner hover:bg-white hover:border-[#D28F4F]/50 transition-all cursor-pointer text-transparent file:hidden"
已选择: {file.name} ({(file.size / 1024).toFixed(2)} KB) />
</p> <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
)} <CloudUpload className="w-10 h-10 text-[#8C7E6C]/30 group-hover:text-[#D28F4F] transition-colors" />
<p className="text-[11px] font-black text-[#8C7E6C]/50 mt-3 uppercase tracking-tighter group-hover:text-[#D28F4F] transition-colors">
{file ? file.name : '点击或拖拽文件至此区域进行部署'}
</p>
</div>
</div>
<AnimatePresence>
{file && (
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
className="p-6 rounded-[2rem] bg-white shadow-md border border-[#D28F4F]/10 flex items-center justify-between"
>
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-2xl bg-[#D28F4F]/5 flex items-center justify-center">
{file.type.startsWith('image/') ? <ImageIcon className="w-6 h-6 text-[#D28F4F]" /> : <FileIcon className="w-6 h-6 text-[#D28F4F]" />}
</div>
<div className="overflow-hidden max-w-[240px]">
<p className="text-sm font-black text-[#4A3A2C] truncate">{file.name}</p>
<p className="text-[10px] font-bold text-[#8C7E6C]/50 uppercase mt-0.5">{(file.size / 1024).toFixed(2)} KB</p>
</div>
</div>
<Button
variant="ghost"
size="sm"
onClick={() => setFile(null)}
className="h-10 w-10 p-0 rounded-full hover:bg-rose-50 hover:text-rose-500 font-bold text-lg"
>
×
</Button>
</motion.div>
)}
</AnimatePresence>
</div> </div>
</div> </div>
<DialogFooter> <div className="p-10 bg-white/40 backdrop-blur-xl flex justify-between items-center border-t border-[#4A3A2C]/5 font-black">
<Button variant="outline" onClick={() => setOpen(false)} disabled={uploading}>取消</Button> <Button
<Button onClick={handleUpload} disabled={uploading || !file}> variant="ghost"
{uploading ? '上传中...' : '提交上传'} onClick={() => setOpen(false)}
className="rounded-[1.5rem] h-14 px-10 uppercase tracking-[0.2em] text-xs hover:bg-white text-[#8C7E6C]"
>
取消返回
</Button> </Button>
</DialogFooter> <Button
onClick={handleUpload}
disabled={uploading || !file}
className="rounded-[1.5rem] h-14 px-12 shadow-2xl shadow-[#D28F4F]/30 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none disabled:opacity-50"
>
{uploading ? '部署中...' : '开始上线资源'}
</Button>
</div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</div>
<DeleteConfirm
open={deleteOpen}
onOpenChange={setDeleteOpen}
onConfirm={confirmDelete}
/>
</motion.div>
); );
} }
src/utils/request.ts
-3
View File
@@ -26,9 +26,6 @@ request.interceptors.response.use(
// Assuming a standard response structure: { code: 0, data: ..., msg: ... } // Assuming a standard response structure: { code: 0, data: ..., msg: ... }
if (res.code !== 200) { if (res.code !== 200) {
toast.error(res.msg || 'Error'); toast.error(res.msg || 'Error');
if (res.code === 401 || res.code === 7) {
useAuthStore.getState().logout();
}
return Promise.reject(new Error(res.msg || 'Error')); return Promise.reject(new Error(res.msg || 'Error'));
} }
return res.data; return res.data;