feat: add token-based API access (v0.6.0)

- Add Token GORM model with UserID/Name/Token/LastUsedAt/ExpiresAt fields
- Add TokenManager controller: List/Create/Delete/Verify operations
- Add token HTTP handlers: list, create, revoke
- Update AuthVerify to support Bearer token auth; API tokens use "ust_" prefix to distinguish from session tokens
- Add one-step file upload endpoint: PUT /api/v1/upload/:filename (returns {"status":200,"data":{"code":"..."}})
- Add token management routes: GET/POST/DELETE /api/token
- Add /self page: personal center with account info, token management table, and curl usage guide
- Add "个人中心 / API Token" nav link for users with token_manage permission

🤖 Generated with [Qoder][https://qoder.com]

frontend/src/api/token.ts

@@ -0,0 +1,53 @@
+export interface ApiToken {
+    id: number;
+    user_id: number;
+    name: string;
+    created_at: string;
+    last_used_at: string | null;
+    expires_at: string | null;
+}
+
+export interface CreateTokenRes {
+    id: number;
+    name: string;
+    token: string;
+    created_at: string;
+}
+
+const jsonHeaders: HeadersInit = {'Content-Type': 'application/json'};
+
+export const tokenApi = {
+    list: async (): Promise<ApiToken[]> => {
+        const res = await fetch('/api/token', {headers: jsonHeaders});
+        if (!res.ok) {
+            const json = await res.json().catch(() => ({}));
+            throw new Error(json.msg || '查询失败');
+        }
+        return (await res.json()).data;
+    },
+
+    create: async (name: string): Promise<CreateTokenRes> => {
+        const res = await fetch('/api/token', {
+            method: 'POST',
+            headers: jsonHeaders,
+            body: JSON.stringify({name}),
+        });
+        if (!res.ok) {
+            const json = await res.json().catch(() => ({}));
+            throw new Error(json.msg || '创建失败');
+        }
+        return (await res.json()).data;
+    },
+
+    delete: async (id: number): Promise<void> => {
+        const res = await fetch('/api/token', {
+            method: 'DELETE',
+            headers: jsonHeaders,
+            body: JSON.stringify({id}),
+        });
+        if (!res.ok) {
+            const json = await res.json().catch(() => ({}));
+            throw new Error(json.msg || '删除失败');
+        }
+    },
+};

frontend/src/main.tsx

@@ -7,6 +7,7 @@ import {FileSharing} from "./page/share/share.tsx";
 import {LocalSharing} from "./page/local/local.tsx";
 import {TestPage} from "./page/test/test.tsx";
 import {AdminPage} from "./page/admin/admin.tsx";
+import {SelfPage} from "./page/self/self.tsx";
 
 const container = document.getElementById('root')
 const root = createRoot(container!)
@@ -14,6 +15,7 @@ const router = createBrowserRouter([
     {path: "/login", element: <Login />},
     {path: "/share", element: <FileSharing />},
     {path: "/admin", element: <AdminPage />},
+    {path: "/self", element: <SelfPage />},
     {path: "/test", element: <TestPage />},
     {path: "*", element: <LocalSharing />},
 ])

frontend/src/page/self/self.tsx

@@ -0,0 +1,429 @@
+import React, {useEffect, useState} from 'react';
+import {createUseStyles} from 'react-jss';
+import {tokenApi, ApiToken, CreateTokenRes} from '../../api/token.ts';
+import {message} from '../../hook/message/u-message.tsx';
+import {UButton} from '../../component/button/u-button.tsx';
+
+const useStyle = createUseStyles({
+    container: {
+        minHeight: '100vh',
+        backgroundColor: '#e3f2fd',
+        padding: '24px',
+        boxSizing: 'border-box',
+        fontFamily: "'Segoe UI', Arial, sans-serif",
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '16px',
+        marginBottom: '24px',
+    },
+    backBtn: {
+        background: 'transparent',
+        border: '2px solid #2c9678',
+        color: '#2c9678',
+        borderRadius: '6px',
+        padding: '6px 14px',
+        cursor: 'pointer',
+        fontSize: '14px',
+        transition: 'background-color 0.2s',
+        '&:hover': {backgroundColor: 'rgba(44,150,120,0.1)'},
+    },
+    title: {
+        color: '#2c9678',
+        margin: 0,
+        fontSize: '22px',
+        fontWeight: 600,
+    },
+    card: {
+        backgroundColor: '#C8E6C9',
+        boxShadow: 'inset 0 0 15px rgba(56, 142, 60, 0.15)',
+        borderRadius: '15px',
+        padding: '24px',
+        marginBottom: '24px',
+    },
+    cardTitle: {
+        color: '#2c9678',
+        marginTop: 0,
+        marginBottom: '16px',
+        fontSize: '16px',
+        fontWeight: 600,
+    },
+    table: {
+        width: '100%',
+        borderCollapse: 'collapse',
+        fontSize: '14px',
+    },
+    th: {
+        backgroundColor: 'rgba(44,150,120,0.15)',
+        padding: '10px 12px',
+        textAlign: 'left',
+        color: '#2c9678',
+        fontWeight: 600,
+        borderBottom: '2px solid rgba(44,150,120,0.3)',
+    },
+    td: {
+        padding: '10px 12px',
+        borderBottom: '1px solid rgba(44,150,120,0.2)',
+        color: '#333',
+    },
+    trHover: {
+        '&:hover': {backgroundColor: 'rgba(44,150,120,0.05)'},
+    },
+    emptyRow: {
+        textAlign: 'center',
+        color: '#888',
+        padding: '24px',
+    },
+    actionBtn: {
+        padding: '4px 12px',
+        borderRadius: '4px',
+        border: 'none',
+        cursor: 'pointer',
+        fontSize: '13px',
+        transition: 'opacity 0.2s',
+        '&:hover': {opacity: 0.8},
+    },
+    deleteBtn: {
+        backgroundColor: '#e53935',
+        color: 'white',
+    },
+    topBar: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '16px',
+    },
+    // Dialog overlay
+    overlay: {
+        position: 'fixed',
+        inset: 0,
+        backgroundColor: 'rgba(0,0,0,0.4)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1000,
+    },
+    dialog: {
+        backgroundColor: '#C8E6C9',
+        borderRadius: '15px',
+        padding: '28px',
+        width: '440px',
+        maxWidth: '90vw',
+        boxShadow: '0 8px 32px rgba(0,0,0,0.2)',
+    },
+    dialogTitle: {
+        color: '#2c9678',
+        marginTop: 0,
+        marginBottom: '20px',
+        fontSize: '16px',
+        fontWeight: 600,
+    },
+    label: {
+        display: 'block',
+        color: '#2c9678',
+        fontSize: '13px',
+        marginBottom: '6px',
+        fontWeight: 500,
+    },
+    input: {
+        width: '100%',
+        padding: '8px 12px',
+        borderRadius: '6px',
+        border: '1px solid rgba(44,150,120,0.4)',
+        fontSize: '14px',
+        marginBottom: '16px',
+        boxSizing: 'border-box',
+        backgroundColor: 'rgba(255,255,255,0.8)',
+        outline: 'none',
+        '&:focus': {borderColor: '#2c9678'},
+    },
+    dialogFooter: {
+        display: 'flex',
+        gap: '10px',
+        justifyContent: 'flex-end',
+    },
+    cancelBtn: {
+        padding: '8px 18px',
+        borderRadius: '6px',
+        border: '2px solid #2c9678',
+        background: 'transparent',
+        color: '#2c9678',
+        cursor: 'pointer',
+        fontSize: '14px',
+        '&:hover': {backgroundColor: 'rgba(44,150,120,0.1)'},
+    },
+    tokenValueBox: {
+        backgroundColor: 'rgba(255,255,255,0.9)',
+        borderRadius: '8px',
+        padding: '12px 14px',
+        fontFamily: 'monospace',
+        fontSize: '13px',
+        wordBreak: 'break-all',
+        marginBottom: '12px',
+        color: '#1a1a2e',
+        border: '1px solid rgba(44,150,120,0.4)',
+    },
+    warningText: {
+        color: '#e53935',
+        fontSize: '12px',
+        marginBottom: '16px',
+    },
+    copyBtn: {
+        padding: '8px 18px',
+        borderRadius: '6px',
+        border: 'none',
+        background: '#2c9678',
+        color: 'white',
+        cursor: 'pointer',
+        fontSize: '14px',
+        '&:hover': {backgroundColor: '#1f6d5a'},
+    },
+    usageCard: {
+        backgroundColor: 'rgba(255,255,255,0.5)',
+        borderRadius: '10px',
+        padding: '16px 20px',
+    },
+    usageTitle: {
+        color: '#2c9678',
+        margin: '0 0 10px',
+        fontSize: '14px',
+        fontWeight: 600,
+    },
+    pre: {
+        margin: '6px 0',
+        padding: '10px 14px',
+        backgroundColor: '#1a1a2e',
+        color: '#c3e88d',
+        borderRadius: '6px',
+        fontSize: '13px',
+        overflowX: 'auto',
+        fontFamily: 'monospace',
+    },
+});
+
+interface Session {
+    user_id: number;
+    username: string;
+    role_label: string;
+    permissions: string[];
+}
+
+export const SelfPage: React.FC = () => {
+    const style = useStyle();
+    const [session, setSession] = useState<Session | null>(null);
+    const [tokens, setTokens] = useState<ApiToken[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [showCreate, setShowCreate] = useState(false);
+    const [newTokenName, setNewTokenName] = useState('');
+    const [creating, setCreating] = useState(false);
+    const [createdToken, setCreatedToken] = useState<CreateTokenRes | null>(null);
+
+    useEffect(() => {
+        fetch('/api/uauth/me')
+            .then(async res => {
+                if (!res.ok) {
+                    window.location.href = '/login';
+                    return;
+                }
+                const json = await res.json();
+                const s: Session = json.data;
+                setSession(s);
+                if (!s.permissions.includes('token_manage')) {
+                    message.warning('无 Token 管理权限');
+                    return;
+                }
+                return loadTokens();
+            })
+            .catch(() => {
+                window.location.href = '/login';
+            })
+            .finally(() => setLoading(false));
+    }, []);
+
+    async function loadTokens() {
+        try {
+            const list = await tokenApi.list();
+            setTokens(list ?? []);
+        } catch (e: unknown) {
+            message.error(e instanceof Error ? e.message : '加载失败');
+        }
+    }
+
+    async function handleCreate() {
+        if (!newTokenName.trim()) {
+            message.warning('请输入 Token 名称');
+            return;
+        }
+        setCreating(true);
+        try {
+            const res = await tokenApi.create(newTokenName.trim());
+            setCreatedToken(res);
+            setNewTokenName('');
+            setShowCreate(false);
+            await loadTokens();
+        } catch (e: unknown) {
+            message.error(e instanceof Error ? e.message : '创建失败');
+        } finally {
+            setCreating(false);
+        }
+    }
+
+    async function handleDelete(id: number, name: string) {
+        if (!confirm(`确认吊销 Token「${name}」？`)) return;
+        try {
+            await tokenApi.delete(id);
+            message.success('已吊销');
+            setTokens(prev => prev.filter(t => t.id !== id));
+        } catch (e: unknown) {
+            message.error(e instanceof Error ? e.message : '操作失败');
+        }
+    }
+
+    function handleCopyToken(val: string) {
+        navigator.clipboard.writeText(val)
+            .then(() => message.success('已复制到剪贴板'))
+            .catch(() => message.warning('复制失败，请手动复制'));
+    }
+
+    function formatDate(s: string | null) {
+        if (!s) return '-';
+        return new Date(s).toLocaleString();
+    }
+
+    const hasTokenPerm = session?.permissions.includes('token_manage') ?? false;
+
+    return (
+        <div className={style.container}>
+            <div className={style.header}>
+                <button className={style.backBtn} onClick={() => window.history.back()}>← 返回</button>
+                <h2 className={style.title}>个人中心</h2>
+            </div>
+
+            {!loading && session && (
+                <>
+                    {/* User info card */}
+                    <div className={style.card}>
+                        <h3 className={style.cardTitle}>账号信息</h3>
+                        <p style={{margin: '4px 0', color: '#333', fontSize: '14px'}}>
+                            用户名：<strong>{session.username}</strong>
+                        </p>
+                        <p style={{margin: '4px 0', color: '#333', fontSize: '14px'}}>
+                            角色：<strong>{session.role_label}</strong>
+                        </p>
+                    </div>
+
+                    {/* Token management card */}
+                    {hasTokenPerm && (
+                        <div className={style.card}>
+                            <div className={style.topBar}>
+                                <h3 className={style.cardTitle} style={{margin: 0}}>API Token</h3>
+                                <UButton onClick={() => setShowCreate(true)}>+ 新建 Token</UButton>
+                            </div>
+
+                            <table className={style.table}>
+                                <thead>
+                                <tr>
+                                    <th className={style.th}>名称</th>
+                                    <th className={style.th}>创建时间</th>
+                                    <th className={style.th}>最后使用</th>
+                                    <th className={style.th}>操作</th>
+                                </tr>
+                                </thead>
+                                <tbody>
+                                {tokens.length === 0 ? (
+                                    <tr>
+                                        <td className={style.td} colSpan={4} style={{textAlign: 'center', color: '#888'}}>
+                                            暂无 Token，点击「新建 Token」创建
+                                        </td>
+                                    </tr>
+                                ) : (
+                                    tokens.map(t => (
+                                        <tr key={t.id} className={style.trHover}>
+                                            <td className={style.td}>{t.name}</td>
+                                            <td className={style.td}>{formatDate(t.created_at)}</td>
+                                            <td className={style.td}>{formatDate(t.last_used_at)}</td>
+                                            <td className={style.td}>
+                                                <button
+                                                    className={`${style.actionBtn} ${style.deleteBtn}`}
+                                                    onClick={() => handleDelete(t.id, t.name)}
+                                                >
+                                                    吊销
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    ))
+                                )}
+                                </tbody>
+                            </table>
+
+                            {/* Usage guide */}
+                            <div style={{marginTop: '20px'}}>
+                                <div className={style.usageCard}>
+                                    <p className={style.usageTitle}>使用方式（curl 示例）</p>
+                                    <pre className={style.pre}>{`curl -H "Authorization: Bearer <your_token>" \\
+     -T <file_path> \\
+     https://<your_domain>/api/v1/upload/<filename>`}</pre>
+                                    <p style={{margin: '8px 0 4px', color: '#555', fontSize: '13px'}}>返回示例：</p>
+                                    <pre className={style.pre}>{`{"status":200,"data":{"code":"ABCD1234"}}`}</pre>
+                                    <p style={{margin: '8px 0 4px', color: '#555', fontSize: '13px'}}>下载文件：</p>
+                                    <pre className={style.pre}>{`https://<your_domain>/ushare/<code>`}</pre>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+
+                    {!hasTokenPerm && (
+                        <div className={style.card}>
+                            <p style={{color: '#888', margin: 0}}>当前角色无 Token 管理权限</p>
+                        </div>
+                    )}
+                </>
+            )}
+
+            {/* Create token dialog */}
+            {showCreate && (
+                <div className={style.overlay} onClick={() => setShowCreate(false)}>
+                    <div className={style.dialog} onClick={e => e.stopPropagation()}>
+                        <h3 className={style.dialogTitle}>新建 API Token</h3>
+                        <label className={style.label}>Token 名称</label>
+                        <input
+                            className={style.input}
+                            placeholder="例：服务器上传脚本"
+                            value={newTokenName}
+                            onChange={e => setNewTokenName(e.target.value)}
+                            onKeyDown={e => e.key === 'Enter' && handleCreate()}
+                            autoFocus
+                        />
+                        <div className={style.dialogFooter}>
+                            <button className={style.cancelBtn} onClick={() => setShowCreate(false)}>取消</button>
+                            <UButton onClick={handleCreate} loading={creating} disabled={creating}>
+                                创建
+                            </UButton>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {/* Newly created token display - shown only once */}
+            {createdToken && (
+                <div className={style.overlay} onClick={() => setCreatedToken(null)}>
+                    <div className={style.dialog} onClick={e => e.stopPropagation()}>
+                        <h3 className={style.dialogTitle}>Token 已创建</h3>
+                        <p className={style.warningText}>
+                            请立即复制并妥善保存，Token 值仅显示一次，关闭后无法再次查看！
+                        </p>
+                        <label className={style.label}>Token 名称：{createdToken.name}</label>
+                        <div className={style.tokenValueBox}>{createdToken.token}</div>
+                        <div className={style.dialogFooter}>
+                            <button className={style.cancelBtn} onClick={() => setCreatedToken(null)}>关闭</button>
+                            <button className={style.copyBtn} onClick={() => handleCopyToken(createdToken.token)}>
+                                复制 Token
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};

frontend/src/page/share/component/panel-left.tsx

@@ -70,6 +70,12 @@ const useUploadStyle = createUseStyles({
         opacity: 0.8,
         '&:hover': {opacity: 1, textDecoration: 'underline'},
     },
+    navLinks: {
+        display: 'flex',
+        justifyContent: 'center',
+        gap: '16px',
+        marginTop: '16px',
+    },
 })
 
 const useShowStyle = createUseStyles({
@@ -190,6 +196,7 @@ const PanelLeftUpload: React.FC<{ set_code: (code:string) => void }> = ({set_cod
     const {file, setFile} = useStore()
     const {uploadFile, progress, loading} = useFileUpload();
     const [isAdmin, setIsAdmin] = useState(false);
+    const [hasTokenPerm, setHasTokenPerm] = useState(false);
 
     useEffect(() => {
         fetch('/api/uauth/me').then(async res => {
@@ -197,6 +204,7 @@ const PanelLeftUpload: React.FC<{ set_code: (code:string) => void }> = ({set_cod
                 const json = await res.json();
                 const perms: string[] = json.data?.permissions ?? [];
                 setIsAdmin(perms.includes('user_manage'));
+                setHasTokenPerm(perms.includes('token_manage'));
             }
         }).catch(() => {});
     }, []);
@@ -249,6 +257,9 @@ const PanelLeftUpload: React.FC<{ set_code: (code:string) => void }> = ({set_cod
             {isAdmin && (
                 <a href="/admin" className={style.adminLink}>管理控制台</a>
             )}
+            {hasTokenPerm && (
+                <a href="/self" className={style.adminLink}>个人中心 / API Token</a>
+            )}
         </div>
     </div>
 }