Compare commits
2 Commits
cf1e3667ec
...
671112aed2
| Author | SHA1 | Date | |
|---|---|---|---|
| 671112aed2 | |||
| b6747b1c44 |
103
CLAUDE.md
Normal file
103
CLAUDE.md
Normal file
@@ -0,0 +1,103 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## 项目概述
|
||||
|
||||
模拟所 (Monisuo) — 虚拟货币模拟交易平台。全栈 monorepo,三个子系统共用一个 MySQL 数据库。
|
||||
|
||||
## 构建与运行命令
|
||||
|
||||
### Java 后端 (Maven, Java 8, Spring Boot 2.2.4)
|
||||
```bash
|
||||
mvn spring-boot:run # 开发服务,端口 5010
|
||||
mvn compile # 仅编译
|
||||
mvn test # 运行测试
|
||||
mvn clean package -DskipTests # 打包 JAR → target/monisuo-1.0.jar
|
||||
```
|
||||
|
||||
### Flutter 移动端/Web (`flutter_monisuo/`)
|
||||
```bash
|
||||
cd flutter_monisuo
|
||||
flutter pub get # 安装依赖
|
||||
flutter run -d chrome # 开发 (Web)
|
||||
flutter run -d android # 开发 (Android)
|
||||
flutter analyze # 代码检查
|
||||
flutter test # 运行测试
|
||||
flutter build web --release --dart-define=ENV=prod # 生产 Web 构建 → build/web/
|
||||
flutter build apk --release --dart-define=ENV=prod # 生产 APK 构建 → build/app/outputs/
|
||||
```
|
||||
通过 `--dart-define=ENV=prod|dev` 切换环境,API 地址自动切换。
|
||||
|
||||
### Vue 管理后台 (`monisuo-admin/`)
|
||||
```bash
|
||||
cd monisuo-admin
|
||||
pnpm install # 安装依赖(需 pnpm >=10, node >=22.15)
|
||||
pnpm dev # Vite 开发服务
|
||||
pnpm build # 生产构建(vue-tsc + vite)→ dist/
|
||||
pnpm lint / pnpm lint:fix # 代码检查,使用 @antfu/eslint-config
|
||||
```
|
||||
|
||||
### 部署
|
||||
```bash
|
||||
deploy/build_local.sh # 本地构建 Flutter + Admin
|
||||
deploy/deploy_server.sh # 完整服务器部署(前端同步 + Maven 构建 + JAR 重启)
|
||||
deploy/deploy_server.sh frontend # 仅部署前端
|
||||
deploy/deploy_server.sh backend # 仅部署后端
|
||||
```
|
||||
服务器:`8.155.172.147`,后端端口 `5010`。Flutter Web → `/www/wwwroot/monisuo-h5/`,管理后台 → `/www/wwwroot/monisuo-admin/`。
|
||||
|
||||
## 架构
|
||||
|
||||
### 后端 (`src/main/java/com/it/rattan/`)
|
||||
分层架构:**Controller → Service → Mapper → Entity**。
|
||||
- JWT 认证:`TokenFilter` + `UserContext`(ThreadLocal)。接口前缀:`/api/`(用户端)、`/admin/`(管理端)。
|
||||
- 统一响应封装:`Result<T>`(code/msg/data),`PageResult` 分页。
|
||||
- `GlobalExceptionHandler` 全局异常处理,BCrypt 密码加密。
|
||||
- `bean-searcher` 动态查询构建,用于管理端列表接口。
|
||||
- 数据库:MySQL(`monisuo`),ORM 用 MyBatis-Plus。建表脚本 `sql/init.sql`(11 张表)。
|
||||
|
||||
### Flutter 应用 (`flutter_monisuo/lib/`)
|
||||
- **状态管理**:Provider(ChangeNotifier)— `providers/` 消费 `data/services/`,底层调用 `core/network/DioClient`。
|
||||
- **UI**:shadcn_ui + 自定义主题系统(`core/theme/`)。深色主题为主,颜色集中管理在 `AppColorScheme`。
|
||||
- **数据流**:`data/services/`(API 调用)→ `providers/`(状态)→ `ui/pages/`(视图)。
|
||||
- 页面:auth、home、market、trade、asset、mine、orders、onboarding。
|
||||
|
||||
### Vue 管理后台 (`monisuo-admin/src/`)
|
||||
- **路由**:基于文件系统的路由,`unplugin-vue-router`(`pages/` 目录)。路由层有鉴权守卫。
|
||||
- **状态管理**:Pinia(auth、theme)+ TanStack Vue Query(服务端状态)。
|
||||
- **HTTP**:Axixos 通过 `composables/use-axios.ts` 封装。Vite 代理 `/api` → `localhost:5010`(去除前缀)。
|
||||
- **UI**:shadcn-vue 组件在 `components/ui/`(自动注册,已排除 tsconfig)。
|
||||
- **自动导入**:Vue composables、stores、constants 通过 `unplugin-auto-import` 自动导入。
|
||||
- **代码检查**:ESLint 9 flat config + `@antfu/eslint-config`。Pre-commit 钩子通过 `simple-git-hooks` + `lint-staged`。
|
||||
|
||||
### 核心业务领域
|
||||
双账户体系:
|
||||
- **资金账户** (`account_fund`):与用户 1:1,USDT 余额,用于充提。充值需管理员审批。
|
||||
- **交易账户** (`account_trade`):与用户 1:N(每币种一个),持有币种数量和加权平均成本价。
|
||||
- 资金流转:充值 → 资金账户 → 划转至交易账户(USDT) → 买卖币种。所有操作记录在 `account_flow`。
|
||||
- 盈亏计算:`(持仓数量 × 当前价格) - (持仓数量 × 平均成本价)`。
|
||||
- 详细流程图见 `ACCOUNT_SYSTEM_DESIGN.md`。
|
||||
|
||||
### 数据库核心表
|
||||
`sys_user`、`sys_admin`、`coin`(`price_type`: 1=实时, 2=管理定价)、`account_fund`、`account_trade`(唯一索引 `user_id+coin_code`)、`order_trade`、`order_fund`(充提订单,状态驱动的审批流)、`account_flow`、`sys_config`、`user_favorite`、`cold_wallet`。
|
||||
|
||||
## 代码规范
|
||||
|
||||
### Git 提交
|
||||
Conventional Commits 格式:`feat(module): 描述`、`fix(module): 描述`、`chore(scope): 描述`。提交正文可用中文。
|
||||
|
||||
### Flutter 代码规范
|
||||
- 遵循 Effective Dart 规范,提交前运行 `flutter analyze`。
|
||||
- 使用 `AppSpacing`、`AppRadius`、`AppColorScheme` 主题常量,禁止硬编码颜色。
|
||||
- 修改主题/UI 时不要改动业务逻辑/API/Provider 层。
|
||||
|
||||
### Java 代码规范
|
||||
- 使用 Lombok 简化代码,MyBatis-Plus `LambdaUpdateWrapper` 做更新操作。
|
||||
- 所有涉及资金变动的方法必须加 `@Transactional(rollbackFor = Exception.class)`。
|
||||
- RESTful API 设计,Swagger 文档(springfox 2.9.2)。
|
||||
|
||||
### 管理后台代码规范
|
||||
- TypeScript strict 模式,lint 规则强制 `<script lang="ts">`。
|
||||
- shadcn-vue 组件自动管理,不要手动编辑 `components/ui/`。
|
||||
- 用 TanStack Vue Query 做数据请求,Pinia 仅用于客户端状态。
|
||||
@@ -1,140 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
# ============================================
|
||||
# Monisuo CI/CD 部署脚本 - 宝塔 Webhook
|
||||
# ============================================
|
||||
|
||||
# ============ 环境配置 ============
|
||||
# JDK 路径(根据实际修改)
|
||||
export JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk
|
||||
export PATH=$JAVA_HOME/bin:$PATH
|
||||
|
||||
# Maven 路径(如果手动安装)
|
||||
export MAVEN_HOME=/opt/maven
|
||||
export PATH=$MAVEN_HOME/bin:$PATH
|
||||
|
||||
# ============ 项目配置 ============
|
||||
PROJECT_PATH="/opt/monisuo"
|
||||
GIT_REPO="http://sion:woshisaw.@8.155.172.147:3001/sion/monisuo.git"
|
||||
JAR_NAME="monisuo-1.0.jar"
|
||||
LOG_FILE="/opt/monisuo/deploy.log"
|
||||
WEBHOOK_SECRET=""
|
||||
|
||||
# ============ 日志函数 ============
|
||||
log() {
|
||||
echo "[$(date '+%Y-%m-%d %H:%M:%S')] $1" >> $LOG_FILE
|
||||
}
|
||||
|
||||
# ============ 错误处理 ============
|
||||
error_exit() {
|
||||
log "❌ 错误: $1"
|
||||
echo "Error: $1"
|
||||
exit 1
|
||||
}
|
||||
|
||||
# ============ 主流程 ============
|
||||
log "=========================================="
|
||||
log "🚀 开始 CI/CD 部署"
|
||||
log "=========================================="
|
||||
|
||||
# 记录环境信息
|
||||
log "Java 版本: $(java -version 2>&1 | head -1)"
|
||||
log "Maven 版本: $(mvn -version 2>&1 | head -1)"
|
||||
log "当前目录: $(pwd)"
|
||||
|
||||
# 1. 检查/克隆项目
|
||||
if [ ! -d "$PROJECT_PATH/.git" ]; then
|
||||
log "📥 首次部署,克隆项目..."
|
||||
mkdir -p $PROJECT_PATH
|
||||
git clone $GIT_REPO $PROJECT_PATH >> $LOG_FILE 2>&1 || error_exit "Git 克隆失败"
|
||||
fi
|
||||
|
||||
cd $PROJECT_PATH || error_exit "无法进入项目目录"
|
||||
|
||||
# 2. 拉取最新代码
|
||||
log "📥 拉取最新代码..."
|
||||
git fetch origin >> $LOG_FILE 2>&1
|
||||
git reset --hard origin/main >> $LOG_FILE 2>&1 || error_exit "Git 拉取失败"
|
||||
|
||||
# 获取提交信息
|
||||
COMMIT_HASH=$(git rev-parse --short HEAD)
|
||||
COMMIT_MSG=$(git log -1 --pretty=%s)
|
||||
log "📝 最新提交: $COMMIT_HASH - $COMMIT_MSG"
|
||||
|
||||
# 3. 检查文件变更
|
||||
CHANGED_FILES=$(git diff --name-only HEAD~1 HEAD 2>/dev/null)
|
||||
log "📁 变更文件: $CHANGED_FILES"
|
||||
|
||||
# 4. 后端构建和部署
|
||||
if echo "$CHANGED_FILES" | grep -qE "^src/|^pom.xml"; then
|
||||
log "🔨 检测到后端代码变更,开始构建..."
|
||||
|
||||
cd $PROJECT_PATH
|
||||
mvn clean package -DskipTests >> $LOG_FILE 2>&1
|
||||
|
||||
if [ $? -ne 0 ]; then
|
||||
error_exit "Maven 构建失败"
|
||||
fi
|
||||
log "✅ Maven 构建成功"
|
||||
else
|
||||
log "⏭️ 后端代码无变更,跳过构建"
|
||||
fi
|
||||
|
||||
# 5. 停止旧服务
|
||||
log "🛑 停止旧服务..."
|
||||
pkill -f $JAR_NAME 2>/dev/null
|
||||
sleep 3
|
||||
|
||||
# 检查是否停止成功
|
||||
if pgrep -f $JAR_NAME > /dev/null; then
|
||||
log "⚠️ 进程未停止,强制终止..."
|
||||
pkill -9 -f $JAR_NAME 2>/dev/null
|
||||
sleep 2
|
||||
fi
|
||||
|
||||
# 6. 启动新服务
|
||||
log "🚀 启动新服务..."
|
||||
cd $PROJECT_PATH
|
||||
|
||||
nohup java -jar \
|
||||
-Xms256m \
|
||||
-Xmx512m \
|
||||
-XX:+UseG1GC \
|
||||
target/$JAR_NAME \
|
||||
--spring.profiles.active=dev \
|
||||
> $PROJECT_PATH/app.log 2>&1 &
|
||||
|
||||
# 7. 检查服务状态
|
||||
sleep 5
|
||||
if pgrep -f $JAR_NAME > /dev/null; then
|
||||
PID=$(pgrep -f $JAR_NAME)
|
||||
log "✅ 服务启动成功 (PID: $PID)"
|
||||
else
|
||||
log "❌ 服务启动失败,查看日志:"
|
||||
tail -50 $PROJECT_PATH/app.log >> $LOG_FILE
|
||||
error_exit "服务启动失败"
|
||||
fi
|
||||
|
||||
# 8. 健康检查
|
||||
log "🔍 健康检查..."
|
||||
sleep 5
|
||||
HEALTH_CHECK=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:5010/ 2>/dev/null || echo "000")
|
||||
|
||||
if [ "$HEALTH_CHECK" = "200" ] || [ "$HEALTH_CHECK" = "404" ]; then
|
||||
log "✅ 健康检查通过 (HTTP $HEALTH_CHECK)"
|
||||
else
|
||||
log "⚠️ 健康检查异常 (HTTP $HEALTH_CHECK)"
|
||||
fi
|
||||
|
||||
# 9. 清理旧日志
|
||||
log "🧹 清理旧日志..."
|
||||
find $PROJECT_PATH -name "*.log" -mtime +7 -delete 2>/dev/null
|
||||
|
||||
# 10. 完成
|
||||
log "=========================================="
|
||||
log "✅ CI/CD 部署完成"
|
||||
log " 提交: $COMMIT_HASH"
|
||||
log " 时间: $(date '+%Y-%m-%d %H:%M:%S')"
|
||||
log "=========================================="
|
||||
|
||||
echo "Deploy Success! Commit: $COMMIT_HASH"
|
||||
@@ -1,477 +0,0 @@
|
||||
# Changelog
|
||||
|
||||
## v0.7.7
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.7.6...v0.7.7)
|
||||
|
||||
### 🩹 Fixes
|
||||
|
||||
- Unify routing metadata format and adjust YAML indentation ([#59](https://github.com/Whbbit1999/shadcn-vue-admin/pull/59))
|
||||
- Update VSCode extensions and settings for improved spell checking and add package manager version update ([86188e7](https://github.com/Whbbit1999/shadcn-vue-admin/commit/86188e7))
|
||||
- Update environment error handling and toast notification delay; remove markdown support from Vite config ([9071161](https://github.com/Whbbit1999/shadcn-vue-admin/commit/9071161))
|
||||
|
||||
### 💅 Refactors
|
||||
|
||||
- Refactor layout components and improve sidebar navigation ([#60](https://github.com/Whbbit1999/shadcn-vue-admin/pull/60))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- **release:** V0.7.6 ([e5a53ce](https://github.com/Whbbit1999/shadcn-vue-admin/commit/e5a53ce))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
|
||||
|
||||
## v0.7.6
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.7.5...v0.7.6)
|
||||
|
||||
### 🚀 Enhancements
|
||||
|
||||
- Enhance authentication flow with redirect handling ([#54](https://github.com/Whbbit1999/shadcn-vue-admin/pull/54))
|
||||
- Add pagination constants and integrate into data table components ([#56](https://github.com/Whbbit1999/shadcn-vue-admin/pull/56))
|
||||
- Enhance talk footer with dropdown menu and improved input group layout ([b29a41a](https://github.com/Whbbit1999/shadcn-vue-admin/commit/b29a41a))
|
||||
|
||||
### 🩹 Fixes
|
||||
|
||||
- When the sidebar is collapsed, the user is redirected to another page, and the collapsed state is lost. #57 ([#58](https://github.com/Whbbit1999/shadcn-vue-admin/pull/58), [#57](https://github.com/Whbbit1999/shadcn-vue-admin/issues/57))
|
||||
- Update pagination handling for server-side pagination support ([d190ae0](https://github.com/Whbbit1999/shadcn-vue-admin/commit/d190ae0))
|
||||
|
||||
### 💅 Refactors
|
||||
|
||||
- Pressing command + k or ctrl + k brings up the command-menu-panel for faster and more intuitive operation. ([#53](https://github.com/Whbbit1999/shadcn-vue-admin/pull/53))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- **release:** V0.7.5 ([38fb489](https://github.com/Whbbit1999/shadcn-vue-admin/commit/38fb489))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
|
||||
|
||||
## v0.7.5
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.7.4...v0.7.5)
|
||||
|
||||
### 🚀 Enhancements
|
||||
|
||||
- Add InlineTip component and integrate into SVA Components page ([#51](https://github.com/Whbbit1999/shadcn-vue-admin/pull/51))
|
||||
|
||||
### 💅 Refactors
|
||||
|
||||
- Remove unused styles and improve component structure ([#52](https://github.com/Whbbit1999/shadcn-vue-admin/pull/52))
|
||||
|
||||
### 📦 Build
|
||||
|
||||
- Update shadcn-vue components ([#50](https://github.com/Whbbit1999/shadcn-vue-admin/pull/50))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- **release:** V0.7.4 ([1d7f3e2](https://github.com/Whbbit1999/shadcn-vue-admin/commit/1d7f3e2))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
|
||||
|
||||
## v0.7.4
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.7.3...v0.7.4)
|
||||
|
||||
### 🚀 Enhancements
|
||||
|
||||
- Add server pagination support to data table components ([#46](https://github.com/Whbbit1999/shadcn-vue-admin/pull/46))
|
||||
- Implement task management API functions and response types ([#47](https://github.com/Whbbit1999/shadcn-vue-admin/pull/47))
|
||||
- Use shadcn-vue chart,remove vue-charts ([#49](https://github.com/Whbbit1999/shadcn-vue-admin/pull/49))
|
||||
|
||||
### 🩹 Fixes
|
||||
|
||||
- Typo Update README.md ([#48](https://github.com/Whbbit1999/shadcn-vue-admin/pull/48))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- **release:** V0.7.3 ([1808df2](https://github.com/Whbbit1999/shadcn-vue-admin/commit/1808df2))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
|
||||
- WuMingDao ([@WuMingDao](https://github.com/WuMingDao))
|
||||
|
||||
## v0.7.3
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.7.2...v0.7.3)
|
||||
|
||||
### 🩹 Fixes
|
||||
|
||||
- The issue with no dynamic updates when deleting multiple rows in a batch demo task or when selecting multiple rows. ([435b0aa](https://github.com/Whbbit1999/shadcn-vue-admin/commit/435b0aa))
|
||||
|
||||
### 💅 Refactors
|
||||
|
||||
- Update CHANGELOG.md ([b4eb09b](https://github.com/Whbbit1999/shadcn-vue-admin/commit/b4eb09b))
|
||||
- Reorganize plugin setup and improve imports ([b5cd1be](https://github.com/Whbbit1999/shadcn-vue-admin/commit/b5cd1be))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 <luckyboy_dong@sina.com>
|
||||
|
||||
## v0.7.2
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.7.1...v0.7.2)
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
|
||||
|
||||
## v0.7.1
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.7.0...v0.7.1)
|
||||
|
||||
### 🚀 Enhancements
|
||||
|
||||
- Add TwoLayout in global layouts, example in settings/components… ([#38](https://github.com/Whbbit1999/shadcn-vue-admin/pull/38))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
|
||||
|
||||
## v0.7.0
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.6.1...v0.7.0)
|
||||
|
||||
### 🚀 Enhancements
|
||||
|
||||
- StatusBadge component And Copy component #25,#26 ([#29](https://github.com/Whbbit1999/shadcn-vue-admin/pull/29), [#25](https://github.com/Whbbit1999/shadcn-vue-admin/issues/25), [#26](https://github.com/Whbbit1999/shadcn-vue-admin/issues/26))
|
||||
- Table bulk-actions #27 ([#36](https://github.com/Whbbit1999/shadcn-vue-admin/pull/36), [#27](https://github.com/Whbbit1999/shadcn-vue-admin/issues/27))
|
||||
|
||||
### 🩹 Fixes
|
||||
|
||||
- The pinia plugin persistedstate plugin is invalid ([#35](https://github.com/Whbbit1999/shadcn-vue-admin/pull/35))
|
||||
- Pinia register in router guard ([fb95179](https://github.com/Whbbit1999/shadcn-vue-admin/commit/fb95179))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- **release:** V0.6.1 ([f9bfce8](https://github.com/Whbbit1999/shadcn-vue-admin/commit/f9bfce8))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
|
||||
|
||||
## v0.6.1
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.6.0...v0.6.1)
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- Release v0.6.0 ([9122d34](https://github.com/Whbbit1999/shadcn-vue-admin/commit/9122d34))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 <luckyboy_dong@sina.com>
|
||||
|
||||
## v0.5.1
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.5.0...v0.5.1)
|
||||
|
||||
### 🚀 Enhancements
|
||||
|
||||
- Toggle content layout block #22 ([#23](https://github.com/Whbbit1999/shadcn-vue-admin/pull/23), [#22](https://github.com/Whbbit1999/shadcn-vue-admin/issues/22))
|
||||
- **command-menu-panel:** Use button in mobile ([47cb816](https://github.com/Whbbit1999/shadcn-vue-admin/commit/47cb816))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- **release:** V0.5.0 ([32d2939](https://github.com/Whbbit1999/shadcn-vue-admin/commit/32d2939))
|
||||
|
||||
### 🎨 Styles
|
||||
|
||||
- Add a border to the sidebar after it is selected ([#24](https://github.com/Whbbit1999/shadcn-vue-admin/pull/24))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
|
||||
|
||||
## v0.5.0
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.4.1...v0.5.0)
|
||||
|
||||
### 🚀 Enhancements
|
||||
|
||||
- **view-options.vue:** Add table toggle columns status reset action ([#20](https://github.com/Whbbit1999/shadcn-vue-admin/pull/20))
|
||||
- **data-table:** Now we can use this component to quickly generate a… ([#21](https://github.com/Whbbit1999/shadcn-vue-admin/pull/21))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- **release:** V0.4.1 ([83c9078](https://github.com/Whbbit1999/shadcn-vue-admin/commit/83c9078))
|
||||
|
||||
### 🎨 Styles
|
||||
|
||||
- Remove basic-header component shadow-sm and padding-x style ([13c6ecf](https://github.com/Whbbit1999/shadcn-vue-admin/commit/13c6ecf))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
|
||||
|
||||
## v0.4.1
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.4.0...v0.4.1)
|
||||
|
||||
### 🩹 Fixes
|
||||
|
||||
- Auth-title component ([ff170c7](https://github.com/Whbbit1999/shadcn-vue-admin/commit/ff170c7))
|
||||
- Add tooltip to sidebar menu button ([febc221](https://github.com/Whbbit1999/shadcn-vue-admin/commit/febc221))
|
||||
- Replace button with sidebar menu button for dropdown trigger ([1c4d6fd](https://github.com/Whbbit1999/shadcn-vue-admin/commit/1c4d6fd))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- **release:** V0.4.0 ([a9c5355](https://github.com/Whbbit1999/shadcn-vue-admin/commit/a9c5355))
|
||||
- Packages update and lint ([a45d17a](https://github.com/Whbbit1999/shadcn-vue-admin/commit/a45d17a))
|
||||
|
||||
### 🎨 Styles
|
||||
|
||||
- Sidebar popup style change ([4a20c31](https://github.com/Whbbit1999/shadcn-vue-admin/commit/4a20c31))
|
||||
- Settings/components/profile-form CSS style fine-tuning ([9030b3b](https://github.com/Whbbit1999/shadcn-vue-admin/commit/9030b3b))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 <luckyboy_dong@sina.com>
|
||||
- Onur Köse <kose.onur@gmail.com>
|
||||
- Unknown <whbbit@qq.com>
|
||||
|
||||
## v0.4.0
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.3.4...v0.4.0)
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- **release:** V0.3.4 ([6a3b12d](https://github.com/Whbbit1999/shadcn-vue-admin/commit/6a3b12d))
|
||||
- Update packages ([9bb3353](https://github.com/Whbbit1999/shadcn-vue-admin/commit/9bb3353))
|
||||
- Update packages ([7ef29d6](https://github.com/Whbbit1999/shadcn-vue-admin/commit/7ef29d6))
|
||||
|
||||
### 🎨 Styles
|
||||
|
||||
- Language-change button and toggle-theme button use size=button ([3e46f30](https://github.com/Whbbit1999/shadcn-vue-admin/commit/3e46f30))
|
||||
- Replace w-* h-* with the new size-* utility ([6a33e42](https://github.com/Whbbit1999/shadcn-vue-admin/commit/6a33e42))
|
||||
- Settings module page style adjustment ([98b687e](https://github.com/Whbbit1999/shadcn-vue-admin/commit/98b687e))
|
||||
- Auth-title icon change ([f383221](https://github.com/Whbbit1999/shadcn-vue-admin/commit/f383221))
|
||||
- Billing/transaction-catd remove backgroun image ([e55e5c1](https://github.com/Whbbit1999/shadcn-vue-admin/commit/e55e5c1))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Unknown <whbbit@qq.com>
|
||||
- Whbbit1999 <luckyboy_dong@sina.com>
|
||||
|
||||
## v0.3.4
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.3.3...v0.3.4)
|
||||
|
||||
### 🩹 Fixes
|
||||
|
||||
- Does not overflow the default layout width on desktop screens ([#12](https://github.com/Whbbit1999/shadcn-vue-admin/pull/12))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- **release:** V0.3.3 ([0552b7e](https://github.com/Whbbit1999/shadcn-vue-admin/commit/0552b7e))
|
||||
- Packages update ([dabfc66](https://github.com/Whbbit1999/shadcn-vue-admin/commit/dabfc66))
|
||||
- Razor-plan ([#13](https://github.com/Whbbit1999/shadcn-vue-admin/pull/13))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
|
||||
|
||||
## v0.3.3
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.3.2...v0.3.3)
|
||||
|
||||
### 🚀 Enhancements
|
||||
|
||||
- New custom-theme component ([6dfcd56](https://github.com/Whbbit1999/shadcn-vue-admin/commit/6dfcd56))
|
||||
- When the sidebar is collapsed, click the menu to display the secondary menu using dropdown and save the sidebar collapsed state ([#11](https://github.com/Whbbit1999/shadcn-vue-admin/pull/11))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- **release:** V0.3.2 ([f42338c](https://github.com/Whbbit1999/shadcn-vue-admin/commit/f42338c))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
|
||||
|
||||
## v0.3.2
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.3.1...v0.3.2)
|
||||
|
||||
### 🩹 Fixes
|
||||
|
||||
- Search-menu dialog error ([0fd2d7e](https://github.com/Whbbit1999/shadcn-vue-admin/commit/0fd2d7e))
|
||||
- Build error, use unplugin-vue-router,router name type ([010122f](https://github.com/Whbbit1999/shadcn-vue-admin/commit/010122f))
|
||||
- Remove unplugin-vue-router, pending migrate-to-unplugin-vue-router branch accomplish ([b2f4f64](https://github.com/Whbbit1999/shadcn-vue-admin/commit/b2f4f64))
|
||||
- Index page remove default layout ([8524cf4](https://github.com/Whbbit1999/shadcn-vue-admin/commit/8524cf4))
|
||||
|
||||
### 📦 Build
|
||||
|
||||
- Use unplugin-vue-router instead of vite-plugin-pages ([c9aaf4a](https://github.com/Whbbit1999/shadcn-vue-admin/commit/c9aaf4a))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- **release:** V0.3.0 ([fc500d1](https://github.com/Whbbit1999/shadcn-vue-admin/commit/fc500d1))
|
||||
- **release:** V0.3.1 ([3f80295](https://github.com/Whbbit1999/shadcn-vue-admin/commit/3f80295))
|
||||
- Vite-env.d.ts add unplugin-vue-router/client ([631e5db](https://github.com/Whbbit1999/shadcn-vue-admin/commit/631e5db))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 ([@Whbbit1999](https://github.com/Whbbit1999))
|
||||
|
||||
## v0.3.1
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.3.0...v0.3.1)
|
||||
|
||||
### 🩹 Fixes
|
||||
|
||||
- Use vue-sonner instead of shadcn-vue/toast ([8d020fd](https://github.com/Whbbit1999/shadcn-vue-admin/commit/8d020fd))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- **release:** V0.3.0 ([fc500d1](https://github.com/Whbbit1999/shadcn-vue-admin/commit/fc500d1))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 <luckyboy_dong@sina.com>
|
||||
|
||||
## v0.3.0
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.3.0...v0.3.0)
|
||||
|
||||
### 🩹 Fixes
|
||||
|
||||
- Use vue-sonner instead of shadcn-vue/toast ([8d020fd](https://github.com/Whbbit1999/shadcn-vue-admin/commit/8d020fd))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 <luckyboy_dong@sina.com>
|
||||
|
||||
## v0.2.5
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.2.4...v0.2.5)
|
||||
|
||||
### 🩹 Fixes
|
||||
|
||||
- **vite.config.ts:** Build error ([8e3620b](https://github.com/Whbbit1999/shadcn-vue-admin/commit/8e3620b))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- Add description and keywords in index.html ([054d626](https://github.com/Whbbit1999/shadcn-vue-admin/commit/054d626))
|
||||
- Update vite ([8a00544](https://github.com/Whbbit1999/shadcn-vue-admin/commit/8a00544))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 <luckyboy_dong@sina.com>
|
||||
|
||||
## v0.2.4
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.2.3...v0.2.4)
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- **release:** V0.2.3 ([2c22989](https://github.com/Whbbit1999/shadcn-vue-admin/commit/2c22989))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 <luckyboy_dong@sina.com>
|
||||
|
||||
## v0.2.3
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.2.2...v0.2.3)
|
||||
|
||||
### 🚀 Enhancements
|
||||
|
||||
- User module CRUD ([f1cbf66](https://github.com/Whbbit1999/shadcn-vue-admin/commit/f1cbf66))
|
||||
|
||||
### 🩹 Fixes
|
||||
|
||||
- Fix the browser warning of the billing block ([7c77903](https://github.com/Whbbit1999/shadcn-vue-admin/commit/7c77903))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- Update packages ([e8b1a23](https://github.com/Whbbit1999/shadcn-vue-admin/commit/e8b1a23))
|
||||
- Update shadcn-vue checkbox component ([e329434](https://github.com/Whbbit1999/shadcn-vue-admin/commit/e329434))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 <luckyboy_dong@sina.com>
|
||||
|
||||
## v0.2.2
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/v0.2.1...v0.2.2)
|
||||
|
||||
### 🩹 Fixes
|
||||
|
||||
- Billing-detail card in dark-mode background style ([277b24b](https://github.com/Whbbit1999/shadcn-vue-admin/commit/277b24b))
|
||||
- Data-table view-options component drop-down-menu-checkbox-item status error ([0b7d653](https://github.com/Whbbit1999/shadcn-vue-admin/commit/0b7d653))
|
||||
- Data-table table-columns component checkbox status error ([d0d53fb](https://github.com/Whbbit1999/shadcn-vue-admin/commit/d0d53fb))
|
||||
- Change settings block notifications-form component checkbox component attributes ([ab5a9e9](https://github.com/Whbbit1999/shadcn-vue-admin/commit/ab5a9e9))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- Remove release-it and release-it-pnpm, change release to unjs/changelogen ([0c14dcd](https://github.com/Whbbit1999/shadcn-vue-admin/commit/0c14dcd))
|
||||
- Remove package.json file git block ([d28bb67](https://github.com/Whbbit1999/shadcn-vue-admin/commit/d28bb67))
|
||||
- Update vueuse/core package ([b007f3d](https://github.com/Whbbit1999/shadcn-vue-admin/commit/b007f3d))
|
||||
- Update radix-vue to reak-ui ([83ad1ee](https://github.com/Whbbit1999/shadcn-vue-admin/commit/83ad1ee))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 <luckyboy_dong@sina.com>
|
||||
|
||||
## v0.2.1
|
||||
|
||||
[compare changes](https://github.com/Whbbit1999/shadcn-vue-admin/compare/0.2.0...v0.2.1)
|
||||
|
||||
### 🚀 Enhancements
|
||||
|
||||
- Invite User And Create User demo use Dialog on desktop, use Drawer on mobile. ([f1831e8](https://github.com/Whbbit1999/shadcn-vue-admin/commit/f1831e8))
|
||||
- The App module is synchronized with the app module of Shadcn Admin ([9b2606a](https://github.com/Whbbit1999/shadcn-vue-admin/commit/9b2606a))
|
||||
- Add change theme, like shadcn vue document ([6dc355b](https://github.com/Whbbit1999/shadcn-vue-admin/commit/6dc355b))
|
||||
- Update LICENSE ([221c4ca](https://github.com/Whbbit1999/shadcn-vue-admin/commit/221c4ca))
|
||||
- Change hash history mode to webHistory ([a91c44c](https://github.com/Whbbit1999/shadcn-vue-admin/commit/a91c44c))
|
||||
- The auth module synchronized with the auth module of Shadcn Admin ([3a91093](https://github.com/Whbbit1999/shadcn-vue-admin/commit/3a91093))
|
||||
- Add nprogress and global router guard ([8b6d4b7](https://github.com/Whbbit1999/shadcn-vue-admin/commit/8b6d4b7))
|
||||
- Settings module use shadcn-vue example forms ([0149afa](https://github.com/Whbbit1999/shadcn-vue-admin/commit/0149afa))
|
||||
- When the system color changes, the website icon changes ([6569aa4](https://github.com/Whbbit1999/shadcn-vue-admin/commit/6569aa4))
|
||||
- **Search/Menu:** Search Menu component style change, use stone primary color ([34a6cf8](https://github.com/Whbbit1999/shadcn-vue-admin/commit/34a6cf8))
|
||||
- Search menu component when command item click close the panel ([07abd20](https://github.com/Whbbit1999/shadcn-vue-admin/commit/07abd20))
|
||||
- **DataTable:** Global table components change icon ([c29fdd5](https://github.com/Whbbit1999/shadcn-vue-admin/commit/c29fdd5))
|
||||
- Search menu add 'plans & billings page' ([d8f5286](https://github.com/Whbbit1999/shadcn-vue-admin/commit/d8f5286))
|
||||
- Billings page design change ([6886f3e](https://github.com/Whbbit1999/shadcn-vue-admin/commit/6886f3e))
|
||||
- New scrollbar ([0d6de56](https://github.com/Whbbit1999/shadcn-vue-admin/commit/0d6de56))
|
||||
- Added a example module to talk to ai ([571dd4a](https://github.com/Whbbit1999/shadcn-vue-admin/commit/571dd4a))
|
||||
- Tasks CRUD Demo ([5fd8052](https://github.com/Whbbit1999/shadcn-vue-admin/commit/5fd8052))
|
||||
|
||||
### 🩹 Fixes
|
||||
|
||||
- Fix auto-import-components names error, now shadcn-vue components can auto import ,prefix is UI ([a884695](https://github.com/Whbbit1999/shadcn-vue-admin/commit/a884695))
|
||||
- Shadcn-vue calendar eslint error ([5abac39](https://github.com/Whbbit1999/shadcn-vue-admin/commit/5abac39))
|
||||
- Help-center in darkmode style error ([92d170d](https://github.com/Whbbit1999/shadcn-vue-admin/commit/92d170d))
|
||||
- Ai-talk module type error ([b8c708c](https://github.com/Whbbit1999/shadcn-vue-admin/commit/b8c708c))
|
||||
|
||||
### 💅 Refactors
|
||||
|
||||
- Code format ([62acdbc](https://github.com/Whbbit1999/shadcn-vue-admin/commit/62acdbc))
|
||||
|
||||
### 📦 Build
|
||||
|
||||
- Upgrade packages ([88896c5](https://github.com/Whbbit1999/shadcn-vue-admin/commit/88896c5))
|
||||
|
||||
### 🏡 Chore
|
||||
|
||||
- Fix netlify reload page 404 ([a296949](https://github.com/Whbbit1999/shadcn-vue-admin/commit/a296949))
|
||||
- Error module sidebar name change ([c0f6a05](https://github.com/Whbbit1999/shadcn-vue-admin/commit/c0f6a05))
|
||||
- When deploying vercel you need to add a file profile ([9b841fb](https://github.com/Whbbit1999/shadcn-vue-admin/commit/9b841fb))
|
||||
- Change package.json info ([a413bde](https://github.com/Whbbit1999/shadcn-vue-admin/commit/a413bde))
|
||||
- Update packages ([7f7c872](https://github.com/Whbbit1999/shadcn-vue-admin/commit/7f7c872))
|
||||
- Remove VueQueryDevtools, you can find it in vue-devtools or add it yourself ([67d2c4c](https://github.com/Whbbit1999/shadcn-vue-admin/commit/67d2c4c))
|
||||
- Update packages ([1b8234d](https://github.com/Whbbit1999/shadcn-vue-admin/commit/1b8234d))
|
||||
|
||||
### 🎨 Styles
|
||||
|
||||
- Layout Page components add py-4 ([442f52b](https://github.com/Whbbit1999/shadcn-vue-admin/commit/442f52b))
|
||||
|
||||
### ❤️ Contributors
|
||||
|
||||
- Whbbit1999 <luckyboy_dong@sina.com>
|
||||
|
||||
@@ -1,170 +0,0 @@
|
||||
# Monisuo Admin 实施计划
|
||||
|
||||
## 项目信息
|
||||
|
||||
- 项目名称: Monisuo 管理后台
|
||||
- 技术栈: Vue 3 + shadcn-vue + Tailwind CSS
|
||||
- 开始时间: 2026-03-22
|
||||
- 完成时间: 2026-03-22
|
||||
- 状态: COMPLETE
|
||||
|
||||
## 任务清单
|
||||
|
||||
### 阶段 1: 布局组件封装 ✅
|
||||
|
||||
- [x] BasicPage 组件 - 已有组件可直接使用
|
||||
- [x] 使用现有的 UiTable、UiCard 等组件
|
||||
- [x] 使用现有的 UiDialog 组件
|
||||
- [x] 使用现有的 UiSpinner 组件
|
||||
|
||||
### 阶段 2: 页面优化 ✅
|
||||
|
||||
- [x] 登录页响应式优化
|
||||
- 添加表单验证
|
||||
- 添加密码显示/隐藏
|
||||
- 响应式布局
|
||||
- 移动端 Logo
|
||||
- [x] 资金总览页
|
||||
- 统计卡片展示
|
||||
- 快捷操作入口
|
||||
- 待审批订单预览
|
||||
- [x] 用户管理页
|
||||
- Toast 提示
|
||||
- 分页组件
|
||||
- 用户详情弹窗
|
||||
- 响应式布局(PC表格/移动端卡片)
|
||||
- [x] 币种管理页
|
||||
- Toast 提示
|
||||
- 表单验证
|
||||
- 响应式布局
|
||||
- [x] 订单审批页
|
||||
- Toast 提示
|
||||
- 订单详情弹窗
|
||||
- 分页组件
|
||||
- 筛选功能
|
||||
- 响应式布局
|
||||
|
||||
### 阶段 3: 全局优化 ✅
|
||||
|
||||
- [x] Toast 提示(使用 vue-sonner)
|
||||
- [x] 路由守卫优化(Monisuo 路由保护)
|
||||
- [x] TypeScript 类型检查通过
|
||||
- [x] 构建测试通过
|
||||
|
||||
### 阶段 4: 测试与完善 ✅
|
||||
|
||||
- [x] TypeScript 类型检查
|
||||
- [x] 构建测试
|
||||
- [x] 功能完整性检查
|
||||
|
||||
## 已实现的页面
|
||||
|
||||
### 1. 登录页 (`/auth/monisuo-sign-in.vue`)
|
||||
|
||||
- 响应式布局(PC左右分栏,移动端单列)
|
||||
- 表单验证(用户名、密码必填,密码长度检查)
|
||||
- 密码显示/隐藏切换
|
||||
- 加载状态和错误提示
|
||||
- 美观的品牌展示
|
||||
|
||||
### 2. 资金总览 (`/monisuo/dashboard.vue`)
|
||||
|
||||
- 6个统计卡片(充值、提现、在管资金、交易总值、待审批、用户数)
|
||||
- 快捷操作入口
|
||||
- 待审批订单预览
|
||||
- 响应式布局
|
||||
|
||||
### 3. 用户管理 (`/monisuo/users.vue`)
|
||||
|
||||
- 用户列表(PC表格/移动端卡片)
|
||||
- 搜索功能(用户名、状态筛选)
|
||||
- 分页功能
|
||||
- 用户状态切换(启用/禁用)
|
||||
- 用户详情弹窗
|
||||
- Toast 操作提示
|
||||
|
||||
### 4. 币种管理 (`/monisuo/coins.vue`)
|
||||
|
||||
- 币种列表(PC表格/移动端卡片)
|
||||
- 新增/编辑币种弹窗
|
||||
- 调价功能(仅手动价格类型)
|
||||
- 上下架功能
|
||||
- 表单验证
|
||||
- Toast 操作提示
|
||||
|
||||
### 5. 订单审批 (`/monisuo/orders.vue`)
|
||||
|
||||
- 待审批/全部订单 Tab 切换
|
||||
- 订单列表(PC表格/移动端卡片)
|
||||
- 订单详情弹窗
|
||||
- 审批功能(通过/驳回)
|
||||
- 筛选功能(类型、状态)
|
||||
- 分页功能
|
||||
- Toast 操作提示
|
||||
|
||||
## API 对接情况
|
||||
|
||||
所有 API 已完成对接:
|
||||
|
||||
- ✅ POST /admin/login - 管理员登录
|
||||
- ✅ GET /admin/user/list - 用户列表
|
||||
- ✅ GET /admin/user/detail - 用户详情
|
||||
- ✅ POST /admin/user/status - 禁用/启用用户
|
||||
- ✅ GET /admin/coin/list - 币种列表
|
||||
- ✅ POST /admin/coin/save - 新增/编辑币种
|
||||
- ✅ POST /admin/coin/price - 调整币种价格
|
||||
- ✅ POST /admin/coin/status - 币种上下架
|
||||
- ✅ GET /admin/order/pending - 待审批订单
|
||||
- ✅ GET /admin/order/list - 所有订单
|
||||
- ✅ POST /admin/order/approve - 审批订单
|
||||
- ✅ GET /admin/finance/overview - 资金总览
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 使用的库
|
||||
|
||||
- Vue 3 + TypeScript
|
||||
- shadcn-vue (Radix UI)
|
||||
- Tailwind CSS 4
|
||||
- TanStack Query (vue-query)
|
||||
- Vue Router
|
||||
- Pinia
|
||||
- vue-sonner (Toast)
|
||||
- @iconify/vue (图标)
|
||||
- lucide-vue-next (图标)
|
||||
|
||||
### 响应式设计
|
||||
|
||||
- PC端:表格布局,充分利用大屏幕空间
|
||||
- 移动端:卡片列表布局,简化信息展示
|
||||
- 使用 Tailwind CSS 响应式断点 (md:, lg:, xl:)
|
||||
|
||||
### 路由守卫
|
||||
|
||||
- `/monisuo/*` 路由需要登录认证
|
||||
- 未登录自动重定向到 `/auth/monisuo-sign-in`
|
||||
|
||||
## 进度日志
|
||||
|
||||
### 2026-03-22 03:48
|
||||
|
||||
- ✅ 项目初始化完成
|
||||
- ✅ API 服务层实现
|
||||
- ✅ 基础页面创建
|
||||
- ✅ 认证逻辑实现
|
||||
|
||||
### 2026-03-22 (完成)
|
||||
|
||||
- ✅ 登录页响应式优化和表单验证
|
||||
- ✅ 资金总览页统计卡片和快捷操作
|
||||
- ✅ 用户管理页分页、详情弹窗、响应式布局
|
||||
- ✅ 币种管理页表单验证、响应式布局
|
||||
- ✅ 订单审批页详情弹窗、筛选、分页、响应式布局
|
||||
- ✅ Toast 提示集成
|
||||
- ✅ 路由守卫优化
|
||||
- ✅ TypeScript 类型检查通过
|
||||
- ✅ 构建测试通过
|
||||
|
||||
## 状态
|
||||
|
||||
STATUS: COMPLETE
|
||||
347
页面样式/交易.txt
347
页面样式/交易.txt
@@ -1,347 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>KINETIC VAULT | Terminal</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"inverse-surface": "#f9f9ff",
|
||||
"secondary-dim": "#ce7eec",
|
||||
"surface-container-low": "#10131a",
|
||||
"tertiary-container": "#00ffab",
|
||||
"on-secondary-container": "#f1bfff",
|
||||
"on-primary": "#004c5e",
|
||||
"on-tertiary": "#006642",
|
||||
"surface-container-high": "#1c2028",
|
||||
"surface-container-highest": "#22262f",
|
||||
"on-tertiary-fixed": "#00472d",
|
||||
"surface-container": "#161a21",
|
||||
"outline-variant": "#45484f",
|
||||
"secondary-container": "#6e208c",
|
||||
"primary-fixed": "#00d2ff",
|
||||
"inverse-on-surface": "#52555c",
|
||||
"surface-tint": "#72dcff",
|
||||
"surface-container-lowest": "#000000",
|
||||
"secondary-fixed-dim": "#ebadff",
|
||||
"primary-dim": "#00c3ed",
|
||||
"on-surface-variant": "#a9abb3",
|
||||
"surface-bright": "#282c36",
|
||||
"on-primary-container": "#004253",
|
||||
"on-error": "#490006",
|
||||
"on-secondary-fixed-variant": "#792c97",
|
||||
"tertiary": "#afffd1",
|
||||
"on-primary-fixed": "#002c38",
|
||||
"inverse-primary": "#00687f",
|
||||
"background": "#0b0e14",
|
||||
"primary-fixed-dim": "#00c3ed",
|
||||
"on-secondary": "#4c0068",
|
||||
"error-container": "#9f0519",
|
||||
"tertiary-fixed": "#00ffab",
|
||||
"tertiary-dim": "#00efa0",
|
||||
"on-primary-fixed-variant": "#004c5e",
|
||||
"primary-container": "#00d2ff",
|
||||
"tertiary-fixed-dim": "#00efa0",
|
||||
"outline": "#73757d",
|
||||
"on-tertiary-container": "#005c3b",
|
||||
"secondary": "#dd8bfb",
|
||||
"primary": "#72dcff",
|
||||
"on-tertiary-fixed-variant": "#006742",
|
||||
"on-secondary-fixed": "#580078",
|
||||
"surface": "#0b0e14",
|
||||
"error-dim": "#d7383b",
|
||||
"error": "#ff716c",
|
||||
"on-error-container": "#ffa8a3",
|
||||
"on-background": "#ecedf6",
|
||||
"secondary-fixed": "#f2c1ff",
|
||||
"surface-variant": "#22262f",
|
||||
"surface-dim": "#0b0e14",
|
||||
"on-surface": "#ecedf6"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Space Grotesk"],
|
||||
"body": ["Manrope"],
|
||||
"label": ["Manrope"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Manrope', sans-serif; }
|
||||
.font-headline { font-family: 'Space Grotesk', sans-serif; }
|
||||
.glass-panel {
|
||||
background: rgba(34, 38, 47, 0.4);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(69, 72, 79, 0.15);
|
||||
}
|
||||
.neon-glow-primary {
|
||||
box-shadow: 0 0 20px rgba(114, 220, 255, 0.15);
|
||||
}
|
||||
.neon-glow-tertiary {
|
||||
box-shadow: 0 0 25px rgba(175, 255, 209, 0.2);
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #0b0e14;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #22262f;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface custom-scrollbar min-h-screen">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-[#10131a] border-none">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-cyan-400 p-2 hover:bg-[#22262f] transition-colors duration-200 scale-95 active:duration-75">
|
||||
<span class="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
<h1 class="text-xl font-bold tracking-tighter text-[#72dcff] uppercase font-headline">KINETIC VAULT</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="hidden md:flex items-center gap-8 mr-8">
|
||||
<a class="text-[#72dcff] font-bold font-label text-sm uppercase tracking-widest" href="#">Trade</a>
|
||||
<a class="text-[#a9abb3] font-label text-sm uppercase tracking-widest hover:text-white transition-colors" href="#">Assets</a>
|
||||
<a class="text-[#a9abb3] font-label text-sm uppercase tracking-widest hover:text-white transition-colors" href="#">Market</a>
|
||||
</div>
|
||||
<div class="w-10 h-10 rounded-full overflow-hidden border border-primary/20">
|
||||
<img alt="User profile avatar" data-alt="Cyberpunk style user profile avatar headshot" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCkeJh6DQFHQuTTJWqMLC7t0g8Lt7EbKZKf29sj9bu_jTQ4FkDKUvevurin2d8FCKG5BCOoZsC5pNUicT5xuSjtx44w2nkKrl2ZWKefmobhNy_Iy42ijT0aFeW_2wEFcvmPqRX5IHm1crAJ2FpsrU8Dvwxr2MSS_XOoFU8kXIECc60UIOwQqhBeJSVQp1ZAzY4hVCVI5cKVv02CkBNfCmP7-IBEhHkxeYa8vtRqebCNQYCLJMTlvTSMegf5Neog56Xia2EGAjZjmrM"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-24 pb-32 px-4 md:px-8 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
<!-- Left Column: Chart & Market Info (Editorial Focus) -->
|
||||
<div class="lg:col-span-8 space-y-6">
|
||||
<!-- Asset Header -->
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<div class="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">currency_bitcoin</span>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold font-headline tracking-tight">BTC / USDT</h2>
|
||||
<span class="px-2 py-0.5 rounded bg-surface-container-highest text-on-surface-variant text-xs font-bold uppercase tracking-widest">Perpetual</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-4">
|
||||
<span class="text-4xl font-extrabold font-headline tracking-tighter">$64,281.90</span>
|
||||
<span class="text-tertiary font-bold flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm">trending_up</span>
|
||||
+4.12%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick stats bento -->
|
||||
<div class="grid grid-cols-2 md:flex gap-4 md:gap-8 pb-1">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[10px] text-on-surface-variant uppercase tracking-widest font-bold">24h High</span>
|
||||
<span class="font-headline font-medium text-sm">65,120.00</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[10px] text-on-surface-variant uppercase tracking-widest font-bold">24h Low</span>
|
||||
<span class="font-headline font-medium text-sm">62,840.45</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-[10px] text-on-surface-variant uppercase tracking-widest font-bold">24h Vol</span>
|
||||
<span class="font-headline font-medium text-sm text-secondary">1.24B</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Chart Canvas (Placeholder for futuristic feel) -->
|
||||
<div class="relative w-full aspect-[16/9] md:aspect-[21/9] rounded-xl overflow-hidden glass-panel group">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-secondary/5 opacity-50"></div>
|
||||
<!-- Mock Chart Lines -->
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-full h-full p-6 flex flex-col justify-between">
|
||||
<div class="flex justify-between text-[10px] text-on-surface-variant/30">
|
||||
<span>65,000</span><span>64,500</span><span>64,000</span><span>63,500</span><span>63,000</span>
|
||||
</div>
|
||||
<div class="flex-1 relative">
|
||||
<svg class="w-full h-full" viewbox="0 0 1000 400">
|
||||
<path d="M0,350 Q100,320 200,340 T400,280 T600,200 T800,240 T1000,100" fill="none" stroke="url(#paint0_linear)" stroke-width="3"></path>
|
||||
<defs>
|
||||
<lineargradient gradientunits="userSpaceOnUse" id="paint0_linear" x1="0" x2="1000" y1="0" y2="0">
|
||||
<stop stop-color="#72dcff"></stop>
|
||||
<stop offset="1" stop-color="#dd8bfb"></stop>
|
||||
</lineargradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Time Range Selector -->
|
||||
<div class="absolute top-4 right-4 flex gap-1 p-1 rounded-lg bg-surface-container-lowest/50 backdrop-blur-md">
|
||||
<button class="px-3 py-1 rounded-md text-[10px] font-bold text-primary bg-primary/10">1H</button>
|
||||
<button class="px-3 py-1 rounded-md text-[10px] font-bold text-on-surface-variant hover:text-white transition-colors">4H</button>
|
||||
<button class="px-3 py-1 rounded-md text-[10px] font-bold text-on-surface-variant hover:text-white transition-colors">1D</button>
|
||||
<button class="px-3 py-1 rounded-md text-[10px] font-bold text-on-surface-variant hover:text-white transition-colors">1W</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Open Orders / Recent Trades -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="rounded-xl p-6 surface-container-high border-none glass-panel">
|
||||
<h3 class="text-sm font-bold font-headline uppercase tracking-widest mb-6 flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-primary"></span>
|
||||
Active Orders
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center p-3 rounded-lg bg-surface-container-lowest/40 border-l-2 border-tertiary">
|
||||
<div>
|
||||
<div class="text-xs font-bold text-tertiary">BUY / LONG</div>
|
||||
<div class="text-sm font-headline">63,940.00</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-[10px] text-on-surface-variant">Amount</div>
|
||||
<div class="text-sm">0.042 BTC</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-3 rounded-lg bg-surface-container-lowest/40 border-l-2 border-error">
|
||||
<div>
|
||||
<div class="text-xs font-bold text-error">SELL / SHORT</div>
|
||||
<div class="text-sm font-headline">64,800.00</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-[10px] text-on-surface-variant">Amount</div>
|
||||
<div class="text-sm">0.125 BTC</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-xl p-6 surface-container-high border-none glass-panel">
|
||||
<h3 class="text-sm font-bold font-headline uppercase tracking-widest mb-6 flex items-center gap-2">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-secondary"></span>
|
||||
Order Book
|
||||
</h3>
|
||||
<div class="space-y-1.5 text-xs font-mono">
|
||||
<div class="flex justify-between text-error/80">
|
||||
<span>64,285.50</span><span>0.045</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-error/80">
|
||||
<span>64,284.10</span><span>0.112</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-error/60">
|
||||
<span>64,283.00</span><span>0.890</span>
|
||||
</div>
|
||||
<div class="py-2 border-y border-outline-variant/10 text-center font-headline text-lg font-bold text-on-surface">
|
||||
64,281.90
|
||||
</div>
|
||||
<div class="flex justify-between text-tertiary/60">
|
||||
<span>64,280.00</span><span>1.204</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-tertiary/80">
|
||||
<span>64,279.50</span><span>0.056</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Trade Execution Console -->
|
||||
<div class="lg:col-span-4 flex flex-col gap-6">
|
||||
<div class="rounded-2xl p-6 surface-container-highest glass-panel border-none sticky top-24 neon-glow-primary">
|
||||
<!-- Toggle Buy/Sell -->
|
||||
<div class="flex p-1 bg-surface-container-lowest rounded-xl mb-8">
|
||||
<button class="flex-1 py-3 rounded-lg text-sm font-bold uppercase tracking-widest transition-all bg-tertiary/10 text-tertiary">
|
||||
Buy
|
||||
</button>
|
||||
<button class="flex-1 py-3 rounded-lg text-sm font-bold uppercase tracking-widest transition-all text-on-surface-variant hover:text-white">
|
||||
Sell
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<!-- Order Type Selector -->
|
||||
<div class="flex justify-between items-center text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2">
|
||||
<span>Limit Order</span>
|
||||
<span class="material-symbols-outlined text-sm">expand_more</span>
|
||||
</div>
|
||||
<!-- Price Input -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] text-on-surface-variant uppercase tracking-[0.2em] font-bold">Price (USDT)</label>
|
||||
<div class="relative group">
|
||||
<input class="w-full bg-surface-container-lowest border border-transparent focus:border-primary focus:ring-0 rounded-xl py-4 px-5 text-xl font-headline transition-all outline-none" type="text" value="64,281.90"/>
|
||||
<div class="absolute right-4 top-1/2 -translate-y-1/2 text-xs font-bold text-on-surface-variant group-focus-within:text-primary">USDT</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Amount Input -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-[10px] text-on-surface-variant uppercase tracking-[0.2em] font-bold">Amount (BTC)</label>
|
||||
<div class="relative group">
|
||||
<input class="w-full bg-surface-container-lowest border border-transparent focus:border-primary focus:ring-0 rounded-xl py-4 px-5 text-xl font-headline transition-all outline-none" placeholder="0.00" type="text"/>
|
||||
<div class="absolute right-4 top-1/2 -translate-y-1/2 text-xs font-bold text-on-surface-variant group-focus-within:text-primary">BTC</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Percentages -->
|
||||
<div class="flex justify-between gap-2">
|
||||
<button class="flex-1 py-2 rounded-lg bg-surface-container-high hover:bg-surface-variant text-[10px] font-bold uppercase tracking-widest transition-colors">25%</button>
|
||||
<button class="flex-1 py-2 rounded-lg bg-surface-container-high hover:bg-surface-variant text-[10px] font-bold uppercase tracking-widest transition-colors">50%</button>
|
||||
<button class="flex-1 py-2 rounded-lg bg-surface-container-high hover:bg-surface-variant text-[10px] font-bold uppercase tracking-widest transition-colors">75%</button>
|
||||
<button class="flex-1 py-2 rounded-lg bg-surface-container-high hover:bg-surface-variant text-[10px] font-bold uppercase tracking-widest transition-colors">100%</button>
|
||||
</div>
|
||||
<!-- Balance Info -->
|
||||
<div class="pt-4 border-t border-outline-variant/10 space-y-3">
|
||||
<div class="flex justify-between items-center text-sm">
|
||||
<span class="text-on-surface-variant">Available</span>
|
||||
<span class="font-headline font-bold">12,450.00 USDT</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-sm">
|
||||
<span class="text-on-surface-variant">Est. Fee</span>
|
||||
<span class="font-headline">0.45 USDT</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center pt-2">
|
||||
<span class="text-on-surface-variant font-bold uppercase tracking-widest text-[10px]">Total Order</span>
|
||||
<span class="text-lg font-headline font-extrabold text-primary">0.00 USDT</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Execution Button -->
|
||||
<button class="w-full py-5 rounded-2xl bg-gradient-to-r from-tertiary to-tertiary-container text-on-tertiary-fixed font-black uppercase tracking-[0.25em] text-sm shadow-[0_8px_32px_rgba(0,255,171,0.2)] hover:scale-[1.02] active:scale-95 transition-all neon-glow-tertiary">
|
||||
Place Buy Order
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Promotion / Ad Slot -->
|
||||
<div class="rounded-2xl overflow-hidden relative group aspect-video">
|
||||
<img alt="Crypto network visualization" class="w-full h-full object-cover grayscale opacity-40 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-700" data-alt="Blue and purple abstract digital network connection lines" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBKVB8cwhLRRb34YYe1QWpgv9_aKTmA_RH3e9__GHCKUE0pfSL0-0xbmjYch-Z6Wd5b5Tyoy4nePkKMnRRbasK-cdIxbNDdJ65T5bdBlG9MYEQ16YT1oVn0KTDR5hSacUngFu-RNPeJ0plxPvMevmmfSaOCfnzeFQ02ZoDHc7fo2r8SCjfFuyeOcNMO6y5l1bgYZtsQXaW3AQ8FdWZ7o7uD-wYmWphnjy5Ol8dj3vPOvXSykkW7td_gPJasJ2MzNl-JDF-LbswUXs0"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent p-6 flex flex-col justify-end">
|
||||
<span class="text-[10px] font-black text-secondary uppercase tracking-[0.3em] mb-1">New Feature</span>
|
||||
<h4 class="text-xl font-bold font-headline leading-tight">Smart Vault Staking Now Live</h4>
|
||||
<p class="text-xs text-on-surface-variant mt-2 line-clamp-2">Earn up to 12.4% APY on idle USDT assets with Kinetic's algorithmic compounding engine.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-3 bg-[#0b0e14]/80 backdrop-blur-xl border-t border-[#45484f]/15 shadow-[0_-8px_32px_rgba(114,220,255,0.06)] md:hidden">
|
||||
<a class="flex flex-col items-center justify-center text-[#72dcff] bg-[#72dcff]/10 rounded-xl px-4 py-1 scale-90 duration-200" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">swap_horiz</span>
|
||||
<span class="text-[10px] font-medium Manrope uppercase tracking-widest">Trade</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-white transition-all scale-90 duration-200" href="#">
|
||||
<span class="material-symbols-outlined">account_balance_wallet</span>
|
||||
<span class="text-[10px] font-medium Manrope uppercase tracking-widest">Assets</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-white transition-all scale-90 duration-200" href="#">
|
||||
<span class="material-symbols-outlined">monitoring</span>
|
||||
<span class="text-[10px] font-medium Manrope uppercase tracking-widest">Market</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-white transition-all scale-90 duration-200" href="#">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<span class="text-[10px] font-medium Manrope uppercase tracking-widest">Profile</span>
|
||||
</a>
|
||||
</nav>
|
||||
</body></html>
|
||||
195
页面样式/充值弹窗.txt
195
页面样式/充值弹窗.txt
@@ -1,195 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Kinetic Vault - Deposit</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"surface-variant": "#22262f",
|
||||
"on-tertiary-fixed": "#00472d",
|
||||
"inverse-primary": "#00687f",
|
||||
"on-surface-variant": "#a9abb3",
|
||||
"tertiary": "#afffd1",
|
||||
"primary-dim": "#00c3ed",
|
||||
"background": "#0b0e14",
|
||||
"tertiary-container": "#00ffab",
|
||||
"surface-container": "#161a21",
|
||||
"on-secondary-fixed": "#580078",
|
||||
"on-tertiary": "#006642",
|
||||
"inverse-surface": "#f9f9ff",
|
||||
"error-container": "#9f0519",
|
||||
"on-secondary-container": "#f1bfff",
|
||||
"on-error-container": "#ffa8a3",
|
||||
"surface-tint": "#72dcff",
|
||||
"secondary-fixed-dim": "#ebadff",
|
||||
"on-secondary": "#4c0068",
|
||||
"error": "#ff716c",
|
||||
"secondary-dim": "#ce7eec",
|
||||
"on-primary-fixed-variant": "#004c5e",
|
||||
"tertiary-dim": "#00efa0",
|
||||
"error-dim": "#d7383b",
|
||||
"surface-dim": "#0b0e14",
|
||||
"surface-container-high": "#1c2028",
|
||||
"on-tertiary-fixed-variant": "#006742",
|
||||
"secondary-container": "#6e208c",
|
||||
"primary-fixed-dim": "#00c3ed",
|
||||
"surface-bright": "#282c36",
|
||||
"secondary-fixed": "#f2c1ff",
|
||||
"tertiary-fixed": "#00ffab",
|
||||
"inverse-on-surface": "#52555c",
|
||||
"on-background": "#ecedf6",
|
||||
"surface-container-lowest": "#000000",
|
||||
"surface-container-highest": "#22262f",
|
||||
"primary-container": "#00d2ff",
|
||||
"on-surface": "#ecedf6",
|
||||
"primary": "#72dcff",
|
||||
"on-primary-container": "#004253",
|
||||
"secondary": "#dd8bfb",
|
||||
"tertiary-fixed-dim": "#00efa0",
|
||||
"on-primary-fixed": "#002c38",
|
||||
"on-primary": "#004c5e",
|
||||
"on-tertiary-container": "#005c3b",
|
||||
"on-error": "#490006",
|
||||
"on-secondary-fixed-variant": "#792c97",
|
||||
"surface-container-low": "#10131a",
|
||||
"outline-variant": "#45484f",
|
||||
"outline": "#73757d",
|
||||
"surface": "#0b0e14",
|
||||
"primary-fixed": "#00d2ff"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Space Grotesk"],
|
||||
"body": ["Manrope"],
|
||||
"label": ["Manrope"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(34, 38, 47, 0.4);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body min-h-screen flex flex-col">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-[#0b0e14] dark:bg-[#0b0e14]">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-[#72dcff] cursor-pointer hover:text-[#dd8bfb] transition-colors scale-95 duration-200">menu</span>
|
||||
<h1 class="text-xl font-black text-[#72dcff] tracking-widest font-['Space_Grotesk'] font-bold tracking-tight uppercase">KINETIC VAULT</h1>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full bg-surface-container-highest border border-outline-variant flex items-center justify-center overflow-hidden">
|
||||
<img alt="User Profile" class="w-full h-full object-cover" data-alt="User profile avatar icon" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBANk2SpRtHHAsLEdKMgvyKuatu6pL3RrmMX1RNqvdlKFiy455H8zMuib7q-uJ9kURRUg7fmITlkx9hQsoZnaeYP4tTVAdaKfPNI9do0CBhD8xF-FFxF4WXUKZIB7Vxoa77IDzwNMawLuHEFelTVTo0gAqkioBh5Ce8ZY3AEDtbnI6Ey-3Y8Jj8ZEalLc77HUjAs29UOriOjlcg7CYMUmRUfIjEaFIb9wYL4jynk80QUxKk6fz775oNDMVxv_Kt1SDCtO3YseFeWAI"/>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-1 pt-24 pb-32 px-6 flex items-center justify-center relative overflow-hidden">
|
||||
<!-- Background Decorative Elements (Cyberpunk Flair) -->
|
||||
<div class="absolute top-1/4 -left-20 w-96 h-96 bg-primary/10 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<div class="absolute bottom-1/4 -right-20 w-96 h-96 bg-secondary/10 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<!-- Deposit Modal Container -->
|
||||
<div class="w-full max-w-md glass-panel rounded-[2rem] border border-outline-variant/20 shadow-2xl relative z-10 p-8">
|
||||
<!-- Header Section -->
|
||||
<div class="flex justify-between items-start mb-8">
|
||||
<div>
|
||||
<h2 class="font-headline text-3xl font-bold text-on-surface tracking-tight leading-none mb-1">Deposit (充值)</h2>
|
||||
<p class="font-label text-sm text-on-surface-variant uppercase tracking-widest">Asset: Kinetic Core (KNC)</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-high p-2 rounded-xl">
|
||||
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">account_balance_wallet</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Section -->
|
||||
<div class="space-y-6">
|
||||
<!-- Balance Status Chip -->
|
||||
<div class="flex items-center justify-between px-4 py-2 bg-surface-container-lowest rounded-full border border-outline-variant/10">
|
||||
<span class="text-xs font-label text-on-surface-variant uppercase tracking-widest">Available Balance</span>
|
||||
<span class="text-xs font-headline font-bold text-tertiary">1,248.50 KNC</span>
|
||||
</div>
|
||||
<!-- Input Group -->
|
||||
<div class="space-y-2">
|
||||
<label class="font-label text-[10px] uppercase tracking-widest text-on-surface-variant ml-1">Amount to Transfer</label>
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-0 bg-primary/5 rounded-2xl blur-md opacity-0 group-focus-within:opacity-100 transition-opacity"></div>
|
||||
<div class="relative bg-surface-container-lowest border border-outline-variant/30 group-focus-within:border-primary rounded-2xl p-4 flex items-center gap-4 transition-all">
|
||||
<input class="bg-transparent border-none focus:ring-0 text-2xl font-headline font-bold text-on-surface w-full placeholder:text-outline-variant/50" placeholder="0.00" type="text"/>
|
||||
<button class="bg-primary/10 hover:bg-primary/20 text-primary font-headline text-xs font-bold px-3 py-1.5 rounded-lg transition-colors border border-primary/20">
|
||||
MAX
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Network Info (Asymmetric Detail) -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-surface-container-high rounded-2xl p-4 border-l-2 border-secondary">
|
||||
<span class="block text-[9px] font-label text-on-surface-variant uppercase mb-1">Estimated Gas</span>
|
||||
<span class="block text-sm font-headline font-semibold text-secondary">0.002 ETH</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-high rounded-2xl p-4 border-l-2 border-tertiary">
|
||||
<span class="block text-[9px] font-label text-on-surface-variant uppercase mb-1">Time Delay</span>
|
||||
<span class="block text-sm font-headline font-semibold text-tertiary">~2 Mins</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Visual Soul: Decorative Separator -->
|
||||
<div class="py-2 flex items-center gap-4 opacity-30">
|
||||
<div class="h-[1px] flex-1 bg-gradient-to-r from-transparent to-outline"></div>
|
||||
<span class="material-symbols-outlined text-[12px]">bolt</span>
|
||||
<div class="h-[1px] flex-1 bg-gradient-to-l from-transparent to-outline"></div>
|
||||
</div>
|
||||
<!-- Action Buttons -->
|
||||
<div class="space-y-3 pt-2">
|
||||
<button class="w-full h-14 bg-gradient-to-br from-primary to-primary-container rounded-2xl font-headline font-bold text-on-primary-fixed text-lg shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all">
|
||||
Confirm Deposit
|
||||
</button>
|
||||
<button class="w-full h-12 bg-transparent border border-outline-variant/30 hover:border-primary/50 text-on-surface-variant hover:text-on-surface font-headline font-medium text-sm rounded-2xl transition-all">
|
||||
Cancel (取消)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Security Footer -->
|
||||
<div class="mt-8 flex items-center justify-center gap-2 opacity-50">
|
||||
<span class="material-symbols-outlined text-xs">verified_user</span>
|
||||
<span class="text-[9px] font-label uppercase tracking-[0.2em]">Encrypted Kinetic Protocol v4.2</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-3 bg-[#10131a]/80 backdrop-blur-xl border-t border-[#45484f]/15 shadow-[0_-8px_32px_rgba(114,220,255,0.06)] md:hidden rounded-t-3xl">
|
||||
<div class="flex flex-col items-center justify-center text-[#72dcff] bg-[#72dcff]/10 rounded-xl px-4 py-1 Active: scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">account_balance_wallet</span>
|
||||
<span class="font-['Manrope'] text-[10px] font-medium uppercase tracking-widest">Vault</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb]">
|
||||
<span class="material-symbols-outlined">swap_calls</span>
|
||||
<span class="font-['Manrope'] text-[10px] font-medium uppercase tracking-widest">Trade</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb]">
|
||||
<span class="material-symbols-outlined">insights</span>
|
||||
<span class="font-['Manrope'] text-[10px] font-medium uppercase tracking-widest">Market</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb]">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<span class="font-['Manrope'] text-[10px] font-medium uppercase tracking-widest">Profile</span>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
219
页面样式/我的.txt
219
页面样式/我的.txt
@@ -1,219 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>CyberPulse Neo Profile</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"error": "#ff716c",
|
||||
"secondary-fixed-dim": "#ebadff",
|
||||
"secondary-fixed": "#f2c1ff",
|
||||
"on-error": "#490006",
|
||||
"on-secondary-fixed": "#580078",
|
||||
"on-tertiary": "#006642",
|
||||
"tertiary-fixed-dim": "#00efa0",
|
||||
"tertiary-container": "#00ffab",
|
||||
"on-surface": "#ecedf6",
|
||||
"outline": "#73757d",
|
||||
"primary": "#72dcff",
|
||||
"on-tertiary-fixed-variant": "#006742",
|
||||
"on-primary-fixed-variant": "#004c5e",
|
||||
"inverse-primary": "#00687f",
|
||||
"surface-bright": "#282c36",
|
||||
"tertiary-dim": "#00efa0",
|
||||
"surface-dim": "#0b0e14",
|
||||
"on-secondary": "#4c0068",
|
||||
"surface-container-low": "#10131a",
|
||||
"surface-variant": "#22262f",
|
||||
"surface-tint": "#72dcff",
|
||||
"surface-container-lowest": "#000000",
|
||||
"primary-fixed-dim": "#00c3ed",
|
||||
"on-tertiary-fixed": "#00472d",
|
||||
"secondary": "#dd8bfb",
|
||||
"primary-container": "#00d2ff",
|
||||
"surface-container-highest": "#22262f",
|
||||
"on-secondary-fixed-variant": "#792c97",
|
||||
"on-error-container": "#ffa8a3",
|
||||
"outline-variant": "#45484f",
|
||||
"surface": "#0b0e14",
|
||||
"on-surface-variant": "#a9abb3",
|
||||
"primary-fixed": "#00d2ff",
|
||||
"tertiary": "#afffd1",
|
||||
"surface-container": "#161a21",
|
||||
"on-background": "#ecedf6",
|
||||
"primary-dim": "#00c3ed",
|
||||
"tertiary-fixed": "#00ffab",
|
||||
"error-container": "#9f0519",
|
||||
"secondary-dim": "#ce7eec",
|
||||
"surface-container-high": "#1c2028",
|
||||
"inverse-on-surface": "#52555c",
|
||||
"error-dim": "#d7383b",
|
||||
"on-primary-fixed": "#002c38",
|
||||
"inverse-surface": "#f9f9ff",
|
||||
"secondary-container": "#6e208c",
|
||||
"on-primary-container": "#004253",
|
||||
"on-primary": "#004c5e",
|
||||
"background": "#0b0e14",
|
||||
"on-secondary-container": "#f1bfff",
|
||||
"on-tertiary-container": "#005c3b"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Space Grotesk"],
|
||||
"body": ["Manrope"],
|
||||
"label": ["Manrope"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(34, 38, 47, 0.4);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(115, 117, 125, 0.1);
|
||||
}
|
||||
.neon-glow-primary {
|
||||
box-shadow: 0 0 15px rgba(114, 220, 255, 0.3);
|
||||
}
|
||||
.neon-glow-secondary {
|
||||
box-shadow: 0 0 15px rgba(221, 139, 251, 0.3);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body selection:bg-primary selection:text-on-primary">
|
||||
<!-- Top App Bar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-[#0b0e14]/80 backdrop-blur-xl border-b border-[#45484f]/15 shadow-[0_8px_32px_rgba(114,220,255,0.06)] flex items-center justify-between px-6 h-16 w-full">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-[#72dcff] active:scale-95 duration-200 cursor-pointer">arrow_back</span>
|
||||
<h1 class="font-['Space_Grotesk'] uppercase tracking-widest text-sm text-[#72dcff] font-bold">SECURITY VAULT</h1>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-[#a9abb3] hover:text-[#dd8bfb] transition-colors cursor-pointer active:scale-95 duration-200">settings_heart</span>
|
||||
</header>
|
||||
<main class="pt-24 pb-32 px-6 max-w-2xl mx-auto space-y-8">
|
||||
<!-- Hero Profile Section -->
|
||||
<section class="relative flex flex-col items-center py-8">
|
||||
<div class="relative">
|
||||
<div class="absolute -inset-1 rounded-full bg-gradient-to-tr from-primary via-secondary to-tertiary blur opacity-40 animate-pulse"></div>
|
||||
<div class="relative p-1 rounded-full bg-surface-container-high border-2 border-primary/30">
|
||||
<img alt="User avatar" class="w-24 h-24 rounded-full" data-alt="Cybernetic male avatar with neon accents" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPG8f6cGBm3xqBjBuY5sw1RCGSiKxDN-IA5wDo1H-30SIcg3e_FI82VsXAPOCouYTDqCWtM5El4DHJQYERfUQ1BtK8NTS6d6rlWVoqc79DhsJfWVk2a2nyVz8jWrV04eJOqjk0FTs8u-c1GkLlxIEdvGENmCPmBElvN8A8uH6w1XAK-YslVWz0wLFwjwYRcWIiCr4Jat5I0_O2aLNukB431cRZWTEk79BvSuC2XMILEhpi11ch1744m5x49WQR-tQn4_zPtdZb2N8"/>
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 bg-tertiary text-on-tertiary rounded-full p-1 border-2 border-background shadow-lg">
|
||||
<span class="material-symbols-outlined text-xs font-bold" style="font-variation-settings: 'FILL' 1;">verified</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 text-center">
|
||||
<h2 class="font-headline text-3xl font-bold tracking-tight text-on-surface">sion321</h2>
|
||||
<div class="mt-2 inline-flex items-center px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-[10px] font-black uppercase tracking-[0.2em] font-headline">
|
||||
Normal User
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Stats Bento Grid -->
|
||||
<section class="grid grid-cols-2 gap-4">
|
||||
<div class="glass-card p-4 rounded-xl flex flex-col gap-1">
|
||||
<span class="text-on-surface-variant font-headline text-[10px] uppercase tracking-wider">Level Status</span>
|
||||
<span class="text-xl font-bold font-headline text-primary">TIER_01</span>
|
||||
</div>
|
||||
<div class="glass-card p-4 rounded-xl flex flex-col gap-1">
|
||||
<span class="text-on-surface-variant font-headline text-[10px] uppercase tracking-wider">Node Uptime</span>
|
||||
<span class="text-xl font-bold font-headline text-secondary">99.8%</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- List Content Section -->
|
||||
<section class="space-y-3">
|
||||
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 group-hover:border-primary/50 transition-colors">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">fingerprint</span>
|
||||
</div>
|
||||
<span class="font-headline text-lg font-medium">Real-name verification</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
|
||||
</div>
|
||||
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-xl bg-secondary/10 flex items-center justify-center text-secondary border border-secondary/20 group-hover:border-secondary/50 transition-colors">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">security</span>
|
||||
</div>
|
||||
<span class="font-headline text-lg font-medium">Security settings</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
|
||||
</div>
|
||||
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-xl bg-tertiary/10 flex items-center justify-center text-tertiary border border-tertiary/20 group-hover:border-tertiary/50 transition-colors">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">notifications_active</span>
|
||||
</div>
|
||||
<span class="font-headline text-lg font-medium">Message notification</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="bg-error text-on-error text-[10px] font-bold px-2 py-0.5 rounded-full">3</span>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20 group-hover:border-primary/50 transition-colors">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">manufacturing</span>
|
||||
</div>
|
||||
<span class="font-headline text-lg font-medium">System settings</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
|
||||
</div>
|
||||
<div class="group flex items-center justify-between p-4 glass-card rounded-2xl cursor-pointer hover:bg-surface-variant transition-all active:scale-[0.98]">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-xl bg-on-surface-variant/10 flex items-center justify-center text-on-surface-variant border border-on-surface-variant/20 group-hover:border-on-surface-variant/50 transition-colors">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">info</span>
|
||||
</div>
|
||||
<span class="font-headline text-lg font-medium">About us</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Exit Action -->
|
||||
<section class="pt-8">
|
||||
<button class="w-full h-16 rounded-2xl bg-gradient-to-r from-error-dim to-error text-on-error font-headline font-black text-lg uppercase tracking-widest shadow-[0_12px_24px_-8px_rgba(255,113,108,0.4)] active:scale-95 transition-transform flex items-center justify-center gap-3">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">logout</span>
|
||||
Logout Terminal
|
||||
</button>
|
||||
<p class="text-center mt-6 text-on-surface-variant text-[10px] font-headline uppercase tracking-[0.3em] opacity-40">System Build v2.4.9-Neo</p>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 pb-6 pt-3 bg-[#10131a]/90 backdrop-blur-2xl border-t border-[#45484f]/10 shadow-[0_-10px_40px_rgba(0,0,0,0.5)] z-50 rounded-t-[2rem]">
|
||||
<div class="flex flex-col items-center justify-center text-[#a9abb3] opacity-60 px-5 py-2 hover:opacity-100 hover:text-[#dd8bfb] active:translate-y-1 transition-all">
|
||||
<span class="material-symbols-outlined">account_balance_wallet</span>
|
||||
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Vault</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#a9abb3] opacity-60 px-5 py-2 hover:opacity-100 hover:text-[#dd8bfb] active:translate-y-1 transition-all">
|
||||
<span class="material-symbols-outlined">swap_calls</span>
|
||||
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Trade</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#a9abb3] opacity-60 px-5 py-2 hover:opacity-100 hover:text-[#dd8bfb] active:translate-y-1 transition-all">
|
||||
<span class="material-symbols-outlined">insights</span>
|
||||
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Analysis</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#72dcff] bg-[#72dcff]/10 rounded-2xl px-5 py-2 active:translate-y-1 transition-all">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">person_2</span>
|
||||
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-wider">Profile</span>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
198
页面样式/提现弹窗.txt
198
页面样式/提现弹窗.txt
@@ -1,198 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>The Kinetic Vault - Withdraw</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"on-secondary-fixed": "#580078",
|
||||
"outline-variant": "#45484f",
|
||||
"primary": "#72dcff",
|
||||
"secondary-fixed": "#f2c1ff",
|
||||
"on-primary-fixed": "#002c38",
|
||||
"error-dim": "#d7383b",
|
||||
"on-tertiary-fixed": "#00472d",
|
||||
"secondary": "#dd8bfb",
|
||||
"surface-container-low": "#10131a",
|
||||
"tertiary-fixed-dim": "#00efa0",
|
||||
"on-secondary-container": "#f1bfff",
|
||||
"inverse-surface": "#f9f9ff",
|
||||
"outline": "#73757d",
|
||||
"surface-bright": "#282c36",
|
||||
"surface": "#0b0e14",
|
||||
"on-error": "#490006",
|
||||
"on-secondary-fixed-variant": "#792c97",
|
||||
"background": "#0b0e14",
|
||||
"secondary-container": "#6e208c",
|
||||
"primary-dim": "#00c3ed",
|
||||
"on-tertiary-fixed-variant": "#006742",
|
||||
"tertiary": "#afffd1",
|
||||
"surface-dim": "#0b0e14",
|
||||
"on-background": "#ecedf6",
|
||||
"on-tertiary": "#006642",
|
||||
"on-tertiary-container": "#005c3b",
|
||||
"surface-container-high": "#1c2028",
|
||||
"on-primary-fixed-variant": "#004c5e",
|
||||
"tertiary-dim": "#00efa0",
|
||||
"on-surface": "#ecedf6",
|
||||
"surface-container-highest": "#22262f",
|
||||
"on-surface-variant": "#a9abb3",
|
||||
"surface-tint": "#72dcff",
|
||||
"inverse-on-surface": "#52555c",
|
||||
"on-primary-container": "#004253",
|
||||
"surface-container-lowest": "#000000",
|
||||
"inverse-primary": "#00687f",
|
||||
"primary-container": "#00d2ff",
|
||||
"primary-fixed": "#00d2ff",
|
||||
"tertiary-fixed": "#00ffab",
|
||||
"tertiary-container": "#00ffab",
|
||||
"error-container": "#9f0519",
|
||||
"secondary-fixed-dim": "#ebadff",
|
||||
"on-error-container": "#ffa8a3",
|
||||
"surface-container": "#161a21",
|
||||
"primary-fixed-dim": "#00c3ed",
|
||||
"on-secondary": "#4c0068",
|
||||
"secondary-dim": "#ce7eec",
|
||||
"surface-variant": "#22262f",
|
||||
"error": "#ff716c",
|
||||
"on-primary": "#004c5e"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Space Grotesk"],
|
||||
"body": ["Manrope"],
|
||||
"label": ["Manrope"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.glass-panel {
|
||||
background: rgba(40, 44, 54, 0.4);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background font-body min-h-screen">
|
||||
<!-- Background UI Mockup (Simulating the Dashboard behind the modal) -->
|
||||
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 w-full bg-[#282c36]/40 backdrop-blur-xl shadow-[0_32px_64px_-15px_rgba(114,220,255,0.06)]">
|
||||
<div class="text-[#72dcff] font-['Space_Grotesk'] font-black tracking-tight">The Kinetic Vault</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">search</span>
|
||||
<div class="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center overflow-hidden">
|
||||
<img alt="User Profile" data-alt="Abstract digital user avatar with neon accents" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCfG29jWuVFA3FmcjV2VjJQMfdoXUZsgAoHuGoiML-yDi-UOtdh4uDx9tuTvaBiPbNANr8ZKlsnplL3se3oEpbzn1cGzqxYz8RX75r_QKaJxWUwxBI4ctbL3uCHyuyfc0pideVjfu9tiCh4KSDPqktP7JOfhg2tCR-3vsKABYKdVuHM-9_Ipm1c2TBzP88o4fOG0TAdiuufOnJSW-2wBeOVu9Gc3XKFGDwZtSrCo6M6PkfOW4iELgX22l_zN-MF-m9D6BPominfK0g"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-20 px-6 space-y-8 opacity-40 select-none pointer-events-none">
|
||||
<section>
|
||||
<p class="font-headline text-on-surface-variant text-sm tracking-widest uppercase">Portfolio Value</p>
|
||||
<h1 class="font-headline text-6xl font-bold tracking-tighter text-on-surface">$124,592.00</h1>
|
||||
</section>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-surface-container-high rounded-xl p-6 h-32 flex flex-col justify-between">
|
||||
<span class="text-on-surface-variant text-xs">BTC / USDT</span>
|
||||
<span class="text-2xl font-headline font-bold text-tertiary">+4.28%</span>
|
||||
</div>
|
||||
<div class="bg-surface-container-high rounded-xl p-6 h-32 flex flex-col justify-between">
|
||||
<span class="text-on-surface-variant text-xs">ETH / USDT</span>
|
||||
<span class="text-2xl font-headline font-bold text-error">-1.12%</span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Withdraw Modal Overlay -->
|
||||
<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-md p-4">
|
||||
<!-- Modal Card -->
|
||||
<div class="glass-panel w-full max-w-md rounded-[2rem] p-8 shadow-[0_32px_64px_-15px_rgba(114,220,255,0.1)] border border-outline-variant/15 flex flex-col gap-8">
|
||||
<!-- Header Section -->
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">account_balance_wallet</span>
|
||||
</div>
|
||||
<h2 class="font-headline text-2xl font-bold tracking-tight text-on-surface">提现 (Withdraw)</h2>
|
||||
</div>
|
||||
<p class="text-on-surface-variant text-sm">Securely transfer your assets to an external wallet address.</p>
|
||||
</div>
|
||||
<!-- Form Fields -->
|
||||
<div class="space-y-5">
|
||||
<!-- Amount Field -->
|
||||
<div class="space-y-2">
|
||||
<label class="font-headline text-xs font-bold text-on-surface-variant tracking-wider uppercase ml-1">Withdrawal Amount</label>
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
|
||||
<span class="text-primary text-sm font-bold">USDT</span>
|
||||
</div>
|
||||
<input class="w-full bg-surface-container-lowest border border-outline-variant/30 rounded-xl py-4 pl-16 pr-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-0 focus:border-primary transition-all font-body text-sm" placeholder="Enter withdrawal amount (USDT)" type="number"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Address Field -->
|
||||
<div class="space-y-2">
|
||||
<label class="font-headline text-xs font-bold text-on-surface-variant tracking-wider uppercase ml-1">Destination Address</label>
|
||||
<div class="relative group">
|
||||
<input class="w-full bg-surface-container-lowest border border-outline-variant/30 rounded-xl py-4 px-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-0 focus:border-primary transition-all font-body text-sm" placeholder="Enter withdrawal address" type="text"/>
|
||||
<div class="absolute inset-y-0 right-4 flex items-center pointer-events-none">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-lg">qr_code_scanner</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contact Field -->
|
||||
<div class="space-y-2">
|
||||
<label class="font-headline text-xs font-bold text-on-surface-variant tracking-wider uppercase ml-1">Contact Info</label>
|
||||
<input class="w-full bg-surface-container-lowest border border-outline-variant/30 rounded-xl py-4 px-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-0 focus:border-primary transition-all font-body text-sm" placeholder="Contact info (optional)" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex flex-col gap-3 pt-2">
|
||||
<button class="w-full bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed font-headline font-bold py-4 rounded-2xl shadow-[0_0_20px_rgba(114,220,255,0.3)] hover:opacity-90 active:scale-[0.98] transition-all">
|
||||
确认 (Confirm)
|
||||
</button>
|
||||
<button class="w-full border border-outline-variant/30 text-on-surface-variant font-headline font-bold py-4 rounded-2xl hover:bg-surface-variant/20 active:scale-[0.98] transition-all">
|
||||
取消 (Cancel)
|
||||
</button>
|
||||
</div>
|
||||
<!-- Security Footer -->
|
||||
<div class="flex items-center justify-center gap-2 opacity-50">
|
||||
<span class="material-symbols-outlined text-[14px]">verified_user</span>
|
||||
<span class="text-[10px] font-label uppercase tracking-widest">End-to-End Encrypted Transaction</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom Nav Bar (Supressed but defined in shell) -->
|
||||
<nav class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-2 bg-[#10131a]/80 backdrop-blur-lg rounded-t-[2rem] border-t border-[#45484f]/15 opacity-30 select-none pointer-events-none">
|
||||
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
|
||||
<span class="material-symbols-outlined">home</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
|
||||
<span class="material-symbols-outlined">insert_chart</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center bg-[#72dcff]/10 text-[#72dcff] rounded-2xl p-3 shadow-[0_0_15px_rgba(114,220,255,0.3)]">
|
||||
<span class="material-symbols-outlined">swap_horiz</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
|
||||
<span class="material-symbols-outlined">account_balance_wallet</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#a9abb3] p-3">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
296
页面样式/行情.txt
296
页面样式/行情.txt
@@ -1,296 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="dark" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"surface": "#0b0e14",
|
||||
"secondary-fixed-dim": "#ebadff",
|
||||
"tertiary": "#afffd1",
|
||||
"background": "#0b0e14",
|
||||
"inverse-on-surface": "#52555c",
|
||||
"on-primary": "#004c5e",
|
||||
"surface-container-lowest": "#000000",
|
||||
"on-tertiary-container": "#005c3b",
|
||||
"surface-container": "#161a21",
|
||||
"on-surface": "#ecedf6",
|
||||
"secondary": "#dd8bfb",
|
||||
"secondary-container": "#6e208c",
|
||||
"surface-variant": "#22262f",
|
||||
"primary-fixed-dim": "#00c3ed",
|
||||
"on-primary-container": "#004253",
|
||||
"inverse-primary": "#00687f",
|
||||
"on-tertiary": "#006642",
|
||||
"surface-container-high": "#1c2028",
|
||||
"on-primary-fixed-variant": "#004c5e",
|
||||
"tertiary-fixed": "#00ffab",
|
||||
"tertiary-container": "#00ffab",
|
||||
"on-secondary-fixed-variant": "#792c97",
|
||||
"error-dim": "#d7383b",
|
||||
"primary": "#72dcff",
|
||||
"error": "#ff716c",
|
||||
"on-secondary": "#4c0068",
|
||||
"surface-tint": "#72dcff",
|
||||
"on-tertiary-fixed": "#00472d",
|
||||
"on-secondary-fixed": "#580078",
|
||||
"inverse-surface": "#f9f9ff",
|
||||
"secondary-fixed": "#f2c1ff",
|
||||
"primary-fixed": "#00d2ff",
|
||||
"surface-container-highest": "#22262f",
|
||||
"on-secondary-container": "#f1bfff",
|
||||
"outline": "#73757d",
|
||||
"on-error-container": "#ffa8a3",
|
||||
"on-error": "#490006",
|
||||
"surface-bright": "#282c36",
|
||||
"primary-dim": "#00c3ed",
|
||||
"outline-variant": "#45484f",
|
||||
"surface-container-low": "#10131a",
|
||||
"on-primary-fixed": "#002c38",
|
||||
"surface-dim": "#0b0e14",
|
||||
"on-surface-variant": "#a9abb3",
|
||||
"tertiary-dim": "#00efa0",
|
||||
"on-tertiary-fixed-variant": "#006742",
|
||||
"primary-container": "#00d2ff",
|
||||
"on-background": "#ecedf6",
|
||||
"error-container": "#9f0519",
|
||||
"tertiary-fixed-dim": "#00efa0",
|
||||
"secondary-dim": "#ce7eec"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Space Grotesk"],
|
||||
"body": ["Manrope"],
|
||||
"label": ["Manrope"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.glass-card {
|
||||
background: rgba(34, 38, 47, 0.4);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(69, 72, 79, 0.15);
|
||||
}
|
||||
.neon-glow-blue {
|
||||
box-shadow: 0 0 15px rgba(114, 220, 255, 0.3);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body selection:bg-primary/30 selection:text-primary min-h-screen">
|
||||
<!-- TopAppBar -->
|
||||
<header class="bg-[#0b0e14] fixed top-0 w-full z-50 shadow-[0_8px_32px_rgba(114,220,255,0.06)]">
|
||||
<div class="flex items-center justify-between px-6 h-16 w-full">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-[#72dcff] active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
<h1 class="text-2xl font-black text-[#72dcff] uppercase tracking-tighter font-['Space_Grotesk']">CyberPulse</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-[#72dcff] hover:text-[#dd8bfb] transition-colors duration-300 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined">search</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-20 pb-24 px-4 max-w-2xl mx-auto">
|
||||
<!-- Search & Filter Section -->
|
||||
<section class="mb-8 space-y-6">
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-y-0 left-4 flex items-center pointer-events-none text-on-surface-variant group-focus-within:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-xl">search</span>
|
||||
</div>
|
||||
<input class="w-full bg-surface-container-lowest border-none focus:ring-1 focus:ring-primary rounded-xl py-4 pl-12 pr-4 text-on-surface placeholder:text-on-surface-variant font-medium transition-all" placeholder="Search markets..." type="text"/>
|
||||
</div>
|
||||
<!-- Category Tabs -->
|
||||
<div class="flex items-center gap-2 overflow-x-auto no-scrollbar pb-2">
|
||||
<button class="px-6 py-2.5 rounded-full bg-primary/10 text-primary font-bold text-sm tracking-wide whitespace-nowrap neon-glow-blue border border-primary/20">
|
||||
All
|
||||
</button>
|
||||
<button class="px-6 py-2.5 rounded-full bg-surface-container-high text-on-surface-variant font-bold text-sm tracking-wide whitespace-nowrap hover:text-on-surface transition-colors">
|
||||
Real-time
|
||||
</button>
|
||||
<button class="px-6 py-2.5 rounded-full bg-surface-container-high text-on-surface-variant font-bold text-sm tracking-wide whitespace-nowrap hover:text-on-surface transition-colors">
|
||||
Hot
|
||||
</button>
|
||||
<button class="px-6 py-2.5 rounded-full bg-surface-container-high text-on-surface-variant font-bold text-sm tracking-wide whitespace-nowrap hover:text-on-surface transition-colors">
|
||||
Favorites
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Market List -->
|
||||
<section class="space-y-3">
|
||||
<div class="flex justify-between px-4 mb-2 text-xs font-bold uppercase tracking-widest text-on-surface-variant">
|
||||
<span>Trading Pair</span>
|
||||
<div class="flex gap-12">
|
||||
<span>Price</span>
|
||||
<span>24h Change</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- BTC Row -->
|
||||
<div class="glass-card p-4 rounded-xl flex items-center justify-between group hover:bg-surface-variant/60 transition-all cursor-pointer">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20">
|
||||
<img alt="Bitcoin Icon" class="hidden" src="https://lh3.googleusercontent.com/aida-public/AB6AXuApVuPkjAQNdllrEfZFEHmaQw_kpu4_ssXwAmA9wdRljaKU5_uc1JSuSROch2xE6pzAXhAtD8NOQ98CUiHlPpME126eC_II2KBsTeVn-0SeXTJcyw5I2aqQrVZQd48WA842NaucTOxEWdORbQzrdyOoUgBAf0biMAaZ5bqPk_pcdFrD5-Z9mDubPtZ38zGBAqew1Fniw8zSW_Xg06Zu65gHGPn-SjPJAcD4v9JAjc4FTfNsXxRt4JE4-SWI4O3BWy-LS1L1J0YVhRk"/>
|
||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">currency_bitcoin</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-1">
|
||||
<h3 class="font-headline font-bold text-lg">BTC</h3>
|
||||
<span class="text-xs text-on-surface-variant">/USDT</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant font-medium">Bitcoin</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="text-right">
|
||||
<p class="font-headline font-bold text-base">64,231.50</p>
|
||||
<p class="text-[10px] text-on-surface-variant">≈ $64,231.50</p>
|
||||
</div>
|
||||
<div class="bg-tertiary/10 text-tertiary px-3 py-1.5 rounded-lg border border-tertiary/20 min-w-[72px] text-center">
|
||||
<span class="text-xs font-black tracking-tighter">+2.45%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ETH Row -->
|
||||
<div class="glass-card p-4 rounded-xl flex items-center justify-between group hover:bg-surface-variant/60 transition-all cursor-pointer">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20">
|
||||
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">diamond</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-1">
|
||||
<h3 class="font-headline font-bold text-lg">ETH</h3>
|
||||
<span class="text-xs text-on-surface-variant">/USDT</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant font-medium">Ethereum</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="text-right">
|
||||
<p class="font-headline font-bold text-base">3,452.12</p>
|
||||
<p class="text-[10px] text-on-surface-variant">≈ $3,452.12</p>
|
||||
</div>
|
||||
<div class="bg-tertiary/10 text-tertiary px-3 py-1.5 rounded-lg border border-tertiary/20 min-w-[72px] text-center">
|
||||
<span class="text-xs font-black tracking-tighter">+0.89%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- SOL Row -->
|
||||
<div class="glass-card p-4 rounded-xl flex items-center justify-between group hover:bg-surface-variant/60 transition-all cursor-pointer">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20">
|
||||
<span class="material-symbols-outlined text-primary-fixed-dim" style="font-variation-settings: 'FILL' 1;">token</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-1">
|
||||
<h3 class="font-headline font-bold text-lg">SOL</h3>
|
||||
<span class="text-xs text-on-surface-variant">/USDT</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant font-medium">Solana</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="text-right">
|
||||
<p class="font-headline font-bold text-base">143.88</p>
|
||||
<p class="text-[10px] text-on-surface-variant">≈ $143.88</p>
|
||||
</div>
|
||||
<div class="bg-error/10 text-error px-3 py-1.5 rounded-lg border border-error/20 min-w-[72px] text-center">
|
||||
<span class="text-xs font-black tracking-tighter">-1.12%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ARB Row -->
|
||||
<div class="glass-card p-4 rounded-xl flex items-center justify-between group hover:bg-surface-variant/60 transition-all cursor-pointer">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20">
|
||||
<span class="material-symbols-outlined text-secondary-fixed-dim" style="font-variation-settings: 'FILL' 1;">layers</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-1">
|
||||
<h3 class="font-headline font-bold text-lg">ARB</h3>
|
||||
<span class="text-xs text-on-surface-variant">/USDT</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant font-medium">Arbitrum</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="text-right">
|
||||
<p class="font-headline font-bold text-base">1.043</p>
|
||||
<p class="text-[10px] text-on-surface-variant">≈ $1.04</p>
|
||||
</div>
|
||||
<div class="bg-tertiary/10 text-tertiary px-3 py-1.5 rounded-lg border border-tertiary/20 min-w-[72px] text-center">
|
||||
<span class="text-xs font-black tracking-tighter">+5.67%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- PEPE Row -->
|
||||
<div class="glass-card p-4 rounded-xl flex items-center justify-between group hover:bg-surface-variant/60 transition-all cursor-pointer">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-full bg-surface-container-highest flex items-center justify-center border border-outline-variant/20">
|
||||
<span class="material-symbols-outlined text-tertiary-dim" style="font-variation-settings: 'FILL' 1;">face</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-1">
|
||||
<h3 class="font-headline font-bold text-lg">PEPE</h3>
|
||||
<span class="text-xs text-on-surface-variant">/USDT</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-surface-variant font-medium">Pepe Coin</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="text-right">
|
||||
<p class="font-headline font-bold text-base">0.000012</p>
|
||||
<p class="text-[10px] text-on-surface-variant">≈ $0.000012</p>
|
||||
</div>
|
||||
<div class="bg-tertiary/10 text-tertiary px-3 py-1.5 rounded-lg border border-tertiary/20 min-w-[72px] text-center">
|
||||
<span class="text-xs font-black tracking-tighter">+12.4%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Floating Action Button for Trade -->
|
||||
<div class="fixed bottom-24 right-6">
|
||||
<button class="w-14 h-14 rounded-2xl bg-gradient-to-br from-primary to-primary-container flex items-center justify-center shadow-lg shadow-primary/20 active:scale-90 transition-all group">
|
||||
<span class="material-symbols-outlined text-on-primary-fixed text-3xl group-hover:rotate-180 transition-transform duration-500">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 h-20 pb-safe bg-[#0b0e14]/80 backdrop-blur-xl z-50 rounded-t-[2rem] shadow-[0_-8px_32px_rgba(0,0,0,0.5)] border-t border-[#45484f]/15">
|
||||
<div class="flex flex-col items-center justify-center text-[#72dcff] bg-[#72dcff]/10 rounded-xl px-4 py-1 active:scale-90 transition-all duration-200">
|
||||
<span class="material-symbols-outlined">equalizer</span>
|
||||
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-widest mt-0.5">Market</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb] active:scale-90 transition-all duration-200">
|
||||
<span class="material-symbols-outlined">swap_horiz</span>
|
||||
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-widest mt-0.5">Trade</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb] active:scale-90 transition-all duration-200">
|
||||
<span class="material-symbols-outlined">account_balance_wallet</span>
|
||||
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-widest mt-0.5">Wallet</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#a9abb3] hover:text-[#dd8bfb] active:scale-90 transition-all duration-200">
|
||||
<span class="material-symbols-outlined">article</span>
|
||||
<span class="font-['Manrope'] text-[10px] font-bold uppercase tracking-widest mt-0.5">News</span>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user