Update from GitHub Actions

.cnb.yml

@@ -0,0 +1,10 @@
+main:
+  push:
+    - docker:
+        image: node:18
+      imports: https://cnb.cool/godgodgame/oci-private-key/-/blob/main/envs.yml
+      stages:
+        - name: 环境检查
+          script: echo $GITHUB_TOKEN_GK && echo $GITHUB_TOKEN && node -v && npm -v
+        - name: 将master分支同步更新到github的master分支
+          script: git push https://$GITHUB_TOKEN_GK:[email protected]/zhezzma/git-proxy.git HEAD:main

.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.yml]
+indent_style = space

.prettierrc

@@ -0,0 +1,6 @@
+{
+	"printWidth": 140,
+	"singleQuote": true,
+	"semi": true,
+	"useTabs": true
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+	"files.associations": {
+		"wrangler.json": "jsonc"
+	}
+}

Dockerfile

@@ -0,0 +1,59 @@
+# 基础镜像：使用 Node.js 20 的 Alpine Linux 版本
+FROM node:20-alpine
+
+# 设置工作目录
+WORKDIR /app
+
+# 安装系统依赖
+RUN apk add --no-cache \
+    # 基本构建工具
+    python3 \
+    make \
+    g++ \
+    # Playwright 依赖
+    chromium \
+    nss \
+    freetype \
+    freetype-dev \
+    harfbuzz \
+    ca-certificates \
+    ttf-freefont \
+    # 其他依赖
+    gcompat
+
+# 设置 Playwright 的环境变量
+ENV PLAYWRIGHT_BROWSERS_PATH=/usr/bin
+ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
+ENV PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH=/usr/bin/chromium-browser
+ENV PLAYWRIGHT_SKIP_BROWSER_VALIDATION=1
+
+# 复制依赖文件并安装
+COPY package*.json  ./
+COPY tsconfig*.json ./
+COPY vite.config.ts ./
+COPY index.html ./
+COPY index.ts ./
+COPY src/ ./src/
+COPY public/ ./public/
+COPY functions/ ./functions/
+
+
+RUN npm install
+RUN npm run build:server
+
+# 创建非 root 用户和用户组
+RUN addgroup -S -g 1001 nodejs && \
+    adduser -S -D -H -u 1001 -G nodejs hono
+
+# 设置应用文件的所有权
+RUN chown -R hono:nodejs /app
+
+# 切换到非 root 用户
+USER hono
+
+# 声明容器要暴露的端口
+EXPOSE 7860
+ENV PORT=7860
+
+# 启动应用
+CMD ["node", "dist-server/index.js"]

auto-imports.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}

components.d.ts

@@ -0,0 +1,44 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    MonacoEditor: typeof import('./src/components/MonacoEditor.vue')['default']
+    RepoHeader: typeof import('./src/components/RepoHeader.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    TAside: typeof import('tdesign-vue-next')['Aside']
+    TBreadcrumb: typeof import('tdesign-vue-next')['Breadcrumb']
+    TBreadcrumbItem: typeof import('tdesign-vue-next')['BreadcrumbItem']
+    TButton: typeof import('tdesign-vue-next')['Button']
+    TCard: typeof import('tdesign-vue-next')['Card']
+    TCheckbox: typeof import('tdesign-vue-next')['Checkbox']
+    TContent: typeof import('tdesign-vue-next')['Content']
+    TDialog: typeof import('tdesign-vue-next')['Dialog']
+    TDivider: typeof import('tdesign-vue-next')['Divider']
+    TDrawer: typeof import('tdesign-vue-next')['Drawer']
+    TDropdown: typeof import('tdesign-vue-next')['Dropdown']
+    TFooter: typeof import('tdesign-vue-next')['Footer']
+    TForm: typeof import('tdesign-vue-next')['Form']
+    TFormItem: typeof import('tdesign-vue-next')['FormItem']
+    THeader: typeof import('tdesign-vue-next')['Header']
+    TIcon: typeof import('tdesign-vue-next')['Icon']
+    TInput: typeof import('tdesign-vue-next')['Input']
+    TLayout: typeof import('tdesign-vue-next')['Layout']
+    TList: typeof import('tdesign-vue-next')['List']
+    TListItem: typeof import('tdesign-vue-next')['ListItem']
+    TLoading: typeof import('tdesign-vue-next')['Loading']
+    TMenu: typeof import('tdesign-vue-next')['Menu']
+    TMenuItem: typeof import('tdesign-vue-next')['MenuItem']
+    TOption: typeof import('tdesign-vue-next')['Option']
+    TPagination: typeof import('tdesign-vue-next')['Pagination']
+    TSelect: typeof import('tdesign-vue-next')['Select']
+    TTable: typeof import('tdesign-vue-next')['Table']
+    TTextarea: typeof import('tdesign-vue-next')['Textarea']
+  }
+}

functions/api/_middleware.ts

@@ -0,0 +1,57 @@
+
+
+/**
+ * CORS 相关的响应头配置
+ */
+export const CORS_HEADERS = {
+    'Access-Control-Allow-Origin': '*',  // 允许所有来源
+    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',  // 允许的HTTP方法
+    'Access-Control-Allow-Headers': 'Content-Type, Authorization, X-Requested-With',  // 允许的请求头
+    'Access-Control-Max-Age': '86400',  // 预检请求的有效期
+};
+
+/**
+ * 处理 OPTIONS 预检请求
+ */
+export function handleOptions(): Response {
+    return new Response(null, {
+        status: 204,
+        headers: CORS_HEADERS
+    });
+}
+
+/**
+ * 为响应添加 CORS 头
+ * @param response 原始响应对象
+ * @returns 添加了 CORS 头的新响应对象
+ */
+export function addCorsHeaders(response: Response): Response {
+    const newHeaders = new Headers(response.headers);
+    Object.entries(CORS_HEADERS).forEach(([key, value]) => {
+        newHeaders.set(key, value);
+    });
+
+    return new Response(response.body, {
+        status: response.status,
+        statusText: response.statusText,
+        headers: newHeaders
+    });
+}
+
+
+//cloundflare functions的中间件，处理跨域请求
+export async function onRequest(context: any) {
+    // 处理预检请求
+    if (context.request.method === "OPTIONS") {
+        return handleOptions();
+    }
+    try {
+        const response = await context.next();
+        return addCorsHeaders(response);
+    } catch (err: any) {
+        return new Response(`${err.message}\n${err.stack}`, {
+            status: 500,
+            headers: CORS_HEADERS
+        });
+    }
+}

functions/api/account.ts

