+
+ {showTopTitle && (
+
+ {children}
+
+ )}
+
+
+
+
+
+ {!showTopTitle && (
+
+ {children}
+
+ )}
+
+
+
+ )
+}
diff --git a/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/_modules/use-proxies-provider-update.tsx b/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/_modules/use-proxies-provider-update.tsx
new file mode 100644
index 0000000000..22325aa99e
--- /dev/null
+++ b/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/_modules/use-proxies-provider-update.tsx
@@ -0,0 +1,25 @@
+import { useBlockTask } from '@/components/providers/block-task-provider'
+import { formatError } from '@/utils'
+import { message } from '@/utils/notification'
+import { ClashProxiesProviderQueryItem } from '@nyanpasu/interface'
+
+export const useProxiesProviderUpdate = (
+ data: ClashProxiesProviderQueryItem,
+) => {
+ const blockTask = useBlockTask(
+ `update-proxies-provider-${data.name}`,
+ async () => {
+ try {
+ await data.mutate()
+ } catch (error) {
+ console.error('Failed to update proxies provider', error)
+ message(`Update provider failed: \n ${formatError(error)}`, {
+ title: 'Error',
+ kind: 'error',
+ })
+ }
+ },
+ )
+
+ return blockTask
+}
diff --git a/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/_modules/use-proxies-subscription.tsx b/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/_modules/use-proxies-subscription.tsx
new file mode 100644
index 0000000000..0194e0c413
--- /dev/null
+++ b/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/_modules/use-proxies-subscription.tsx
@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+import { ClashProviderProxies } from '@nyanpasu/interface'
+
+export const useProxiesSubscription = (data: ClashProviderProxies) => {
+ return useMemo(() => {
+ let progress = 0
+ let total = 0
+ let used = 0
+
+ const hasSubscriptionInfo =
+ 'subscriptionInfo' in data && data.subscriptionInfo !== undefined
+
+ if (hasSubscriptionInfo) {
+ const subscriptionInfo = data.subscriptionInfo as Record<
+ string,
+ number | undefined
+ >
+
+ const download =
+ subscriptionInfo.download ?? subscriptionInfo.Download ?? 0
+ const upload = subscriptionInfo.upload ?? subscriptionInfo.Upload ?? 0
+ const t = subscriptionInfo.total ?? subscriptionInfo.Total ?? 0
+
+ total = t
+
+ used = download + upload
+
+ progress = (used / (total || 1)) * 100
+ }
+
+ return {
+ progress,
+ total,
+ used,
+ hasSubscriptionInfo,
+ }
+ }, [data])
+}
diff --git a/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/_modules/use-rules-provider-update.tsx b/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/_modules/use-rules-provider-update.tsx
new file mode 100644
index 0000000000..b1eef211c9
--- /dev/null
+++ b/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/_modules/use-rules-provider-update.tsx
@@ -0,0 +1,23 @@
+import { useBlockTask } from '@/components/providers/block-task-provider'
+import { formatError } from '@/utils'
+import { message } from '@/utils/notification'
+import { ClashRulesProviderQueryItem } from '@nyanpasu/interface'
+
+export const useRulesProviderUpdate = (data: ClashRulesProviderQueryItem) => {
+ const blockTask = useBlockTask(
+ `update-rules-provider-${data.name}`,
+ async () => {
+ try {
+ await data.mutate()
+ } catch (error) {
+ console.error('Failed to update rules provider', error)
+ message(`Update provider failed: \n ${formatError(error)}`, {
+ title: 'Error',
+ kind: 'error',
+ })
+ }
+ },
+ )
+
+ return blockTask
+}
diff --git a/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/index.tsx b/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/index.tsx
new file mode 100644
index 0000000000..d682e6ae87
--- /dev/null
+++ b/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/index.tsx
@@ -0,0 +1,321 @@
+import AllInboxRounded from '~icons/material-symbols/all-inbox-outline-rounded'
+import RefreshRounded from '~icons/material-symbols/refresh-rounded'
+import dayjs from 'dayjs'
+import { filesize } from 'filesize'
+import { ComponentProps, PropsWithChildren } from 'react'
+import { useBlockTask } from '@/components/providers/block-task-provider'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { LinearProgress } from '@/components/ui/progress'
+import TextMarquee from '@/components/ui/text-marquee'
+import { useLockFn } from '@/hooks/use-lock-fn'
+import { m } from '@/paraglide/messages'
+import { formatError } from '@/utils'
+import { message } from '@/utils/notification'
+import {
+ ClashProxiesProviderQueryItem,
+ ClashRulesProviderQueryItem,
+ useClashProxiesProvider,
+ useClashRulesProvider,
+} from '@nyanpasu/interface'
+import { cn } from '@nyanpasu/ui'
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { useProxiesProviderUpdate } from './_modules/use-proxies-provider-update'
+import { useProxiesSubscription } from './_modules/use-proxies-subscription'
+import { useRulesProviderUpdate } from './_modules/use-rules-provider-update'
+
+export const Route = createFileRoute('/(main)/main/providers/')({
+ component: RouteComponent,
+})
+
+const NavigateButton = ({
+ className,
+ ...props
+}: ComponentProps
+ {children}
+
+ )
+}
+
+const GroupTitle = ({ children }: PropsWithChildren) => {
+ return (
+
+ {children}
+
+ )
+}
+
+const GroupContent = ({ children }: PropsWithChildren) => {
+ return (
+
+ {children}
+
+ )
+}
+
+const Empty = ({ children }: PropsWithChildren) => {
+ return (
+
+ {data.name}
+
+
+
+
+ {dayjs(data.updatedAt).fromNow()}
+
+
+ {data.vehicleType}/{data.type}
+
+
+
+ {hasSubscriptionInfo && (
+ <>
+
+
+
+ )}
+
+
+
+
+ {progress.toFixed(2)}%
+
+
+ {filesize(used)} / {filesize(total)}
+
+
+
+
+
+ {m.providers_proxies_proxy_count_label({
+ count: data.proxies.length,
+ })}
+
+
+
+
+ {data.name}
+
+
+
+
+ {dayjs(data.updatedAt).fromNow()}
+
+
+ {data.vehicleType}/{data.type}
+
+
+
+
+
+
+ {m.providers_rules_rule_count_label({
+ count: data.ruleCount,
+ })}
+
+
+
+
+
+
+ {m.providers_proxies_title()}
+
+
+
+
+ {proxies && proxies.length ? (
+
+ {proxies.map(([key, data]) => (
+
+ ) : (
+
+
+ )}
+
+
+
+
+ {m.providers_rules_title()}
+
+
+
+
+ {rules && rules.length ? (
+
+ {rules.map(([key, data]) => (
+
+ ) : (
+
+
+ )}
+
+
+ )
+}
diff --git a/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/proxies/$key.tsx b/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/proxies/$key.tsx
new file mode 100644
index 0000000000..becf15e4c4
--- /dev/null
+++ b/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/proxies/$key.tsx
@@ -0,0 +1,33 @@
+import { useClashProxiesProvider } from '@nyanpasu/interface'
+import { createFileRoute } from '@tanstack/react-router'
+import { ProvidersTitle } from '../_modules/providers-title'
+import { InfoCard } from './_modules/info-card'
+import { SubscriptionCard } from './_modules/subscription-card'
+
+export const Route = createFileRoute('/(main)/main/providers/proxies/$key')({
+ component: RouteComponent,
+})
+
+function RouteComponent() {
+ const { key } = Route.useParams()
+
+ const proxiesProvider = useClashProxiesProvider()
+
+ const currentProxy = proxiesProvider.data?.[key]
+
+ if (!currentProxy) {
+ return null
+ }
+
+ return (
+ <>
+ {m.providers_no_proxies_message()}
+{m.providers_no_rules_message()}
+
+
+
+ )
+}
diff --git a/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/proxies/_modules/info-card.tsx b/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/proxies/_modules/info-card.tsx
new file mode 100644
index 0000000000..245188cc54
--- /dev/null
+++ b/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/proxies/_modules/info-card.tsx
@@ -0,0 +1,55 @@
+import RefreshRounded from '~icons/material-symbols/refresh-rounded'
+import dayjs from 'dayjs'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
+import { useLockFn } from '@/hooks/use-lock-fn'
+import { m } from '@/paraglide/messages'
+import { ClashProxiesProviderQueryItem } from '@nyanpasu/interface'
+import { useProxiesProviderUpdate } from '../../_modules/use-proxies-provider-update'
+
+export const InfoCard = ({ data }: { data: ClashProxiesProviderQueryItem }) => {
+ const blockTask = useProxiesProviderUpdate(data)
+
+ const handleRefreshClick = useLockFn(async () => {
+ await blockTask.execute()
+ })
+
+ return (
+
+
+
+ {m.providers_proxies_proxy_count_label({
+ count: data.proxies.length,
+ })}
+
+
+
+ {data.vehicleType}/{data.type}
+
+
+ {m.profile_subscription_updated_at({
+ updated: dayjs(data.updatedAt).fromNow(),
+ })}
+
+
+
+ {progress.toFixed(2)}%
+
+
+ {filesize(used)} / {filesize(total)}
+
+ Hello "/(main)/main/providers"!
+const NavigateButton = ({
+ className,
+ ...props
+}: ComponentProps
+ {proxies.map(([key, data]) => (
+
+
+
+ {data.type}
+
+
+
+ ))}
+
+
+ {data.name}
+
+
+ {rules.map(([key, data]) => (
+
+
+
+ {data.type}
+
+
+
+ ))}
+
+ ) : null}
+
+ )
+}
+
+function RouteComponent() {
+ const { pathname } = useLocation()
+
+ const isCurrent = pathname === Route.fullPath
+
+ const isMobile = useIsMobile()
+
+ return (
+ {data.name}
+
+
+
+
+
+
+ )
+}
diff --git a/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/rules/_modules/info-card.tsx b/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/rules/_modules/info-card.tsx
new file mode 100644
index 0000000000..6ee7292396
--- /dev/null
+++ b/clash-nyanpasu/frontend/nyanpasu/src/pages/(main)/main/providers/rules/_modules/info-card.tsx
@@ -0,0 +1,55 @@
+import RefreshRounded from '~icons/material-symbols/refresh-rounded'
+import dayjs from 'dayjs'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
+import { useLockFn } from '@/hooks/use-lock-fn'
+import { m } from '@/paraglide/messages'
+import { ClashRulesProviderQueryItem } from '@nyanpasu/interface'
+import { useRulesProviderUpdate } from '../../_modules/use-rules-provider-update'
+
+export const InfoCard = ({ data }: { data: ClashRulesProviderQueryItem }) => {
+ const blockTask = useRulesProviderUpdate(data)
+
+ const handleRefreshClick = useLockFn(async () => {
+ await blockTask.execute()
+ })
+
+ return (
+
+
+
+ {m.providers_rules_rule_count_label({
+ count: data.ruleCount,
+ })}
+
+
+
+ {data.vehicleType}/{data.type}
+
+
+ {m.profile_subscription_updated_at({
+ updated: dayjs(data.updatedAt).fromNow(),
+ })}
+
+
-
+### 一键安装 (18.06 / main)
-# A brand new OpenWrt LuCI theme
-### • This branch only matches [Lean's LEDE ( LuCI 18.06 )][lede] / [OpenWrt LuCI 18.06][official-luci-18.06] •
-
-Argon is **a clean and tidy OpenWrt LuCI theme** that allows
-users to customize their login interface with images or videos. -It also supports automatic and manual switching between light and dark modes. - -[![license][license-badge]][license] -[![prs][prs-badge]][prs] -[![issues][issues-badge]][issues] -[![release][release-badge]][release] -[![download][download-badge]][download] -[![contact][contact-badge]][contact] - -**English** | -[简体中文][zh-cn-link] - -[Key Features](#key-features) • -[Getting started](#getting-started) • -[Screenshots](#screenshots) • -[Contributors](#contributors) • -[Credits](#credits) - -
-
-
-## Key Features
-
-- Clean Layout.
-- Adapted to mobile display.
-- Customizable theme colors.
-- Support for using Bing images as login background.
-- Support for custom uploading of images or videos as login background.
-- Automatically switch between light 和 dark modes with the system, 和 can also be set to a fixed mode.
-- Settings plugin with extensions [luci-app-argone-config][config-link]
-
-## Notice
-- Chrome & Edge browser is highly recommended. There are some new css3 features used in this theme, currently only Chrome & Edge has the best compatibility.
-- FireFox does not enable the backdrop-filter by default, [see here](https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter) for the opening method.
-- __LEDE has upgraded LuCI to 23.05 since 10/17/2024. The 18.06 branch of this repository is no longer compatible with it. If you still need to compile or install the theme for the 18.06 branch, please modify the [feeds.conf.default](https://github.com/coolsnowwolf/lede/blob/master/feeds.conf.default) file in the LEDE before compiling the firmware. Revert it back to the previous 18.06 LuCI.__
-
-## Getting started
-
-### Build for Lean's LEDE ( LuCI 18.06 )
-
-```bash
-cd lede
-sed -i '/^#src-git luci https:\/\/github.com\/coolsnowwolf\/luci$/s/^#//' feeds.conf.default && sed -i '/^src-git luci https:\/\/github.com\/coolsnowwolf\/luci\.git;openwrt-23\.05$/s/^/#/' feeds.conf.default
-./scripts/feeds clean
-./scripts/feeds update -a
-rm -rf feeds/luci/themes/luci-theme-argone
-git clone -b 18.06 https://github.com/jerrykuku/luci-theme-argon.git package/downloads/luci-theme-argone
-./scripts/feeds install -a
-make menuconfig #choose LuCI->Themes->luci-theme-argone
-make -j1 V=s
+```sh
+wget --no-check-certificate -O luci-theme-argone_1.8.4_all.ipk \
+ https://github.com/kenzok78/luci-theme-argone/releases/download/v1.8.4/luci-theme-argone_1.8.4_all.ipk
+opkg install luci-theme-argone_1.8.4_all.ipk
```
-### Install for LuCI 18.06 ( Lean's LEDE )
+### 一键安装 (23 branch / 最新 luci)
-```bash
-wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argone/releases/download/v1.8.4/luci-theme-argon_1.8.4-20241221_all.ipk
-opkg install luci-theme-argon*.ipk
+```sh
+wget --no-check-certificate -O luci-theme-argone_2.4.3_all.ipk \
+ https://github.com/kenzok78/luci-theme-argone/releases/download/v2.4.3/luci-theme-argone_2.4.3_all.ipk
+opkg install luci-theme-argone_2.4.3_all.ipk
```
-
-### Install the settings plugin with extensions - luci-app-argone-config
-
-```bash
-wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argone/releases/download/v1.8.3/luci-app-argone-config_0.9-20220424_all.ipk
-opkg install luci-app-argone-config*.ipk
-```
-
-## Screenshots
-
-
-
-
-## Contributors
-
-
-
+### 一键安装 (18.06 / main)
-# A brand new OpenWrt LuCI theme
-### • This branch only matches [Lean's LEDE ( LuCI 18.06 )][lede] / [OpenWrt LuCI 18.06][official-luci-18.06] •
-
-Argon is **a clean and tidy OpenWrt LuCI theme** that allows-users to customize their login interface with images or videos. -It also supports automatic and manual switching between light and dark modes. - -[![license][license-badge]][license] -[![prs][prs-badge]][prs] -[![issues][issues-badge]][issues] -[![release][release-badge]][release] -[![download][download-badge]][download] -[![contact][contact-badge]][contact] - -**English** | -[简体中文][zh-cn-link] - -[Key Features](#key-features) • -[Getting started](#getting-started) • -[Screenshots](#screenshots) • -[Contributors](#contributors) • -[Credits](#credits) - -
-
-
-
-# 一个全新的 OpenWrt 主题
-### • 该分支只适配 [Lean's LEDE ( LuCI 18.06 )][lede] / [OpenWrt LuCI 18.06][official-luci-18.06] •
-
-Argon 是**一款干净整洁的 OpenWrt LuCI 主题**，
-允许用户使用图片或视频自定义其登录界面。
-它还支持在浅色模式和深色模式之间自动或手动切换。
-
-[![license][license-badge]][license]
-[![prs][prs-badge]][prs]
-[![issues][issues-badge]][issues]
-[![release][release-badge]][release]
-[![download][download-badge]][download]
-[![contact][contact-badge]][contact]
-
-[English][en-us-link] |
-**简体中文**
-
-[特色](#特色) •
-[快速开始](#快速开始) •
-[屏幕截图](#屏幕截图) •
-[贡献者](#贡献者) •
-[鸣谢](#鸣谢)
-
-
-
-
-## 特色
-
-- 干净整洁的布局。
-- 适配移动端显示。
-- 可自定义主题颜色。
-- 支持使用 Bing 图片作为登录背景。
-- 支持自定义上传图片或视频作为登录背景。
-- 通过系统自动在明暗模式之间切换，也可设置为固定模式。
-- 带有扩展功能的设置插件 [luci-app-argone-config][config-link]
-
-## 注意
-
-- 强烈建议使用 Chrome 和 Edge 浏览器。该主题中使用了一些新的 css3 功能，目前只有 Chrome 和 Edge 浏览器有最好的兼容性。
-- FireFox 默认不启用 backdrop-filter，[见这里](https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter)的打开方法。
-- __LEDE 自 2024-10-17，已将LuCI升级为23.05，本项目18.06分支的主题已不再兼容；如果你还需要继续编译或安装18.06分支的主题，请在编译LEDE固件前修改LEDE源码中的[feeds.conf.default](https://github.com/coolsnowwolf/lede/blob/master/feeds.conf.default)，将其更改回以前的18.06 LuCI，详见:[#428 (comment)](https://github.com/jerrykuku/luci-theme-argone/issues/428#issuecomment-2425167489)__
-
-## 快速开始
-
-### 使用 Lean's LEDE ( LuCI 18.06 ) 构建
-
-```bash
-cd lede
-sed -i '/^#src-git luci https:\/\/github.com\/coolsnowwolf\/luci$/s/^#//' feeds.conf.default && sed -i '/^src-git luci https:\/\/github.com\/coolsnowwolf\/luci\.git;openwrt-23\.05$/s/^/#/' feeds.conf.default
-./scripts/feeds clean
-./scripts/feeds update -a
-rm -rf feeds/luci/themes/luci-theme-argone
-git clone -b 18.06 https://github.com/jerrykuku/luci-theme-argon.git package/downloads/luci-theme-argone
-./scripts/feeds install -a
-make menuconfig #选择 LuCI->Themes->luci-theme-argone
-make -j1 V=s
-```
-
-### 在 18.06 的 LuCI 上安装 ( Lean's LEDE )
-
-```bash
-wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argone/releases/download/v1.8.4/luci-theme-argon_1.8.4-20241221_all.ipk
-opkg install luci-theme-argon*.ipk
-```
-
-### 安装扩展功能的设置插件 - luci-app-argone-config
-
-```bash
-wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argone/releases/download/v1.8.3/luci-app-argone-config_0.9-20220424_all.ipk
-wget --no-check-certificate https://github.com/jerrykuku/luci-theme-argone/releases/download/v1.8.3/luci-i18n-argon-config-zh-cn_0.9-20220424_all.ipk
-opkg install luci-app-argone-config*.ipk
-opkg install luci-i18n-argon-config*.ipk
-```
-
-## 屏幕截图
-
-
-
-
-## 贡献者
-
-
-
-
-# 一个全新的 OpenWrt 主题
-### • 该分支只适配 [Lean's LEDE ( LuCI 18.06 )][lede] / [OpenWrt LuCI 18.06][official-luci-18.06] •
-
-Argon 是**一款干净整洁的 OpenWrt LuCI 主题**，
-允许用户使用图片或视频自定义其登录界面。
-它还支持在浅色模式和深色模式之间自动或手动切换。
-
-[![license][license-badge]][license]
-[![prs][prs-badge]][prs]
-[![issues][issues-badge]][issues]
-[![release][release-badge]][release]
-[![download][download-badge]][download]
-[![contact][contact-badge]][contact]
-
-[English][en-us-link] |
-**简体中文**
-
-[特色](#特色) •
-[快速开始](#快速开始) •
-[屏幕截图](#屏幕截图) •
-[贡献者](#贡献者) •
-[鸣谢](#鸣谢)
-
-
-
Powered by <%= ver.luciname %>
(<%= ver.luciversion %>) /
- ArgonTheme <%# vPKG_VERSION %> /
+ ArgonTheme <%# vPKG_VERSION %> /
<%= ver.distversion %>
<% if #categories > 1 then %>