Convert Figma logo to code with AI

CareyWang logosub-web

No description available

6,480
2,046
6,480
21

Top Related Projects

Utility to convert between various subscription format

6,682

SSR 去广告ACL规则/SS完整GFWList规则/Clash规则碎片,Telegram频道订阅地址

搜集、整理、维护 Surge / Quantumult (X) / Shadowrocket / Surfboard / clash (Premium) 实用规则。

🦄️ 🎃 👻 Clash Premium 规则集(RULE-SET),兼容 ClashX Pro、Clash for Windows 等基于 Clash Premium 内核的客户端。

Quick Overview

CareyWang/sub-web is a web-based subscription conversion tool for various proxy protocols. It provides a user-friendly interface for converting and combining different subscription formats, making it easier for users to manage and utilize multiple proxy services.

Pros

  • Easy-to-use web interface for subscription conversion
  • Supports multiple proxy protocols and subscription formats
  • Customizable output options for tailored results
  • Open-source project with potential for community contributions

Cons

  • Requires self-hosting or reliance on public instances
  • May have limitations in handling certain subscription formats
  • Potential security concerns when processing sensitive subscription data
  • Limited documentation for advanced usage and customization

Getting Started

To set up and run sub-web locally:

  1. Clone the repository:

    git clone https://github.com/CareyWang/sub-web.git
    
  2. Navigate to the project directory:

    cd sub-web
    
  3. Install dependencies:

    npm install
    
  4. Start the development server:

    npm run serve
    
  5. Access the web interface at http://localhost:8080

For production deployment, build the project using:

npm run build

Then serve the contents of the dist directory using a web server of your choice.

Competitor Comparisons

Utility to convert between various subscription format

Pros of subconverter

  • More comprehensive conversion capabilities, supporting a wider range of proxy protocols
  • Backend-focused, offering greater flexibility for integration into various systems
  • Actively maintained with frequent updates and improvements

Cons of subconverter

  • Requires more technical knowledge to set up and configure
  • Lacks a built-in user interface, making it less accessible for non-technical users
  • May require additional resources to run as a backend service

Code Comparison

sub-web (Vue.js frontend):

export default {
  data() {
    return {
      sourceSubUrl: '',
      targetSubUrl: '',
      customBackend: ''
    }
  },
  // ...
}

subconverter (C++ backend):

int main(int argc, char *argv[]) {
    init();
    if(argc > 1 && strcmp(argv[1], "-cfw") == 0)
        cfw_child_process();
    else
        start_web_server();
    return 0;
}

sub-web focuses on providing a user-friendly interface for subscription conversion, while subconverter offers a powerful backend engine for handling complex conversion tasks. sub-web is more suitable for end-users who prefer a graphical interface, whereas subconverter is better for developers and advanced users who need more control and integration options.

6,682

SSR 去广告ACL规则/SS完整GFWList规则/Clash规则碎片,Telegram频道订阅地址

Pros of ACL4SSR

  • More comprehensive rule sets for content filtering and ad blocking
  • Regularly updated with community contributions
  • Includes pre-configured lists for popular services and regions

Cons of ACL4SSR

  • Primarily focused on rule sets, lacking a user-friendly interface
  • May require more technical knowledge to implement and customize
  • Limited documentation in English

Code Comparison

sub-web:

export function getShortId(id) {
  return id.split('-')[0]
}

ACL4SSR:

[custom]
;不要随意改变关键字,否则会导致出错
;acl4SSR规则

;设置规则标志位
ruleset=🎯 全球直连,rules/ACL4SSR/Clash/LocalAreaNetwork.list

The code snippets highlight the different focus areas of the two projects. sub-web emphasizes frontend functionality, while ACL4SSR concentrates on rule configurations for network filtering.

sub-web provides a more user-friendly interface for subscription management, while ACL4SSR offers extensive rule sets for content filtering and ad blocking. ACL4SSR may require more technical expertise to implement, but it provides more comprehensive and regularly updated rules for various services and regions.

搜集、整理、维护 Surge / Quantumult (X) / Shadowrocket / Surfboard / clash (Premium) 实用规则。

Pros of SS-Rule-Snippet

  • Provides a comprehensive set of rules for various proxy tools and platforms
  • Regularly updated with new rules and optimizations
  • Offers detailed documentation and usage instructions

Cons of SS-Rule-Snippet

  • Requires manual configuration and integration with proxy tools
  • May have a steeper learning curve for beginners
  • Limited customization options without modifying the rule files directly

Code Comparison

SS-Rule-Snippet (Surge configuration example):

[Rule]
DOMAIN-SUFFIX,googleapis.com,Proxy
DOMAIN-SUFFIX,instagram.com,Proxy
DOMAIN-SUFFIX,cdninstagram.com,Proxy
DOMAIN-SUFFIX,fbcdn.net,Proxy
DOMAIN-SUFFIX,facebook.com,Proxy

sub-web (Vue.js component example):

<template>
  <div class="subscription-card">
    <el-card>
      <div slot="header" class="clearfix">
        <span>{{ name }}</span>
      </div>
      <div class="text item">
        {{ url }}
      </div>
    </el-card>
  </div>
</template>

While SS-Rule-Snippet focuses on providing pre-configured rule sets, sub-web offers a web-based interface for managing and converting proxy subscriptions. SS-Rule-Snippet is more suitable for users who prefer direct rule management, while sub-web caters to those who want a user-friendly GUI for subscription handling.

🦄️ 🎃 👻 Clash Premium 规则集(RULE-SET),兼容 ClashX Pro、Clash for Windows 等基于 Clash Premium 内核的客户端。