@@ -0,0 +1,58 @@
+import { authMiddleware } from "../utils/auth.js";
+
+
+export const onRequest = async (context: RouteContext): Promise<Response> => {
+    const request = context.request;
+    const env = context.env as Env;
+
+    const authResponse = await authMiddleware(request, env);
+    if (authResponse) {
+        return authResponse;
+    }
+
+    const KV_KEY = "accounts"
+
+    try {
+        // GET 请求处理
+        if (request.method === 'GET') {
+            const accounts = await env.KV.get(KV_KEY);
+            return new Response(accounts || '[]', {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+        // POST 请求处理
+        if (request.method === 'POST') {
+            const data = await request.json();
+
+            // 验证数据格式
+            if (!Array.isArray(data)) {
+                return new Response(JSON.stringify({ error: '无效的数据格式' }), {
+                    status: 400,
+                    headers: { 'Content-Type': 'application/json' }
+                });
+            }
+
+            // 存储账号数据
+            await env.KV.put(KV_KEY, JSON.stringify(data));
+
+            return new Response(JSON.stringify({ message: '保存成功' }), {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+        // 不支持的请求方法
+        return new Response(JSON.stringify({ error: '不支持的请求方法' }), {
+            status: 405,
+            headers: { 'Content-Type': 'application/json' }
+        });
+
+    } catch (error) {
+        return new Response(JSON.stringify({ error: '服务器内部错误' }), {
+            status: 500,
+            headers: { 'Content-Type': 'application/json' }
+        });
+    }
+};

functions/api/github/[[path]].ts

@@ -0,0 +1,206 @@
+//https://docs.github.com/en/rest/repos/contents
+export const onRequest = async (context: RouteContext): Promise<Response> => {
+    const request = context.request;
+    const env = context.env as Env;
+
+    // 从 Authorization header 中获取 token
+    const authHeader = request.headers.get('Authorization');
+    if (!authHeader || (!authHeader.startsWith('Bearer ') && !authHeader.startsWith('token '))) {
+        return new Response(JSON.stringify({ error: '未提供有效的授权令牌' }), {
+            status: 401,
+            headers: { 'Content-Type': 'application/json' }
+        });
+    }
+    const githubToken = authHeader.startsWith('Bearer ') 
+        ? authHeader.replace('Bearer ', '') 
+        : authHeader.replace('token ', '');
+
+    console.log('Request URL:', request.url);
+    try {
+        const url = new URL(request.url);
+
+        // 提取仓库所有者和仓库名称
+        const pathParts = url.pathname.split('/').filter(Boolean);
+        const owner = pathParts[2] || url.searchParams.get('owner'); // 仓库所有者
+        const repo = pathParts[3] || url.searchParams.get('repo'); // 仓库名称
+        const path = pathParts[4] || url.searchParams.get('path') || ""; // 文件路径 
+        if (!owner || !repo) {
+            return new Response(JSON.stringify({ error: '缺少仓库所有者或仓库名称' }), {
+                status: 400,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+
+        // GitHub API 基础 URL
+        const githubApiBase = 'https://api.github.com';
+        if (request.method === 'GET') {
+            const ref = url.searchParams.get('ref'); // 分支或标签
+            // 获取文件内容或列出目录
+            const githubUrl = `${githubApiBase}/repos/${owner}/${repo}/contents/${path}${ref ? '?ref=' + ref : ''}`;
+            console.log(githubUrl);
+            const response = await fetch(githubUrl, {
+                headers: {
+                    'Authorization': `token ${githubToken}`,
+                    'Accept': 'application/vnd.github.v3+json',
+                    'User-Agent': 'Cloudflare-Worker'
+                }
+            });
+
+            const data = await response.json();
+
+            return new Response(JSON.stringify(data), {
+                status: response.status,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+        if (request.method === 'POST') {
+
+            // 创建新文件
+            const body = await request.json() as any;
+
+            const { content, message, branch } = body;
+
+            if (!path || content === undefined) {
+                return new Response(JSON.stringify({ error: '缺少必要参数: path, content' }), {
+                    status: 400,
+                    headers: { 'Content-Type': 'application/json' }
+                });
+            }
+
+            // Base64 编码内容
+            let encodedContent;
+            try {
+                // 检查内容是否已经是 Base64 编码
+                atob(content);
+                encodedContent = content;
+            } catch (e) {
+                // 如果不是，则编码它
+                encodedContent = btoa(unescape(encodeURIComponent(content)));
+            }
+
+            const githubUrl = `${githubApiBase}/repos/${owner}/${repo}/contents/${path}`;
+
+            const response = await fetch(githubUrl, {
+                method: 'PUT',
+                headers: {
+                    'Authorization': `token ${githubToken}`,
+                    'Accept': 'application/vnd.github.v3+json',
+                    'Content-Type': 'application/json',
+                    'User-Agent': 'Cloudflare-Worker'
+                },
+                body: JSON.stringify({
+                    message: message || `Create file ${path}`,
+                    content: encodedContent,
+                    branch: branch
+                })
+            });
+
+            const data = await response.json();
+
+            return new Response(JSON.stringify(data), {
+                status: response.status,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+        if (request.method === 'PUT') {
+            // 更新现有文件
+
+            const body = await request.json() as any;
+            const { content, message, sha, branch } = body;
+
+            if (!path || content === undefined || !sha) {
+                return new Response(JSON.stringify({ error: '缺少必要参数: path, content, sha' }), {
+                    status: 400,
+                    headers: { 'Content-Type': 'application/json' }
+                });
+            }
+
+            // Base64 编码内容
+            let encodedContent;
+            try {
+                atob(content);
+                encodedContent = content;
+            } catch (e) {
+                encodedContent = btoa(unescape(encodeURIComponent(content)));
+            }
+
+            const githubUrl = `${githubApiBase}/repos/${owner}/${repo}/contents/${path}`;
+
+            const response = await fetch(githubUrl, {
+                method: 'PUT',
+                headers: {
+                    'Authorization': `token ${githubToken}`,
+                    'Accept': 'application/vnd.github.v3+json',
+                    'Content-Type': 'application/json',
+                    'User-Agent': 'Cloudflare-Worker'
+                },
+                body: JSON.stringify({
+                    message: message || `Update file ${path}`,
+                    content: encodedContent,
+                    sha: sha,
+                    branch: branch
+                })
+            });
+
+            const data = await response.json();
+
+            return new Response(JSON.stringify(data), {
+                status: response.status,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+        if (request.method === 'DELETE') {
+
+            const body = await request.json() as any;
+            // 单个文件删除
+            const { message, sha, branch } = body;
+
+            if (!path || !sha) {
+                return new Response(JSON.stringify({ error: '缺少必要参数: path, sha' }), {
+                    status: 400,
+                    headers: { 'Content-Type': 'application/json' }
+                });
+            }
+
+            const githubUrl = `${githubApiBase}/repos/${owner}/${repo}/contents/${path}`;
+
+            const response = await fetch(githubUrl, {
+                method: 'DELETE',
+                headers: {
+                    'Authorization': `token ${githubToken}`,
+                    'Accept': 'application/vnd.github.v3+json',
+                    'Content-Type': 'application/json',
+                    'User-Agent': 'Cloudflare-Worker'
+                },
+                body: JSON.stringify({
+                    message: message || `Delete file ${path}`,
+                    sha: sha,
+                    branch: branch
+                })
+            });
+
+            const data = await response.json();
+
+            return new Response(JSON.stringify(data), {
+                status: response.status,
+                headers: { 'Content-Type': 'application/json' }
+            });
+
+        }
+
+        // 不支持的请求方法
+        return new Response(JSON.stringify({ error: '不支持的请求方法' }), {
+            status: 405,
+            headers: { 'Content-Type': 'application/json' }
+        });
+    } catch (error: any) {
+        return new Response(JSON.stringify({ error: '服务器内部错误', details: error.message }), {
+            status: 500,
+            headers: { 'Content-Type': 'application/json' }
+        });
+    }
+};

functions/api/hf/[[path]].ts

@@ -0,0 +1,119 @@
+
+//没有固定的文档
+//接口是通过查看huggingface.co的请求来实现的
+//有个huggingface hub api
+//https://huggingface.co/docs/huggingface.js/hub/README
+//https://github.com/huggingface/huggingface.js/tree/main/packages/hub
+//https://github.com/huggingface/huggingface.js/blob/main/packages/hub/src/lib/list-files.ts
+//https://github.com/huggingface/huggingface.js/blob/main/packages/hub/src/lib/download-file.ts
+//https://github.com/huggingface/huggingface.js/blob/main/packages/hub/src/lib/commit.ts
+//https://github.com/huggingface/huggingface.js/blob/main/packages/hub/src/lib/delete-files.ts
+export const onRequest = async (context: RouteContext): Promise<Response> => {
+    const request = context.request;
+    const env = context.env as Env;
+
+    // 从 Authorization header 中获取 token
+    const authHeader = request.headers.get('Authorization');
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+        return new Response(JSON.stringify({ error: '未提供有效的授权令牌' }), {
+            status: 401,
+            headers: { 'Content-Type': 'application/json' }
+        });
+    }
+    const hfToken = authHeader.replace('Bearer ', '');
+
+    console.log('Request URL:', request.url);
+    try {
+        const url = new URL(request.url);
+        const pathParts = url.pathname.split('/').filter(Boolean);
+
+        // 提取路径参数
+        const owner = pathParts[2] || url.searchParams.get('owner'); // 仓库所有者
+        const repo = pathParts[3] || url.searchParams.get('repo'); // 仓库名称
+        const operation = pathParts[4] || url.searchParams.get('op'); // 操作类型: raw, upload, tree, delete
+        const ref = pathParts[5] || url.searchParams.get('ref') || 'main';
+
+        if (!owner || !repo) {
+            return new Response(JSON.stringify({ error: '缺少仓库所有者或仓库名称' }), {
+                status: 400,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+        // Hugging Face API 基础 URL
+        const hfApiBaseUrl = 'https://huggingface.co/api/datasets';
+
+        // 处理 GET 请求 - 获取文件内容或列出文件
+
+
+        if (operation === 'raw' && request.method === 'GET') {
+            const path = pathParts.length > 6 ? pathParts.slice(6).join('/') : '';
+            //这里没有错..getraw就是没有api
+            const hfUrl = `https://huggingface.co/datasets/${owner}/${repo}/raw/${ref}/${path}`;
+
+            const response = await fetch(hfUrl, {
+                headers: {
+                    'Authorization': `Bearer ${hfToken}`,
+                    'User-Agent': 'Cloudflare-Worker'
+                }
+            });
+
+            return new Response(await response.text(), {
+                status: response.status,
+                headers: response.headers
+            });
+        }
+
+        if (operation === 'tree' && request.method === 'GET') {
+            const path = pathParts.length > 6 ? pathParts.slice(6).join('/') : '';
+            // 4. 列出文件
+            const hfUrl = `${hfApiBaseUrl}/${owner}/${repo}/tree/${ref}/${path}`;
+
+            const response = await fetch(hfUrl, {
+                headers: {
+                    'Authorization': `Bearer ${hfToken}`,
+                    'User-Agent': 'Cloudflare-Worker'
+                }
+            });
+
+            const data = await response.json();
+            return new Response(JSON.stringify(data), {
+                status: response.status,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+        // 处理 POST 请求 - 上传文件
+        if (operation === 'commit' && (request.method === 'POST' || request.method === 'PUT' || request.method === 'DELETE')) {
+            const hfUrl = `${hfApiBaseUrl}/${owner}/${repo}/commit/${ref}`;
+            const body = await request.json();
+            const response = await fetch(hfUrl, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${hfToken}`,
+                    'Content-Type': 'application/json',
+                    'User-Agent': 'Cloudflare-Worker'
+                },
+                body: JSON.stringify(body)
+            });
+
+            const data = await response.json();
+            return new Response(JSON.stringify(data), {
+                status: response.status,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+
+        // 不支持的请求方法或路径
+        return new Response(JSON.stringify({ error: '不支持的请求方法或路径' }), {
+            status: 400,
+            headers: { 'Content-Type': 'application/json' }
+        });
+    } catch (error: any) {
+        console.error('Error:', error);
+        return new Response(JSON.stringify({ error: '服务器内部错误', details: error.message }), {
+            status: 500,
+            headers: { 'Content-Type': 'application/json' }
+        });
+    }
+};

functions/api/huggingface.ts

@@ -0,0 +1,45 @@
+
+import { authMiddleware } from "../utils/auth.js";
+
+
+export const onRequest = async (context: RouteContext): Promise<Response> => {
+    const request = context.request;
+    const env = context.env as Env;
+
+    const authResponse = await authMiddleware(request, env);
+    if (authResponse) {
+        return authResponse;
+    }
+
+    try {
+
+        if (request.method === 'GET') {
+
+        }
+
+        if (request.method === 'POST') {
+
+        }
+
+        if (request.method === 'PUT') {
+
+        }
+
+        if (request.method === 'DELETE') {
+
+        }
+
+        // 不支持的请求方法
+        return new Response(JSON.stringify({ error: '不支持的请求方法' }), {
+            status: 405,
+            headers: { 'Content-Type': 'application/json' }
+        });
+
+
+    } catch (error) {
+        return new Response(JSON.stringify({ error: '服务器内部错误' }), {
+            status: 500,
+            headers: { 'Content-Type': 'application/json' }
+        });
+    }
+};

functions/api/login.ts

@@ -0,0 +1,42 @@
+import { generateToken } from '../utils/jwt.js';
+
+export const onRequest = async (context: RouteContext): Promise<Response> => {
+    const request = context.request;
+    const env = context.env as Env;
+    try {
+        // 解析登录凭证
+        const credentials = await request.json() as LoginCredentials;
+        // 验证用户名和密码
+        if (credentials.username === env.USER_NAME && credentials.password === env.PASSWORD) {
+            // 生成JWT令牌
+            const token = await generateToken(credentials.username, env.JWT_SECRET);
+            return new Response(
+                JSON.stringify({
+                    success: true,
+                    token,
+                    user: { username: credentials.username }
+                }),
+                {
+                    status: 200,
+                    headers: { 'Content-Type': 'application/json' }
+                }
+            );
+        }
+
+        // 登录失败: 无效的凭证
+        return new Response(
+            JSON.stringify({
+                success: false,
+                error: 'Invalid credentials'
+            }),
+            {
+                status: 401,
+                headers: { 'Content-Type': 'application/json' }
+            }
+        );
+    } catch (error) {
+        // 登录处理失败
+        console.error(`登录处理失败:`, error);
+        throw error;
+    }
+}

functions/api/setting.ts

@@ -0,0 +1,49 @@
+
+import { authMiddleware } from "../utils/auth.js";
+
+export const onRequest = async (context: RouteContext): Promise<Response> => {
+    const request = context.request;
+    const env = context.env as Env;
+
+    const authResponse = await authMiddleware(request, env);
+    if (authResponse) {
+        return authResponse;
+    }
+
+    const KV_KEY = "settings"
+
+    try {
+        // GET 请求处理
+        if (request.method === 'GET') {
+            const settings = await env.KV.get(KV_KEY);
+            return new Response(settings || '{}', {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+        // POST 请求处理
+        if (request.method === 'POST') {
+            const data = await request.json();
+            // 存储账号数据
+            await env.KV.put(KV_KEY, JSON.stringify(data));
+
+            return new Response(JSON.stringify({ message: '保存成功' }), {
+                status: 200,
+                headers: { 'Content-Type': 'application/json' }
+            });
+        }
+
+        // 不支持的请求方法
+        return new Response(JSON.stringify({ error: '不支持的请求方法' }), {
+            status: 405,
+            headers: { 'Content-Type': 'application/json' }
+        });
+
+    } catch (error) {
+        return new Response(JSON.stringify({ error: '服务器内部错误' }), {
+            status: 500,
+            headers: { 'Content-Type': 'application/json' }
+        });
+    }
+};

functions/types.d.ts

@@ -0,0 +1,37 @@
+
+interface KVNamespace {
+  put: (key: string, value: string, options?: { expiration?: number, expirationTtl?: number, metadata?: object }) => Promise<void>;
+  get: (key: string) => Promise<string | null>;
+  delete: (key: string) => Promise<void>;
+}
+
+interface Env {
+  SEND_PASSWORD:string;
+  API_TOKEN: string;    // API 访问令牌
+  JWT_SECRET: string;   // JWT 密钥
+  USER_NAME: string;    // 用户名
+  KV: KVNamespace;
+  ASSETS:any;
+}
+
+/**
+ * 登录凭证接口
+ */
+interface LoginCredentials {
+  /** 用户名 */
+  username: string;
+  /** 密码 */
+  password: string;
+}
+
+
+interface RouteContext {
+  request: Request;
+  functionPath: string;
+  waitUntil: (promise: Promise<any>) => void;
+  passThroughOnException: () => void;
+  next: (input?: Request | string, init?: RequestInit) => Promise<Response>;
+  env: Env;
+  params: any;
+  data: any;
+}

functions/utils/auth.ts

@@ -0,0 +1,41 @@
+import { verifyToken } from './jwt.js';
+
+/**
+ * 认证中间件
+ * @param request 请求对象
+ * @param env 环境变量
+ * @param requestId 请求ID
+ * @returns 如果认证失败返回错误响应，否则返回 null
+ */
+export async function authMiddleware(request: Request, env: Env): Promise<Response | null> {
+    const isValid = await verifyToken(request, env.JWT_SECRET);
+    if (!isValid) {
+        return new Response(
+            JSON.stringify({ error: 'Unauthorized' }),
+            {
+                status: 401,
+                headers: { 'Content-Type': 'application/json' }
+            }
+        );
+    }
+
+    return null;
+}
+
+export async function authApiToken(request: Request, env: Env): Promise<Response | null> {
+    // 验证API令牌
+    const authHeader = request.headers.get('Authorization');
+    if (authHeader !== `Bearer ${env.API_TOKEN}`) {
+        return new Response(
+            JSON.stringify({ error: 'Unauthorized' }),
+            {
+                status: 401,
+                headers: { 'Content-Type': 'application/json' }
+            }
+        );
+    }
+
+    return null;
+}
+
+

functions/utils/jwt.ts

@@ -0,0 +1,87 @@
+/**
+ * 生成 JWT token
+ * @param username 用户名
+ * @param secret 密钥
+ * @returns 生成的 token 字符串
+ */
+export async function generateToken(username: string, secret: string): Promise<string> {
+    // JWT 头部信息
+    const header = { alg: 'HS256', typ: 'JWT' };
+    // JWT 载荷信息
+    const payload = {
+      sub: username,
+      exp: Math.floor(Date.now() / 1000) + (30 * 24 * 60 * 60), //30天后过期
+      iat: Math.floor(Date.now() / 1000) // 签发时间
+    };
+  
+    const encodedHeader = btoa(JSON.stringify(header));
+    const encodedPayload = btoa(JSON.stringify(payload));
+    const signature = await createHmacSignature(
+      `${encodedHeader}.${encodedPayload}`,
+      secret
+    );
+  
+    return `${encodedHeader}.${encodedPayload}.${signature}`;
+  }
+  
+  /**
+   * 验证 JWT token
+   * @param request 请求对象
+   * @param secret 密钥
+   * @returns 验证是否通过
+   */
+  export async function verifyToken(request: Request, secret: string): Promise<boolean> {
+    const authHeader = request.headers.get('Authorization');
+    if (!authHeader?.startsWith('Bearer ')) {
+      return false;
+    }
+  
+    const token = authHeader.split(' ')[1];
+    try {
+      const [headerB64, payloadB64, signatureB64] = token.split('.');
+      const expectedSignature = await createHmacSignature(
+        `${headerB64}.${payloadB64}`,
+        secret
+      );
+  
+      if (signatureB64 !== expectedSignature) {
+        return false;
+      }
+  
+      const payload = JSON.parse(atob(payloadB64));
+      const now = Math.floor(Date.now() / 1000);
+  
+      return payload.exp > now;
+    } catch (error) {
+      console.error('Token verification failed:', error);
+      return false;
+    }
+  }
+  
+  /**
+   * 创建 HMAC 签名
+   * @param message 需要签名的消息
+   * @param secret 密钥
+   * @returns 签名字符串
+   */
+  async function createHmacSignature(message: string, secret: string): Promise<string> {
+    const encoder = new TextEncoder();
+    const keyData = encoder.encode(secret);
+    const messageData = encoder.encode(message);
+  
+    const cryptoKey = await crypto.subtle.importKey(
+      'raw',
+      keyData,
+      { name: 'HMAC', hash: 'SHA-256' },
+      false,
+      ['sign']
+    );
+  
+    const signature = await crypto.subtle.sign(
+      'HMAC',
+      cryptoKey,
+      messageData
+    );
+  
+    return btoa(String.fromCharCode(...new Uint8Array(signature)));
+  }

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>微软邮箱管理平台</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

index.ts

@@ -0,0 +1,165 @@
+import { Context, Hono } from 'hono'
+import * as dotenv from 'dotenv'
+import { cors } from "hono/cors";
+import { compress } from "hono/compress";
+import { prettyJSON } from "hono/pretty-json";
+import { trimTrailingSlash } from "hono/trailing-slash";
+import { serve } from '@hono/node-server'
+import { createStorage } from "unstorage";
+import cloudflareKVHTTPDriver from "unstorage/drivers/cloudflare-kv-http";
+import { serveStatic } from '@hono/node-server/serve-static'
+
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'
+
+// 导入所有路由处理函数
+import { onRequest as handleAccount } from './functions/api/account.js'
+import { onRequest as handleLogin } from './functions/api/login.js'
+import { onRequest as handleSetting } from './functions/api/setting.js'
+
+
+dotenv.config({ path: ['.env', '.env.local'], override: true });
+const isDev = process.env.NODE_ENV === 'development'
+
+const app = new Hono<{ Bindings: Env }>()
+app.use(compress());
+app.use(prettyJSON());
+app.use(trimTrailingSlash());
+app.use('*', cors({
+    origin: '*',
+    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
+    allowHeaders: ['Content-Type', 'Authorization'],
+    exposeHeaders: ['Content-Length'],
+    credentials: true,
+}));
+
+
+const storage = createStorage({
+    driver: cloudflareKVHTTPDriver({
+        accountId: process.env.CLOUDFLARE_ACCOUNT_ID || "",
+        namespaceId: process.env.CLOUDFLARE_NAMESPACE_ID || "",
+        apiToken: process.env.CLOUDFLARE_API_TOKEN || "",
+    }),
+});
+
+var kv: KVNamespace = {
+    get: async (key: string) => {
+        const value = await storage.getItemRaw(key);
+        return value as string;
+    },
+    put: async (key: string, value: string) => {
+        await storage.setItem(key, value);
+    },
+    delete:async(key:string)=>{
+        await storage.removeItem(key);
+    }
+};
+
+app.use('*', async (c, next) => {
+    c.env.KV = kv;
+    await next()
+})
+
+
+const scriptPath = fileURLToPath(import.meta.url)
+const scriptDir = dirname(scriptPath)
+const rootDir = isDev ? dirname(scriptPath) : dirname(scriptDir)
+const currentDir = process.cwd();
+let staticPath = path.relative(currentDir, rootDir);
+if (!isDev) {
+    staticPath = path.relative(currentDir, path.join(rootDir, "dist"))
+}
+console.log('Script dir:', scriptDir)
+console.log('Root dir:', rootDir)
+console.log('Current dir:', currentDir);
+console.log('Relative path for static files:', staticPath || '.');
+
+
+
+const createContext = (c: Context) => {
+    const eventContext: RouteContext = {
+        request: c.req.raw,
+        functionPath: c.req.path,
+        waitUntil: (promise: Promise<any>) => {
+            if (c.executionCtx?.waitUntil) {
+                c.executionCtx.waitUntil(promise);
+            }
+        },
+        passThroughOnException: () => {
+            if (c.executionCtx?.passThroughOnException) {
+                c.executionCtx.passThroughOnException();
+            }
+        },
+        next: async (input?: Request | string, init?: RequestInit) => {
+            if (typeof input === 'string') {
+                return fetch(input, init);
+            } else if (input instanceof Request) {
+                return fetch(input);
+            }
+            return new Response('Not Found', { status: 404 });
+        },
+        env: {
+            ...c.env,
+            ASSETS: {
+                fetch: fetch.bind(globalThis)
+            }
+        },
+        params: c.req.param(),
+        // 可以从 c.get() 获取数据，或者传入空对象
+        data: c.get('data') || {}
+    };
+    return eventContext;
+}
+
+app.all('/api/*', async (c) => {
+    try {
+        const context = createContext(c);
+        const path = c.req.path;
+        // 根据路径匹配对应的处理函数
+        let response: Response;
+        switch (path) {
+            case '/api/account':
+                response = await handleAccount(context);
+                break;
+            case '/api/login':
+                response = await handleLogin(context);
+                break;
+            case '/api/setting':
+                response = await handleSetting(context);
+                break;
+            default:
+                return c.json({ error: 'Route not found' }, 404);
+        }
+        return response;
+    } catch (error) {
+        return c.json({ error: (error as Error).message }, 500);
+    }
+})
+
+
+// 中间件配置
+app.get('/*', serveStatic({
+    root: staticPath,
+    rewriteRequestPath: (path) => {
+        return path === '/' ? '/index.html' : path;
+    },
+    onFound: async (path, c) => {
+        console.log('Found:', path)
+    },
+    onNotFound: async (path, c) => {
+        console.log('Not Found:', path)
+    }
+}))
+
+
+// 启动服务器
+const port = parseInt(process.env.PORT || '8788')
+serve({
+    fetch: (request: Request, env) => app.fetch(request, { ...env, ...process.env }),
+    port
+}, () => {
+    console.log(`Server running at http://localhost:${port}`)
+})
+
+export default app

package.json

@@ -0,0 +1,48 @@
+{
+	"name": "msmail",
+	"version": "0.0.0",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite --host --port 5009",
+		"dev:server": "cross-env NODE_ENV=development tsx watch --no-cache index.ts",
+		"dev:pages": "wrangler pages dev dist",
+		"build": "vue-tsc -b && vite build",
+		"build:server": "npm run build && tsc -p ./tsconfig.functions.json",
+		"preview": "npm run build && wrangler pages dev ./dist",
+		"deploy": "npm run build && wrangler pages deploy ./dist",
+		"test": "vitest",
+		"cf-typegen": "wrangler types"
+	},
+	"dependencies": {
+		"@hono/node-server": "^1.13.8",
+		"@monaco-editor/loader": "^1.5.0",
+		"@tailwindcss/vite": "^4.0.14",
+		"dotenv": "^16.4.7",
+		"hono": "^4.7.4",
+		"monaco-editor": "^0.52.2",
+		"pinia": "^3.0.1",
+		"tailwindcss": "^4.0.14",
+		"tdesign-vue-next": "^1.11.4",
+		"unstorage": "^1.15.0",
+		"vue": "^3.5.13",
+		"vue-router": "^4.5.0"
+	},
+	"devDependencies": {
+		"@cloudflare/vitest-pool-workers": "^0.7.5",
+		"@cloudflare/workers-types": "^4.20250313.0",
+		"@types/node": "^22.10.2",
+		"@vitejs/plugin-vue": "^5.2.1",
+		"@vue/tsconfig": "^0.7.0",
+		"concurrently": "^8.2.2",
+		"cross-env": "^7.0.3",
+		"tsx": "^4.7.1",
+		"typescript": "^5.5.2",
+		"unplugin-auto-import": "^19.0.0",
+		"unplugin-vue-components": "^28.0.0",
+		"vite": "^6.2.0",
+		"vitest": "~3.0.7",
+		"vue-tsc": "^2.2.4",
+		"wrangler": "^4.0.0"
+	}
+}

src/App.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router';
+import { ref } from 'vue';
+import logo from './assets/logo.png'
+const router = useRouter();
+const route = useRoute();
+const menuVisible = ref(false);
+
+const menu = [
+  {
+    name: '仓库',
+    path: '/repo',
+    icon: 'system-log'
+  },
+  {
+    name: '账号',
+    path: '/account',
+    icon: 'user-list'
+  },
+  {
+    name: '设置',
+    path: '/setting',
+    icon: 'setting-1'
+  }
+];
+
+const logout = () => {
+  window.localStorage.removeItem('isAuthenticated');
+  router.push('/login');
+};
+
+const toggleMenu = () => {
+  menuVisible.value = !menuVisible.value;
+};
+
+
+//解析token
+const parseToken = () => {
+  try {
+    const token = localStorage.getItem('token') as string;
+    const [, payload] = token.split('.');
+    const data = JSON.parse(atob(payload));
+    return data;
+  } catch (error) {
+    return null;
+  }
+};
+const jwtToken = parseToken();
+
+</script>
+
+<template>
+  <template v-if="route.path === '/login'">
+    <router-view />
+  </template>
+  <t-layout v-else class="h-screen">
+    <!-- 移动端抽屉菜单 -->
+    <t-drawer v-model:visible="menuVisible" placement="left" size="232" :footer="false" :header="false"
+      :close-on-overlay-click="true" class="lg:hidden">
+      <t-menu :value="route.path" theme="dark" class="h-full bg-transparent ">
+        <template #logo>
+          <router-link to="/" class="flex items-center gap-2 p-4">
+            <img :src="logo" alt="logo" class="w-8 h-8" />
+            <h1 class="text-xl font-bold text-white">SEED LOG</h1>
+          </router-link>
+        </template>
+        <t-menu-item v-for="item in menu" :key="item.path" :value="item.path" :to="item.path"
+          @click="menuVisible = false" class="menu-item mx-4 my-2 rounded-xl">
+          <template #icon>
+            <t-icon :name="item.icon" />
+          </template>
+          {{ item.name }}
+        </t-menu-item>
+      </t-menu>
+    </t-drawer>
+
+    <!-- 桌面端侧边栏 -->
+    <t-aside class="sidebar backdrop-blur-lg hidden lg:block">
+      <t-menu :value="route.path" theme="dark" class="bg-transparent">
+        <template #logo>
+          <router-link to="/" class="flex items-center gap-2">
+            <img :src="logo" alt="logo" class="w-10 h-10 transition-transform hover:scale-110" />
+            <h1 class="text-2xl font-bold text-white tracking-wider">SEED LOG</h1>
+          </router-link>
+        </template>
+        <t-menu-item v-for="item in menu" :key="item.path" :value="item.path" :to="item.path"
+          class="menu-item mx-4 my-2 rounded-xl">
+          <template #icon>
+            <t-icon :name="item.icon" class="text-xl" />
+          </template>
+          <span class="font-medium">{{ item.name }}</span>
+        </t-menu-item>
+      </t-menu>
+    </t-aside>
+
+
+    <t-layout class="w-full">
+      <t-header class="header backdrop-blur-xl border-b border-gray-100">
+        <div class="flex items-center justify-between h-full px-2 sm:px-4 lg:px-8">
+          <!-- 移动端菜单按钮和标题 -->
+          <div class="flex items-center gap-2 sm:gap-4 ">
+            <div class="lg:hidden">
+              <t-button theme="default" variant="text" class=" min-w-[40px]" @click="toggleMenu">
+                <t-icon name="menu" size="20px" sm:size="24px" />
+              </t-button>
+            </div>
+            <h1
+              class="text-base sm:text-xl lg:text-2xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent truncate max-w-[150px] sm:max-w-full">
+              {{ jwtToken?.sub }}
+            </h1>
+          </div>
+          <div class="flex items-center gap-2 sm:gap-4">
+            <t-button theme="danger" @click="logout" class="logout-btn text-sm sm:text-base py-1 px-2 sm:px-4">
+              <template #icon>
+                <t-icon name="logout" class="text-sm sm:text-base" />
+              </template>
+              <span>退出</span>
+            </t-button>
+          </div>
+        </div>
+      </t-header>
+
+      <!-- 内容区域 -->
+      <t-content class="content bg-gray-50/30 flex-1 overflow-y-auto w-full">
+        <router-view v-slot="{ Component }">
+          <transition name="fade-slide" mode="out-in">
+            <keep-alive>
+              <component :is="Component" />
+            </keep-alive>
+          </transition>
+        </router-view>
+      </t-content>
+
+      <!-- 页脚 -->
+      <t-footer class="footer backdrop-blur-sm py-4 text-center text-sm text-gray-600">
+        <span class="opacity-75">© 微软邮箱管理系统</span>
+      </t-footer>
+    </t-layout>
+
+  </t-layout>
+</template>
+
+<style scoped>
+@reference "./assets/base.css";
+
+.sidebar {
+  @apply bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+}
+
+.header {
+  @apply bg-white/80 sticky top-0 z-10;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.menu-item {
+  @apply transition-all duration-300 hover:bg-white/15 active:scale-95;
+  @apply flex items-center gap-3 px-4 py-3;
+}
+
+.logout-btn {
+  @apply transition-transform hover:scale-105 active:scale-95;
+}
+
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(-20px);
+}
+
+/* :deep(.t-default-menu.t-menu--dark){
+  @apply bg-transparent;
+} */
+
+:deep(.t-drawer__body) {
+  @apply p-0;
+}
+
+:deep(.t-drawer__body) {
+  @apply p-0;
+}
+
+:deep(::-webkit-scrollbar) {
+  @apply w-2;
+}
+
+:deep(::-webkit-scrollbar-thumb) {
+  @apply bg-gray-400/30 rounded-full transition-colors hover:bg-gray-400/50;
+}
+
+:deep(::-webkit-scrollbar-track) {
+  @apply bg-transparent;
+}
+
+.content {
+  background-image: radial-gradient(circle at 50% 50%,
+      rgba(255, 255, 255, 0.8) 0%,
+      rgba(240, 240, 250, 0.6) 100%);
+}
+
+.footer {
+  @apply bg-white/60;
+}
+
+/* 添加移动端响应式样式 */
+@media (max-width: 1024px) {
+  .sidebar {
+    display: none;
+  }
+}
+
+.drawer-menu {
+  @apply bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800;
+}
+</style>

src/assets/base.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@import "tailwindcss/preflight" layer(base);
+@import "tailwindcss/utilities" layer(utilities);

src/assets/main.css

@@ -0,0 +1,2 @@
+@import './base.css';
+

src/components/MonacoEditor.vue

@@ -0,0 +1,137 @@
+<template>
+  <div ref="editorContainer" class="h-full"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
+import monaco from '@monaco-editor/loader';
+
+const props = defineProps<{
+  value: string,
+  originalValue?: string,
+  language?: string,
+  options?: Record<string, any>,
+}>();
+const emit = defineEmits(['update:value']);
+
+const editorContainer = ref<HTMLElement>();
+let editorInstance: any = null;
+let monacoInstance: any = null;
+let editorModel: any = null;
+
+// 创建编辑器的函数
+const createEditor = () => {
+  if (!editorContainer.value || !monacoInstance) return;
+  
+  // 如果已存在编辑器实例，先销毁
+  if (editorInstance) {
+    editorInstance.dispose();
+    editorInstance = null;
+  }
+
+  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  const commonOptions = {
+    language: props.language || 'json',
+    minimap: { enabled: !isMobile },
+    fontSize: isMobile ? 16 : 14,
+    lineNumbers: isMobile ? 'off' as const : 'on' as const,
+    scrollBeyondLastLine: false,
+    automaticLayout: true,
+    ...props.options
+  };
+
+  // 每次都创建新模型，确保内容刷新
+  if (editorModel) {
+    editorModel.dispose();
+  }
+  editorModel = monacoInstance.editor.createModel(props.value, props.language);
+
+  if (props.originalValue !== undefined) {
+    // 创建差异编辑器
+    const originalModel = monacoInstance.editor.createModel(props.originalValue, props.language);
+    editorInstance = monacoInstance.editor.createDiffEditor(editorContainer.value, {
+      ...commonOptions,
+      readOnly: false,
+      renderSideBySide: true,
+      ignoreTrimWhitespace: false,
+      renderOverviewRuler: true,
+      diffWordWrap: 'on',
+    });
+
+    editorInstance.setModel({
+      original: originalModel,
+      modified: editorModel
+    });
+    const modifiedEditor = editorInstance.getModifiedEditor();
+    modifiedEditor.onDidChangeModelContent(() => {
+      emit('update:value', modifiedEditor.getValue());
+    });
+  } else {
+    // 创建普通编辑器
+    editorInstance = monacoInstance.editor.create(editorContainer.value, {
+      ...commonOptions,
+      model: editorModel
+    });
+    editorInstance.onDidChangeModelContent(() => {
+      emit('update:value', editorInstance.getValue());
+    });
+  }
+};
+
+onMounted(() => {
+  monaco.init().then(instance => {
+    monacoInstance = instance;
+    createEditor();
+  });
+});
+
+// 监听 value, originalValue 和 language 的变化
+watch([() => props.value, () => props.originalValue, () => props.language], ([newVal, newOriginalVal, newLanguage], [oldVal, oldOriginalVal]) => {
+  // 判断是否需要重建编辑器
+  const modeChanged =
+    (oldOriginalVal === undefined && newOriginalVal !== undefined) ||
+    (oldOriginalVal !== undefined && newOriginalVal === undefined);
+    
+  if (modeChanged || oldVal === undefined) {
+    // 编辑器模式变化或首次加载，重新创建
+    createEditor();
+  } else if (props.language && editorModel && editorModel.getLanguageId() !== props.language) {
+    // 语言改变时，更新模型的语言
+    monacoInstance.editor.setModelLanguage(editorModel, props.language);
+  } else if (editorInstance) {
+    if (props.originalValue !== undefined) {
+      // 差异模式下更新内容
+      const model = editorInstance.getModel();
+      if (model && model.original && model.original.getValue() !== newOriginalVal) {
+        model.original.setValue(newOriginalVal || '');
+      }
+      if (model && model.modified && model.modified.getValue() !== newVal) {
+        model.modified.setValue(newVal || '');
+      }
+    } else {
+      // 普通模式下更新内容
+      if (editorInstance.getValue() !== newVal) {
+        editorInstance.setValue(newVal || '');
+      }
+    }
+  }
+}, { deep: true });
+
+onBeforeUnmount(() => {
+  if (editorInstance) {
+    editorInstance.dispose();
+  }
+  if (editorModel) {
+    editorModel.dispose();
+  }
+  editorInstance = null;
+  editorModel = null;
+});
+</script>
+
+<style scoped>
+:deep(.monaco-diff-editor),
+:deep(.monaco-editor) {
+  height: 100%;
+}
+</style>

src/components/RepoHeader.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { FolderIcon } from 'tdesign-icons-vue-next';
+import type { Account } from '../services/accountApi';
+
+const props = defineProps<{
+  selectedAccount: number | '';
+  currentPath: string;
+  accounts: Account[];
+  isNewFile?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'pathClick', path: string): void;
+  (e: 'rootClick'): void;
+  (e: 'update:selectedAccount', value: number): void;
+}>();
+
+const pathBreadcrumbs = computed(() => {
+  const { currentPath, isNewFile } = props;
+  if (isNewFile) {
+    // For new files, show "新建文件" at the end of the breadcrumb
+    const paths = currentPath ? currentPath.split('/').filter(Boolean) : [];
+    const breadcrumbs = paths.map((path: string, index: number) => ({
+      text: path,
+      path: paths.slice(0, index + 1).join('/')
+    }));
+
+    return breadcrumbs;
+  }
+
+  // Regular file browsing
+  if (!currentPath || typeof currentPath !== 'string') return [];
+  const paths = currentPath.split('/').filter(Boolean);
+  if (paths.length === 0) return [];
+  return paths.map((path: string, index: number) => ({
+    text: path,
+    path: paths.slice(0, index + 1).join('/')
+  }));
+});
+</script>
+
+<template>
+  <div class="header-section bg-white p-4 rounded-lg shadow-sm">
+    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
+      <div class="flex flex-col md:flex-row md:items-center gap-3">
+        <t-select :value="selectedAccount" class="w-full md:w-64" placeholder="选择仓库"
+          @update:value="(val: number) => emit('update:selectedAccount', val)">
+          <t-option v-for="acc in accounts" :key="acc.id" :value="acc.id" :label="`${acc.owner}/${acc.repo}`" />
+        </t-select>
+
+        <t-breadcrumb v-if="currentPath && pathBreadcrumbs.length > 0 || isNewFile" class="mt-3">
+          <t-breadcrumb-item @click="emit('rootClick')" class="cursor-pointer hover:text-blue-500">
+            <span class="flex items-center gap-1">
+              <FolderIcon /> 根目录
+            </span>
+          </t-breadcrumb-item>
+          <t-breadcrumb-item v-for="item in pathBreadcrumbs" :key="item.path" @click="emit('pathClick', item.path)"
+            class="cursor-pointer hover:text-blue-500">
+            {{ item.text }}
+          </t-breadcrumb-item>
+        </t-breadcrumb>
+      </div>
+      <slot></slot>
+    </div>
+  </div>
+</template>

src/main.ts

@@ -0,0 +1,16 @@
+// 引入组件库的少量全局样式变量
+import 'tdesign-vue-next/es/style/index.css';
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

src/router/index.ts

@@ -0,0 +1,56 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+
+const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes: [
+        {
+            path: '/',
+            redirect: '/repo',
+            meta: { requiresAuth: true }
+        },
+        {
+            path: '/login',
+            name: 'Login',
+            component: () => import('../views/LoginView.vue'),
+            meta: { requiresAuth: false }
+        },
+        {
+            path: '/repo',
+            name: 'Repo',
+            component: () => import('../views/RepoView.vue'),
+            meta: { requiresAuth: true }
+        },
+        {
+            path: '/content',
+            name: 'Content',
+            component: () => import('../views/ContentView.vue'),
+            meta: { requiresAuth: true }
+        },
+        {
+            path: '/setting',
+            name: 'Setting',
+            component: () => import('../views/SettingView.vue'),
+            meta: { requiresAuth: true }
+        },
+        {
+            path: '/account',
+            name: 'Account',
+            component: () => import('../views/AccountView.vue'),
+            meta: { requiresAuth: true }
+        },
+    ],
+})
+// 添加路由守卫
+router.beforeEach((to, from, next) => {
+    const isAuthenticated = localStorage.getItem('isAuthenticated') === 'true'
+    if (to.meta.requiresAuth && !isAuthenticated) {
+        next('/login')
+    } else if (to.path === '/login' && isAuthenticated) {
+        next('/')
+    } else {
+        next()
+    }
+})
+
+export default router

src/services/accountApi.ts

@@ -0,0 +1,35 @@
+import { API_BASE_URL, getHeaders, handleResponse } from './util';
+
+export interface Account {
+    id: number,
+    owner: string,
+    repo: string,
+    ref: string,
+    type: "github" | "hf",
+    token: string,
+}
+
+export const accountApi = {
+    async post(accounts: Account[]) {
+        const response = await fetch(
+            `${API_BASE_URL}/api/account`,
+            {
+                headers: getHeaders(),
+                method: 'POST',
+                body: JSON.stringify(accounts)
+            }
+        );
+        return handleResponse(response);
+    },
+
+    async get(): Promise<Account[]> {
+        const response = await fetch(
+            `${API_BASE_URL}/api/account`,
+            {
+                headers: getHeaders()
+            }
+        );
+        return handleResponse(response);
+    },
+
+}

src/services/repoApi.ts

@@ -0,0 +1,304 @@
+import router from '../router';
+import { API_BASE_URL, getHeaders, handleResponse } from './util';
+
+export interface Account {
+  owner: string;
+  repo: string;
+  ref: string;
+  type: "github" | "hf";
+  token: string;
+}
+
+export interface RepoContent {
+  name: string;
+  path: string;
+  sha: string;
+  size: number;
+  url: string;
+  html_url: string;
+  git_url: string;
+  download_url: string | null;
+  type: "file" | "dir";
+  content?: string;
+  encoding?: string;
+}
+
+// Base interface for repo operations
+interface IRepoApi {
+  getContents(account: Account, path: string): Promise<RepoContent[]>;
+  getFileContent(account: Account, path: string): Promise<RepoContent>;
+  updateFile(account: Account, path: string, content: string, sha: string, message?: string): Promise<any>;
+  deleteFile(account: Account, path: string, sha: string, message?: string): Promise<any>;
+  createFile(account: Account, path: string, content: string, message?: string): Promise<any>;
+}
+
+// GitHub implementation
+class GitHubRepoApi implements IRepoApi {
+  async getContents(account: Account, path: string = ''): Promise<RepoContent[]> {
+    const response = await fetch(
+      `${API_BASE_URL}/api/github/${account.owner}/${account.repo}/${path}?ref=${account.ref}`,
+      {
+        headers: {
+          Authorization: `Bearer ${account.token}`
+        }
+      }
+    );
+    return await handleResponse(response);
+  }
+
+  async getFileContent(account: Account, path: string): Promise<RepoContent> {
+    const response = await fetch(
+      `${API_BASE_URL}/api/github/${account.owner}/${account.repo}/${path}?ref=${account.ref}`,
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${account.token}`
+        }
+      }
+    );
+    return await handleResponse(response);
+  }
+
+  async updateFile(account: Account, path: string, content: string, sha: string, message?: string) {
+
+    const encoder = new TextEncoder();
+    const bytes = encoder.encode(content);
+    const base64Content = btoa(String.fromCharCode.apply(null, [...new Uint8Array(bytes)]));
+
+    const response = await fetch(
+      `${API_BASE_URL}/api/github/${account.owner}/${account.repo}/${path}`,
+      {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${account.token}`
+        },
+        body: JSON.stringify({ branch: account.ref, content: base64Content, message, sha })
+      }
+    );
+    return handleResponse(response);
+  }
+
+  async deleteFile(account: Account, path: string, sha: string, message?: string) {
+    const response = await fetch(
+      `${API_BASE_URL}/api/github/${account.owner}/${account.repo}/${path}`,
+      {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${account.token}`
+        },
+        body: JSON.stringify({ branch: account.ref, sha, message })
+      }
+    );
+    return handleResponse(response);
+  }
+
+  async createFile(account: Account, path: string, content: string, message?: string) {
+    const encoder = new TextEncoder();
+    const bytes = encoder.encode(content);
+    const base64Content = btoa(String.fromCharCode.apply(null, [...new Uint8Array(bytes)]));
+    const response = await fetch(
+      `${API_BASE_URL}/api/github/${account.owner}/${account.repo}/${path}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${account.token}`
+        },
+        body: JSON.stringify({ branch: account.ref, content: base64Content, message })
+      }
+    );
+    return handleResponse(response);
+  }
+}
+
+// HuggingFace implementation
+class HuggingFaceRepoApi implements IRepoApi {
+
+  async getContents(account: Account, path: string = ''): Promise<RepoContent[]> {
+    const response = await fetch(
+      `${API_BASE_URL}/api/hf/${account.owner}/${account.repo}/tree/${account.ref}/${path}`,
+      {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${account.token}`
+        }
+      }
+    );
+    let result = await handleResponse(response);
+
+    return result.map((item: any) => {
+      item.sha = item.oid;
+      item.name = item.path.split('/').pop() || '';
+      return item;
+    });
+  }
+
+  async getFileContent(account: Account, path: string): Promise<RepoContent> {
+    const response = await fetch(
+      `${API_BASE_URL}/api/hf/${account.owner}/${account.repo}/raw/${account.ref}/${path}`,
+      {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${account.token}`
+        }
+      }
+    );
+
+    if (response.status === 401) {
+      localStorage.removeItem('isAuthenticated');
+      localStorage.removeItem('token');
+      router.push('/login');
+      throw new Error('认证失败，请重新登录');
+    }
+
+    return {
+      content: await response.text(),
+      encoding: 'utf-8',
+      name: '',
+      path: path,
+      sha: '',
+      size: 0,
+      url: '',
+      html_url: '',
+      git_url: '',
+      download_url: null,
+      type: 'file'
+    };
+  }
+
+  async updateFile(account: Account, path: string, content: string, sha: string, message?: string) {
+    const response = await fetch(
+      `${API_BASE_URL}/api/hf/${account.owner}/${account.repo}/commit/${account.ref}/${path}`,
+      {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${account.token}`
+        },
+        body: JSON.stringify({
+          "description": "",
+          "summary": message,
+          "files": [
+            {
+              "content": content,
+              "encoding": "utf-8",
+              "path": path
+            }
+          ]
+        })
+      }
+    );
+    const result = await handleResponse(response);
+    return {
+      content: {
+        sha: result.commitOid
+      }
+    };
+  }
+
+  async deleteFile(account: Account, path: string, sha: string, message?: string) {
+    const response = await fetch(
+      `${API_BASE_URL}/api/hf/${account.owner}/${account.repo}/commit/${account.ref}/${path}`,
+      {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${account.token}`
+        },
+        body: JSON.stringify({
+          "description": "",
+          "summary": message,
+          "deletedFiles": [
+            {
+              "path": path
+            }
+          ]
+        })
+      }
+    );
+    return handleResponse(response);
+  }
+
+  async createFile(account: Account, path: string, content: string, message?: string) {
+    const response = await fetch(
+      `${API_BASE_URL}/api/hf/${account.owner}/${account.repo}/commit/${account.ref}/${path}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${account.token}`
+        },
+        body: JSON.stringify({
+          "description": "",
+          "summary": message,
+          "files": [
+            {
+              "content": content,
+              "encoding": "utf-8",
+              "path": path
+            }
+          ]
+        })
+      }
+    );
+    const result = await handleResponse(response);
+    return {
+      content: {
+        sha: result.commitOid
+      }
+    };
+  }
+}
+
+// Factory to get the appropriate repo API implementation
+class RepoApiFactory {
+  private static githubInstance: GitHubRepoApi;
+  private static huggingFaceInstance: HuggingFaceRepoApi;
+
+  static getRepoApi(type: "github" | "hf"): IRepoApi {
+    switch (type) {
+      case "github":
+        if (!this.githubInstance) {
+          this.githubInstance = new GitHubRepoApi();
+        }
+        return this.githubInstance;
+      case "hf":
+        if (!this.huggingFaceInstance) {
+          this.huggingFaceInstance = new HuggingFaceRepoApi();
+        }
+        return this.huggingFaceInstance;
+      default:
+        throw new Error(`Unsupported repository type: ${type}`);
+    }
+  }
+}
+
+// Exported API object that uses the factory
+export const repoApi = {
+  async getContents(account: Account, path: string = '') {
+    const api = RepoApiFactory.getRepoApi(account.type);
+    return api.getContents(account, path);
+  },
+
+  async getFileContent(account: Account, path: string): Promise<RepoContent> {
+    const api = RepoApiFactory.getRepoApi(account.type);
+    return api.getFileContent(account, path);
+  },
+
+  async updateFile(account: Account, path: string, content: string, sha: string, message?: string) {
+    const api = RepoApiFactory.getRepoApi(account.type);
+    return api.updateFile(account, path, content, sha, message);
+  },
+
+  async deleteFile(account: Account, path: string, sha: string, message?: string) {
+    const api = RepoApiFactory.getRepoApi(account.type);
+    return api.deleteFile(account, path, sha, message);
+  },
+
+  async createFile(account: Account, path: string, content: string, message?: string) {
+    const api = RepoApiFactory.getRepoApi(account.type);
+    return api.createFile(account, path, content, message);
+  }
+};

src/services/settingApi.ts

@@ -0,0 +1,42 @@
+import { API_BASE_URL, getHeaders, handleResponse } from './util';
+
+export interface Settings {
+    /** 飞书配置 */
+    feishu: {
+        /** 飞书应用ID */
+        app_id: string;
+        /** 飞书应用密钥 */
+        app_secret: string;
+        /** 飞书应用验证Token */
+        verification_token: string;
+        /** 飞书应用加密Key */
+        encrypt_key: string;
+        /** 飞书机器人接收ID */
+        receive_id: string;
+    }
+}
+
+
+export const settingApi = {
+    async update(settings: Settings) {
+        const response = await fetch(
+            `${API_BASE_URL}/api/setting`,
+            {
+                headers: getHeaders(),
+                method: 'POST',
+                body: JSON.stringify(settings)
+            }
+        );
+        return handleResponse(response);
+    },
+
+    async get(): Promise<Settings> {
+        const response = await fetch(
+            `${API_BASE_URL}/api/setting`,
+            {
+                headers: getHeaders()
+            }
+        );
+        return handleResponse(response);
+    },
+}

src/services/userApi.ts

@@ -0,0 +1,22 @@
+import { API_BASE_URL,  handleResponse } from './util';
+
+export interface LoginResponse {
+    success: boolean;
+    token: string;
+    message?: string;
+}
+
+export const userApi = {
+    async login(username: string, password: string): Promise<LoginResponse> {
+        const response = await fetch(`${API_BASE_URL}/api/login`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ username, password }),
+        });
+        return handleResponse(response);
+    }
+};
+
+

src/services/util.ts

@@ -0,0 +1,29 @@
+import router from "../router";
+
+export const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '';
+
+export function getHeaders() {
+    return {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${localStorage.getItem('token')}`
+    };
+}
+export async function handleResponse(response: Response) {
+    if (response.status === 401) {
+        localStorage.removeItem('isAuthenticated');
+        localStorage.removeItem('token');
+        router.push('/login');
+        throw new Error('认证失败，请重新登录');
+    }
+    if (!response.ok) {
+        const contentType = response.headers.get('content-type');
+        if (contentType && contentType.includes('application/json')) {
+            const errorData = await response.json();
+            throw new Error(errorData.error || '请求失败');
+        } else {
+            const errorText = await response.text();
+            throw new Error(errorText || '请求失败');
+        }
+    }
+    return response.json();
+}

src/stores/accountStorage.ts

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+import { accountApi, type Account } from '../services/accountApi'
+
+export const useAccountStore = defineStore('server', {
+  state: () => ({
+    accounts: [] as Account[],
+    initialized: false
+  }),
+
+  actions: {
+    async fetchAccounts(force = false) {
+      if (!force && this.initialized) return;
+      try {
+        const data = await accountApi.get();
+        this.accounts = Array.isArray(data) ? data : [];
+        this.initialized = true;
+      } catch (error) {
+        console.error('Failed to fetch accounts:', error);
+        this.accounts = [];
+      }
+    },
+
+    updateAccounts(newAccounts: Account[]) {
+      this.accounts = Array.isArray(newAccounts) ? newAccounts : [];
+    }
+  }
+})

src/style.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/views/AccountView.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { accountApi } from '../services/accountApi';
+import { useAccountStore } from '../stores/accountStorage';
+import MonacoEditor from '../components/MonacoEditor.vue';
+const accountStore = useAccountStore();
+const accountsText = ref<string>('');
+const loading = ref(false);
+const showDiff = ref(false);
+const originalText = ref('');
+
+const fetchAccounts = async (force: boolean) => {
+    try {
+        loading.value = true;
+        accountsText.value = "";
+        await accountStore.fetchAccounts(force);
+        const formattedData = JSON.stringify(accountStore.accounts, null, 2);
+        accountsText.value = formattedData;
+        originalText.value = formattedData;
+    } catch (error) {
+        MessagePlugin.error('获取账号数据失败');
+    } finally {
+        loading.value = false;
+    }
+};
+
+
+const handleSave = async () => {
+    loading.value = true;
+    try {
+        if (accountsText.value === '') {
+            MessagePlugin.error('账号数据不能为空');
+            return;
+        }
+        if (originalText.value === accountsText.value) {
+            MessagePlugin.success('数据未修改');
+            return;
+        }
+        const accounts = JSON.parse(accountsText.value);
+        const result = await accountApi.post(accounts);
+        if (result.error) {
+            MessagePlugin.error(`${result.error}`);
+            return;
+        }
+        accountStore.updateAccounts(accounts || []);
+        MessagePlugin.success('保存成功');
+    } catch (error) {
+        if (error instanceof SyntaxError) {
+            MessagePlugin.error('JSON格式错误');
+        } else {
+            MessagePlugin.error('保存失败');
+        }
+    } finally {
+        loading.value = false;
+    }
+};
+
+const handleReload = async () => {
+    loading.value = true;
+    try {
+        await fetchAccounts(true);
+        MessagePlugin.success('重新加载成功');
+    } catch (error) {
+        MessagePlugin.error('重新加载失败');
+    } finally {
+        loading.value = false;
+    }
+};
+
+// 定义按键事件处理函数
+const handleKeyDown = (e: KeyboardEvent) => {
+    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
+        e.preventDefault();
+        handleSave();
+    }
+};
+
+
+// 在显示差异按钮点击处理中添加
+const toggleDiff = () => {
+    showDiff.value = !showDiff.value;
+
+    if (showDiff.value) {
+        // 进入差异模式时，确保有原始文本作为比较
+        if (originalText.value === '') {
+            originalText.value = accountsText.value;
+        }
+    }
+};
+// 在 AccountView.vue 中添加
+watch(showDiff, (newVal) => {
+    if (newVal && originalText.value === accountsText.value) {
+        // 如果开启差异模式但两个文本相同，可以考虑提示用户
+        MessagePlugin.info('当前没有差异可以显示');
+    }
+}, { immediate: true });
+
+onMounted(async () => {
+    // 注册全局按键监听
+    window.addEventListener('keydown', handleKeyDown);
+    await fetchAccounts(false);
+});
+
+onUnmounted(() => {
+    // 注销全局按键监听
+    window.removeEventListener('keydown', handleKeyDown);
+});
+</script>
+
+<template>
+    <div class="account-container h-full p-2 md:p-5">
+        <t-card bordered class="h-full">
+            <template #content>
+                <div class=" flex flex-col h-full">
+                    <div class="flex justify-end items-center mb-4 gap-4">
+                        <div class="flex gap-2">
+                            <t-button variant="outline" @click="handleReload">
+                                重新加载
+                            </t-button>
+                            <t-button variant="outline" @click="toggleDiff">
+                                {{ showDiff ? '隐藏对比' : '显示对比' }}
+                            </t-button>
+                            <t-button theme="primary" @click="handleSave" :loading="loading">
+                                保存账号
+                            </t-button>
+                        </div>
+                    </div>
+
+                    <div class="editor-container flex-1">
+                        <MonacoEditor v-model:value="accountsText" :original-value="showDiff ? originalText : undefined"
+                            language="json" :options="{ tabSize: 2 }" />
+                    </div>
+                </div>
+            </template>
+        </t-card>
+    </div>
+</template>
+
+<style scoped>
+.account-container {
+    width: 100%;
+}
+
+:deep(.t-card__body) {
+    height: 100%;
+}
+
+.editor-container {
+    border: 1px solid var(--td-component-border);
+}
+</style>

src/views/ContentView.vue

@@ -0,0 +1,441 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { repoApi, type Account } from '../services/repoApi';
+import { useAccountStore } from '../stores/accountStorage';
+import MonacoEditor from '../components/MonacoEditor.vue';
+import RepoHeader from '../components/RepoHeader.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const contentText = ref<string>('');
+const loading = ref(false);
+const showDiff = ref(false);
+const originalText = ref('');
+const fileSha = ref('');
+const selectedAccount = ref<number | ''>('');
+const currentPath = ref('');
+const newFileName = ref('');
+const store = useAccountStore();
+const isNewFile = ref(false);
+
+// Compute full path by combining directory path with new file name
+const fullPath = computed(() => {
+    if (!isNewFile.value) return currentPath.value;
+    const basePath = route.query.path as string || '';
+    return basePath ? `${basePath}/${newFileName.value}` : newFileName.value;
+});
+
+// 提交对话框状态
+const showCommitDialog = ref(false);
+const commitMessage = ref('');
+
+const decodeContent = (base64Content: string, contentType: 'text' | 'binary' = 'text'): string | Uint8Array => {
+    // 步骤1: 使用atob解码Base64字符串，获取原始二进制数据
+    const binaryContent = atob(base64Content);
+
+    if (contentType === 'binary') {
+        // 对于二进制文件，返回Uint8Array
+        const bytes = new Uint8Array(binaryContent.length);
+        for (let i = 0; i < binaryContent.length; i++) {
+            bytes[i] = binaryContent.charCodeAt(i);
+        }
+        return bytes;
+    } else {
+        // 对于文本内容，处理UTF-8编码
+        try {
+            // 方法1: 使用TextDecoder (推荐，更可靠)
+            const bytes = new Uint8Array(binaryContent.length);
+            for (let i = 0; i < binaryContent.length; i++) {
+                bytes[i] = binaryContent.charCodeAt(i);
+            }
+            return new TextDecoder('utf-8').decode(bytes);
+        } catch (e) {
+            // 方法2: 兼容性方案
+            return decodeURIComponent(escape(binaryContent));
+        }
+    }
+};
+
+const fetchContent = async () => {
+    const account = store.accounts.find(acc => acc.id === selectedAccount.value);
+    if (!account) {
+        MessagePlugin.error(`未找到账户信息${selectedAccount.value}`);
+        return;
+    }
+    try {
+        loading.value = true;
+        contentText.value = "";
+        originalText.value = "";
+        const result = await repoApi.getFileContent(account, currentPath.value);
+        if (result.content) {
+            // 不移除换行符，保持原始格式
+            contentText.value = result.encoding && result.encoding == "base64" ? decodeContent(result.content) as string : result.content;
+            originalText.value = contentText.value;
+            fileSha.value = result.sha;
+        }
+    } catch (error) {
+        MessagePlugin.error('获取文件内容失败');
+    } finally {
+        loading.value = false;
+    }
+};
+
+const handleSave = () => {
+
+
+    // For new files, we need a file name
+    if (isNewFile.value && !newFileName.value) {
+        MessagePlugin.error('请输入文件名');
+        return;
+    }
+
+    if (contentText.value === '') {
+        MessagePlugin.error('内容不能为空');
+        return;
+    }
+
+    // For existing files, check if content was modified
+    if (fileSha.value && originalText.value === contentText.value) {
+        MessagePlugin.success('内容未修改');
+        return;
+    }
+
+    showCommitDialog.value = true;
+};
+
+const handleConfirmSave = async () => {
+
+
+    // Use the full path for new files, or the route path for existing files
+    const path = isNewFile.value ? fullPath.value : (route.query.path as string);
+    if (!path) {
+        MessagePlugin.error('请输入文件名');
+        return;
+    }
+
+    loading.value = true;
+    try {
+        const account = store.accounts.find(acc => acc.id === selectedAccount.value);
+
+        if (!account) {
+            MessagePlugin.error(`未找到账户信息${selectedAccount.value}`);
+            return;
+        }
+ 
+        let response;
+        if (isNewFile.value) {
+            // Create new file
+            response = await repoApi.createFile(
+                account,
+                path,
+                contentText.value,
+                commitMessage.value.trim() || '创建文件'
+            );
+        } else {
+            // Update existing file
+            response = await repoApi.updateFile(
+                account,
+                path,
+                contentText.value,
+                fileSha.value,
+                commitMessage.value.trim() || '更新文件'
+            );
+        }
+
+        // Update fileSha with the new value from response
+        if (response && response.content && response.content.sha) {
+            fileSha.value = response.content.sha;
+        }
+
+        MessagePlugin.success(isNewFile.value ? '创建成功' : '保存成功');
+        originalText.value = contentText.value;
+        showCommitDialog.value = false;
+        commitMessage.value = '';
+
+        // If this was a new file, update the URL to include the path
+        if (isNewFile.value) {
+            router.replace({
+                path: '/content',
+                query: {
+                    ...route.query,
+                    path,
+                    newFile: undefined
+                }
+            });
+        }
+    } catch (error) {
+        console.error(error);
+        MessagePlugin.error('保存失败');
+    } finally {
+        loading.value = false;
+    }
+};
+
+const handleCancelSave = () => {
+    showCommitDialog.value = false;
+    commitMessage.value = '';
+};
+
+// 删除对话框状态
+const showDeleteDialog = ref(false);
+
+const handleDelete = () => {
+
+
+    showDeleteDialog.value = true;
+};
+
+const handleConfirmDelete = async () => {
+
+
+    loading.value = true;
+    try {
+        const account = store.accounts.find(acc => acc.id === selectedAccount.value);
+
+        if (!account) {
+            MessagePlugin.error(`未找到账户信息${selectedAccount.value}`);
+            return;
+        }
+
+        await repoApi.deleteFile(
+            account,
+            currentPath.value as string,
+            fileSha.value,
+            '删除文件'
+        );
+        MessagePlugin.success('删除成功');
+        showDeleteDialog.value = false;
+        router.back();
+    } catch (error) {
+        MessagePlugin.error('删除失败');
+    } finally {
+        loading.value = false;
+    }
+};
+
+const handleCancelDelete = () => {
+    showDeleteDialog.value = false;
+};
+
+// 定义按键事件处理函数
+const handleKeyDown = (e: KeyboardEvent) => {
+    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
+        e.preventDefault();
+        handleSave();
+    }
+};
+
+// 在显示差异按钮点击处理中添加
+const toggleDiff = () => {
+    showDiff.value = !showDiff.value;
+
+    if (showDiff.value) {
+        // 进入差异模式时，确保有原始文本作为比较
+        if (originalText.value === '') {
+            originalText.value = contentText.value;
+        }
+    }
+};
+
+// 在 AccountView.vue 中添加
+watch(showDiff, (newVal) => {
+    if (newVal && originalText.value === contentText.value) {
+        // 如果开启差异模式但两个文本相同，可以考虑提示用户
+        MessagePlugin.info('当前没有差异可以显示');
+    }
+}, { immediate: true });
+
+const handlePathClick = (path: string) => {
+    router.push({
+        path: '/repo',
+        query: {
+            id: selectedAccount.value,
+            path
+        }
+    });
+};
+
+const handleRootClick = () => {
+    router.push({
+        path: '/repo',
+        query: {
+            id: selectedAccount.value,
+        }
+    });
+};
+
+const handleAccountChange = (val: number) => {
+    selectedAccount.value = val;
+    currentPath.value = ''; // Reset path
+    router.push({
+        path: '/repo',
+        query: {
+            id: selectedAccount.value,
+        }
+    });
+}
+
+const getLanguageFromPath = computed(() => {
+    const path = route.query.path as string;
+    if (!path) return 'plaintext';
+
+    const ext = path.split('.').pop()?.toLowerCase() || '';
+
+    // Map file extensions to Monaco editor languages
+    const languageMap: Record<string, string> = {
+        'js': 'javascript',
+        "mjs": 'javascript',
+        'ts': 'typescript',
+        'json': 'json',
+        'md': 'markdown',
+        'yml': 'yaml',
+        'yaml': 'yaml',
+        'py': 'python',
+        'html': 'html',
+        'css': 'css',
+        'scss': 'scss',
+        'less': 'less',
+        'xml': 'xml',
+        'sh': 'shell',
+        'bash': 'shell',
+        'vue': 'vue',
+        'jsx': 'javascript',
+        'tsx': 'typescript',
+        'gitignore': 'plaintext',
+        'env': 'plaintext',
+        'txt': 'plaintext',
+        "rs": 'rust',
+        'go': 'go',
+    };
+
+    return languageMap[ext] || 'plaintext';
+});
+
+// 监听路由变化同步本地状态
+watch(() => route.query, async (query) => {
+    // Only respond to query changes when on the repo route
+    if (route.path !== '/content') return;
+    const { id, path, newFile } = query;
+    isNewFile.value = !!newFile;
+    if (id) {
+        await store.fetchAccounts();
+        const account = store.accounts.find(acc => acc.id === Number(id));
+        if (account) {
+            selectedAccount.value = account.id;
+        }
+        currentPath.value = path as string;
+
+        if (isNewFile.value) {
+            contentText.value = '';
+            originalText.value = '';
+            newFileName.value = ''; // Reset new file name when entering new file mode
+            return;
+        }
+        if (path) {
+            await fetchContent();
+        }
+    }
+}, { immediate: true });
+
+onMounted(() => {
+    window.addEventListener('keydown', handleKeyDown);
+
+
+
+});
+
+onUnmounted(() => {
+    // 注销全局按键监听
+    window.removeEventListener('keydown', handleKeyDown);
+});
+</script>
+
+<template>
+    <div class="content-container h-full p-2 md:p-5">
+        <div class="flex flex-col gap-4 h-full">
+            <RepoHeader :selected-account="selectedAccount" :current-path="isNewFile ? fullPath : currentPath"
+                :is-new-file="isNewFile" :accounts="store.accounts" @path-click="handlePathClick"
+                @root-click="handleRootClick" @update:selected-account="handleAccountChange">
+                <div class="flex items-center justify-between w-full">
+                    <div>
+                        <t-input v-if="isNewFile" v-model="newFileName" placeholder="请输入文件名" class="w-20" />
+                    </div>
+                    <div class="flex gap-2">
+                        <t-button variant="outline" @click="toggleDiff">
+                            {{ showDiff ? '隐藏对比' : '显示对比' }}
+                        </t-button>
+                        <t-button theme="primary" @click="handleSave" :loading="loading">
+                            保存
+                        </t-button>
+                        <t-button v-if="!isNewFile" theme="danger" @click="handleDelete" :loading="loading">
+                            删除
+                        </t-button>
+                    </div>
+                </div>
+            </RepoHeader>
+            <t-card bordered class="h-full">
+                <template #content>
+                    <div class="flex flex-col h-full">
+                        <div class="editor-container flex-1">
+                            <MonacoEditor v-model:value="contentText"
+                                :original-value="showDiff ? originalText : undefined" :language="getLanguageFromPath"
+                                :options="{ tabSize: 2 }" />
+                        </div>
+                    </div>
+                </template>
+            </t-card>
+        </div>
+
+        <t-dialog v-model:visible="showCommitDialog" header="提交更改" :confirm-on-enter="true" @confirm="handleConfirmSave"
+            @close="handleCancelSave">
+            <template #body>
+                <div class="flex flex-col gap-2">
+                    <div class="mb-2">请输入提交信息：</div>
+                    <t-input v-model:value="commitMessage" placeholder="描述此次更改的内容" :autofocus="true" />
+                </div>
+            </template>
+            <template #footer>
+                <t-button theme="default" @click="handleCancelSave">
+                    取消
+                </t-button>
+                <t-button theme="primary" @click="handleConfirmSave" :loading="loading">
+                    确认
+                </t-button>
+            </template>
+        </t-dialog>
+
+        <t-dialog v-model:visible="showDeleteDialog" header="确认删除" :confirm-on-enter="true"
+            @confirm="handleConfirmDelete" @close="handleCancelDelete">
+            <template #body>
+                <div class="p-2">
+                    确定要删除此文件吗？此操作不可恢复。
+                </div>
+            </template>
+            <template #footer>
+                <t-button theme="default" @click="handleCancelDelete">
+                    取消
+                </t-button>
+                <t-button theme="primary" @click="handleConfirmDelete" :loading="loading">
+                    确认
+                </t-button>
+            </template>
+        </t-dialog>
+    </div>
+</template>
+
+<style scoped>
+.content-container {
+    width: 100%;
+}
+
+:deep(.t-card__body) {
+    height: 100%;
+}
+
+.editor-container {
+    border: 1px solid var(--td-component-border);
+}
+</style>

src/views/LoginView.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { MessagePlugin } from 'tdesign-vue-next'
+import logo from '../assets/logo.png'
+import { userApi } from '../services/userApi'
+
+const router = useRouter()
+const username = ref('')
+const password = ref('')
+const loading = ref(false)
+
+
+const handleLogin = async () => {
+  if (!username.value || !password.value) {
+    MessagePlugin.warning('请输入用户名和密码')
+    return
+  }
+
+  loading.value = true
+  try {
+    const data = await userApi.login(username.value, password.value)
+
+    if (data.success) {
+      localStorage.setItem('token', data.token)
+      localStorage.setItem('isAuthenticated', 'true')
+
+      MessagePlugin.success('登录成功')
+      router.push('/')
+    } else {
+      MessagePlugin.error(data.message || '登录失败')
+    }
+  } catch (error) {
+    MessagePlugin.error('网络错误，请稍后重试')
+    console.error('Login error:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+
+<template>
+  <div
+    class="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">
+    <div class="relative w-full max-w-md">
+      <!-- 装饰背景 -->
+      <div
+        class="absolute -top-4 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob">
+      </div>
+      <div
+        class="absolute -bottom-8 -right-4 w-72 h-72 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
+      </div>
+      <div
+        class="absolute -bottom-8 left-20 w-72 h-72 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000">
+      </div>
+
+      <!-- 登录卡片 -->
+      <div class="relative bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-8 m-4">
+        <!-- Logo和标题 -->
+        <div class="flex flex-col items-center mb-8">
+          <img :src="logo" alt="logo" class="w-16 h-16 mb-4" />
+          <h2 class="text-2xl font-bold text-gray-800">微软账号管理</h2>
+          <!-- <p class="text-gray-500 mt-2">登录以继续使用</p> -->
+        </div>
+
+        <!-- 登录表单 -->
+        <form @submit.prevent="handleLogin" class="space-y-6">
+          <div class="space-y-2">
+            <t-input v-model="username" size="large" placeholder="请输入用户名" :autofocus="true" class="w-full">
+              <template #prefix-icon>
+                <t-icon name="user" />
+              </template>
+            </t-input>
+          </div>
+
+          <div class="space-y-2">
+            <t-input v-model="password" type="password" size="large" placeholder="请输入密码" class="w-full">
+              <template #prefix-icon>
+                <t-icon name="lock-on" />
+              </template>
+            </t-input>
+          </div>
+
+          <!-- <div class="flex items-center justify-between text-sm">
+            <t-checkbox>记住我</t-checkbox>
+            <a href="#" class="text-blue-600 hover:text-blue-700 transition-colors">
+              忘记密码？
+            </a>
+          </div> -->
+
+          <t-button type="submit" theme="primary" :loading="loading" size="large" class="w-full" :disabled="loading">
+            {{ loading ? '登录中...' : '登录' }}
+          </t-button>
+        </form>
+
+        <!-- 额外信息 -->
+        <div class="mt-6 text-center text-sm text-gray-500">
+          测试账号: admin / password
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.animate-blob {
+  animation: blob 7s infinite;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}
+
+@keyframes blob {
+  0% {
+    transform: translate(0px, 0px) scale(1);
+  }
+
+  33% {
+    transform: translate(30px, -50px) scale(1.1);
+  }
+
+  66% {
+    transform: translate(-20px, 20px) scale(0.9);
+  }
+
+  100% {
+    transform: translate(0px, 0px) scale(1);
+  }
+}
+</style>

src/views/RepoView.vue

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { type TableProps } from 'tdesign-vue-next';
+import { computed, ref, watch, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { useAccountStore } from '../stores/accountStorage';
+import { repoApi, type RepoContent, type Account } from '../services/repoApi';
+import { FolderIcon, FileIcon, CodeIcon, ImageIcon } from 'tdesign-icons-vue-next';
+import RepoHeader from '../components/RepoHeader.vue';
+
+const router = useRouter();
+const route = useRoute();
+
+// Local state
+const loading = ref(false);
+const allFiles = ref<RepoContent[]>([]);
+const selectedAccount = ref<number>(0);
+const currentPath = ref('');
+const store = useAccountStore();
+
+// Sort files with directories first then files
+const sortedFiles = computed(() => {
+    // First separate directories and files
+    const dirs = allFiles.value.filter(item => item.type === 'dir');
+    const files = allFiles.value.filter(item => item.type === 'file');
+
+    // Sort directories and files alphabetically by name
+    dirs.sort((a, b) => a.name.localeCompare(b.name));
+    files.sort((a, b) => a.name.localeCompare(b.name));
+
+    // Combine with directories first
+    return [...dirs, ...files];
+});
+
+// Helper function to determine file icon based on file extension
+const getFileIcon = (filename: string) => {
+    const extension = filename.split('.').pop()?.toLowerCase();
+
+    if (!extension) return FileIcon;
+
+    const codeExtensions = ['js', 'ts', 'py', 'java', 'c', 'cpp', 'cs', 'go', 'php', 'html', 'css', 'vue', 'jsx', 'tsx'];
+    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp'];
+    const textExtensions = ['txt', 'md', 'json', 'xml', 'csv', 'yml', 'yaml'];
+
+    if (codeExtensions.includes(extension)) return CodeIcon;
+    if (imageExtensions.includes(extension)) return ImageIcon;
+    //   if (textExtensions.includes(extension)) return TextIcon;
+    //   if (extension === 'pdf') return PdfIcon;
+
+    return FileIcon;
+};
+
+const columns = ref<TableProps['columns']>([
+    {
+        colKey: 'name',
+        title: '文件名',
+        width: 300,
+        cell: (h, { row }) => {
+            const IconComponent = row.type === 'dir' ? FolderIcon : getFileIcon(row.name);
+            return h('div', { class: 'flex items-center gap-2' }, [
+                h(IconComponent, {
+                    class: row.type === 'dir' ? 'text-blue-500' : 'text-gray-600',
+                    style: { fontSize: '1.25rem' }
+                }),
+                h('span', row.name)
+            ]);
+        }
+    },
+    { colKey: 'type', title: '类型', width: 100 },
+    {
+        colKey: 'size',
+        title: '大小',
+        width: 100,
+        cell: (h, { row }) => {
+            if (row.type === 'dir') return '-';
+            // Format file size
+            const size = Number(row.size);
+            if (size < 1024) return `${size} B`;
+            if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+            return `${(size / (1024 * 1024)).toFixed(1)} MB`;
+        }
+    },
+    { colKey: 'sha', title: 'SHA', width: 200 }
+]);
+
+const handleRowClick = (e: any) => {
+    const item: RepoContent = e.row;
+    if (item.type === 'dir') {
+        currentPath.value = item.path;
+        fetchRepo();
+    } else if (item.type === 'file') {
+        router.push({
+            path: '/content',
+            query: {
+                id: selectedAccount.value,
+                path: item.path
+            }
+        });
+    }
+};
+
+const fetchRepo = async () => {
+    if (!selectedAccount.value) return;
+
+    loading.value = true;
+    try {
+        const account = store.accounts.find(acc => acc.id === selectedAccount.value);
+        if (!account) {
+            MessagePlugin.error(`未找到账户信息${selectedAccount.value}`);
+            return;
+        }
+        const result = await repoApi.getContents(account, currentPath.value);
+        allFiles.value = Array.isArray(result) ? result : [result];
+    } catch (error) {
+        MessagePlugin.error('获取仓库内容失败');
+    } finally {
+        loading.value = false;
+    }
+};
+
+const handleBreadcrumbClick = (path: string) => {
+    currentPath.value = path;
+    fetchRepo();
+};
+
+const handleRootClick = () => {
+    currentPath.value = '';
+    fetchRepo();
+};
+
+const handleAccountChange = (val: number) => {
+    selectedAccount.value = val;
+    currentPath.value = ''; // Reset path
+    router.push({
+        path: '/repo',
+        query: {
+            id: selectedAccount.value,
+        }
+    });
+}
+
+// Watch route query params and sync with local state
+watch(() => route.query, async (query) => {
+    // Only respond to query changes when on the repo route
+    if (route.path !== '/repo') return;
+    await store.fetchAccounts();
+    const { id, path } = query;
+
+    if (id) {
+
+        selectedAccount.value = Number(id);
+        currentPath.value = path ? path as string : '';
+    }
+    else {
+
+        if (store.accounts.length > 0) {
+            selectedAccount.value = store.accounts[0].id;
+        }
+        currentPath.value = '';
+    }
+    // Fetch data after updating both account and path
+    await fetchRepo();
+}, { immediate: true });
+
+
+onMounted(async () => {
+
+});
+
+
+
+const handleNewFile = () => {
+    if (!selectedAccount.value) {
+        MessagePlugin.error('请先选择仓库');
+        return;
+    }
+    let path = currentPath.value;
+    router.push({
+        path: '/content',
+        query: {
+            id: selectedAccount.value,
+            path: path,
+            newFile: 1,
+        }
+    });
+};
+</script>
+
+<template>
+    <div class="repository-browser w-full flex flex-col p-3 md:p-5 gap-3 md:gap-5 bg-gray-50">
+        <RepoHeader :selected-account="selectedAccount" :current-path="currentPath" :accounts="store.accounts"
+            @path-click="handleBreadcrumbClick" @root-click="handleRootClick"
+            @update:selected-account="handleAccountChange">
+            <div class="flex gap-2 items-center">
+                <t-button theme="primary" @click="handleNewFile" class="flex items-center gap-1">
+                    <template #icon>
+                        <FileIcon />
+                    </template>
+                    新建文件
+                </t-button>
+            </div>
+        </RepoHeader>
+
+        <div class="content-section flex-1 bg-white rounded-lg shadow-sm">
+            <t-table :data="sortedFiles" :loading="loading" :columns="columns" row-key="sha" hover stripe size="medium"
+                class="min-w-full" @row-click="handleRowClick" row-class-name="hover:bg-blue-50 cursor-pointer" />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.repository-browser {
+    min-height: 600px;
+}
+
+/* Add subtle hover animations */
+.t-table__row:hover {
+    transition: all 0.2s ease;
+}
+
+/* Additional responsive styles */
+@media (max-width: 640px) {
+    .t-table {
+        font-size: 0.875rem;
+    }
+}
+</style>

src/views/SettingView.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { MessagePlugin } from 'tdesign-vue-next';
+import { settingApi, type Settings } from '../services/settingApi';
+
+const settings = ref<Settings>({
+    feishu: {
+        app_id: '',
+        app_secret: '',
+        verification_token: '',
+        encrypt_key: '',
+        receive_id: ''
+    }
+});
+
+const loading = ref(false);
+
+onMounted(async () => {
+    try {
+        const data = await settingApi.get();
+        // 合并默认值和获取的数据
+        settings.value = {
+            feishu: {
+                ...settings.value.feishu,
+                ...data.feishu
+            }
+        };
+    } catch (error) {
+        MessagePlugin.error('获取设置失败');
+    }
+});
+
+const handleSave = async () => {
+    loading.value = true;
+    try {
+        if (!settings.value) {
+            return
+        }
+        await settingApi.update(settings.value);
+        MessagePlugin.success('保存成功');
+    } catch (error) {
+        MessagePlugin.error('保存失败');
+    } finally {
+        loading.value = false;
+    }
+};
+</script>
+
+<template>
+    <div class="setting-container p-2 md:p-5">
+
+        <t-form :data="settings" @submit="handleSave">
+            <t-card bordered>
+                <t-divider>飞书配置</t-divider>
+                <t-form-item label="应用ID" name="feishu.app_id">
+                    <t-input v-model="settings.feishu.app_id" placeholder="请输入飞书应用ID" />
+                </t-form-item>
+                <t-form-item label="应用密钥" name="feishu.app_secret">
+                    <t-input v-model="settings.feishu.app_secret" type="password" placeholder="请输入飞书应用密钥" />
+                </t-form-item>
+                <t-form-item label="验证Token" name="feishu.verification_token">
+                    <t-input v-model="settings.feishu.verification_token" placeholder="请输入飞书应用验证Token" />
+                </t-form-item>
+                <t-form-item label="加密Key" name="feishu.encrypt_key">
+                    <t-input v-model="settings.feishu.encrypt_key" placeholder="请输入飞书应用加密Key" />
+                </t-form-item>
+                <t-form-item label="接收ID" name="feishu.receive_id">
+                    <t-input v-model="settings.feishu.receive_id" placeholder="请输入飞书机器人接收ID" />
+                </t-form-item>
+
+
+                <t-form-item class="flex justify-center">
+                    <t-button theme="primary" type="submit" :loading="loading">保存设置</t-button>
+                </t-form-item>
+            </t-card>
+
+
+        </t-form>
+    </div>
+</template>
+
+<style scoped></style>

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

test/index.spec.ts

@@ -0,0 +1,25 @@
+// test/index.spec.ts
+import { env, createExecutionContext, waitOnExecutionContext, SELF } from 'cloudflare:test';
+import { describe, it, expect } from 'vitest';
+import worker from '../src/index';
+
+// For now, you'll need to do something like this to get a correctly-typed
+// `Request` to pass to `worker.fetch()`.
+const IncomingRequest = Request<unknown, IncomingRequestCfProperties>;
+
+describe('Hello World worker', () => {
+	it('responds with Hello World! (unit style)', async () => {
+		const request = new IncomingRequest('http://example.com');
+		// Create an empty context to pass to `worker.fetch()`.
+		const ctx = createExecutionContext();
+		const response = await worker.fetch(request, env, ctx);
+		// Wait for all `Promise`s passed to `ctx.waitUntil()` to settle before running test assertions
+		await waitOnExecutionContext(ctx);
+		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+	});
+
+	it('responds with Hello World! (integration style)', async () => {
+		const response = await SELF.fetch('https://example.com');
+		expect(await response.text()).toMatchInlineSnapshot(`"Hello World!"`);
+	});
+});

test/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"types": ["@cloudflare/workers-types/experimental", "@cloudflare/vitest-pool-workers"]
+	},
+	"include": ["./**/*.ts", "../worker-configuration.d.ts"],
+	"exclude": []
+}

tsconfig.app.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

tsconfig.functions.json

@@ -0,0 +1,50 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig.json to read more about this file */
+		/* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+		"target": "ESNext",
+		/* Specify a set of bundled library declaration files that describe the target runtime environment. */
+		"lib": [
+			"esnext"
+		],
+		/* Specify what JSX code is generated. */
+		"jsx": "react-jsx",
+		/* Specify what module code is generated. */
+		"module": "ESNext",
+		/* Specify how TypeScript looks up a file from a given module specifier. */
+		"moduleResolution": "node",
+		/* Specify type package names to be included without being referenced in a source file. */
+		"types": [
+			//"@cloudflare/workers-types/2023-07-01",
+			"node"
+		],
+		/* Enable importing .json files */
+		"resolveJsonModule": true,
+		/* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
+		"allowJs": true,
+		/* Enable error reporting in type-checked JavaScript files. */
+		"checkJs": false,
+
+		/* Ensure that each file can be safely transpiled without relying on other imports. */
+		"isolatedModules": true,
+		/* Allow 'import x from y' when a module doesn't have a default export. */
+		"allowSyntheticDefaultImports": true,
+		/* Ensure that casing is correct in imports. */
+		"forceConsistentCasingInFileNames": true,
+		/* Enable all strict type-checking options. */
+		"strict": true,
+		/* Skip type checking all .d.ts files. */
+		"skipLibCheck": true,
+		"outDir": "./dist-server",    // 输出到 dist
+		"noEmit": false, //允许编译器生成 JavaScript 输出文件
+	},
+	"exclude": [
+		"test"
+	],
+	"include": [
+		"worker-configuration.d.ts",
+		"functions/types.d.ts",
+		"index.ts",
+		"functions/**/*.ts"
+	]
+}

tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.functions.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}