# My Web

**Repository Path**: heizicao/my-web

## Basic Information

- **Project Name**: My Web
- **Description**: 简单页面跳转APP，适合网页链接打包成APP再桌面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-10
- **Last Updated**: 2025-12-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MyWeb - 网页跳转工具

MyWeb是一个轻量级的网页跳转工具，支持添加、编辑和管理常用网页快捷方式。

![输入图片说明](page.png)

## 功能特性

### 前端应用（Web）
- 📱 **直观的卡片式界面**：以卡片形式展示常用网页，支持点击快速跳转
- ➕ **添加/编辑/删除网页**：自定义网页名称、描述、URL、图标和背景颜色
- 🎨 **丰富的图标选择**：提供24种几何标识图标供选择
- 🎯 **默认页面设置**：可设置默认打开的网页
- ⏱️ **自动跳转功能**：设置后自动跳转到默认页面
- 💾 **本地数据存储**：使用localStorage保存数据，无需后端服务
- 🌐 **多语言支持**：内置i18n多语言配置

### Android应用
- 📦 **独立APK应用**：封装Web前端为Android应用
- 🔄 **WebView加载**：使用Android WebView加载本地静态资源
- 💫 **完整功能支持**：与Web版本功能一致

## 技术栈

### 前端技术
- **框架**：Vue 3
- **语言**：TypeScript
- **UI组件库**：Element Plus
- **路由管理**：Vue Router 4
- **状态管理**：Vuex 4
- **多语言**：Vue I18n
- **构建工具**：Vue CLI

### Android技术
- **开发语言**：Java
- **WebView**：Android WebView组件
- **构建工具**：Gradle

## 目录结构

```
my-web/
├── android/              # Android应用目录
│   ├── app/              # Android应用主代码
│   │   ├── src/main/     # 主源码目录
│   │   │   ├── assets/html/  # 前端构建后的静态资源
│   │   │   ├── java/     # Java代码
│   │   │   └── res/      # 资源文件
│   │   └── build.gradle.kts  # 模块构建配置
│   └── build.gradle.kts  # 项目构建配置
├── vue/                  # Vue前端项目目录
│   ├── src/              # 前端源码
│   │   ├── assets/       # 静态资源
│   │   ├── lang/         # 多语言配置
│   │   ├── router/       # 路由配置
│   │   ├── store/        # 状态管理
│   │   ├── views/        # 页面组件
│   │   ├── App.vue       # 根组件
│   │   └── main.ts       # 入口文件
│   ├── build/            # 构建输出目录
│   └── package.json      # 项目配置
├── AI生成参考图.png      # AI生成的设计参考图
└── README.md             # 项目说明文档
```

## 安装与使用

### Web前端

1. **安装依赖**
```bash
cd vue
npm install
```

2. **开发模式运行**
```bash
npm run serve
```

3. **构建生产版本**
```bash
npm run build
```

4. **代码检查**
```bash
npm run lint
```

构建后的静态文件将输出到 `vue/build/` 目录，可部署到任何Web服务器或直接使用浏览器打开。

### Android应用

1. **环境要求**
   - Android Studio
   - JDK 8+
   - Android SDK 27+

2. **构建步骤**
   - 使用Android Studio打开 `android/` 目录
   - 同步Gradle依赖
   - 运行 `Build > Build Bundle(s) / APK(s) > Build APK(s)`
   - 生成的APK文件位于 `android/app/build/outputs/apk/`

3. **运行应用**
   - 连接Android设备或启动模拟器
   - 点击 "Run" 按钮运行应用

## 主要页面说明

### 首页
- 显示所有添加的网页卡片
- 支持点击卡片跳转到对应URL
- 右上角设置按钮可进入设置页面

### 设置页面
- **添加页面**：添加新的网页快捷方式
- **编辑/删除页面**：修改或删除已有的网页
- **默认页面**：设置默认打开的网页
- **自动跳转**：开启后自动跳转到默认页面

## 数据存储

应用数据使用浏览器的localStorage存储，数据结构如下：

```json
{
  "data": [
    {
      "name": "网页名称",
      "detail": "网页描述",
      "url": "https://example.com",
      "icon": "几何标识01",
      "color": "#04174f"
    }
  ],
  "default": "默认页面名称",
  "isAuto": true
}
```

## 自定义配置

### 添加新图标
1. 将PNG图标文件添加到 `vue/src/assets/img/` 目录
2. 在 `Setting.vue` 中的 `iconArray` 数组添加图标名称

### 修改主题颜色
在 `Setting.vue` 中的 `colorArray` 数组添加或修改预设颜色

## 版本历史

- 20251209：初始版本发布

## 许可证

MIT License

## 贡献

欢迎提交Issue和Pull Request来改进这个项目。

## 联系方式

欢迎订阅微信公众号『NASBox』，分享更多NAS相关资讯和入门教程。