feat: Phase 4 多租户隔离 + 四阶段升级测试 + CSS 统一化

Phase 4: org_id 注入 JWT/API 过滤/组织管理 CRUD/前端组织列
测试: tests/test_phase_upgrades.py 97项全覆盖
CSS: theme-modern.css 共享 mobile-card-list/status-dot/search-bar 等模式
修复: initial_data.py LLM配置 NOT NULL 约束, TopicResponse 含 org_id
This commit is contained in:
Yuzhiran Dev
2026-05-17 06:56:53 +08:00
parent 301dc3e438
commit 9c37c9a574
45 changed files with 3707 additions and 1366 deletions
+26 -31
View File
@@ -7,14 +7,6 @@
<link rel="stylesheet" href="element-plus.css">
<link rel="stylesheet" href="theme-modern.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f5f7fa; }
.main-content { display: flex; flex: 1; max-width: 1400px; margin: 0 auto; }
.content-area { flex: 1; padding: 24px; overflow-y: auto; }
.card { background: white; border-radius: 16px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow-x: auto; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@media (max-width: 768px) {
.content-area { padding: 16px; padding-bottom: 80px; }
}
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.asset-item { border: 1px solid #ebeef5; border-radius: 8px; padding: 12px; transition: all 0.3s; cursor: pointer; }
.asset-item:hover { border-color: #409eff; box-shadow: 0 2px 12px rgba(64,158,255,0.2); }
@@ -25,34 +17,35 @@
.upload-area { border: 2px dashed #dcdfe6; border-radius: 12px; padding: 40px; text-align: center; cursor: pointer; transition: all 0.3s; }
.upload-area:hover { border-color: #409eff; background: #f0f9eb; }
.upload-icon { font-size: 48px; color: #c0c4cc; }
.filter-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
@media (max-width: 768px) {
.asset-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
}
</style>
<script src="navigation-component.js"></script>
<script src="navbar-component.js"></script>
<script src="uni-nav.js"></script>
</head>
<body>
<div id="app">
<navbar-component title="素材库" :username="currentUser.username" :is-admin="isAdmin" @logout="handleLogout"></navbar-component>
<navigation-component current-page="assets" :is-admin="isAdmin" @navigate="redirectToPage"></navigation-component>
<uni-nav title="素材库" :username="currentUser.username" :is-admin="isAdmin" current-page="assets" @navigate="redirectToPage" @logout="handleLogout">
</uni-nav>
<div class="main-content">
<main class="content-area">
<h2 style="font-size: 24px; font-weight: 700; margin-bottom: 24px; color: #303133;">🖼️ 素材库</h2>
<h2 style="font-size: 24px; font-weight: 700; margin-bottom: 24px; color: #303133;"><el-icon style="vertical-align:-2px;"><IconPicture /></el-icon> 素材库</h2>
<div class="card page-fade">
<div class="filter-bar">
<el-input v-model="searchKeyword" placeholder="搜索素材..." style="width: 200px;" clearable @clear="loadAssets" @keyup.enter="loadAssets">
<template #prefix><span>🔍</span></template>
<el-input v-model="searchKeyword" placeholder="搜索素材..." clearable @clear="loadAssets" @keyup.enter="loadAssets" style="flex:1;min-width:140px;">
<template #prefix><el-icon style="vertical-align:-2px;"><IconSearch /></el-icon></template>
</el-input>
<el-select v-model="filterType" placeholder="文件类型" style="width: 120px;" clearable @change="loadAssets">
<el-select v-model="filterType" placeholder="文件类型" clearable @change="loadAssets" style="width:120px;">
<el-option label="全部" value=""></el-option>
<el-option label="图片" value="image"></el-option>
<el-option label="视频" value="video"></el-option>
<el-option label="文档" value="document"></el-option>
</el-select>
<el-select v-model="filterTag" placeholder="标签筛选" style="width: 150px;" clearable @change="loadAssets">
<el-select v-model="filterTag" placeholder="标签筛选" clearable @change="loadAssets" style="width:130px;">
<el-option v-for="tag in allTags" :key="tag" :label="tag" :value="tag"></el-option>
</el-select>
<el-button @click="loadAssets">🔄 刷新</el-button>
<el-button type="primary" @click="showUploadDialog = true">📤 上传素材</el-button>
<el-button @click="loadAssets"><el-icon style="vertical-align:-2px;"><IconRefresh /></el-icon> 刷新</el-button>
<el-button type="primary" @click="showUploadDialog = true"><el-icon style="vertical-align:-2px;"><IconUpload /></el-icon> 上传素材</el-button>
</div>
<div style="margin-bottom: 16px; display: flex; gap: 20px; font-size: 14px; color: #606266;">
<span>总计: {{ assetStats.total }} 个</span>
@@ -60,15 +53,15 @@
</div>
<div v-if="loading" style="text-align: center; padding: 40px;">加载中...</div>
<div v-else-if="assets.length === 0" style="text-align: center; padding: 40px; color: #909399;">
<div style="font-size: 48px; margin-bottom: 16px;">📂</div>
<el-icon style="font-size:48px;margin-bottom:16px;color:#c0c4cc;"><IconPicture /></el-icon>
<div>暂无素材,点击上方按钮上传</div>
</div>
<div v-else class="asset-grid">
<div v-for="asset in assets" :key="asset.id" class="asset-item" @click="previewAsset(asset)">
<div class="asset-thumb">
<template v-if="asset.file_type === 'image'">🖼️</template>
<template v-if="asset.file_type === 'image'"><el-icon style="font-size:32px;"><IconPicture /></el-icon></template>
<template v-else-if="asset.file_type === 'video'">🎬</template>
<template v-else>📄</template>
<template v-else><el-icon style="font-size:32px;"><IconDocument /></el-icon></template>
</div>
<div class="asset-name">{{ asset.filename }}</div>
<div class="asset-meta">{{ formatSize(asset.size) }} | {{ formatDate(asset.created_at) }}</div>
@@ -87,7 +80,7 @@
<el-dialog v-model="showUploadDialog" title="上传素材" width="500px">
<el-upload ref="uploadRef" drag :auto-upload="false" :limit="10" :on-change="handleFileChange" multiple accept="image/*,.pdf,.doc,.docx,.ppt,.pptx,.mp4,.mov,.avi">
<div class="upload-area">
<div class="upload-icon">📤</div>
<el-icon style="font-size:48px;color:#c0c4cc;"><IconUpload /></el-icon>
<div style="margin-top: 12px; color: #606266;">将文件拖到此处,或<span style="color: #409eff;">点击上传</span></div>
<div style="font-size: 12px; color: #909399; margin-top: 8px;">支持: JPG, PNG, GIF, WebP, PDF, Word, PPT, MP4</div>
</div>
@@ -104,9 +97,9 @@
<el-dialog v-model="showPreviewDialog" title="素材预览" width="800px">
<div v-if="previewAssetData" style="text-align: center;">
<div style="font-size: 64px; margin-bottom: 16px;">
<template v-if="previewAssetData.file_type === 'image'">🖼️</template>
<template v-if="previewAssetData.file_type === 'image'"><el-icon style="font-size:64px;"><IconPicture /></el-icon></template>
<template v-else-if="previewAssetData.file_type === 'video'">🎬</template>
<template v-else>📄</template>
<template v-else><el-icon style="font-size:64px;"><IconDocument /></el-icon></template>
</div>
<div style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">{{ previewAssetData.filename }}</div>
<div style="color: #909399; font-size: 14px;">{{ formatSize(previewAssetData.size) }} | {{ formatDate(previewAssetData.created_at) }}</div>
@@ -119,6 +112,7 @@
</el-dialog>
</div>
<script src="vue.global.prod.js"></script>
<script src="icon-components.js"></script>
<script src="element-plus.full.js"></script>
<script>
const AssetsApp = {
@@ -186,7 +180,8 @@ const AssetsApp = {
if (this.searchKeyword) url += '&search=' + encodeURIComponent(this.searchKeyword);
const res = await fetch(url, { headers: { 'Authorization': 'Bearer ' + token } });
if (res.ok) this.assets = await res.json();
} catch (e) { console.error(e); }
else { const d = await res.json().catch(() => ({})); throw new Error(d.detail || '加载失败'); }
} catch (e) { console.error(e); this.$message.error('加载素材失败: ' + e.message); }
finally { this.loading = false; }
},
async loadTags() {
@@ -194,14 +189,14 @@ const AssetsApp = {
const token = localStorage.getItem('authToken');
const res = await fetch('/api/assets/tags', { headers: { 'Authorization': 'Bearer ' + token } });
if (res.ok) this.allTags = await res.json();
} catch (e) { console.error(e); }
} catch (e) { console.error(e); this.$message.error('加载标签失败: ' + e.message); }
},
async loadStats() {
try {
const token = localStorage.getItem('authToken');
const res = await fetch('/api/assets/counts', { headers: { 'Authorization': 'Bearer ' + token } });
if (res.ok) this.assetStats = await res.json();
} catch (e) { console.error(e); }
} catch (e) { console.error(e); this.$message.error('加载统计失败: ' + e.message); }
},
handleFileChange(file, fileList) { this.uploadFiles = fileList; },
async uploadFiles() {
@@ -247,8 +242,8 @@ const AssetsApp = {
};
const app = Vue.createApp(AssetsApp);
app.use(ElementPlus);
if (window.installNavbar) { window.installNavbar(app); }
if (window.installNavigation) { window.installNavigation(app); } else if (window.NavigationComponent) { app.component("navigation-component", window.NavigationComponent); }
if (window.installIcons) { window.installIcons(app); }
if (window.installUniNav) { window.installUniNav(app); }
app.mount('#app');
</script>
</body>