Pros of clash-rules

  • Focuses specifically on providing rule sets for Clash, making it more specialized
  • Regularly updated with the latest domain lists and IP ranges
  • Offers a variety of rule sets for different purposes (e.g., ads, streaming, gaming)

Cons of clash-rules

  • Limited to rule sets only, doesn't provide a user interface or subscription conversion
  • Requires more technical knowledge to implement and use effectively
  • May need additional tools or scripts to integrate with Clash clients

Code comparison

sub-web:

export function getClashType() {
  return localStorage.getItem('clash_type') || 'clash';
}

clash-rules:

payload:
  - DOMAIN-SUFFIX,googleapis.cn
  - DOMAIN-SUFFIX,googleapis.com
  - DOMAIN-SUFFIX,google.cn

Summary

sub-web is a web-based tool for converting and managing proxy subscriptions, offering a user-friendly interface. clash-rules, on the other hand, focuses solely on providing up-to-date rule sets for Clash. While sub-web offers more versatility in subscription management, clash-rules excels in maintaining specific, curated rule sets for various purposes. The choice between the two depends on whether you need a comprehensive subscription management tool or specialized rule sets for Clash.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

sub-web

Vue Vite Node License Docker

基于 Vue.js 2.7 与 tindy2013/subconverter 后端实现的订阅配置自动生成 Web 界面。

✨ 特性

  • 基于 Vue 2.7 + Element UI 的现代化界面
  • Vite 8 构建,热重载开发体验
  • 模块化架构:composables / services / utils / config 分层
  • SVG 图标精灵(vite-plugin-svg-icons)
  • 本地存储缓存,TTL 可配置
  • 短链接与配置文件上传集成
  • 一键导入 Clash
  • Docker 一键部署

🚀 快速开始

使用 Docker(推荐)

docker run -d \
  -p 58080:80 \
  --restart always \
  --name subweb \
  careywong/subweb:latest

访问 http://localhost:58080/

本地开发

git clone https://github.com/CareyWang/sub-web.git
cd sub-web
yarn install
yarn dev

访问 http://localhost:5173/

📦 环境要求

  • Node.js: 24.x
  • Yarn: 1.22+
  • Docker: 20.10+(可选)

🛠️ 常用命令

命令说明
yarn dev启动开发服务器
yarn build构建生产版本
yarn preview本地预览构建产物
yarn lintESLint 代码检查

⚙️ 环境配置

创建 .env 文件(参考如下):

# Subconverter 后端地址
VITE_SUBCONVERTER_DEFAULT_BACKEND=https://api.wcc.best

# 项目与社区链接
VITE_PROJECT=https://github.com/CareyWang/sub-web
VITE_BOT_LINK=https://t.me/subconverter_discuss

# 后端版本页
VITE_BACKEND_RELEASE=https://github.com/tindy2013/subconverter/actions

# 远程配置示例与进阶文档
VITE_SUBCONVERTER_REMOTE_CONFIG=https://raw.githubusercontent.com/tindy2013/subconverter/master/base/config/example_external_config.ini
VITE_SUBCONVERTER_DOC_ADVANCED=https://github.com/tindy2013/subconverter/blob/master/README-cn.md

# 短链接后端
VITE_MYURLS_API=https://suosuo.de/short

# 配置文件托管后端
VITE_CONFIG_UPLOAD_API=https://oss.wcc.best/upload

# 本地存储与缓存 TTL(秒)
VITE_USE_STORAGE=true
VITE_CACHE_TTL=86400

如果部署在子路径(如 /sub-web/),在构建时指定 base:

yarn build --base=/sub-web/

或在 vite.config.js 中设置 base: '/sub-web/'。

📁 目录结构

src/
├── main.js              # 应用入口,插件注册
├── App.vue
├── router/              # Vue Router(history 模式)
├── views/
│   └── Subconverter.vue # 主页面
├── components/          # 可复用组件(弹窗等)
├── composables/         # 共享逻辑(表单、订阅、URL 解析)
├── services/            # API 封装(后端版本、短链接、配置上传)
├── config/              # 常量、客户端类型、远程配置列表
├── utils/               # 工具函数(storage、validators、formatters)
├── plugins/             # Vue 插件注册(Element UI、Axios 等)
└── icons/svg/           # SVG 精灵图源文件

🐳 Docker 部署

本地构建

docker build -t subweb-local:latest .

docker run -d \
  -p 58080:80 \
  --restart always \
  --name subweb \
  subweb-local:latest

Docker Compose(含短链接服务)

cd services

# 编辑 .env,配置端口和域名
# 默认:SUBWEB_PORT=58080, MYURLS_PORT=8002, MYURLS_DOMAIN=example.com
vim .env

docker-compose up -d

🌐 Nginx 配置示例

server {
    listen 80;
    server_name your-domain.com;

    root /var/www/sub-web/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    gzip on;
    gzip_types text/plain text/css application/javascript application/json;
    gzip_min_length 1k;

    location ~* \.(css|js|png|jpg|svg|woff2|ttf|eot)$ {
        add_header Cache-Control "public,max-age=86400";
    }
}

🔗 相关项目

🤝 贡献

  1. Fork 本仓库
  2. 创建特性分支 git checkout -b feature/AmazingFeature
  3. 提交更改 git commit -m 'Add some AmazingFeature'
  4. 推送到分支 git push origin feature/AmazingFeature
  5. 创建 Pull Request

代码风格:2 空格缩进、单引号、无分号,遵循 ESLint 配置。

📄 许可证

MIT License — Copyright © 2020-2025 CareyWang

📈 项目统计

Star History Chart