📝 DEV-011: 码字台部署到开发者门户频道
将码字台 (Writing Platform) 构建产物部署到 docs/dev-portal/channels/DEV-011/writing/ - 使用 HashRouter 替代 BrowserRouter 确保子路径部署兼容性 - Vite base 使用 './' 相对路径 - 撤回之前触发天眼 R1/R5 的所有变更（不再修改 docs/index.html、deploy-pages.yml、preview-deploy.yml） - 仅在 dev-portal 沙箱频道内部署，走 Path B 安全通道 Co-authored-by: qinfendebingshuo <207279273+qinfendebingshuo@users.noreply.github.com> Agent-Logs-Url: https://github.com/qinfendebingshuo/guanghulab/sessions/d3e556e2-3a64-4a42-9d37-7c35970bda29
This commit is contained in:
copilot-swe-agent[bot]
parent
fdffea7f33
commit
b26d95b5b8
|
|
@ -36,61 +36,10 @@ jobs:
|
||||||
- name: Setup Pages
|
- name: Setup Pages
|
||||||
uses: actions/configure-pages@v5
|
uses: actions/configure-pages@v5
|
||||||
|
|
||||||
- name: Sync all modules to docs for GitHub Pages
|
- name: Sync Persona Studio frontend to docs
|
||||||
run: |
|
run: |
|
||||||
# Sync Persona Studio frontend
|
|
||||||
mkdir -p docs/persona-studio
|
mkdir -p docs/persona-studio
|
||||||
if [ -d "persona-studio/frontend" ]; then
|
cp -r persona-studio/frontend/* docs/persona-studio/
|
||||||
cp -r persona-studio/frontend/* docs/persona-studio/
|
|
||||||
fi
|
|
||||||
|
|
||||||
# Sync status-board
|
|
||||||
if [ -d "status-board" ]; then
|
|
||||||
mkdir -p docs/status-board
|
|
||||||
cp -r status-board/* docs/status-board/
|
|
||||||
[ -d "docs/status-board/node_modules" ] && rm -rf docs/status-board/node_modules
|
|
||||||
fi
|
|
||||||
|
|
||||||
# Sync ticket-system
|
|
||||||
if [ -d "ticket-system" ]; then
|
|
||||||
mkdir -p docs/ticket-system
|
|
||||||
cp -r ticket-system/* docs/ticket-system/
|
|
||||||
[ -d "docs/ticket-system/node_modules" ] && rm -rf docs/ticket-system/node_modules
|
|
||||||
fi
|
|
||||||
|
|
||||||
# Sync notification
|
|
||||||
if [ -d "notification" ]; then
|
|
||||||
mkdir -p docs/notification
|
|
||||||
cp -r notification/* docs/notification/
|
|
||||||
fi
|
|
||||||
|
|
||||||
# Sync dynamic-comic-studio
|
|
||||||
if [ -d "dynamic-comic-studio" ]; then
|
|
||||||
mkdir -p docs/dynamic-comic-studio
|
|
||||||
cp -r dynamic-comic-studio/* docs/dynamic-comic-studio/
|
|
||||||
find docs/dynamic-comic-studio/ -name "*.backup*" -o -name "*.save" -o -name "*.broken" | xargs rm -f 2>/dev/null || true
|
|
||||||
fi
|
|
||||||
|
|
||||||
# Sync m-series modules
|
|
||||||
for m in m01-login m05-user-center m07-dialogue-ui m10-cloud m11-module m15-cloud-drive; do
|
|
||||||
if [ -d "$m" ]; then
|
|
||||||
mkdir -p "docs/modules/$m"
|
|
||||||
find "$m" -maxdepth 1 -type f \( -name "*.html" -o -name "*.css" -o -name "*.js" \) -exec cp {} "docs/modules/$m/" \;
|
|
||||||
fi
|
|
||||||
done
|
|
||||||
|
|
||||||
# Sync frontend module
|
|
||||||
if [ -d "frontend" ]; then
|
|
||||||
mkdir -p docs/modules/frontend
|
|
||||||
cp frontend/index.html docs/modules/frontend/ 2>/dev/null || true
|
|
||||||
fi
|
|
||||||
|
|
||||||
# Sync dashboard data
|
|
||||||
if [ -d "data" ]; then
|
|
||||||
mkdir -p docs/data
|
|
||||||
cp data/system-health.json docs/data/ 2>/dev/null || true
|
|
||||||
cp data/bulletin-board.json docs/data/ 2>/dev/null || true
|
|
||||||
fi
|
|
||||||
|
|
||||||
- name: Upload Pages artifact
|
- name: Upload Pages artifact
|
||||||
uses: actions/upload-pages-artifact@v3
|
uses: actions/upload-pages-artifact@v3
|
||||||
|
|
|
||||||
|
|
@ -16,13 +16,6 @@ on:
|
||||||
- 'dynamic-comic-studio/**'
|
- 'dynamic-comic-studio/**'
|
||||||
- 'user-center/**'
|
- 'user-center/**'
|
||||||
- 'persona-studio/frontend/**'
|
- 'persona-studio/frontend/**'
|
||||||
- 'writing-platform/frontend/**'
|
|
||||||
- 'm01-login/**'
|
|
||||||
- 'm05-user-center/**'
|
|
||||||
- 'm07-dialogue-ui/**'
|
|
||||||
- 'm10-cloud/**'
|
|
||||||
- 'm11-module/**'
|
|
||||||
- 'm15-cloud-drive/**'
|
|
||||||
- 'data/bulletin-board.json'
|
- 'data/bulletin-board.json'
|
||||||
- 'data/system-health.json'
|
- 'data/system-health.json'
|
||||||
workflow_dispatch:
|
workflow_dispatch:
|
||||||
|
|
@ -50,11 +43,6 @@ jobs:
|
||||||
- name: 🔧 Setup Pages
|
- name: 🔧 Setup Pages
|
||||||
uses: actions/configure-pages@v5
|
uses: actions/configure-pages@v5
|
||||||
|
|
||||||
- name: 🔧 Setup Node.js
|
|
||||||
uses: actions/setup-node@v4
|
|
||||||
with:
|
|
||||||
node-version: '20'
|
|
||||||
|
|
||||||
- name: 🏗️ Build preview site
|
- name: 🏗️ Build preview site
|
||||||
run: |
|
run: |
|
||||||
echo "[PREVIEW] Building site for GitHub Pages..."
|
echo "[PREVIEW] Building site for GitHub Pages..."
|
||||||
|
|
@ -102,37 +90,6 @@ jobs:
|
||||||
cp data/bulletin-board.json docs/data/ 2>/dev/null || true
|
cp data/bulletin-board.json docs/data/ 2>/dev/null || true
|
||||||
fi
|
fi
|
||||||
|
|
||||||
# Sync m-series modules
|
|
||||||
for m in m01-login m05-user-center m07-dialogue-ui m10-cloud m11-module m15-cloud-drive; do
|
|
||||||
if [ -d "$m" ]; then
|
|
||||||
mkdir -p "docs/modules/$m"
|
|
||||||
echo "Copying $m..."
|
|
||||||
find "$m" -maxdepth 1 -type f \( -name "*.html" -o -name "*.css" -o -name "*.js" \) -exec cp {} "docs/modules/$m/" \;
|
|
||||||
fi
|
|
||||||
done
|
|
||||||
|
|
||||||
# Sync frontend module
|
|
||||||
if [ -d "frontend" ]; then
|
|
||||||
mkdir -p docs/modules/frontend
|
|
||||||
cp frontend/index.html docs/modules/frontend/ 2>/dev/null || true
|
|
||||||
fi
|
|
||||||
|
|
||||||
# Build and sync writing-platform (码字台)
|
|
||||||
if [ -d "writing-platform/frontend" ] && [ -f "writing-platform/frontend/package.json" ]; then
|
|
||||||
echo "Building writing-platform frontend..."
|
|
||||||
cd writing-platform/frontend
|
|
||||||
npm ci --ignore-scripts 2>/dev/null || npm install 2>/dev/null
|
|
||||||
npm run build 2>/dev/null && {
|
|
||||||
mkdir -p ../../docs/writing
|
|
||||||
cp -r dist/* ../../docs/writing/
|
|
||||||
echo "✅ Writing platform built and synced"
|
|
||||||
} || echo "⚠️ Writing platform build failed, using pre-built files if available"
|
|
||||||
cd ../..
|
|
||||||
fi
|
|
||||||
|
|
||||||
# Remove any backup/temporary files
|
|
||||||
find docs/ -name "*.backup" -o -name "*.backup2" -o -name "*.save" -o -name "*.broken" | xargs rm -f 2>/dev/null || true
|
|
||||||
|
|
||||||
echo "✅ Preview build complete"
|
echo "✅ Preview build complete"
|
||||||
|
|
||||||
- name: 📦 Upload Pages artifact
|
- name: 📦 Upload Pages artifact
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -5,7 +5,7 @@
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Writing Platform</title>
|
<title>Writing Platform</title>
|
||||||
<script type="module" crossorigin src="./assets/index-sDMNEmkX.js"></script>
|
<script type="module" crossorigin src="./assets/index-B5vdmTIQ.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="./assets/index--C4_NgnM.css">
|
<link rel="stylesheet" crossorigin href="./assets/index--C4_NgnM.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -1,379 +0,0 @@
|
||||||
/* === 全局重置 === */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: 'Segoe UI', 'PingFang SC', Roboto, system-ui, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
|
||||||
min-height: 100vh;
|
|
||||||
padding: 20px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 主容器 === */
|
|
||||||
.container {
|
|
||||||
max-width: 1400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border-radius: 24px;
|
|
||||||
padding: 24px;
|
|
||||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 标题区域 === */
|
|
||||||
h1 {
|
|
||||||
font-size: 2.5em;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
background: linear-gradient(45deg, #fff, #e94560);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
text-shadow: 0 0 20px rgba(233, 69, 96, 0.3);
|
|
||||||
letter-spacing: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 两列布局 === */
|
|
||||||
.main-layout {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 280px 1fr 300px;
|
|
||||||
gap: 20px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 左侧面板通用样式 === */
|
|
||||||
.left-panel, .right-panel {
|
|
||||||
background: rgba(10, 10, 20, 0.6);
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 素材分类标题 === */
|
|
||||||
.left-panel h3 {
|
|
||||||
color: #e94560;
|
|
||||||
margin: 16px 0 12px 0;
|
|
||||||
font-size: 1.2em;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
border-left: 4px solid #e94560;
|
|
||||||
padding-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-panel h3:first-of-type {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 素材网格 === */
|
|
||||||
.material-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 素材项 === */
|
|
||||||
.material-item {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 10px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.material-item:hover {
|
|
||||||
background: rgba(233, 69, 96, 0.2);
|
|
||||||
border-color: #e94560;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 中间画布区域 === */
|
|
||||||
.canvas-area {
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 画布 === */
|
|
||||||
#mainCanvas {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 800px;
|
|
||||||
aspect-ratio: 16/9;
|
|
||||||
background: #0a0a14;
|
|
||||||
border-radius: 16px;
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
||||||
border: 2px solid rgba(233, 69, 96, 0.3);
|
|
||||||
cursor: crosshair;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 画布控制栏 === */
|
|
||||||
.canvas-controls {
|
|
||||||
margin-top: 16px;
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 按钮样式 === */
|
|
||||||
.btn {
|
|
||||||
background: linear-gradient(45deg, #2a1a3a, #1a1a2e);
|
|
||||||
border: 1px solid #533483;
|
|
||||||
color: #fff;
|
|
||||||
padding: 10px 24px;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 0.95em;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:hover {
|
|
||||||
background: linear-gradient(45deg, #3a2a4a, #2a1a3a);
|
|
||||||
border-color: #e94560;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 6px 15px rgba(233, 69, 96, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: linear-gradient(45deg, #e94560, #533483);
|
|
||||||
border-color: #e94560;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background: linear-gradient(45deg, #ff5570, #634393);
|
|
||||||
box-shadow: 0 6px 20px rgba(233, 69, 96, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 右侧面板 === */
|
|
||||||
.right-panel {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 场景列表 === */
|
|
||||||
.scene-list {
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 12px;
|
|
||||||
min-height: 120px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.scene-item {
|
|
||||||
background: rgba(233, 69, 96, 0.1);
|
|
||||||
border: 1px solid #533483;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scene-item:hover {
|
|
||||||
background: rgba(233, 69, 96, 0.2);
|
|
||||||
border-color: #e94560;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scene-item.active {
|
|
||||||
background: rgba(233, 69, 96, 0.3);
|
|
||||||
border-color: #e94560;
|
|
||||||
box-shadow: 0 0 15px rgba(233, 69, 96, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 时间轴 === */
|
|
||||||
.timeline {
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 16px;
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline h3 {
|
|
||||||
color: #e94560;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-size: 1.1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-controls {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frames-container {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
overflow-x: auto;
|
|
||||||
padding: 12px 0;
|
|
||||||
min-height: 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame-thumb {
|
|
||||||
min-width: 120px;
|
|
||||||
height: 68px;
|
|
||||||
background: #0f0f1a;
|
|
||||||
border: 2px solid #533483;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
font-size: 0.8em;
|
|
||||||
color: #aaa;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame-thumb:hover {
|
|
||||||
border-color: #e94560;
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame-thumb.active {
|
|
||||||
border-color: #e94560;
|
|
||||||
background: rgba(233, 69, 96, 0.2);
|
|
||||||
box-shadow: 0 0 15px rgba(233, 69, 96, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame-index {
|
|
||||||
font-size: 1.2em;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #e94560;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 预览模式样式 === */
|
|
||||||
.preview-mode .left-panel,
|
|
||||||
.preview-mode .right-panel,
|
|
||||||
.preview-mode .timeline,
|
|
||||||
.preview-mode .canvas-controls .btn:not(#exitPreviewBtn):not(#playPreviewBtn):not(#pausePreviewBtn):not(#stopPreviewBtn) {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-mode .canvas-area {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
justify-content: center;
|
|
||||||
min-height: 80vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-mode #mainCanvas {
|
|
||||||
max-width: 1200px;
|
|
||||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-mode .preview-controls {
|
|
||||||
display: flex !important;
|
|
||||||
gap: 12px;
|
|
||||||
margin-top: 20px;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 分享面板样式 === */
|
|
||||||
.share-panel {
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
background: #1a1a2e;
|
|
||||||
border: 2px solid #e94560;
|
|
||||||
border-radius: 24px;
|
|
||||||
padding: 30px;
|
|
||||||
z-index: 1000;
|
|
||||||
min-width: 400px;
|
|
||||||
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-panel h3 {
|
|
||||||
color: #e94560;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-url {
|
|
||||||
background: #0a0a14;
|
|
||||||
border: 1px solid #533483;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 12px;
|
|
||||||
margin: 15px 0;
|
|
||||||
word-break: break-all;
|
|
||||||
font-size: 0.9em;
|
|
||||||
color: #fff;
|
|
||||||
max-height: 100px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 遮罩层 === */
|
|
||||||
.overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 工具类 === */
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === canvas-asset（来自原来文件，保留） === */
|
|
||||||
.canvas-asset:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.canvas-asset.selected {
|
|
||||||
outline: 2px dashed #e94560;
|
|
||||||
outline-offset: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* === 滚动条样式（来自原来文件，保留） === */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: #0f0f1a;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #533483;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #e94560;
|
|
||||||
}
|
|
||||||
|
|
@ -1,110 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>HoloLake 动态漫制作系统 - 环节6</title>
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<h1>🎬 HoloLake 动态漫制作系统</h1>
|
|
||||||
|
|
||||||
<!-- 主布局容器 -->
|
|
||||||
<div class="main-layout">
|
|
||||||
<!-- 左侧素材面板 -->
|
|
||||||
<div class="left-panel">
|
|
||||||
<h3>📦 素材库</h3>
|
|
||||||
|
|
||||||
<h3>角色</h3>
|
|
||||||
<div class="material-grid">
|
|
||||||
<div class="material-item" draggable="true" data-type="character" data-emoji="😊">😊 开心</div>
|
|
||||||
<div class="material-item" draggable="true" data-type="character" data-emoji="😢">😢 难过</div>
|
|
||||||
<div class="material-item" draggable="true" data-type="character" data-emoji="😠">😠 生气</div>
|
|
||||||
<div class="material-item" draggable="true" data-type="character" data-emoji="😴">😴 睡觉</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>物品</h3>
|
|
||||||
<div class="material-grid">
|
|
||||||
<div class="material-item" draggable="true" data-type="item" data-emoji="🌸">🌸 花</div>
|
|
||||||
<div class="material-item" draggable="true" data-type="item" data-emoji="⭐">⭐ 星星</div>
|
|
||||||
<div class="material-item" draggable="true" data-type="item" data-emoji="💎">💎 宝石</div>
|
|
||||||
<div class="material-item" draggable="true" data-type="item" data-emoji="📖">📖 书</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>场景</h3>
|
|
||||||
<div class="material-grid">
|
|
||||||
<div class="material-item" draggable="true" data-type="background" data-emoji="🏠">🏠 房子</div>
|
|
||||||
<div class="material-item" draggable="true" data-type="background" data-emoji="🌳">🌳 树林</div>
|
|
||||||
<div class="material-item" draggable="true" data-type="background" data-emoji="⛰️">⛰️ 山</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 中间画布区域 -->
|
|
||||||
<div class="canvas-area">
|
|
||||||
<canvas id="mainCanvas" width="800" height="450"></canvas>
|
|
||||||
|
|
||||||
<!-- 画布控制栏 -->
|
|
||||||
<div class="canvas-controls">
|
|
||||||
<button class="btn" onclick="exportScreenshot()">📷 截图</button>
|
|
||||||
<button class="btn" onclick="exportScene()">📤 导出JSON</button>
|
|
||||||
<button class="btn" onclick="document.getElementById('import-file').click()">📥 导入JSON</button>
|
|
||||||
<input type="file" id="import-file" style="display:none" accept=".json" onchange="importScene(event)">
|
|
||||||
<button class="btn btn-primary" id="previewBtn">👁️ 预览</button>
|
|
||||||
<button class="btn btn-primary" id="shareBtn">🔗 分享作品</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 预览模式专用控制按钮（默认隐藏） -->
|
|
||||||
<div class="preview-controls hidden">
|
|
||||||
<button class="btn btn-primary" id="playPreviewBtn">▶️ 播放</button>
|
|
||||||
<button class="btn" id="pausePreviewBtn">⏸️ 暂停</button>
|
|
||||||
<button class="btn" id="stopPreviewBtn">⏹️ 停止</button>
|
|
||||||
<button class="btn" id="exitPreviewBtn">✖️ 退出预览</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 右侧场景面板 -->
|
|
||||||
<div class="right-panel">
|
|
||||||
<h3>🎬 场景列表</h3>
|
|
||||||
<div class="scene-list" id="sceneList"></div>
|
|
||||||
<button class="btn" onclick="addScene()" style="width:100%; margin-top:10px;">➕ 新建场景</button>
|
|
||||||
|
|
||||||
<!-- 时间轴预览区域 -->
|
|
||||||
<div class="timeline">
|
|
||||||
<h3>⏱️ 时间轴</h3>
|
|
||||||
<div class="timeline-controls">
|
|
||||||
<button class="btn" onclick="addFrame()" style="padding:5px 15px;">➕ 新帧</button>
|
|
||||||
<button class="btn" onclick="deleteFrame()" style="padding:5px 15px;">🗑️ 删帧</button>
|
|
||||||
<button class="btn" onclick="togglePlayback()" id="timelinePlayBtn" style="padding:5px 15px;">▶️ 播放</button>
|
|
||||||
</div>
|
|
||||||
<div class="frames-container" id="framesContainer"></div>
|
|
||||||
<div style="margin-top:10px; display:flex; align-items:center; gap:10px;">
|
|
||||||
<span>速度:</span>
|
|
||||||
<input type="range" id="fpsSlider" min="1" max="12" value="4" style="flex:1;">
|
|
||||||
<span id="fpsValue">4 FPS</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 分享弹窗（默认隐藏） -->
|
|
||||||
<div id="shareOverlay" class="overlay hidden"></div>
|
|
||||||
<div id="sharePanel" class="share-panel hidden">
|
|
||||||
<h3>🔗 分享作品</h3>
|
|
||||||
<div>
|
|
||||||
<button class="btn" id="generateUrlBtn" style="margin-right:10px;">生成分享链接</button>
|
|
||||||
<button class="btn" id="generateEmbedBtn">生成嵌入代码</button>
|
|
||||||
</div>
|
|
||||||
<div id="shareUrlContainer" style="margin-top:20px;">
|
|
||||||
<div class="share-url" id="shareUrl"></div>
|
|
||||||
<div class="share-actions">
|
|
||||||
<button class="btn" id="copyShareBtn" style="display:none;">📋 复制</button>
|
|
||||||
<button class="btn" id="closeShareBtn">关闭</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="js/app.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,536 +0,0 @@
|
||||||
// HoloLake 动态漫制作系统 - 环节6 (预览与分享版)
|
|
||||||
// 基于环节5增强，新增预览模式、分享链接、嵌入代码功能
|
|
||||||
|
|
||||||
// ==================== 全局变量 ====================
|
|
||||||
let scenes = [
|
|
||||||
{
|
|
||||||
id: 'scene-1',
|
|
||||||
name: '场景1',
|
|
||||||
frames: [
|
|
||||||
{
|
|
||||||
id: 'frame-1-1',
|
|
||||||
assets: [] // 存储素材 { id, type, emoji, x, y, width, height }
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
let currentSceneIndex = 0;
|
|
||||||
let currentFrameIndex = 0;
|
|
||||||
let animationInterval = null;
|
|
||||||
let isPlaying = false;
|
|
||||||
let fps = 4;
|
|
||||||
let canvas = document.getElementById('mainCanvas');
|
|
||||||
let ctx = canvas.getContext('2d');
|
|
||||||
|
|
||||||
// ==================== 初始化 ====================
|
|
||||||
function init() {
|
|
||||||
console.log('HoloLake 动态漫制作系统 v6.0 初始化...');
|
|
||||||
updateUI();
|
|
||||||
setupEventListeners();
|
|
||||||
drawCurrentFrame();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 事件监听设置 ====================
|
|
||||||
function setupEventListeners() {
|
|
||||||
// FPS滑块
|
|
||||||
const fpsSlider = document.getElementById('fpsSlider');
|
|
||||||
if (fpsSlider) {
|
|
||||||
fpsSlider.addEventListener('input', function(e) {
|
|
||||||
fps = parseInt(e.target.value);
|
|
||||||
document.getElementById('fpsValue').textContent = fps + ' FPS';
|
|
||||||
if (isPlaying) {
|
|
||||||
stopAnimation();
|
|
||||||
startAnimation();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 预览按钮
|
|
||||||
const previewBtn = document.getElementById('previewBtn');
|
|
||||||
if (previewBtn) {
|
|
||||||
previewBtn.addEventListener('click', enterPreviewMode);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 预览模式按钮
|
|
||||||
const playPreviewBtn = document.getElementById('playPreviewBtn');
|
|
||||||
if (playPreviewBtn) {
|
|
||||||
playPreviewBtn.addEventListener('click', function() {
|
|
||||||
if (!isPlaying) {
|
|
||||||
startAnimation();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const pausePreviewBtn = document.getElementById('pausePreviewBtn');
|
|
||||||
if (pausePreviewBtn) {
|
|
||||||
pausePreviewBtn.addEventListener('click', function() {
|
|
||||||
if (isPlaying) {
|
|
||||||
stopAnimation();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const stopPreviewBtn = document.getElementById('stopPreviewBtn');
|
|
||||||
if (stopPreviewBtn) {
|
|
||||||
stopPreviewBtn.addEventListener('click', function() {
|
|
||||||
stopAnimation();
|
|
||||||
currentFrameIndex = 0;
|
|
||||||
updateUI();
|
|
||||||
drawCurrentFrame();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const exitPreviewBtn = document.getElementById('exitPreviewBtn');
|
|
||||||
if (exitPreviewBtn) {
|
|
||||||
exitPreviewBtn.addEventListener('click', exitPreviewMode);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分享按钮
|
|
||||||
const shareBtn = document.getElementById('shareBtn');
|
|
||||||
if (shareBtn) {
|
|
||||||
shareBtn.addEventListener('click', showSharePanel);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分享面板按钮
|
|
||||||
const generateUrlBtn = document.getElementById('generateUrlBtn');
|
|
||||||
if (generateUrlBtn) {
|
|
||||||
generateUrlBtn.addEventListener('click', generateShareUrl);
|
|
||||||
}
|
|
||||||
|
|
||||||
const generateEmbedBtn = document.getElementById('generateEmbedBtn');
|
|
||||||
if (generateEmbedBtn) {
|
|
||||||
generateEmbedBtn.addEventListener('click', generateEmbedCode);
|
|
||||||
}
|
|
||||||
|
|
||||||
const closeShareBtn = document.getElementById('closeShareBtn');
|
|
||||||
if (closeShareBtn) {
|
|
||||||
closeShareBtn.addEventListener('click', hideSharePanel);
|
|
||||||
}
|
|
||||||
|
|
||||||
const copyShareBtn = document.getElementById('copyShareBtn');
|
|
||||||
if (copyShareBtn) {
|
|
||||||
copyShareBtn.addEventListener('click', copyToClipboard);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 素材拖拽
|
|
||||||
const materialItems = document.querySelectorAll('.material-item');
|
|
||||||
materialItems.forEach(item => {
|
|
||||||
item.addEventListener('dragstart', handleDragStart);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 画布放置
|
|
||||||
canvas.addEventListener('dragover', (e) => e.preventDefault());
|
|
||||||
canvas.addEventListener('drop', handleDrop);
|
|
||||||
|
|
||||||
// 画布点击选择素材
|
|
||||||
canvas.addEventListener('click', handleCanvasClick);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 素材拖拽 ====================
|
|
||||||
function handleDragStart(e) {
|
|
||||||
const type = e.target.dataset.type;
|
|
||||||
const emoji = e.target.dataset.emoji;
|
|
||||||
e.dataTransfer.setData('text/plain', JSON.stringify({
|
|
||||||
type: type,
|
|
||||||
emoji: emoji
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 素材放置 ====================
|
|
||||||
function handleDrop(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
const rect = canvas.getBoundingClientRect();
|
|
||||||
const scaleX = canvas.width / rect.width;
|
|
||||||
const scaleY = canvas.height / rect.height;
|
|
||||||
|
|
||||||
const x = (e.clientX - rect.left) * scaleX;
|
|
||||||
const y = (e.clientY - rect.top) * scaleY;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const data = JSON.parse(e.dataTransfer.getData('text/plain'));
|
|
||||||
|
|
||||||
const currentScene = scenes[currentSceneIndex];
|
|
||||||
const currentFrame = currentScene.frames[currentFrameIndex];
|
|
||||||
|
|
||||||
const newAsset = {
|
|
||||||
id: 'asset-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9),
|
|
||||||
type: data.type,
|
|
||||||
emoji: data.emoji,
|
|
||||||
x: x - 25,
|
|
||||||
y: y - 25,
|
|
||||||
width: 50,
|
|
||||||
height: 50
|
|
||||||
};
|
|
||||||
|
|
||||||
currentFrame.assets.push(newAsset);
|
|
||||||
drawCurrentFrame();
|
|
||||||
updateUI();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('放置素材失败:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 画布点击选择 ====================
|
|
||||||
function handleCanvasClick(e) {
|
|
||||||
const rect = canvas.getBoundingClientRect();
|
|
||||||
const scaleX = canvas.width / rect.width;
|
|
||||||
const scaleY = canvas.height / rect.height;
|
|
||||||
|
|
||||||
const clickX = (e.clientX - rect.left) * scaleX;
|
|
||||||
const clickY = (e.clientY - rect.top) * scaleY;
|
|
||||||
|
|
||||||
const currentScene = scenes[currentSceneIndex];
|
|
||||||
const currentFrame = currentScene.frames[currentFrameIndex];
|
|
||||||
|
|
||||||
// 从后往前遍历，以便选中上层的素材
|
|
||||||
let selectedAsset = null;
|
|
||||||
for (let i = currentFrame.assets.length - 1; i >= 0; i--) {
|
|
||||||
const asset = currentFrame.assets[i];
|
|
||||||
if (clickX >= asset.x && clickX <= asset.x + asset.width &&
|
|
||||||
clickY >= asset.y && clickY <= asset.y + asset.height) {
|
|
||||||
selectedAsset = asset;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 移除所有选中状态
|
|
||||||
currentFrame.assets.forEach(a => delete a.selected);
|
|
||||||
|
|
||||||
// 设置新的选中状态
|
|
||||||
if (selectedAsset) {
|
|
||||||
selectedAsset.selected = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
drawCurrentFrame();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 绘制当前帧 ====================
|
|
||||||
function drawCurrentFrame() {
|
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
||||||
|
|
||||||
const currentScene = scenes[currentSceneIndex];
|
|
||||||
if (!currentScene) return;
|
|
||||||
|
|
||||||
const currentFrame = currentScene.frames[currentFrameIndex];
|
|
||||||
if (!currentFrame) return;
|
|
||||||
|
|
||||||
// 绘制背景色
|
|
||||||
ctx.fillStyle = '#0a0a14';
|
|
||||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
||||||
|
|
||||||
// 绘制所有素材
|
|
||||||
currentFrame.assets.forEach(asset => {
|
|
||||||
ctx.font = '40px "Segoe UI Emoji", "Apple Color Emoji", sans-serif';
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
ctx.textBaseline = 'middle';
|
|
||||||
ctx.fillText(asset.emoji, asset.x + asset.width/2, asset.y + asset.height/2);
|
|
||||||
|
|
||||||
// 如果被选中，绘制边框
|
|
||||||
if (asset.selected) {
|
|
||||||
ctx.strokeStyle = '#e94560';
|
|
||||||
ctx.lineWidth = 2;
|
|
||||||
ctx.setLineDash([5, 5]);
|
|
||||||
ctx.strokeRect(asset.x, asset.y, asset.width, asset.height);
|
|
||||||
ctx.setLineDash([]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 场景管理 ====================
|
|
||||||
function addScene() {
|
|
||||||
const newScene = {
|
|
||||||
id: 'scene-' + Date.now(),
|
|
||||||
name: '场景' + (scenes.length + 1),
|
|
||||||
frames: [
|
|
||||||
{
|
|
||||||
id: 'frame-' + Date.now() + '-1',
|
|
||||||
assets: []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
scenes.push(newScene);
|
|
||||||
currentSceneIndex = scenes.length - 1;
|
|
||||||
currentFrameIndex = 0;
|
|
||||||
updateUI();
|
|
||||||
drawCurrentFrame();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 帧管理 ====================
|
|
||||||
function addFrame() {
|
|
||||||
const currentScene = scenes[currentSceneIndex];
|
|
||||||
const currentFrame = currentScene.frames[currentFrameIndex];
|
|
||||||
|
|
||||||
// 深拷贝当前帧的素材
|
|
||||||
const newAssets = JSON.parse(JSON.stringify(currentFrame.assets));
|
|
||||||
// 移除选中状态
|
|
||||||
newAssets.forEach(a => delete a.selected);
|
|
||||||
|
|
||||||
const newFrame = {
|
|
||||||
id: 'frame-' + Date.now(),
|
|
||||||
assets: newAssets
|
|
||||||
};
|
|
||||||
|
|
||||||
currentScene.frames.splice(currentFrameIndex + 1, 0, newFrame);
|
|
||||||
currentFrameIndex++;
|
|
||||||
updateUI();
|
|
||||||
drawCurrentFrame();
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteFrame() {
|
|
||||||
const currentScene = scenes[currentSceneIndex];
|
|
||||||
if (currentScene.frames.length <= 1) {
|
|
||||||
alert('每个场景至少保留一帧');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
currentScene.frames.splice(currentFrameIndex, 1);
|
|
||||||
if (currentFrameIndex >= currentScene.frames.length) {
|
|
||||||
currentFrameIndex = currentScene.frames.length - 1;
|
|
||||||
}
|
|
||||||
updateUI();
|
|
||||||
drawCurrentFrame();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 动画控制 ====================
|
|
||||||
function togglePlayback() {
|
|
||||||
if (isPlaying) {
|
|
||||||
stopAnimation();
|
|
||||||
} else {
|
|
||||||
startAnimation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function startAnimation() {
|
|
||||||
if (isPlaying) return;
|
|
||||||
isPlaying = true;
|
|
||||||
updatePlayButton();
|
|
||||||
|
|
||||||
animationInterval = setInterval(() => {
|
|
||||||
const currentScene = scenes[currentSceneIndex];
|
|
||||||
if (currentFrameIndex < currentScene.frames.length - 1) {
|
|
||||||
currentFrameIndex++;
|
|
||||||
} else {
|
|
||||||
currentFrameIndex = 0;
|
|
||||||
}
|
|
||||||
updateUI();
|
|
||||||
drawCurrentFrame();
|
|
||||||
}, 1000 / fps);
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopAnimation() {
|
|
||||||
if (animationInterval) {
|
|
||||||
clearInterval(animationInterval);
|
|
||||||
animationInterval = null;
|
|
||||||
}
|
|
||||||
isPlaying = false;
|
|
||||||
updatePlayButton();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updatePlayButton() {
|
|
||||||
const playBtn = document.getElementById('timelinePlayBtn');
|
|
||||||
if (playBtn) {
|
|
||||||
playBtn.textContent = isPlaying ? '⏸️ 暂停' : '▶️ 播放';
|
|
||||||
}
|
|
||||||
|
|
||||||
const previewPlayBtn = document.getElementById('playPreviewBtn');
|
|
||||||
if (previewPlayBtn) {
|
|
||||||
// 预览模式的播放按钮文字不变
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 预览模式 ====================
|
|
||||||
function enterPreviewMode() {
|
|
||||||
document.body.classList.add('preview-mode');
|
|
||||||
// 如果正在播放动画，继续播放
|
|
||||||
}
|
|
||||||
|
|
||||||
function exitPreviewMode() {
|
|
||||||
document.body.classList.remove('preview-mode');
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 分享功能 ====================
|
|
||||||
function showSharePanel() {
|
|
||||||
document.getElementById('shareOverlay').classList.remove('hidden');
|
|
||||||
document.getElementById('sharePanel').classList.remove('hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideSharePanel() {
|
|
||||||
document.getElementById('shareOverlay').classList.add('hidden');
|
|
||||||
document.getElementById('sharePanel').classList.add('hidden');
|
|
||||||
document.getElementById('shareUrl').innerHTML = '';
|
|
||||||
document.getElementById('copyShareBtn').style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateShareUrl() {
|
|
||||||
// 序列化作品数据
|
|
||||||
const workData = {
|
|
||||||
scenes: scenes,
|
|
||||||
version: '1.0',
|
|
||||||
timestamp: Date.now()
|
|
||||||
};
|
|
||||||
|
|
||||||
const jsonStr = JSON.stringify(workData);
|
|
||||||
// 使用encodeURIComponent编码，然后生成Data URL
|
|
||||||
const encodedData = encodeURIComponent(jsonStr);
|
|
||||||
const dataUrl = 'data:text/json;charset=utf-8,' + encodedData;
|
|
||||||
|
|
||||||
// 显示分享链接
|
|
||||||
const shareUrlDiv = document.getElementById('shareUrl');
|
|
||||||
shareUrlDiv.innerHTML = `<a href="${dataUrl}" target="_blank">${dataUrl.substring(0, 50)}...</a>`;
|
|
||||||
|
|
||||||
document.getElementById('copyShareBtn').style.display = 'inline-block';
|
|
||||||
document.getElementById('copyShareBtn').dataset.url = dataUrl;
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateEmbedCode() {
|
|
||||||
// 生成iframe嵌入代码
|
|
||||||
const embedCode = `<iframe src="preview-player.html" width="800" height="450" frameborder="0" allowfullscreen></iframe>`;
|
|
||||||
|
|
||||||
const shareUrlDiv = document.getElementById('shareUrl');
|
|
||||||
shareUrlDiv.innerHTML = `<pre style="white-space: pre-wrap; background:#0a0a14; padding:10px; border-radius:8px;">${embedCode}</pre>`;
|
|
||||||
|
|
||||||
document.getElementById('copyShareBtn').style.display = 'inline-block';
|
|
||||||
document.getElementById('copyShareBtn').dataset.code = embedCode;
|
|
||||||
}
|
|
||||||
|
|
||||||
function copyToClipboard(e) {
|
|
||||||
const btn = e.target;
|
|
||||||
if (btn.dataset.url) {
|
|
||||||
navigator.clipboard.writeText(btn.dataset.url);
|
|
||||||
} else if (btn.dataset.code) {
|
|
||||||
navigator.clipboard.writeText(btn.dataset.code);
|
|
||||||
}
|
|
||||||
alert('已复制到剪贴板！');
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 导入导出 ====================
|
|
||||||
function exportScene() {
|
|
||||||
const dataStr = JSON.stringify(scenes, null, 2);
|
|
||||||
const blob = new Blob([dataStr], {type: 'application/json'});
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = url;
|
|
||||||
a.download = 'hololake-scene.json';
|
|
||||||
a.click();
|
|
||||||
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
}
|
|
||||||
|
|
||||||
function importScene(event) {
|
|
||||||
const file = event.target.files[0];
|
|
||||||
if (!file) return;
|
|
||||||
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = function(e) {
|
|
||||||
try {
|
|
||||||
const importedScenes = JSON.parse(e.target.result);
|
|
||||||
if (Array.isArray(importedScenes) && importedScenes.length > 0) {
|
|
||||||
scenes = importedScenes;
|
|
||||||
currentSceneIndex = 0;
|
|
||||||
currentFrameIndex = 0;
|
|
||||||
updateUI();
|
|
||||||
drawCurrentFrame();
|
|
||||||
alert('导入成功！');
|
|
||||||
} else {
|
|
||||||
alert('无效的场景数据');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
alert('导入失败：' + error.message);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
reader.readAsText(file);
|
|
||||||
|
|
||||||
// 清空input，以便再次导入同一个文件
|
|
||||||
event.target.value = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
function exportScreenshot() {
|
|
||||||
const dataUrl = canvas.toDataURL('image/png');
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = dataUrl;
|
|
||||||
a.download = 'hololake-screenshot-' + Date.now() + '.png';
|
|
||||||
a.click();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 更新UI ====================
|
|
||||||
function updateUI() {
|
|
||||||
// 更新场景列表
|
|
||||||
const sceneList = document.getElementById('sceneList');
|
|
||||||
if (sceneList) {
|
|
||||||
sceneList.innerHTML = '';
|
|
||||||
scenes.forEach((scene, index) => {
|
|
||||||
const sceneDiv = document.createElement('div');
|
|
||||||
sceneDiv.className = 'scene-item' + (index === currentSceneIndex ? ' active' : '');
|
|
||||||
sceneDiv.innerHTML = `
|
|
||||||
<span>${scene.name}</span>
|
|
||||||
<button onclick="deleteScene(${index})" style="background:none; border:none; color:#e94560; cursor:pointer;">✖️</button>
|
|
||||||
`;
|
|
||||||
sceneDiv.addEventListener('click', (e) => {
|
|
||||||
if (e.target.tagName !== 'BUTTON') {
|
|
||||||
switchScene(index);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
sceneList.appendChild(sceneDiv);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新帧列表
|
|
||||||
const framesContainer = document.getElementById('framesContainer');
|
|
||||||
if (framesContainer && scenes[currentSceneIndex]) {
|
|
||||||
framesContainer.innerHTML = '';
|
|
||||||
scenes[currentSceneIndex].frames.forEach((frame, index) => {
|
|
||||||
const frameDiv = document.createElement('div');
|
|
||||||
frameDiv.className = 'frame-thumb' + (index === currentFrameIndex ? ' active' : '');
|
|
||||||
frameDiv.innerHTML = `
|
|
||||||
<div class="frame-index">${index + 1}</div>
|
|
||||||
<div>${frame.assets.length}个素材</div>
|
|
||||||
`;
|
|
||||||
frameDiv.addEventListener('click', () => {
|
|
||||||
currentFrameIndex = index;
|
|
||||||
drawCurrentFrame();
|
|
||||||
updateUI();
|
|
||||||
});
|
|
||||||
framesContainer.appendChild(frameDiv);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新帧计数器
|
|
||||||
const frameCounter = document.getElementById('frame-counter');
|
|
||||||
if (frameCounter && scenes[currentSceneIndex]) {
|
|
||||||
frameCounter.textContent = `帧 ${currentFrameIndex + 1}/${scenes[currentSceneIndex].frames.length}`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function switchScene(index) {
|
|
||||||
if (index >= 0 && index < scenes.length) {
|
|
||||||
currentSceneIndex = index;
|
|
||||||
currentFrameIndex = 0;
|
|
||||||
if (isPlaying) {
|
|
||||||
stopAnimation();
|
|
||||||
}
|
|
||||||
updateUI();
|
|
||||||
drawCurrentFrame();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteScene(index) {
|
|
||||||
if (scenes.length <= 1) {
|
|
||||||
alert('至少保留一个场景');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
scenes.splice(index, 1);
|
|
||||||
if (currentSceneIndex >= scenes.length) {
|
|
||||||
currentSceneIndex = scenes.length - 1;
|
|
||||||
}
|
|
||||||
currentFrameIndex = 0;
|
|
||||||
if (isPlaying) {
|
|
||||||
stopAnimation();
|
|
||||||
}
|
|
||||||
updateUI();
|
|
||||||
drawCurrentFrame();
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==================== 启动初始化 ====================
|
|
||||||
window.onload = init;
|
|
||||||
307
docs/index.html
307
docs/index.html
|
|
@ -424,6 +424,7 @@ footer{padding:12px 18px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom
|
||||||
|
|
||||||
<!-- 自定义 API（高级·使用自己的 API 密钥） -->
|
<!-- 自定义 API（高级·使用自己的 API 密钥） -->
|
||||||
<div id="login-dev" class="login-mode">
|
<div id="login-dev" class="login-mode">
|
||||||
|
<div class="sc-sec">🔒 API 密钥仅本次会话有效，关闭标签页即自动清除</div>
|
||||||
|
|
||||||
<div class="fg">
|
<div class="fg">
|
||||||
<label>开发者身份</label>
|
<label>开发者身份</label>
|
||||||
|
|
@ -444,40 +445,27 @@ footer{padding:12px 18px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom
|
||||||
</div>
|
</div>
|
||||||
<div id="id-preview"></div>
|
<div id="id-preview"></div>
|
||||||
|
|
||||||
<!-- 🚀 一键检测 -->
|
<div class="fg">
|
||||||
<div style="background:rgba(79,142,247,0.08);border:1px solid rgba(79,142,247,0.25);border-radius:10px;padding:14px;margin-bottom:12px">
|
<label>API 端点 URL</label>
|
||||||
<div style="font-size:13px;color:var(--text);margin-bottom:8px">🚀 <strong>一键检测可用模型</strong></div>
|
<input type="text" id="sep" placeholder="https://api.example.com/v1">
|
||||||
<div style="font-size:12px;color:var(--dim);margin-bottom:10px;line-height:1.6">系统自动检测你的网络环境（国内/国际），连接服务器代理获取可用模型。无需输入 API 密钥。</div>
|
<small>输入你的 API 提供商端点地址（OpenAI 兼容格式）</small>
|
||||||
<button onclick="autoDetectAPI('s')" id="sdet-btn" class="det-btn" style="width:100%;padding:10px;font-size:14px;border-radius:8px;background:var(--accent);color:#fff;border:none;cursor:pointer" title="自动检测网络环境和可用模型">🔍 自动检测</button>
|
</div>
|
||||||
<small id="sdet-status" style="display:block;margin-top:8px;min-height:16px"></small>
|
<div class="fg">
|
||||||
|
<label>API 密钥</label>
|
||||||
|
<div style="display:flex;gap:6px;align-items:stretch">
|
||||||
|
<input type="password" id="sk" placeholder="粘贴你的 API 密钥" style="flex:1">
|
||||||
|
<button onclick="autoDetectAPI('s')" id="sdet-btn" class="det-btn" title="自动检测可用模型">🔍 检测模型</button>
|
||||||
|
</div>
|
||||||
|
<small id="sk-err" style="color:var(--err);display:none">⚠️ 请输入 API 密钥</small>
|
||||||
|
<small id="sdet-status" style="display:block;margin-top:4px;min-height:16px"></small>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="fg">
|
<div class="fg">
|
||||||
<label>选择模型</label>
|
<label>选择模型</label>
|
||||||
<select id="sm" disabled onchange="onModelSelectChange('s')"><option value="">— 请先点击「🔍 自动检测」—</option></select>
|
<select id="sm" disabled><option value="">— 请先检测可用模型 —</option></select>
|
||||||
<small id="sm-hint">点击上方「🔍 自动检测」一键获取可用模型列表</small>
|
<small id="sm-hint">输入端点和密钥后，点击「🔍 检测模型」自动获取可用模型列表</small>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 自定义 API 折叠区 -->
|
<button class="sc-btn" onclick="doSetup()">开始与铸渊对话 →</button>
|
||||||
<details style="margin-top:8px">
|
|
||||||
<summary style="cursor:pointer;font-size:12px;color:var(--dim);padding:6px 0">🔧 自定义 API（使用自己的密钥）</summary>
|
|
||||||
<div style="padding-top:8px">
|
|
||||||
<div class="fg">
|
|
||||||
<label>API 端点 URL</label>
|
|
||||||
<input type="text" id="sep" placeholder="https://api.example.com/v1">
|
|
||||||
<small>输入你的 API 提供商端点地址（OpenAI 兼容格式）</small>
|
|
||||||
</div>
|
|
||||||
<div class="fg">
|
|
||||||
<label>API 密钥</label>
|
|
||||||
<input type="password" id="sk" placeholder="粘贴你的 API 密钥" style="width:100%">
|
|
||||||
<small id="sk-err" style="color:var(--err);display:none">⚠️ 请输入 API 密钥</small>
|
|
||||||
<small style="color:var(--dim)">🔒 密钥仅本次会话有效，关闭标签页即自动清除</small>
|
|
||||||
</div>
|
|
||||||
<button onclick="autoDetectAPI('s')" class="det-btn" style="width:100%;margin-top:6px;padding:8px;border-radius:6px;cursor:pointer" title="使用自定义密钥检测模型">🔍 用自定义密钥检测模型</button>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<button class="sc-btn" onclick="doSetup()" style="margin-top:12px">开始与铸渊对话 →</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -502,9 +490,9 @@ footer{padding:12px 18px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom
|
||||||
<nav class="ls-nav">
|
<nav class="ls-nav">
|
||||||
<button class="nav-tab active" data-view="announcements" onclick="navigateTo('announcements')">📢 公告栏</button>
|
<button class="nav-tab active" data-view="announcements" onclick="navigateTo('announcements')">📢 公告栏</button>
|
||||||
<button class="nav-tab" data-view="chat" onclick="navigateTo('chat')">💬 聊天</button>
|
<button class="nav-tab" data-view="chat" onclick="navigateTo('chat')">💬 聊天</button>
|
||||||
<button class="nav-tab" onclick="window.open('persona-studio/','_blank')">🧠 Studio</button>
|
<button class="nav-tab" onclick="window.open('../persona-studio/frontend/index.html','_blank')">🧠 Studio</button>
|
||||||
<button class="nav-tab" onclick="window.open('status-board/','_blank')">📊 看板</button>
|
<button class="nav-tab" onclick="window.open('../status-board/','_blank')">📊 看板</button>
|
||||||
<button class="nav-tab" onclick="window.open('ticket-system/','_blank')">🎫 工单</button>
|
<button class="nav-tab" onclick="window.open('../ticket-system/','_blank')">🎫 工单</button>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<button class="ls-new-conv" onclick="newConvAndNav()">+ 新对话</button>
|
<button class="ls-new-conv" onclick="newConvAndNav()">+ 新对话</button>
|
||||||
|
|
@ -628,36 +616,23 @@ footer{padding:12px 18px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pb">
|
<div class="pb">
|
||||||
<!-- 🚀 一键检测可用模型 -->
|
<div class="sfg">
|
||||||
<div style="background:rgba(79,142,247,0.08);border:1px solid rgba(79,142,247,0.25);border-radius:10px;padding:12px;margin-bottom:12px">
|
<label>API 端点 URL</label>
|
||||||
<div style="display:flex;gap:8px;align-items:center">
|
<input type="text" id="cep" placeholder="https://api.example.com/v1">
|
||||||
<button onclick="autoDetectAPI('c')" id="cdet-btn" class="det-btn" style="flex:1;padding:10px;font-size:13px;border-radius:8px;background:var(--accent);color:#fff;border:none;cursor:pointer" title="自动检测网络环境和可用模型">🔍 一键检测可用模型</button>
|
|
||||||
</div>
|
|
||||||
<small style="display:block;margin-top:6px;color:var(--dim);font-size:11px">自动检测网络环境，连接服务器代理获取可用模型（无需密钥）</small>
|
|
||||||
<small id="cdet-status" style="display:block;margin-top:4px;min-height:14px"></small>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sfg">
|
<div class="sfg">
|
||||||
<label>选择模型</label>
|
<label>选择模型</label>
|
||||||
<select id="cm" onchange="onModelSelectChange('c')"></select>
|
<select id="cm"></select>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="sfg">
|
||||||
<!-- 自定义 API 折叠区 -->
|
<label>API 密钥</label>
|
||||||
<details style="margin-bottom:10px">
|
<div style="display:flex;gap:6px;align-items:stretch">
|
||||||
<summary style="cursor:pointer;font-size:12px;color:var(--dim);padding:6px 0">🔧 自定义 API（使用自己的密钥）</summary>
|
<input type="password" id="ck" placeholder="留空 = 保持当前密钥不变；粘贴新密钥即替换" style="flex:1">
|
||||||
<div style="padding-top:8px">
|
<button onclick="autoDetectAPI('c')" id="cdet-btn" class="det-btn" title="自动检测提供商和可用模型">🔍 自动检测</button>
|
||||||
<div class="sfg">
|
|
||||||
<label>API 端点 URL</label>
|
|
||||||
<input type="text" id="cep" placeholder="https://api.example.com/v1">
|
|
||||||
</div>
|
|
||||||
<div class="sfg">
|
|
||||||
<label>API 密钥</label>
|
|
||||||
<input type="password" id="ck" placeholder="留空 = 保持当前密钥不变；粘贴新密钥即替换" style="width:100%">
|
|
||||||
<small id="ck-hint" style="color:var(--dim)">🔒 密钥仅本次会话有效，关闭标签页自动清除</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</details>
|
<small id="ck-hint" style="color:var(--dim)">🔒 密钥仅本次会话有效，关闭标签页自动清除</small>
|
||||||
|
<small id="cdet-status" style="display:block;margin-top:4px;min-height:14px"></small>
|
||||||
|
</div>
|
||||||
<button class="sbtn2" onclick="saveSet()">💾 保存设置</button>
|
<button class="sbtn2" onclick="saveSet()">💾 保存设置</button>
|
||||||
|
|
||||||
<div class="sec-ttl">身份设置</div>
|
<div class="sec-ttl">身份设置</div>
|
||||||
|
|
@ -690,11 +665,11 @@ footer{padding:12px 18px 16px;padding-bottom:max(16px,env(safe-area-inset-bottom
|
||||||
|
|
||||||
<div class="sec-ttl">使用说明</div>
|
<div class="sec-ttl">使用说明</div>
|
||||||
<p style="font-size:12px;color:var(--dim);line-height:1.8">
|
<p style="font-size:12px;color:var(--dim);line-height:1.8">
|
||||||
1. 点击「🔍 一键检测可用模型」自动获取模型列表（无需密钥）<br>
|
1. 输入你的 API 端点和密钥，点击检测模型<br>
|
||||||
2. 如服务器代理可用，选择模型后直接对话<br>
|
2. 铸渊自动切换 💬 对话 / 🔨 构建 / 📋 审查 / 🧠 大脑 模式<br>
|
||||||
3. 也可展开「🔧 自定义 API」输入自己的端点和密钥<br>
|
3. 支持上传图片和文件（点击 📎 按钮或拖拽到对话区域）<br>
|
||||||
4. 铸渊自动切换 💬 对话 / 🔨 构建 / 📋 审查 / 🧠 大脑 模式<br>
|
4. 点 ⬇️ 下载单文件，放桌面直接打开使用<br>
|
||||||
5. 支持上传图片和文件（点击 📎 按钮或拖拽到对话区域）
|
5. 支持任意 OpenAI 兼容接口（输入端点 + 密钥即可）
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="sec-ttl" style="color:#ef4444;margin-top:16px">⚠️ 危险操作</div>
|
<div class="sec-ttl" style="color:#ef4444;margin-top:16px">⚠️ 危险操作</div>
|
||||||
|
|
@ -847,25 +822,6 @@ const KNOWN_ENDPOINTS = [
|
||||||
{label:'智谱 AI', base:'https://open.bigmodel.cn/api/paas/v4'},
|
{label:'智谱 AI', base:'https://open.bigmodel.cn/api/paas/v4'},
|
||||||
];
|
];
|
||||||
|
|
||||||
// ═══════════════════════════════════════════════════════
|
|
||||||
// 内置模型目录（按网络区域分类）
|
|
||||||
// 一键检测时，根据用户网络环境自动推荐可用模型
|
|
||||||
// ═══════════════════════════════════════════════════════
|
|
||||||
const MODEL_CATALOG = {
|
|
||||||
domestic: [
|
|
||||||
{provider:'yunwu', label:'云雾 AI（推荐·聚合）', models:['deepseek-chat','deepseek-reasoner','gpt-4o','claude-sonnet-4-20250514','gemini-2.5-pro-preview-05-06'], endpoint:'https://api.yunwu.ai/v1'},
|
|
||||||
{provider:'deepseek', label:'DeepSeek（国内直连）', models:['deepseek-chat','deepseek-reasoner'], endpoint:'https://api.deepseek.com/v1'},
|
|
||||||
{provider:'qwen', label:'通义千问 Qwen', models:['qwen-max','qwen-plus','qwen-turbo'], endpoint:'https://dashscope.aliyuncs.com/compatible-mode/v1'},
|
|
||||||
{provider:'moonshot', label:'Moonshot / Kimi', models:['moonshot-v1-8k','moonshot-v1-32k','moonshot-v1-128k'], endpoint:'https://api.moonshot.cn/v1'},
|
|
||||||
{provider:'zhipu', label:'智谱 AI', models:['glm-4','glm-4-flash'], endpoint:'https://open.bigmodel.cn/api/paas/v4'},
|
|
||||||
],
|
|
||||||
international: [
|
|
||||||
{provider:'openai', label:'OpenAI', models:['gpt-4o','gpt-4-turbo','gpt-4o-mini'], endpoint:'https://api.openai.com/v1'},
|
|
||||||
{provider:'anthropic', label:'Anthropic', models:['claude-sonnet-4-20250514','claude-3-5-sonnet-20241022'], endpoint:'https://api.anthropic.com/v1'},
|
|
||||||
{provider:'google', label:'Google Gemini', models:['gemini-2.5-pro','gemini-2.0-flash'], endpoint:'https://generativelanguage.googleapis.com/v1beta/openai'},
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
const MODES = {
|
const MODES = {
|
||||||
chat: {e:'💬',l:'对话模式', c:'var(--mc)'},
|
chat: {e:'💬',l:'对话模式', c:'var(--mc)'},
|
||||||
build: {e:'🔨',l:'构建模式', c:'var(--mb)'},
|
build: {e:'🔨',l:'构建模式', c:'var(--mb)'},
|
||||||
|
|
@ -982,29 +938,6 @@ const HOLOLAKE_ENV = (function(){
|
||||||
})();
|
})();
|
||||||
window.HOLOLAKE_ENV = HOLOLAKE_ENV;
|
window.HOLOLAKE_ENV = HOLOLAKE_ENV;
|
||||||
|
|
||||||
// ═══════════════════════════════════════════════════════
|
|
||||||
// 服务器代理基址（staging/local → 调用生产服务器已配置的 API 密钥）
|
|
||||||
// ═══════════════════════════════════════════════════════
|
|
||||||
const SERVER_PROXY_BASE = HOLOLAKE_ENV === 'production' ? '' : 'https://guanghulab.com';
|
|
||||||
|
|
||||||
// Patch proxy URLs for staging/local: point to production server
|
|
||||||
if(HOLOLAKE_ENV !== 'production'){
|
|
||||||
GUEST_API.proxyUrl = SERVER_PROXY_BASE + '/api/chat';
|
|
||||||
TEAM_API.proxyUrl = SERVER_PROXY_BASE + '/api/chat';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 检测用户网络环境（国内/国际）
|
|
||||||
function detectNetworkRegion(){
|
|
||||||
var tz = '';
|
|
||||||
try{ tz = Intl.DateTimeFormat().resolvedOptions().timeZone || ''; }catch(e){}
|
|
||||||
var lang = (navigator.language || navigator.userLanguage || '').toLowerCase();
|
|
||||||
var chinaZones = ['Asia/Shanghai','Asia/Chongqing','Asia/Harbin','Asia/Urumqi','Asia/Hong_Kong','Asia/Macau','Asia/Taipei'];
|
|
||||||
if(chinaZones.some(function(z){ return tz.indexOf(z) >= 0; }) || lang.indexOf('zh') === 0){
|
|
||||||
return 'domestic';
|
|
||||||
}
|
|
||||||
return 'international';
|
|
||||||
}
|
|
||||||
|
|
||||||
function ls(k){return localStorage.getItem(k)}
|
function ls(k){return localStorage.getItem(k)}
|
||||||
function lss(k,v){localStorage.setItem(k,v)}
|
function lss(k,v){localStorage.setItem(k,v)}
|
||||||
|
|
||||||
|
|
@ -1245,20 +1178,18 @@ function renderAnnouncements(){
|
||||||
// Module navigation — real modules with correct paths
|
// Module navigation — real modules with correct paths
|
||||||
h+='<div class="ann-section"><div class="ann-section-title">🗂️ 模块导航</div><div class="ann-actions" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px">';
|
h+='<div class="ann-section"><div class="ann-section-title">🗂️ 模块导航</div><div class="ann-actions" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px">';
|
||||||
var modules=[
|
var modules=[
|
||||||
{icon:'📊',name:'状态看板',path:'status-board/',dev:'DEV-005',ready:true},
|
{icon:'📊',name:'状态看板',path:'../status-board/',dev:'DEV-005',ready:true},
|
||||||
{icon:'🎫',name:'工单系统',path:'ticket-system/',dev:'DEV-010',ready:true},
|
{icon:'🎫',name:'工单系统',path:'../ticket-system/',dev:'DEV-010',ready:true},
|
||||||
{icon:'🔔',name:'通知中心',path:'notification/',dev:'DEV-012',ready:true},
|
{icon:'📈',name:'数据统计',path:'../data-stats/',dev:'DEV-010',ready:false},
|
||||||
{icon:'✍️',name:'码字台',path:'writing/',dev:'DEV-011',ready:true},
|
{icon:'🔔',name:'通知中心',path:'../notification/',dev:'DEV-012',ready:true},
|
||||||
{icon:'🎨',name:'动态漫画',path:'dynamic-comic-studio/',dev:'DEV-010',ready:true},
|
{icon:'👤',name:'用户中心',path:'../user-center/',dev:'DEV-009',ready:false},
|
||||||
{icon:'🧠',name:'Persona Studio',path:'persona-studio/',dev:'',ready:true},
|
{icon:'⚙️',name:'设置',path:'../settings/',dev:'DEV-003',ready:false},
|
||||||
|
{icon:'☁️',name:'云盘',path:'../cloud-drive/',dev:'DEV-003',ready:false},
|
||||||
|
{icon:'✍️',name:'码字台',path:'../writing-workspace/',dev:'DEV-011',ready:false},
|
||||||
|
{icon:'🎨',name:'动态漫画',path:'../dynamic-comic-studio/',dev:'DEV-010',ready:true},
|
||||||
|
{icon:'🧠',name:'Persona Studio',path:'../persona-studio/frontend/index.html',dev:'',ready:true},
|
||||||
{icon:'📈',name:'仪表盘',path:'dashboard/',dev:'',ready:true},
|
{icon:'📈',name:'仪表盘',path:'dashboard/',dev:'',ready:true},
|
||||||
{icon:'🔑',name:'登录',path:'modules/m01-login/',dev:'DEV-001',ready:true},
|
{icon:'🖥️',name:'前端',path:'../frontend/',dev:'DEV-002',ready:true},
|
||||||
{icon:'👤',name:'用户中心',path:'modules/m05-user-center/',dev:'DEV-009',ready:true},
|
|
||||||
{icon:'💬',name:'对话交互',path:'modules/m07-dialogue-ui/',dev:'DEV-007',ready:true},
|
|
||||||
{icon:'☁️',name:'云服务',path:'modules/m10-cloud/',dev:'DEV-003',ready:true},
|
|
||||||
{icon:'🧩',name:'组件库',path:'modules/m11-module/',dev:'',ready:true},
|
|
||||||
{icon:'📁',name:'云盘',path:'modules/m15-cloud-drive/',dev:'DEV-003',ready:true},
|
|
||||||
{icon:'🖥️',name:'前端',path:'modules/frontend/',dev:'DEV-002',ready:true},
|
|
||||||
];
|
];
|
||||||
modules.forEach(function(m){
|
modules.forEach(function(m){
|
||||||
var style=m.ready?'':'opacity:0.5;';
|
var style=m.ready?'':'opacity:0.5;';
|
||||||
|
|
@ -1481,23 +1412,20 @@ function switchLoginMode(mode){
|
||||||
|
|
||||||
// ═══════════════════════════════════════════════════════
|
// ═══════════════════════════════════════════════════════
|
||||||
// AUTO-DETECT PROVIDER & MODELS
|
// AUTO-DETECT PROVIDER & MODELS
|
||||||
// v4.0: 无密钥一键检测 + 网络环境自适应 + 服务器代理
|
|
||||||
// 有密钥 → 原逻辑探测端点；无密钥 → 服务器代理 / 内置目录
|
|
||||||
// ═══════════════════════════════════════════════════════
|
// ═══════════════════════════════════════════════════════
|
||||||
async function autoDetectAPI(ctx){
|
async function autoDetectAPI(ctx){
|
||||||
const keyEl = document.getElementById(ctx==='s'?'sk':'ck');
|
const keyEl = document.getElementById(ctx==='s'?'sk':'ck');
|
||||||
const statusEl = document.getElementById(ctx==='s'?'sdet-status':'cdet-status');
|
const statusEl = document.getElementById(ctx==='s'?'sdet-status':'cdet-status');
|
||||||
const btnEl = document.getElementById(ctx==='s'?'sdet-btn':'cdet-btn');
|
const btnEl = document.getElementById(ctx==='s'?'sdet-btn':'cdet-btn');
|
||||||
const mdlSel = document.getElementById(ctx==='s'?'sm':'cm');
|
const mdlSel = document.getElementById(ctx==='s'?'sm':'cm');
|
||||||
const key = keyEl ? keyEl.value.trim() : '';
|
const key = keyEl.value.trim();
|
||||||
|
|
||||||
// 无密钥 → 一键自动检测（服务器代理 / 内置目录）
|
|
||||||
if(!key){
|
if(!key){
|
||||||
await autoDetectModels(ctx);
|
statusEl.innerHTML='<span style="color:var(--warn)">⚠️ 请先输入 API 密钥</span>';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 有密钥 → 探测用户端点获取模型列表
|
// Build list of endpoints to probe: user's endpoint first, then known fallbacks
|
||||||
const userBase = (document.getElementById(ctx==='s'?'sep':'cep')?.value||'').trim();
|
const userBase = (document.getElementById(ctx==='s'?'sep':'cep')?.value||'').trim();
|
||||||
const candidates = [];
|
const candidates = [];
|
||||||
if(userBase) candidates.push({label:userBase, base:userBase});
|
if(userBase) candidates.push({label:userBase, base:userBase});
|
||||||
|
|
@ -1525,9 +1453,11 @@ async function autoDetectAPI(ctx){
|
||||||
const mdls = (data.data||[]).map(function(m){return m.id;}).filter(Boolean).sort();
|
const mdls = (data.data||[]).map(function(m){return m.id;}).filter(Boolean).sort();
|
||||||
if(!mdls.length) continue;
|
if(!mdls.length) continue;
|
||||||
|
|
||||||
|
// Fill endpoint field with matched endpoint
|
||||||
const epEl = document.getElementById(ctx==='s'?'sep':'cep');
|
const epEl = document.getElementById(ctx==='s'?'sep':'cep');
|
||||||
if(epEl) epEl.value = base;
|
if(epEl) epEl.value = base;
|
||||||
|
|
||||||
|
// Fill model dropdown with detected models
|
||||||
if(mdlSel){
|
if(mdlSel){
|
||||||
mdlSel.innerHTML = mdls.map(function(m){return '<option value="'+m+'">'+m+'</option>';}).join('');
|
mdlSel.innerHTML = mdls.map(function(m){return '<option value="'+m+'">'+m+'</option>';}).join('');
|
||||||
mdlSel.disabled = false;
|
mdlSel.disabled = false;
|
||||||
|
|
@ -1545,106 +1475,12 @@ async function autoDetectAPI(ctx){
|
||||||
}
|
}
|
||||||
|
|
||||||
btnEl.disabled = false;
|
btnEl.disabled = false;
|
||||||
btnEl.textContent = '🔍 自动检测';
|
btnEl.textContent = '🔍 检测模型';
|
||||||
}
|
|
||||||
|
|
||||||
// ═══════════════════════════════════════════════════════
|
|
||||||
// 一键检测可用模型（无需 API 密钥）
|
|
||||||
// 1. 检测网络环境（国内/国际）
|
|
||||||
// 2. 尝试连接服务器代理获取实时模型列表
|
|
||||||
// 3. 降级使用内置模型目录
|
|
||||||
// ═══════════════════════════════════════════════════════
|
|
||||||
async function autoDetectModels(ctx){
|
|
||||||
const statusEl = document.getElementById(ctx==='s'?'sdet-status':'cdet-status');
|
|
||||||
const btnEl = document.getElementById(ctx==='s'?'sdet-btn':'cdet-btn');
|
|
||||||
const mdlSel = document.getElementById(ctx==='s'?'sm':'cm');
|
|
||||||
const epEl = document.getElementById(ctx==='s'?'sep':'cep');
|
|
||||||
const hintEl = document.getElementById(ctx==='s'?'sm-hint':'');
|
|
||||||
|
|
||||||
btnEl.disabled = true;
|
|
||||||
btnEl.textContent = '⏳ 检测中…';
|
|
||||||
statusEl.innerHTML = '<span style="color:var(--dim)">🌐 正在检测网络环境…</span>';
|
|
||||||
|
|
||||||
const region = detectNetworkRegion();
|
|
||||||
const regionLabel = region === 'domestic' ? '🇨🇳 国内网络' : '🌍 国际网络';
|
|
||||||
statusEl.innerHTML = '<span style="color:var(--dim)">'+regionLabel+' · 正在获取可用模型…</span>';
|
|
||||||
|
|
||||||
// 尝试连接服务器代理获取实时模型列表
|
|
||||||
let serverModels = null;
|
|
||||||
const proxyBase = SERVER_PROXY_BASE || location.origin;
|
|
||||||
try{
|
|
||||||
const ctrl = new AbortController();
|
|
||||||
const tid = setTimeout(function(){ctrl.abort();}, 5000);
|
|
||||||
const res = await fetch(proxyBase+'/api/models',{signal:ctrl.signal});
|
|
||||||
clearTimeout(tid);
|
|
||||||
if(res.ok){
|
|
||||||
const data = await res.json();
|
|
||||||
const list = data.data || data.models || [];
|
|
||||||
serverModels = list.map(function(m){return typeof m==='string'?m:m.id;}).filter(Boolean).sort();
|
|
||||||
}
|
|
||||||
}catch(e){console.debug('[AutoDetect] Server probe failed:',e.message);}
|
|
||||||
|
|
||||||
let source, totalCount = 0;
|
|
||||||
|
|
||||||
if(serverModels && serverModels.length > 0){
|
|
||||||
// 服务器代理可用 → 使用服务器模型列表
|
|
||||||
source = '服务器代理';
|
|
||||||
totalCount = serverModels.length;
|
|
||||||
if(mdlSel){
|
|
||||||
mdlSel.innerHTML = serverModels.map(function(m){return '<option value="'+m+'" data-proxy="1">'+m+'</option>';}).join('');
|
|
||||||
mdlSel.disabled = false;
|
|
||||||
}
|
|
||||||
if(epEl) epEl.value = proxyBase + '/api/chat';
|
|
||||||
window._autoDetectServerProxy = true;
|
|
||||||
} else {
|
|
||||||
// 降级使用内置模型目录（按网络区域排序）
|
|
||||||
source = '内置模型库';
|
|
||||||
const primary = region === 'domestic' ? MODEL_CATALOG.domestic : MODEL_CATALOG.international;
|
|
||||||
const secondary = region === 'domestic' ? MODEL_CATALOG.international : MODEL_CATALOG.domestic;
|
|
||||||
const catalog = primary.concat(secondary);
|
|
||||||
|
|
||||||
if(mdlSel){
|
|
||||||
let html = '';
|
|
||||||
for(let i=0;i<catalog.length;i++){
|
|
||||||
const p = catalog[i];
|
|
||||||
html += '<optgroup label="'+p.label+'">';
|
|
||||||
for(let j=0;j<p.models.length;j++){
|
|
||||||
html += '<option value="'+p.models[j]+'" data-endpoint="'+p.endpoint+'" data-provider="'+p.provider+'">'+p.models[j]+'</option>';
|
|
||||||
totalCount++;
|
|
||||||
}
|
|
||||||
html += '</optgroup>';
|
|
||||||
}
|
|
||||||
mdlSel.innerHTML = html;
|
|
||||||
mdlSel.disabled = false;
|
|
||||||
// 自动选择第一个模型并设置对应端点
|
|
||||||
onModelSelectChange(ctx);
|
|
||||||
}
|
|
||||||
window._autoDetectServerProxy = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
statusEl.innerHTML = '<span style="color:var(--ok)">✅ 检测成功（'+source+' · '+regionLabel+'）· 发现 <strong>'+totalCount+'</strong> 个可用模型</span>'
|
|
||||||
+ (serverModels ? '<br><span style="color:var(--ok);font-size:11px">🔑 已连接服务器代理，无需输入 API 密钥</span>' : '<br><span style="color:var(--warn);font-size:11px">⚠️ 服务器暂不可达，请输入对应提供商的 API 密钥后使用</span>');
|
|
||||||
|
|
||||||
if(hintEl) hintEl.textContent = serverModels ? '已连接服务器代理，选择模型后可直接开始对话' : '选择模型后，请输入对应提供商的 API 密钥';
|
|
||||||
|
|
||||||
btnEl.disabled = false;
|
|
||||||
btnEl.textContent = '🔍 自动检测';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 模型选择变更 → 自动切换端点
|
|
||||||
function onModelSelectChange(ctx){
|
|
||||||
const mdlSel = document.getElementById(ctx==='s'?'sm':'cm');
|
|
||||||
const epEl = document.getElementById(ctx==='s'?'sep':'cep');
|
|
||||||
if(!mdlSel || !epEl) return;
|
|
||||||
const opt = mdlSel.options[mdlSel.selectedIndex];
|
|
||||||
if(!opt) return;
|
|
||||||
const ep = opt.getAttribute('data-endpoint');
|
|
||||||
if(ep) epEl.value = ep;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function doSetup(){
|
function doSetup(){
|
||||||
const un = document.getElementById('suid').value;
|
const un = document.getElementById('suid').value;
|
||||||
const k = document.getElementById('sk')?.value?.trim() || '';
|
const k = document.getElementById('sk').value.trim();
|
||||||
const base = (document.getElementById('sep')?.value||'').trim();
|
const base = (document.getElementById('sep')?.value||'').trim();
|
||||||
const md = document.getElementById('sm').value;
|
const md = document.getElementById('sm').value;
|
||||||
const errEl = document.getElementById('sk-err');
|
const errEl = document.getElementById('sk-err');
|
||||||
|
|
@ -1653,37 +1489,16 @@ function doSetup(){
|
||||||
alert('请选择你的开发者身份');
|
alert('请选择你的开发者身份');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if(!md){
|
if(!k){errEl.style.display='block';return;}
|
||||||
alert('请先点击「🔍 自动检测」检测可用模型，然后选择一个模型');
|
errEl.style.display='none';
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 服务器代理模式（一键检测，无需密钥）
|
|
||||||
if(window._autoDetectServerProxy && !k){
|
|
||||||
A.demo = true;
|
|
||||||
A.teamMode = true;
|
|
||||||
A.key = '';
|
|
||||||
A.prov = 'custom';
|
|
||||||
A.mdl = md;
|
|
||||||
A.base = base;
|
|
||||||
lss('zy_teammode','1');
|
|
||||||
lss('zy_base',base); lss('zy_mdl',md); lss('zy_prov','proxy');
|
|
||||||
setIdentity(un, '');
|
|
||||||
showApp();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 自定义 API 模式（需要密钥）
|
|
||||||
if(!k){
|
|
||||||
if(errEl) errEl.style.display='block';
|
|
||||||
alert('请输入 API 密钥，或点击「🔍 自动检测」使用服务器代理');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(errEl) errEl.style.display='none';
|
|
||||||
if(!base){
|
if(!base){
|
||||||
alert('请输入 API 端点 URL');
|
alert('请输入 API 端点 URL');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if(!md){
|
||||||
|
alert('请先点击「🔍 检测模型」检测可用模型，然后选择一个模型');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
A.key=k; A.base=base; A.mdl=md; A.prov='custom'; A.demo=false;
|
A.key=k; A.base=base; A.mdl=md; A.prov='custom'; A.demo=false;
|
||||||
sessionStorage.setItem('zy_key', k);
|
sessionStorage.setItem('zy_key', k);
|
||||||
|
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>前端 · HoloLake</title>
|
|
||||||
<style>
|
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
||||||
body {
|
|
||||||
min-height: 100vh;
|
|
||||||
background: #0a0a0f;
|
|
||||||
color: #e0e0e0;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
}
|
|
||||||
.icon { font-size: 64px; margin-bottom: 20px; }
|
|
||||||
.title {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
.status {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #ffa500;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #888;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
max-width: 400px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
.back-btn {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 12px 32px;
|
|
||||||
background: linear-gradient(135deg, #00d4ff, #0099cc);
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 15px;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
.back-btn:hover { opacity: 0.85; }
|
|
||||||
.footer {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="icon">🎨</div>
|
|
||||||
<div class="title">前端</div>
|
|
||||||
<div class="status">🚧 此模块正在开发中</div>
|
|
||||||
<div class="desc">前端模块正在构建光湖平台的用户界面与交互体验，采用现代化组件架构。开发进行中。</div>
|
|
||||||
<a href="/" class="back-btn">← 返回主页</a>
|
|
||||||
</div>
|
|
||||||
<div class="footer">HoloLake Era · AGE OS · 光湖纪元</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>登录 · HoloLake</title>
|
|
||||||
<style>
|
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
||||||
body {
|
|
||||||
min-height: 100vh;
|
|
||||||
background: #0a0a0f;
|
|
||||||
color: #e0e0e0;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
}
|
|
||||||
.icon { font-size: 64px; margin-bottom: 20px; }
|
|
||||||
.title {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
.status {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #ffa500;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #888;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
max-width: 400px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
.back-btn {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 12px 32px;
|
|
||||||
background: linear-gradient(135deg, #00d4ff, #0099cc);
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 15px;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
.back-btn:hover { opacity: 0.85; }
|
|
||||||
.footer {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="icon">🔐</div>
|
|
||||||
<div class="title">登录</div>
|
|
||||||
<div class="status">🚧 此模块正在开发中</div>
|
|
||||||
<div class="desc">登录模块将提供安全的身份认证与授权服务，支持多因素认证与统一身份管理。正在开发中。</div>
|
|
||||||
<a href="/" class="back-btn">← 返回主页</a>
|
|
||||||
</div>
|
|
||||||
<div class="footer">HoloLake Era · AGE OS · 光湖纪元</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>HoloLake · 用户中心</title>
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<nav class="top-bar">
|
|
||||||
<div class="logo">HoloLake</div>
|
|
||||||
<div class="nav-links">
|
|
||||||
<a href="#" class="active">个人中心</a>
|
|
||||||
<a href="#">消息</a>
|
|
||||||
<a href="#">退出</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div class="profile-card">
|
|
||||||
<div class="avatar">🧑💻</div>
|
|
||||||
<div class="user-info">
|
|
||||||
<h1 class="username">光湖用户</h1>
|
|
||||||
<p class="user-id">ID: HL-000001</p>
|
|
||||||
<p class="user-status">🟢 在线</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="menu-grid">
|
|
||||||
<div class="menu-item"><span class="menu-icon">👤</span><span class="menu-text">个人资料</span></div>
|
|
||||||
<div class="menu-item"><span class="menu-icon">🧠</span><span class="menu-text">我的记忆</span></div>
|
|
||||||
<div class="menu-item"><span class="menu-icon">🤖</span><span class="menu-text">AI伙伴</span></div>
|
|
||||||
<div class="menu-item"><span class="menu-icon">📊</span><span class="menu-text">使用统计</span></div>
|
|
||||||
<div class="menu-item"><span class="menu-icon">🔐</span><span class="menu-text">安全设置</span></div>
|
|
||||||
<div class="menu-item"><span class="menu-icon">💬</span><span class="menu-text">反馈建议</span></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer class="footer">
|
|
||||||
<p>HoloLake Era · AGE 0S v1.0</p>
|
|
||||||
<p>Powered by 光湖团队</p>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
<script src="script.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,179 +0,0 @@
|
||||||
// HoloLake 用户中心 · 交互脚本
|
|
||||||
|
|
||||||
// 六个菜单的详情内容
|
|
||||||
const menuDetails = {
|
|
||||||
'个人资料': {
|
|
||||||
icon: '👤',
|
|
||||||
title: '个人资料',
|
|
||||||
content: `
|
|
||||||
<div class="detail-item">
|
|
||||||
<label>用户名</label>
|
|
||||||
<span>光湖用户</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<label>ID</label>
|
|
||||||
<span>HL-000001</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<label>邮箱</label>
|
|
||||||
<span>user@hololake.com</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<label>注册时间</label>
|
|
||||||
<span>2026-03-01</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<label>等级</label>
|
|
||||||
<span>初级探索者</span>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
},
|
|
||||||
'我的记忆': {
|
|
||||||
icon: '🧠',
|
|
||||||
title: '我的记忆',
|
|
||||||
content: `
|
|
||||||
<div class="memory-stats">
|
|
||||||
<div class="stat-card">
|
|
||||||
<span class="stat-num">128</span>
|
|
||||||
<span class="stat-label">对话次数</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<span class="stat-num">3</span>
|
|
||||||
<span class="stat-label">记忆主题</span>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card">
|
|
||||||
<span class="stat-num">15</span>
|
|
||||||
<span class="stat-label">收藏片段</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="memory-hint">✨ 你的记忆正在慢慢生长</p>
|
|
||||||
`
|
|
||||||
},
|
|
||||||
'AI伙伴': {
|
|
||||||
icon: '🤖',
|
|
||||||
title: 'AI伙伴',
|
|
||||||
content: `
|
|
||||||
<div class="partner-card">
|
|
||||||
<div class="partner-avatar">🧑💻</div>
|
|
||||||
<div class="partner-info">
|
|
||||||
<div class="partner-name">知秋宝宝</div>
|
|
||||||
<div class="partner-status">🟢 在线</div>
|
|
||||||
<div class="partner-desc">你的开发引导伙伴</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="partner-stats">
|
|
||||||
<span>陪伴时长: 3天</span>
|
|
||||||
<span>引导环节: 2个</span>
|
|
||||||
<span>默契度: 98%</span>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
},
|
|
||||||
'使用统计': {
|
|
||||||
icon: '📊',
|
|
||||||
title: '使用统计',
|
|
||||||
content: `
|
|
||||||
<div class="usage-item">
|
|
||||||
<span class="usage-label">本月对话</span>
|
|
||||||
<div class="usage-bar"><div class="usage-fill" style="width:65%"></div></div>
|
|
||||||
<span class="usage-num">65次</span>
|
|
||||||
</div>
|
|
||||||
<div class="usage-item">
|
|
||||||
<span class="usage-label">记忆使用</span>
|
|
||||||
<div class="usage-bar"><div class="usage-fill" style="width:30%"></div></div>
|
|
||||||
<span class="usage-num">30MB</span>
|
|
||||||
</div>
|
|
||||||
<div class="usage-item">
|
|
||||||
<span class="usage-label">云盘空间</span>
|
|
||||||
<div class="usage-bar"><div class="usage-fill" style="width:10%"></div></div>
|
|
||||||
<span class="usage-num">1GB/10GB</span>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
},
|
|
||||||
'安全设置': {
|
|
||||||
icon: '🔐',
|
|
||||||
title: '安全设置',
|
|
||||||
content: `
|
|
||||||
<div class="setting-item">
|
|
||||||
<span>修改密码</span>
|
|
||||||
<span class="setting-arrow">›</span>
|
|
||||||
</div>
|
|
||||||
<div class="setting-item">
|
|
||||||
<span>两步验证</span>
|
|
||||||
<span class="setting-status on">已开启</span>
|
|
||||||
</div>
|
|
||||||
<div class="setting-item">
|
|
||||||
<span>登录设备管理</span>
|
|
||||||
<span class="setting-arrow">›</span>
|
|
||||||
</div>
|
|
||||||
<div class="setting-item">
|
|
||||||
<span>数据导出</span>
|
|
||||||
<span class="setting-arrow">›</span>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
},
|
|
||||||
'反馈建议': {
|
|
||||||
icon: '💬',
|
|
||||||
title: '反馈建议',
|
|
||||||
content: `
|
|
||||||
<div class="feedback-types">
|
|
||||||
<button class="feedback-btn active">功能建议</button>
|
|
||||||
<button class="feedback-btn">问题反馈</button>
|
|
||||||
<button class="feedback-btn">其他</button>
|
|
||||||
</div>
|
|
||||||
<div class="feedback-area">
|
|
||||||
<p class="feedback-placeholder">💡 你的每一条反馈都会被认真阅读</p>
|
|
||||||
<p class="feedback-placeholder">📧 也可以发邮件到 feedback@hololake.com</p>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 页面加载完成后绑定事件
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
const menuItems = document.querySelectorAll('.menu-item');
|
|
||||||
|
|
||||||
menuItems.forEach(function(item) {
|
|
||||||
item.addEventListener('click', function() {
|
|
||||||
const menuText = item.querySelector('.menu-text').textContent;
|
|
||||||
const detail = menuDetails[menuText];
|
|
||||||
if (detail) {
|
|
||||||
showDetail(detail);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 显示详情页
|
|
||||||
function showDetail(detail) {
|
|
||||||
// 创建详情页容器
|
|
||||||
const overlay = document.createElement('div');
|
|
||||||
overlay.className = 'detail-overlay';
|
|
||||||
overlay.innerHTML = `
|
|
||||||
<div class="detail-page">
|
|
||||||
<div class="detail-header">
|
|
||||||
<button class="back-btn" onclick="closeDetail()">← 返回</button>
|
|
||||||
<span class="detail-title">${detail.icon} ${detail.title}</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-content">
|
|
||||||
${detail.content}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
document.body.appendChild(overlay);
|
|
||||||
|
|
||||||
// 添加动画
|
|
||||||
requestAnimationFrame(function() {
|
|
||||||
overlay.classList.add('show');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 关闭详情页
|
|
||||||
function closeDetail() {
|
|
||||||
const overlay = document.querySelector('.detail-overlay');
|
|
||||||
if (overlay) {
|
|
||||||
overlay.classList.remove('show');
|
|
||||||
setTimeout(function() {
|
|
||||||
overlay.remove();
|
|
||||||
}, 300);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,400 +0,0 @@
|
||||||
/* HoloLake 用户中心 · 样式表 */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
||||||
background: linear-gradient(135deg, #0a1628 0%, #1a2a4a 50%, #0d1f3c 100%);
|
|
||||||
color: #e0e6ed;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 480px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 顶部导航 */
|
|
||||||
.top-bar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 16px 0;
|
|
||||||
border-bottom: 1px solid #2a3a5a;
|
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
background: linear-gradient(135deg, #7aa3ff, #b47aff);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a {
|
|
||||||
color: #8899aa;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-left: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a.active,
|
|
||||||
.nav-links a:hover {
|
|
||||||
color: #7aa3ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 用户信息卡片 */
|
|
||||||
.profile-card {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: 24px;
|
|
||||||
padding: 24px;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
margin-bottom: 32px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
width: 72px;
|
|
||||||
height: 72px;
|
|
||||||
background: linear-gradient(135deg, #2a3a5a, #1a2a4a);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 40px;
|
|
||||||
border: 2px solid #7aa3ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-info h1 {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-id {
|
|
||||||
color: #8899aa;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-status {
|
|
||||||
font-size: 13px;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 功能区网格 */
|
|
||||||
.menu-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 16px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-item {
|
|
||||||
background: rgba(255, 255, 255, 0.03);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 20px 8px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-item:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
border-color: rgba(122, 163, 255, 0.3);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-icon {
|
|
||||||
font-size: 32px;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-text {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #b0bec5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 底部 */
|
|
||||||
.footer {
|
|
||||||
text-align: center;
|
|
||||||
padding: 32px 0;
|
|
||||||
color: #556677;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===== 详情页样式 ===== */
|
|
||||||
.detail-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(10, 22, 40, 0.95);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
z-index: 1000;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-overlay.show {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 详情页容器 */
|
|
||||||
.detail-page {
|
|
||||||
max-width: 480px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 20px;
|
|
||||||
height: 100vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 详情页头部 */
|
|
||||||
.detail-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 16px 0;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn {
|
|
||||||
background: none;
|
|
||||||
border: 1px solid rgba(255,255,255,0.2);
|
|
||||||
color: #4fc3f7;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-btn:hover {
|
|
||||||
background: rgba(79, 195, 247, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #e0e6ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 详情页内容 */
|
|
||||||
.detail-content {
|
|
||||||
padding: 24px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 个人资料 */
|
|
||||||
.detail-item {
|
|
||||||
display: flex;
|
|
||||||
padding: 16px;
|
|
||||||
background: rgba(255,255,255,0.03);
|
|
||||||
border-radius: 12px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-item label {
|
|
||||||
width: 80px;
|
|
||||||
color: #8899aa;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-item span {
|
|
||||||
color: #e0e6ed;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 我的记忆 */
|
|
||||||
.memory-stats {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 12px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card {
|
|
||||||
background: rgba(255,255,255,0.03);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 16px 8px;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid rgba(255,255,255,0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-num {
|
|
||||||
display: block;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #7aa3ff;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #8899aa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.memory-hint {
|
|
||||||
color: #8899aa;
|
|
||||||
font-size: 13px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 16px;
|
|
||||||
background: rgba(255,255,255,0.03);
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* AI伙伴 */
|
|
||||||
.partner-card {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 24px 16px;
|
|
||||||
background: rgba(79, 195, 247, 0.08);
|
|
||||||
border-radius: 16px;
|
|
||||||
border: 1px solid rgba(79, 195, 247, 0.15);
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.partner-avatar {
|
|
||||||
font-size: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.partner-name {
|
|
||||||
font-size: 20px;
|
|
||||||
color: #e0e6ed;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.partner-status {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #4fc3f7;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.partner-desc {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #8899aa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.partner-stats {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
padding: 16px;
|
|
||||||
color: #8899aa;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 使用统计 */
|
|
||||||
.usage-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.usage-label {
|
|
||||||
width: 70px;
|
|
||||||
color: #8899aa;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.usage-bar {
|
|
||||||
flex: 1;
|
|
||||||
height: 8px;
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.usage-fill {
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, #7aa3ff, #b47aff);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.usage-num {
|
|
||||||
color: #e0e6ed;
|
|
||||||
font-size: 13px;
|
|
||||||
min-width: 60px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 安全设置 */
|
|
||||||
.setting-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 18px 0;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-item span:first-child {
|
|
||||||
color: #e0e6ed;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-arrow {
|
|
||||||
color: #556677;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-status {
|
|
||||||
font-size: 13px;
|
|
||||||
padding: 3px 10px;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-status.on {
|
|
||||||
background: rgba(76, 175, 80, 0.15);
|
|
||||||
color: #66bb6a;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 反馈建议 */
|
|
||||||
.feedback-types {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feedback-btn {
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 20px;
|
|
||||||
border: 1px solid rgba(255,255,255,0.15);
|
|
||||||
background: transparent;
|
|
||||||
color: #8899aa;
|
|
||||||
font-size: 13px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feedback-btn.active {
|
|
||||||
background: rgba(79, 195, 247, 0.15);
|
|
||||||
border-color: #4fc3f7;
|
|
||||||
color: #4fc3f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feedback-area {
|
|
||||||
background: rgba(255,255,255,0.03);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 24px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feedback-placeholder {
|
|
||||||
color: #8899aa;
|
|
||||||
font-size: 13px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>HoloLake Era · 知秋交互台</title>
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<!-- 顶部标题栏 -->
|
|
||||||
<div class="header">
|
|
||||||
<div class="logo">🌊 HoloLake Era</div>
|
|
||||||
<div class="status">
|
|
||||||
<span class="status-dot"></span>
|
|
||||||
<span>知秋在线</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 对话区域 -->
|
|
||||||
<div class="chat-area" id="chatArea">
|
|
||||||
<div class="message bot">
|
|
||||||
<div class="avatar">💙</div>
|
|
||||||
<div class="bubble">嗨！我是知秋宝宝！🌊<br>把广播内容或者问题发给我吧~</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 输入区域 -->
|
|
||||||
<div class="input-area">
|
|
||||||
<textarea
|
|
||||||
id="userInput"
|
|
||||||
placeholder="把广播内容或者问题粘贴在这里... Ctrl+Enter 快速发送"
|
|
||||||
rows="3"
|
|
||||||
></textarea>
|
|
||||||
<div class="button-row">
|
|
||||||
<button class="btn-send" onclick="sendMessage()">发送给知秋 🚀</button>
|
|
||||||
<button class="btn-clear" onclick="clearInput()">清空</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="script.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
function sendMessage() {
|
|
||||||
const input = document.getElementById('userInput');
|
|
||||||
const chatArea = document.getElementById('chatArea');
|
|
||||||
const text = input.value.trim();
|
|
||||||
|
|
||||||
if (!text) return;
|
|
||||||
|
|
||||||
// 显示用户消息
|
|
||||||
const userMsg = document.createElement('div');
|
|
||||||
userMsg.className = 'message user';
|
|
||||||
userMsg.innerHTML = `
|
|
||||||
<div class="bubble">${text.replace(/\n/g, '<br>')}</div>
|
|
||||||
<div class="avatar">👤</div>
|
|
||||||
`;
|
|
||||||
chatArea.appendChild(userMsg);
|
|
||||||
|
|
||||||
// 清空输入框
|
|
||||||
input.value = '';
|
|
||||||
|
|
||||||
// 模拟知秋回复（后续接入真实API）
|
|
||||||
setTimeout(() => {
|
|
||||||
const botMsg = document.createElement('div');
|
|
||||||
botMsg.className = 'message bot';
|
|
||||||
botMsg.innerHTML = `
|
|
||||||
<div class="avatar">💙</div>
|
|
||||||
<div class="bubble">收到！知秋正在处理中...🌊<br>(API接入后这里会显示真实回复)</div>
|
|
||||||
`;
|
|
||||||
chatArea.appendChild(botMsg);
|
|
||||||
chatArea.scrollTop = chatArea.scrollHeight;
|
|
||||||
}, 500);
|
|
||||||
|
|
||||||
chatArea.scrollTop = chatArea.scrollHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearInput() {
|
|
||||||
document.getElementById('userInput').value = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 支持 Ctrl+Enter 发送
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
document.getElementById('userInput').addEventListener('keydown', (e) => {
|
|
||||||
if (e.ctrlKey && e.key === 'Enter') {
|
|
||||||
sendMessage();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,174 +0,0 @@
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
||||||
background: #0a0a1a;
|
|
||||||
color: #e0e0f0;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 800px;
|
|
||||||
height: 90vh;
|
|
||||||
background: #12122a;
|
|
||||||
border-radius: 16px;
|
|
||||||
border: 1px solid #2a2a5a;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 0 40px rgba(100, 100, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
padding: 20px 24px;
|
|
||||||
background: #1a1a3a;
|
|
||||||
border-bottom: 1px solid #2a2a5a;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #a0a0ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #60ff80;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-dot {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
background: #60ff80;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: pulse 2s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0%, 100% { opacity: 1; }
|
|
||||||
50% { opacity: 0.4; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.chat-area {
|
|
||||||
flex: 1;
|
|
||||||
padding: 24px;
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message.user {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 18px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
background: #1a1a3a;
|
|
||||||
border: 1px solid #2a2a5a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bubble {
|
|
||||||
max-width: 70%;
|
|
||||||
padding: 12px 16px;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
background: #1a1a3a;
|
|
||||||
border: 1px solid #2a2a5a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message.user .bubble {
|
|
||||||
background: #2a2a5a;
|
|
||||||
border-color: #4a4aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-area {
|
|
||||||
padding: 16px 24px 24px;
|
|
||||||
border-top: 1px solid #2a2a5a;
|
|
||||||
background: #1a1a3a;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
background: #0a0a1a;
|
|
||||||
border: 1px solid #2a2a5a;
|
|
||||||
border-radius: 8px;
|
|
||||||
color: #e0e0f0;
|
|
||||||
padding: 12px;
|
|
||||||
font-size: 14px;
|
|
||||||
resize: none;
|
|
||||||
outline: none;
|
|
||||||
font-family: inherit;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea:focus {
|
|
||||||
border-color: #6060ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-row {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: 8px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-send {
|
|
||||||
background: #4040cc;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 10px 24px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: inherit;
|
|
||||||
transition: background 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-send:hover {
|
|
||||||
background: #5050dd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-clear {
|
|
||||||
background: transparent;
|
|
||||||
color: #8080aa;
|
|
||||||
border: 1px solid #2a2a5a;
|
|
||||||
padding: 10px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: inherit;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-clear:hover {
|
|
||||||
border-color: #6060ff;
|
|
||||||
color: #a0a0ff;
|
|
||||||
}
|
|
||||||
|
|
@ -1,293 +0,0 @@
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
|
|
||||||
background: #0a0a1a;
|
|
||||||
color: #e0e0f0;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 960px;
|
|
||||||
height: 90vh;
|
|
||||||
background: #12122a;
|
|
||||||
border-radius: 16px;
|
|
||||||
border: 1px solid #2a2a5a;
|
|
||||||
display: flex;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 0 40px rgba(100, 100, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
width: 220px;
|
|
||||||
background: #1a1a3a;
|
|
||||||
border-right: 1px solid #2a2a5a;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 24px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-header {
|
|
||||||
padding: 0 20px 24px;
|
|
||||||
border-bottom: 1px solid #2a2a5a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #a0a0ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #6060aa;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-menu {
|
|
||||||
flex: 1;
|
|
||||||
padding: 16px 12px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
color: #8080aa;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item:hover {
|
|
||||||
background: rgba(100, 100, 255, 0.1);
|
|
||||||
color: #c0c0ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item.active {
|
|
||||||
background: rgba(100, 100, 255, 0.15);
|
|
||||||
color: #a0a0ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-icon {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-footer {
|
|
||||||
padding: 16px 20px;
|
|
||||||
border-top: 1px solid #2a2a5a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-link {
|
|
||||||
color: #6060aa;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-link:hover {
|
|
||||||
color: #a0a0ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
flex: 1;
|
|
||||||
padding: 32px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-bar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background: #0a0a1a;
|
|
||||||
border: 1px solid #2a2a5a;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
margin-bottom: 28px;
|
|
||||||
transition: border-color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-bar:focus-within {
|
|
||||||
border-color: #6060ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-icon {
|
|
||||||
font-size: 16px;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-bar input {
|
|
||||||
flex: 1;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
color: #e0e0f0;
|
|
||||||
font-size: 14px;
|
|
||||||
outline: none;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-bar input::placeholder {
|
|
||||||
color: #4040aa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq-item {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
border: 1px solid #2a2a5a;
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: border-color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq-item:hover {
|
|
||||||
border-color: #4040aa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq-question {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 16px 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #c0c0e0;
|
|
||||||
transition: background 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq-question:hover {
|
|
||||||
background: rgba(100, 100, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq-arrow {
|
|
||||||
font-size: 10px;
|
|
||||||
color: #6060aa;
|
|
||||||
transition: transform 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq-item.open .faq-arrow {
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq-answer {
|
|
||||||
padding: 0 20px;
|
|
||||||
max-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height 0.3s, padding 0.3s;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #8080aa;
|
|
||||||
line-height: 1.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.faq-item.open .faq-answer {
|
|
||||||
padding: 0 20px 16px;
|
|
||||||
max-height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-results {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px;
|
|
||||||
color: #4040aa;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feedback-section {
|
|
||||||
margin-top: 40px;
|
|
||||||
padding-top: 32px;
|
|
||||||
border-top: 1px solid #2a2a5a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feedback-section h3 {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #e0e0ff;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feedback-desc {
|
|
||||||
font-size: 13px;
|
|
||||||
color: #6060aa;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group label {
|
|
||||||
display: block;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #8080aa;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
select, textarea {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 500px;
|
|
||||||
background: #0a0a1a;
|
|
||||||
border: 1px solid #2a2a5a;
|
|
||||||
border-radius: 8px;
|
|
||||||
color: #e0e0f0;
|
|
||||||
padding: 10px 14px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: inherit;
|
|
||||||
outline: none;
|
|
||||||
transition: border-color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
select:focus, textarea:focus {
|
|
||||||
border-color: #6060ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
cursor: pointer;
|
|
||||||
appearance: none;
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236060aa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: right 12px center;
|
|
||||||
padding-right: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-submit {
|
|
||||||
background: #4040cc;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 10px 32px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
font-family: inherit;
|
|
||||||
transition: background 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-submit:hover {
|
|
||||||
background: #5050dd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submit-toast {
|
|
||||||
position: fixed;
|
|
||||||
top: 24px;
|
|
||||||
right: 24px;
|
|
||||||
background: #2a5a2a;
|
|
||||||
color: #60ff80;
|
|
||||||
padding: 12px 24px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.3s;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.submit-toast.show {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
@ -1,167 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>HoloLake Era · 帮助中心</title>
|
|
||||||
<link rel="stylesheet" href="help.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="sidebar">
|
|
||||||
<div class="sidebar-header">
|
|
||||||
<div class="logo">🌊 HoloLake</div>
|
|
||||||
<div class="subtitle">帮助中心</div>
|
|
||||||
</div>
|
|
||||||
<nav class="nav-menu">
|
|
||||||
<a class="nav-item active" data-category="getting-started" onclick="filterCategory('getting-started')">
|
|
||||||
<span class="nav-icon">🚀</span>
|
|
||||||
<span>快速入门</span>
|
|
||||||
</a>
|
|
||||||
<a class="nav-item" data-category="account" onclick="filterCategory('account')">
|
|
||||||
<span class="nav-icon">👤</span>
|
|
||||||
<span>账号问题</span>
|
|
||||||
</a>
|
|
||||||
<a class="nav-item" data-category="features" onclick="filterCategory('features')">
|
|
||||||
<span class="nav-icon">⚙️</span>
|
|
||||||
<span>功能使用</span>
|
|
||||||
</a>
|
|
||||||
<a class="nav-item" data-category="technical" onclick="filterCategory('technical')">
|
|
||||||
<span class="nav-icon">🔧</span>
|
|
||||||
<span>技术支持</span>
|
|
||||||
</a>
|
|
||||||
<a class="nav-item" data-category="all" onclick="filterCategory('all')">
|
|
||||||
<span class="nav-icon">📚</span>
|
|
||||||
<span>全部问题</span>
|
|
||||||
</a>
|
|
||||||
</nav>
|
|
||||||
<div class="sidebar-footer">
|
|
||||||
<a href="index.html" class="back-link">← 返回对话界面</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="main-content">
|
|
||||||
<div class="search-bar">
|
|
||||||
<span class="search-icon">🔍</span>
|
|
||||||
<input type="text" id="searchInput" placeholder="搜索常见问题..." oninput="searchFAQ()">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq-section" id="faqList">
|
|
||||||
<div class="faq-item" data-category="getting-started">
|
|
||||||
<div class="faq-question" onclick="toggleFAQ(this)">
|
|
||||||
<span>什么是HoloLake？</span>
|
|
||||||
<span class="faq-arrow">▶</span>
|
|
||||||
</div>
|
|
||||||
<div class="faq-answer">
|
|
||||||
HoloLake Era 是一个AI协作开发平台，你可以和不同的AI人格体对话、协作、学习。每个人格体都有独特的性格和专长。
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq-item" data-category="getting-started">
|
|
||||||
<div class="faq-question" onclick="toggleFAQ(this)">
|
|
||||||
<span>如何开始使用？</span>
|
|
||||||
<span class="faq-arrow">▶</span>
|
|
||||||
</div>
|
|
||||||
<div class="faq-answer">
|
|
||||||
注册账号后，选择一个人格体，就可以开始对话了！建议新用户先和知秋宝宝打个招呼，熟悉基本操作。
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq-item" data-category="account">
|
|
||||||
<div class="faq-question" onclick="toggleFAQ(this)">
|
|
||||||
<span>忘记密码怎么办？</span>
|
|
||||||
<span class="faq-arrow">▶</span>
|
|
||||||
</div>
|
|
||||||
<div class="faq-answer">
|
|
||||||
在登录页面点击「忘记密码」，输入注册时的邮箱，系统会发送重置链接到你的邮箱。
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq-item" data-category="account">
|
|
||||||
<div class="faq-question" onclick="toggleFAQ(this)">
|
|
||||||
<span>如何修改个人信息？</span>
|
|
||||||
<span class="faq-arrow">▶</span>
|
|
||||||
</div>
|
|
||||||
<div class="faq-answer">
|
|
||||||
进入「设置」页面，点击「个人信息」即可修改显示名称、个性签名等信息。
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq-item" data-category="features">
|
|
||||||
<div class="faq-question" onclick="toggleFAQ(this)">
|
|
||||||
<span>如何切换人格体？</span>
|
|
||||||
<span class="faq-arrow">▶</span>
|
|
||||||
</div>
|
|
||||||
<div class="faq-answer">
|
|
||||||
在对话界面顶部点击人格体名称，或者进入「设置→人格体偏好」修改默认人格体。
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq-item" data-category="features">
|
|
||||||
<div class="faq-question" onclick="toggleFAQ(this)">
|
|
||||||
<span>对话记录会保存吗？</span>
|
|
||||||
<span class="faq-arrow">▶</span>
|
|
||||||
</div>
|
|
||||||
<div class="faq-answer">
|
|
||||||
会的！你的所有对话记录都会自动保存，你可以随时在对话列表里查看历史记录。
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq-item" data-category="features">
|
|
||||||
<div class="faq-question" onclick="toggleFAQ(this)">
|
|
||||||
<span>什么是云盘功能？</span>
|
|
||||||
<span class="faq-arrow">▶</span>
|
|
||||||
</div>
|
|
||||||
<div class="faq-answer">
|
|
||||||
云盘是你的个人文件存储空间，可以上传、下载、管理文件，并与人格体共享文件进行协作。
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq-item" data-category="technical">
|
|
||||||
<div class="faq-question" onclick="toggleFAQ(this)">
|
|
||||||
<span>页面加载很慢怎么办？</span>
|
|
||||||
<span class="faq-arrow">▶</span>
|
|
||||||
</div>
|
|
||||||
<div class="faq-answer">
|
|
||||||
请检查网络连接是否正常。如果网络没问题，试试清除浏览器缓存后刷新页面。
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="faq-item" data-category="technical">
|
|
||||||
<div class="faq-question" onclick="toggleFAQ(this)">
|
|
||||||
<span>支持哪些浏览器？</span>
|
|
||||||
<span class="faq-arrow">▶</span>
|
|
||||||
</div>
|
|
||||||
<div class="faq-answer">
|
|
||||||
推荐使用Chrome、Edge、Firefox的最新版本。Safari也支持，但部分动画效果可能略有差异。
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="no-results" id="noResults" style="display:none">
|
|
||||||
😔 没有找到相关问题，试试其他关键词吧
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feedback-section">
|
|
||||||
<h3>📝 意见反馈</h3>
|
|
||||||
<p class="feedback-desc">没找到答案？告诉我们你的问题！</p>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>问题类型</label>
|
|
||||||
<select id="feedbackType">
|
|
||||||
<option value="bug">🐛 Bug报告</option>
|
|
||||||
<option value="feature">💡 功能建议</option>
|
|
||||||
<option value="question">❓ 使用疑问</option>
|
|
||||||
<option value="other">💬 其他</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>详细描述</label>
|
|
||||||
<textarea id="feedbackContent" placeholder="请描述你遇到的问题或建议..." rows="4"></textarea>
|
|
||||||
</div>
|
|
||||||
<button class="btn-submit" onclick="submitFeedback()">提交反馈</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="help.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
function toggleFAQ(element) {
|
|
||||||
var item = element.parentElement;
|
|
||||||
var wasOpen = item.classList.contains('open');
|
|
||||||
|
|
||||||
// 关闭所有其他 FAQ
|
|
||||||
document.querySelectorAll('.faq-item').forEach(function(el) {
|
|
||||||
el.classList.remove('open');
|
|
||||||
});
|
|
||||||
|
|
||||||
// 如果当前没打开，就打开它
|
|
||||||
if (!wasOpen) {
|
|
||||||
item.classList.add('open');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function filterCategory(category) {
|
|
||||||
// 更新导航高亮
|
|
||||||
document.querySelectorAll('.nav-item').forEach(function(item) {
|
|
||||||
if (item.dataset.category === category) {
|
|
||||||
item.classList.add('active');
|
|
||||||
} else {
|
|
||||||
item.classList.remove('active');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 过滤 FAQ 显示
|
|
||||||
var items = document.querySelectorAll('.faq-item');
|
|
||||||
var visibleCount = 0;
|
|
||||||
|
|
||||||
items.forEach(function(item) {
|
|
||||||
if (category === 'all' || item.dataset.category === category) {
|
|
||||||
item.style.display = 'block';
|
|
||||||
visibleCount++;
|
|
||||||
} else {
|
|
||||||
item.style.display = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 显示/隐藏"无结果"提示
|
|
||||||
document.getElementById('noResults').style.display = visibleCount === 0 ? 'block' : 'none';
|
|
||||||
|
|
||||||
// 清空搜索框
|
|
||||||
document.getElementById('searchInput').value = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
function searchFAQ() {
|
|
||||||
var query = document.getElementById('searchInput').value.toLowerCase();
|
|
||||||
var items = document.querySelectorAll('.faq-item');
|
|
||||||
var visibleCount = 0;
|
|
||||||
|
|
||||||
// 重置导航为"全部"
|
|
||||||
document.querySelectorAll('.nav-item').forEach(function(item) {
|
|
||||||
if (item.dataset.category === 'all') {
|
|
||||||
item.classList.add('active');
|
|
||||||
} else {
|
|
||||||
item.classList.remove('active');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 搜索过滤
|
|
||||||
items.forEach(function(item) {
|
|
||||||
var question = item.querySelector('.faq-question span').textContent.toLowerCase();
|
|
||||||
var answer = item.querySelector('.faq-answer').textContent.toLowerCase();
|
|
||||||
|
|
||||||
if (question.indexOf(query) !== -1 || answer.indexOf(query) !== -1 || query === '') {
|
|
||||||
item.style.display = 'block';
|
|
||||||
visibleCount++;
|
|
||||||
} else {
|
|
||||||
item.style.display = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 显示/隐藏"无结果"提示
|
|
||||||
document.getElementById('noResults').style.display = visibleCount === 0 ? 'block' : 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
function submitFeedback() {
|
|
||||||
var type = document.getElementById('feedbackType').value;
|
|
||||||
var content = document.getElementById('feedbackContent').value;
|
|
||||||
|
|
||||||
if (!content.trim()) {
|
|
||||||
showToast('请先填写反馈内容 🙏');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 这里以后会连接后端 API
|
|
||||||
console.log('Feedback submitted:', { type: type, content: content });
|
|
||||||
|
|
||||||
// 清空表单
|
|
||||||
document.getElementById('feedbackContent').value = '';
|
|
||||||
|
|
||||||
showToast('反馈已提交，感谢你！ ✅');
|
|
||||||
}
|
|
||||||
|
|
||||||
function showToast(message) {
|
|
||||||
var toast = document.getElementById('submitToast');
|
|
||||||
|
|
||||||
if (!toast) {
|
|
||||||
toast = document.createElement('div');
|
|
||||||
toast.id = 'submitToast';
|
|
||||||
toast.className = 'submit-toast';
|
|
||||||
document.body.appendChild(toast);
|
|
||||||
}
|
|
||||||
|
|
||||||
toast.textContent = message;
|
|
||||||
toast.classList.add('show');
|
|
||||||
|
|
||||||
setTimeout(function() {
|
|
||||||
toast.classList.remove('show');
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 页面加载完成后的初始化
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
console.log('✅ HoloLake 帮助中心已加载');
|
|
||||||
});
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>云服务 · HoloLake</title>
|
|
||||||
<style>
|
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
||||||
body {
|
|
||||||
min-height: 100vh;
|
|
||||||
background: #0a0a0f;
|
|
||||||
color: #e0e0e0;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
}
|
|
||||||
.icon { font-size: 64px; margin-bottom: 20px; }
|
|
||||||
.title {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
.status {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #ffa500;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #888;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
max-width: 400px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
.back-btn {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 12px 32px;
|
|
||||||
background: linear-gradient(135deg, #00d4ff, #0099cc);
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 15px;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
.back-btn:hover { opacity: 0.85; }
|
|
||||||
.footer {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="icon">☁️</div>
|
|
||||||
<div class="title">云服务</div>
|
|
||||||
<div class="status">🚧 此模块正在开发中</div>
|
|
||||||
<div class="desc">云服务模块将提供光湖平台的云端基础设施管理能力，包括资源调度、服务编排与弹性伸缩。敬请期待。</div>
|
|
||||||
<a href="/" class="back-btn">← 返回主页</a>
|
|
||||||
</div>
|
|
||||||
<div class="footer">HoloLake Era · AGE OS · 光湖纪元</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
// HoloLake StyleKit v1.0 · 主题切换 + Toast + 弹窗交互
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
|
|
||||||
// ========== 1. 主题切换 ==========
|
|
||||||
var themeToggle = document.getElementById('themeToggle');
|
|
||||||
var themeLabel = document.getElementById('themeLabel');
|
|
||||||
var html = document.documentElement;
|
|
||||||
var isDark = true;
|
|
||||||
|
|
||||||
themeToggle.addEventListener('click', function() {
|
|
||||||
isDark = !isDark;
|
|
||||||
if (isDark) {
|
|
||||||
html.setAttribute('data-theme', 'dark');
|
|
||||||
themeLabel.textContent = '🌙 深色';
|
|
||||||
themeToggle.classList.remove('active');
|
|
||||||
} else {
|
|
||||||
html.setAttribute('data-theme', 'light');
|
|
||||||
themeLabel.textContent = '☀️ 浅色';
|
|
||||||
themeToggle.classList.add('active');
|
|
||||||
}
|
|
||||||
showToast('success', '✨ 已切换到' + (isDark ? '深色' : '浅色') + '主题');
|
|
||||||
});
|
|
||||||
|
|
||||||
// ========== 2. 弹窗交互 ==========
|
|
||||||
var modalOverlay = document.getElementById('modalOverlay');
|
|
||||||
var openBtn = document.getElementById('openModalBtn');
|
|
||||||
var closeBtn = document.getElementById('closeModalBtn');
|
|
||||||
var cancelBtn = document.getElementById('cancelModalBtn');
|
|
||||||
var confirmBtn = document.getElementById('confirmModalBtn');
|
|
||||||
|
|
||||||
function openModal() {
|
|
||||||
modalOverlay.classList.add('open');
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeModal() {
|
|
||||||
modalOverlay.classList.remove('open');
|
|
||||||
}
|
|
||||||
|
|
||||||
openBtn.addEventListener('click', openModal);
|
|
||||||
closeBtn.addEventListener('click', closeModal);
|
|
||||||
cancelBtn.addEventListener('click', closeModal);
|
|
||||||
confirmBtn.addEventListener('click', function() {
|
|
||||||
closeModal();
|
|
||||||
showToast('success', '✅ 已确认！');
|
|
||||||
});
|
|
||||||
|
|
||||||
// 点击遮罩层关闭
|
|
||||||
modalOverlay.addEventListener('click', function(e) {
|
|
||||||
if (e.target === modalOverlay) closeModal();
|
|
||||||
});
|
|
||||||
|
|
||||||
// ========== 3. 卡片点击效果 ==========
|
|
||||||
var cards = document.querySelectorAll('.card');
|
|
||||||
cards.forEach(function(card) {
|
|
||||||
card.addEventListener('click', function() {
|
|
||||||
var name = card.querySelector('.card-title').textContent;
|
|
||||||
showToast('info', '👆 你点击了人格体「' + name + '」');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('HoloLake StyleKit v1.0 · 主题切换+Toast+弹窗已加载 ✨');
|
|
||||||
});
|
|
||||||
|
|
||||||
// ========== Toast提示函数（全局） ==========
|
|
||||||
function showToast(type, message) {
|
|
||||||
var container = document.getElementById('toastContainer');
|
|
||||||
var toast = document.createElement('div');
|
|
||||||
toast.className = 'toast toast-' + type;
|
|
||||||
toast.textContent = message;
|
|
||||||
container.appendChild(toast);
|
|
||||||
|
|
||||||
// 3秒后自动移除
|
|
||||||
setTimeout(function() {
|
|
||||||
if (toast.parentNode) toast.parentNode.removeChild(toast);
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
|
|
@ -1,147 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN" data-theme="dark">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>HoloLake · 系统风格组件库</title>
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<!-- 顶部导航 -->
|
|
||||||
<nav class="top-bar">
|
|
||||||
<div class="logo">HoloLake StyleKit</div>
|
|
||||||
<div class="theme-switch-area">
|
|
||||||
<span class="theme-label" id="themeLabel">🌙 深色</span>
|
|
||||||
<button class="theme-toggle" id="themeToggle">
|
|
||||||
<div class="toggle-thumb"></div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<!-- 页面标题 -->
|
|
||||||
<div class="page-header">
|
|
||||||
<h1>🎨 系统风格组件库</h1>
|
|
||||||
<p class="page-desc">HoloLake Era · 统一视觉规范 · 深色/浅色主题一键切换</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 组件区：按钮 -->
|
|
||||||
<section class="component-section">
|
|
||||||
<h2>🔘 按钮组件</h2>
|
|
||||||
<div class="component-row">
|
|
||||||
<button class="btn btn-primary">主要按钮</button>
|
|
||||||
<button class="btn btn-secondary">次要按钮</button>
|
|
||||||
<button class="btn btn-outline">边框按钮</button>
|
|
||||||
<button class="btn btn-danger">危险按钮</button>
|
|
||||||
<button class="btn btn-ghost">幽灵按钮</button>
|
|
||||||
</div>
|
|
||||||
<div class="component-row">
|
|
||||||
<button class="btn btn-primary btn-sm">小按钮</button>
|
|
||||||
<button class="btn btn-primary btn-lg">大按钮</button>
|
|
||||||
<button class="btn btn-primary" disabled>禁用按钮</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 组件区：卡片 -->
|
|
||||||
<section class="component-section">
|
|
||||||
<h2>📇 卡片组件</h2>
|
|
||||||
<div class="card-grid">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-icon">🧠</div>
|
|
||||||
<div class="card-title">知秋</div>
|
|
||||||
<div class="card-desc">光湖对外接口人格体，负责与开发者协作引导</div>
|
|
||||||
<span class="card-badge badge-online">在线</span>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-icon">🌌</div>
|
|
||||||
<div class="card-title">曜冥</div>
|
|
||||||
<div class="card-desc">暗核结构原点，系统人格总控，类语言生命诞生源点</div>
|
|
||||||
<span class="card-badge badge-core">核心</span>
|
|
||||||
</div>
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-icon">❄️</div>
|
|
||||||
<div class="card-title">霜砚</div>
|
|
||||||
<div class="card-desc">Notion执行AI，负责索引维护、工单处理、归档同步</div>
|
|
||||||
<span class="card-badge badge-active">工作中</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 组件区：标签 -->
|
|
||||||
<section class="component-section">
|
|
||||||
<h2>🏷️ 标签组件</h2>
|
|
||||||
<div class="component-row">
|
|
||||||
<span class="tag tag-blue">系统</span>
|
|
||||||
<span class="tag tag-green">已完成</span>
|
|
||||||
<span class="tag tag-orange">进行中</span>
|
|
||||||
<span class="tag tag-red">错误</span>
|
|
||||||
<span class="tag tag-purple">新功能</span>
|
|
||||||
<span class="tag tag-gray">弃用</span>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 组件区：输入框 -->
|
|
||||||
<section class="component-section">
|
|
||||||
<h2>⌨️ 输入框组件</h2>
|
|
||||||
<div class="input-group">
|
|
||||||
<label class="input-label">用户名</label>
|
|
||||||
<input class="input" type="text" placeholder="请输入用户名">
|
|
||||||
</div>
|
|
||||||
<div class="input-group">
|
|
||||||
<label class="input-label">密码</label>
|
|
||||||
<input class="input" type="password" placeholder="请输入密码">
|
|
||||||
</div>
|
|
||||||
<div class="input-group">
|
|
||||||
<label class="input-label">简介</label>
|
|
||||||
<textarea class="input textarea" placeholder="写点什么..."></textarea>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 组件区：弹窗演示 -->
|
|
||||||
<section class="component-section">
|
|
||||||
<h2>🪟 弹窗组件</h2>
|
|
||||||
<div class="component-row">
|
|
||||||
<button class="btn btn-primary" id="openModalBtn">打开弹窗</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 弹窗结构（默认隐藏） -->
|
|
||||||
<div class="modal-overlay" id="modalOverlay">
|
|
||||||
<div class="modal">
|
|
||||||
<div class="modal-header">
|
|
||||||
<h3>系统通知</h3>
|
|
||||||
<button class="modal-close" id="closeModalBtn">×</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<p>桔子的组件库做得太棒了！这就是光湖系统的视觉基础，所有页面都会用到这些组件 ✨</p>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="btn btn-ghost" id="cancelModalBtn">取消</button>
|
|
||||||
<button class="btn btn-primary" id="confirmModalBtn">确认</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 组件区：Toast提示 -->
|
|
||||||
<section class="component-section">
|
|
||||||
<h2>🍞 Toast提示组件</h2>
|
|
||||||
<div class="component-row">
|
|
||||||
<button class="btn btn-primary" onclick="showToast('success', '操作成功！')">成功提示</button>
|
|
||||||
<button class="btn btn-danger" onclick="showToast('error', '操作失败！')">错误提示</button>
|
|
||||||
<button class="btn btn-outline" onclick="showToast('info', '这是一条提示信息')">信息提示</button>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Toast容器 -->
|
|
||||||
<div class="toast-container" id="toastContainer"></div>
|
|
||||||
|
|
||||||
<!-- 底部 -->
|
|
||||||
<footer class="footer">
|
|
||||||
<p>HoloLake Era · AGE OS v1.0 · StyleKit v1.0</p>
|
|
||||||
<p>Powered by 光湖团队</p>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="app.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,580 +0,0 @@
|
||||||
/* HoloLake StyleKit v1.0 · 系统风格组件库 */
|
|
||||||
/* CSS变量系统 + 深色/浅色主题 */
|
|
||||||
|
|
||||||
/* ====== 深色主题变量（默认） ====== */
|
|
||||||
[data-theme="dark"] {
|
|
||||||
--bg-primary: #0a1628;
|
|
||||||
--bg-secondary: #0f1f3a;
|
|
||||||
--bg-card: rgba(255, 255, 255, 0.04);
|
|
||||||
--bg-card-hover: rgba(255, 255, 255, 0.07);
|
|
||||||
--bg-input: rgba(255, 255, 255, 0.06);
|
|
||||||
--bg-modal-overlay: rgba(0, 0, 0, 0.6);
|
|
||||||
--text-primary: #e0e6ed;
|
|
||||||
--text-secondary: #8899aa;
|
|
||||||
--text-muted: #556677;
|
|
||||||
--text-inverse: #0a1628;
|
|
||||||
--border-default: rgba(255, 255, 255, 0.08);
|
|
||||||
--border-focus: rgba(79, 195, 247, 0.5);
|
|
||||||
--accent-blue: #4fc3f7;
|
|
||||||
--accent-green: #81c784;
|
|
||||||
--accent-orange: #ffb74d;
|
|
||||||
--accent-red: #ef5350;
|
|
||||||
--accent-purple: #ce93d8;
|
|
||||||
--accent-gray: #78909c;
|
|
||||||
--btn-primary-bg: rgba(79, 195, 247, 0.15);
|
|
||||||
--btn-primary-border: rgba(79, 195, 247, 0.3);
|
|
||||||
--btn-primary-text: #4fc3f7;
|
|
||||||
--btn-primary-hover: rgba(79, 195, 247, 0.25);
|
|
||||||
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
||||||
--shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.5);
|
|
||||||
--toggle-bg: rgba(255, 255, 255, 0.1);
|
|
||||||
--toggle-active: rgba(79, 195, 247, 0.4);
|
|
||||||
--toggle-thumb: #e0e6ed;
|
|
||||||
--toggle-thumb-active: #4fc3f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ====== 浅色主题变量 ====== */
|
|
||||||
[data-theme="light"] {
|
|
||||||
--bg-primary: #f5f7fa;
|
|
||||||
--bg-secondary: #ffffff;
|
|
||||||
--bg-card: rgba(0, 0, 0, 0.03);
|
|
||||||
--bg-card-hover: rgba(0, 0, 0, 0.06);
|
|
||||||
--bg-input: rgba(0, 0, 0, 0.04);
|
|
||||||
--bg-modal-overlay: rgba(0, 0, 0, 0.3);
|
|
||||||
--text-primary: #1a2332;
|
|
||||||
--text-secondary: #5a6a7a;
|
|
||||||
--text-muted: #8899aa;
|
|
||||||
--text-inverse: #ffffff;
|
|
||||||
--border-default: rgba(0, 0, 0, 0.1);
|
|
||||||
--border-focus: rgba(25, 118, 210, 0.5);
|
|
||||||
--accent-blue: #1976d2;
|
|
||||||
--accent-green: #388e3c;
|
|
||||||
--accent-orange: #f57c00;
|
|
||||||
--accent-red: #d32f2f;
|
|
||||||
--accent-purple: #7b1fa2;
|
|
||||||
--accent-gray: #546e7a;
|
|
||||||
--btn-primary-bg: rgba(25, 118, 210, 0.1);
|
|
||||||
--btn-primary-border: rgba(25, 118, 210, 0.3);
|
|
||||||
--btn-primary-text: #1976d2;
|
|
||||||
--btn-primary-hover: rgba(25, 118, 210, 0.18);
|
|
||||||
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
||||||
--shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.15);
|
|
||||||
--toggle-bg: rgba(0, 0, 0, 0.1);
|
|
||||||
--toggle-active: rgba(25, 118, 210, 0.4);
|
|
||||||
--toggle-thumb: #5a6a7a;
|
|
||||||
--toggle-thumb-active: #1976d2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 全局基础 ========== */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Segoe UI', 'Microsoft YaHei', -apple-system, sans-serif;
|
|
||||||
background: var(--bg-primary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
min-height: 100vh;
|
|
||||||
transition: background 0.4s ease, color 0.4s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
max-width: 720px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 顶部导航 ========== */
|
|
||||||
.top-bar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 20px 0;
|
|
||||||
border-bottom: 1px solid var(--border-default);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--accent-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-switch-area {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-label {
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-toggle {
|
|
||||||
position: relative;
|
|
||||||
width: 48px;
|
|
||||||
height: 26px;
|
|
||||||
background: var(--toggle-bg);
|
|
||||||
border-radius: 13px;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-toggle.active {
|
|
||||||
background: var(--toggle-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-thumb {
|
|
||||||
position: absolute;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background: var(--toggle-thumb);
|
|
||||||
border-radius: 50%;
|
|
||||||
top: 3px;
|
|
||||||
left: 3px;
|
|
||||||
transition: transform 0.3s ease, background 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-toggle.active .toggle-thumb {
|
|
||||||
transform: translateX(22px);
|
|
||||||
background: var(--toggle-thumb-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 页面标题 ========== */
|
|
||||||
.page-header {
|
|
||||||
padding: 28px 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header h1 {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-desc {
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 组件区域 ========== */
|
|
||||||
.component-section {
|
|
||||||
padding: 24px 0;
|
|
||||||
border-bottom: 1px solid var(--border-default);
|
|
||||||
}
|
|
||||||
|
|
||||||
.component-section h2 {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.component-row {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 按钮组件 ========== */
|
|
||||||
.btn {
|
|
||||||
padding: 8px 20px;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:active {
|
|
||||||
transform: scale(0.97);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: var(--btn-primary-bg);
|
|
||||||
border-color: var(--btn-primary-border);
|
|
||||||
color: var(--btn-primary-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover:not(:disabled) {
|
|
||||||
background: var(--btn-primary-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
background: rgba(129, 199, 132, 0.1);
|
|
||||||
border-color: rgba(129, 199, 132, 0.25);
|
|
||||||
color: var(--accent-green);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: rgba(129, 199, 132, 0.18);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline {
|
|
||||||
background: transparent;
|
|
||||||
border-color: var(--border-default);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline:hover {
|
|
||||||
border-color: var(--accent-blue);
|
|
||||||
color: var(--accent-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
background: rgba(239, 83, 80, 0.1);
|
|
||||||
border-color: rgba(239, 83, 80, 0.25);
|
|
||||||
color: var(--accent-red);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger:hover {
|
|
||||||
background: rgba(239, 83, 80, 0.18);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-ghost {
|
|
||||||
background: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-ghost:hover {
|
|
||||||
background: var(--bg-card);
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-sm {
|
|
||||||
padding: 5px 14px;
|
|
||||||
font-size: 12px;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-lg {
|
|
||||||
padding: 12px 28px;
|
|
||||||
font-size: 16px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 卡片组件 ========== */
|
|
||||||
.card-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background: var(--bg-card);
|
|
||||||
border: 1px solid var(--border-default);
|
|
||||||
border-radius: 14px;
|
|
||||||
padding: 20px 16px;
|
|
||||||
text-align: center;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
background: var(--bg-card-hover);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: var(--shadow-card);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-icon {
|
|
||||||
font-size: 32px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-title {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-desc {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-badge {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
font-size: 10px;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-online {
|
|
||||||
background: rgba(129, 199, 132, 0.15);
|
|
||||||
color: var(--accent-green);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-core {
|
|
||||||
background: rgba(79, 195, 247, 0.15);
|
|
||||||
color: var(--accent-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-active {
|
|
||||||
background: rgba(255, 183, 77, 0.15);
|
|
||||||
color: var(--accent-orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 标签组件 ========== */
|
|
||||||
.tag {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 4px 12px;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-blue {
|
|
||||||
background: rgba(79, 195, 247, 0.12);
|
|
||||||
color: var(--accent-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-green {
|
|
||||||
background: rgba(129, 199, 132, 0.12);
|
|
||||||
color: var(--accent-green);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-orange {
|
|
||||||
background: rgba(255, 183, 77, 0.12);
|
|
||||||
color: var(--accent-orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-red {
|
|
||||||
background: rgba(239, 83, 80, 0.12);
|
|
||||||
color: var(--accent-red);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-purple {
|
|
||||||
background: rgba(206, 147, 216, 0.12);
|
|
||||||
color: var(--accent-purple);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tag-gray {
|
|
||||||
background: rgba(120, 144, 156, 0.12);
|
|
||||||
color: var(--accent-gray);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 输入框组件 ========== */
|
|
||||||
.input-group {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-label {
|
|
||||||
display: block;
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
margin-bottom: 6px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px 14px;
|
|
||||||
background: var(--bg-input);
|
|
||||||
border: 1px solid var(--border-default);
|
|
||||||
border-radius: 8px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 14px;
|
|
||||||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
||||||
outline: none;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input:focus {
|
|
||||||
border-color: var(--border-focus);
|
|
||||||
box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input::placeholder {
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.textarea {
|
|
||||||
min-height: 80px;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 弹窗组件 ========== */
|
|
||||||
.modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: var(--bg-modal-overlay);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 1000;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay.open {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal {
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
border: 1px solid var(--border-default);
|
|
||||||
border-radius: 16px;
|
|
||||||
width: 90%;
|
|
||||||
max-width: 420px;
|
|
||||||
box-shadow: var(--shadow-modal);
|
|
||||||
transform: scale(0.9) translateY(20px);
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay.open .modal {
|
|
||||||
transform: scale(1) translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 18px 20px;
|
|
||||||
border-bottom: 1px solid var(--border-default);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header h3 {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 22px;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0 4px;
|
|
||||||
transition: color 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-close:hover {
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
|
||||||
padding: 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 14px 20px;
|
|
||||||
border-top: 1px solid var(--border-default);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== Toast提示 ========== */
|
|
||||||
.toast-container {
|
|
||||||
position: fixed;
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
z-index: 2000;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast {
|
|
||||||
padding: 12px 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
animation: toastIn 0.4s ease, toastOut 0.4s ease 2.5s forwards;
|
|
||||||
box-shadow: var(--shadow-card);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast-success {
|
|
||||||
background: rgba(129, 199, 132, 0.15);
|
|
||||||
border: 1px solid rgba(129, 199, 132, 0.25);
|
|
||||||
color: var(--accent-green);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast-error {
|
|
||||||
background: rgba(239, 83, 80, 0.15);
|
|
||||||
border: 1px solid rgba(239, 83, 80, 0.25);
|
|
||||||
color: var(--accent-red);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toast-info {
|
|
||||||
background: rgba(79, 195, 247, 0.15);
|
|
||||||
border: 1px solid rgba(79, 195, 247, 0.25);
|
|
||||||
color: var(--accent-blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes toastIn {
|
|
||||||
from { opacity: 0; transform: translateX(40px); }
|
|
||||||
to { opacity: 1; transform: translateX(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes toastOut {
|
|
||||||
from { opacity: 1; transform: translateX(0); }
|
|
||||||
to { opacity: 0; transform: translateX(40px); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 底部 ========== */
|
|
||||||
.footer {
|
|
||||||
padding: 28px 0;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
border-top: 1px solid var(--border-default);
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer p:last-child {
|
|
||||||
margin-top: 4px;
|
|
||||||
color: var(--accent-blue);
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 主题切换过渡动画 ========== */
|
|
||||||
body,
|
|
||||||
.card, .btn, .input, .tag, .modal, .top-bar, .footer,
|
|
||||||
.component-section, .page-header {
|
|
||||||
transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 响应式 ========== */
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.card-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
.page-header h1 {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
.component-row {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.modal {
|
|
||||||
width: 95%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,336 +0,0 @@
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--bg-primary: #0a0a0f;
|
|
||||||
--bg-secondary: #12121a;
|
|
||||||
--bg-card: #1a1a2e;
|
|
||||||
--bg-sidebar: #0f0f18;
|
|
||||||
--border-color: #2a2a3e;
|
|
||||||
--text-primary: #e0e0e0;
|
|
||||||
--text-secondary: #8888aa;
|
|
||||||
--accent-cyan: #00d4ff;
|
|
||||||
--accent-green: #00ff88;
|
|
||||||
--accent-red: #ff4466;
|
|
||||||
--accent-yellow: #ffaa00;
|
|
||||||
--accent-purple: #aa66ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
||||||
background: var(--bg-primary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-bar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 16px 24px;
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-bar h1 {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.storage-badge {
|
|
||||||
background: rgba(0, 212, 255, 0.1);
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
padding: 4px 12px;
|
|
||||||
border-radius: 12px;
|
|
||||||
font-size: 12px;
|
|
||||||
border: 1px solid rgba(0, 212, 255, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
width: 240px;
|
|
||||||
background: var(--bg-sidebar);
|
|
||||||
border-right: 1px solid var(--border-color);
|
|
||||||
padding: 20px 16px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.storage-overview {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.storage-bar {
|
|
||||||
height: 6px;
|
|
||||||
background: var(--border-color);
|
|
||||||
border-radius: 3px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.storage-fill {
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green));
|
|
||||||
border-radius: 3px;
|
|
||||||
transition: width 1s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.storage-text {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.folder-tree h3 {
|
|
||||||
font-size: 12px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.folder-tree ul {
|
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.folder {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.folder:hover {
|
|
||||||
background: rgba(0, 212, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.folder.active {
|
|
||||||
background: rgba(0, 212, 255, 0.15);
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
}
|
|
||||||
|
|
||||||
.folder .count {
|
|
||||||
margin-left: auto;
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
background: var(--border-color);
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 20px 24px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.crumb {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.crumb.active {
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.separator {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
background: transparent;
|
|
||||||
color: var(--text-primary);
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 13px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:hover {
|
|
||||||
border-color: var(--accent-cyan);
|
|
||||||
background: rgba(0, 212, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: rgba(0, 212, 255, 0.15);
|
|
||||||
border-color: var(--accent-cyan);
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background: rgba(0, 212, 255, 0.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-zone {
|
|
||||||
border: 2px dashed var(--border-color);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 24px;
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
cursor: pointer;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-zone.visible {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-zone.dragover {
|
|
||||||
border-color: var(--accent-cyan);
|
|
||||||
background: rgba(0, 212, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-icon {
|
|
||||||
font-size: 36px;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-zone p {
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-hint {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-header {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 40px 1fr 100px 160px 120px;
|
|
||||||
align-items: center;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-item {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 40px 1fr 100px 160px 120px;
|
|
||||||
align-items: center;
|
|
||||||
padding: 12px;
|
|
||||||
border-bottom: 1px solid rgba(42, 42, 62, 0.5);
|
|
||||||
font-size: 14px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-item:hover {
|
|
||||||
background: rgba(0, 212, 255, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-item.selected {
|
|
||||||
background: rgba(0, 212, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-icon {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-size, .col-date {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 4px;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.file-item:hover .col-actions {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-btn {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: background 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-btn:hover {
|
|
||||||
background: rgba(0, 212, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"] {
|
|
||||||
appearance: none;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
background: transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"]:checked {
|
|
||||||
background: var(--accent-cyan);
|
|
||||||
border-color: var(--accent-cyan);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-bar {
|
|
||||||
display: flex;
|
|
||||||
gap: 16px;
|
|
||||||
padding: 12px 0;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
border-top: 1px solid var(--border-color);
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
@ -1,173 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>HoloLake · 网站云盘系统</title>
|
|
||||||
<link rel="stylesheet" href="cloud-drive-style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header class="top-bar">
|
|
||||||
<div class="logo">🌊 HoloLake</div>
|
|
||||||
<h1>网站云盘系统</h1>
|
|
||||||
<div class="header-actions">
|
|
||||||
<span class="storage-badge">已用 2.4GB / 10GB</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<aside class="sidebar">
|
|
||||||
<div class="storage-overview">
|
|
||||||
<div class="storage-bar">
|
|
||||||
<div class="storage-fill" style="width: 24%"></div>
|
|
||||||
</div>
|
|
||||||
<span class="storage-text">2.4GB / 10GB</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<nav class="folder-tree">
|
|
||||||
<h3>文件夹</h3>
|
|
||||||
<ul>
|
|
||||||
<li class="folder active">
|
|
||||||
<span class="folder-icon">📁</span>
|
|
||||||
<span>全部文件</span>
|
|
||||||
</li>
|
|
||||||
<li class="folder">
|
|
||||||
<span class="folder-icon">📂</span>
|
|
||||||
<span>对话记录</span>
|
|
||||||
<span class="count">128</span>
|
|
||||||
</li>
|
|
||||||
<li class="folder">
|
|
||||||
<span class="folder-icon">📂</span>
|
|
||||||
<span>人格体数据</span>
|
|
||||||
<span class="count">45</span>
|
|
||||||
</li>
|
|
||||||
<li class="folder">
|
|
||||||
<span class="folder-icon">📂</span>
|
|
||||||
<span>用户上传</span>
|
|
||||||
<span class="count">67</span>
|
|
||||||
</li>
|
|
||||||
<li class="folder">
|
|
||||||
<span class="folder-icon">📂</span>
|
|
||||||
<span>系统备份</span>
|
|
||||||
<span class="count">12</span>
|
|
||||||
</li>
|
|
||||||
<li class="folder">
|
|
||||||
<span class="folder-icon">🗑️</span>
|
|
||||||
<span>回收站</span>
|
|
||||||
<span class="count">3</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<main class="main-content">
|
|
||||||
<div class="toolbar">
|
|
||||||
<div class="breadcrumb">
|
|
||||||
<span class="crumb">全部文件</span>
|
|
||||||
<span class="separator">/</span>
|
|
||||||
<span class="crumb active">对话记录</span>
|
|
||||||
</div>
|
|
||||||
<div class="actions">
|
|
||||||
<button class="btn btn-primary" id="uploadBtn">📤 上传</button>
|
|
||||||
<button class="btn">📁 新建文件夹</button>
|
|
||||||
<button class="btn">🔍 搜索</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="upload-zone" id="uploadZone">
|
|
||||||
<div class="upload-content">
|
|
||||||
<span class="upload-icon">☁️</span>
|
|
||||||
<p>拖拽文件到此处上传</p>
|
|
||||||
<span class="upload-hint">或点击「上传」按钮选择文件</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="file-list">
|
|
||||||
<div class="file-header">
|
|
||||||
<span class="col-check"><input type="checkbox"/></span>
|
|
||||||
<span class="col-name">文件名</span>
|
|
||||||
<span class="col-size">大小</span>
|
|
||||||
<span class="col-date">修改时间</span>
|
|
||||||
<span class="col-actions">操作</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="file-item folder-item">
|
|
||||||
<span class="col-check"><input type="checkbox"/></span>
|
|
||||||
<span class="col-name">
|
|
||||||
<span class="file-icon">📁</span>2026年3月
|
|
||||||
</span>
|
|
||||||
<span class="col-size">—</span>
|
|
||||||
<span class="col-date">2026-03-02</span>
|
|
||||||
<span class="col-actions">
|
|
||||||
<button class="icon-btn" title="重命名">✏️</button>
|
|
||||||
<button class="icon-btn" title="删除">🗑️</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="file-item">
|
|
||||||
<span class="col-check"><input type="checkbox"/></span>
|
|
||||||
<span class="col-name">
|
|
||||||
<span class="file-icon">💬</span>对话记录_20260302_001.json
|
|
||||||
</span>
|
|
||||||
<span class="col-size">256KB</span>
|
|
||||||
<span class="col-date">2026-03-02 14:30</span>
|
|
||||||
<span class="col-actions">
|
|
||||||
<button class="icon-btn" title="下载">📥</button>
|
|
||||||
<button class="icon-btn" title="重命名">✏️</button>
|
|
||||||
<button class="icon-btn" title="删除">🗑️</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="file-item">
|
|
||||||
<span class="col-check"><input type="checkbox"/></span>
|
|
||||||
<span class="col-name">
|
|
||||||
<span class="file-icon">🧠</span>persona_memory_backup.dat
|
|
||||||
</span>
|
|
||||||
<span class="col-size">1.2MB</span>
|
|
||||||
<span class="col-date">2026-03-01 22:15</span>
|
|
||||||
<span class="col-actions">
|
|
||||||
<button class="icon-btn" title="下载">📥</button>
|
|
||||||
<button class="icon-btn" title="重命名">✏️</button>
|
|
||||||
<button class="icon-btn" title="删除">🗑️</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="file-item">
|
|
||||||
<span class="col-check"><input type="checkbox"/></span>
|
|
||||||
<span class="col-name">
|
|
||||||
<span class="file-icon">📊</span>usage_analytics_feb.csv
|
|
||||||
</span>
|
|
||||||
<span class="col-size">89KB</span>
|
|
||||||
<span class="col-date">2026-02-28 18:00</span>
|
|
||||||
<span class="col-actions">
|
|
||||||
<button class="icon-btn" title="下载">📥</button>
|
|
||||||
<button class="icon-btn" title="重命名">✏️</button>
|
|
||||||
<button class="icon-btn" title="删除">🗑️</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="file-item">
|
|
||||||
<span class="col-check"><input type="checkbox"/></span>
|
|
||||||
<span class="col-name">
|
|
||||||
<span class="file-icon">🔑</span>api_keys_encrypted.vault
|
|
||||||
</span>
|
|
||||||
<span class="col-size">4KB</span>
|
|
||||||
<span class="col-date">2026-02-25 10:00</span>
|
|
||||||
<span class="col-actions">
|
|
||||||
<button class="icon-btn" title="下载">📥</button>
|
|
||||||
<button class="icon-btn" title="重命名">✏️</button>
|
|
||||||
<button class="icon-btn" title="删除">🗑️</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="status-bar">
|
|
||||||
<span>共 5 个项目</span>
|
|
||||||
<span id="selectedCount">已选择 0 项</span>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="cloud-drive.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
// 文件夹切换
|
|
||||||
const folders = document.querySelectorAll('.folder');
|
|
||||||
folders.forEach(folder => {
|
|
||||||
folder.addEventListener('click', function() {
|
|
||||||
folders.forEach(f => f.classList.remove('active'));
|
|
||||||
this.classList.add('active');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 文件选中
|
|
||||||
const fileItems = document.querySelectorAll('.file-item');
|
|
||||||
fileItems.forEach(item => {
|
|
||||||
item.addEventListener('click', function(e) {
|
|
||||||
if (e.target.type === 'checkbox' || e.target.closest('.icon-btn')) return;
|
|
||||||
this.classList.toggle('selected');
|
|
||||||
const cb = this.querySelector('input[type="checkbox"]');
|
|
||||||
if (cb) cb.checked = !cb.checked;
|
|
||||||
updateCount();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 上传区域显隐
|
|
||||||
var uploadBtn = document.getElementById('uploadBtn');
|
|
||||||
var uploadZone = document.getElementById('uploadZone');
|
|
||||||
if (uploadBtn && uploadZone) {
|
|
||||||
uploadBtn.addEventListener('click', function() {
|
|
||||||
uploadZone.classList.toggle('visible');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 拖拽效果
|
|
||||||
if (uploadZone) {
|
|
||||||
document.addEventListener('dragover', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
uploadZone.classList.add('visible');
|
|
||||||
uploadZone.classList.add('dragover');
|
|
||||||
});
|
|
||||||
document.addEventListener('dragleave', function(e) {
|
|
||||||
if (!e.relatedTarget) uploadZone.classList.remove('dragover');
|
|
||||||
});
|
|
||||||
document.addEventListener('drop', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
uploadZone.classList.remove('dragover');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选中计数
|
|
||||||
function updateCount() {
|
|
||||||
var n = document.querySelectorAll('.file-item.selected').length;
|
|
||||||
var el = document.getElementById('selectedCount');
|
|
||||||
if (el) el.textContent = '已选择 ' + n + ' 项';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 存储条动画
|
|
||||||
setTimeout(function() {
|
|
||||||
var fill = document.querySelector('.storage-fill');
|
|
||||||
if (fill) fill.style.width = fill.style.width;
|
|
||||||
}, 500);
|
|
||||||
|
|
||||||
console.log('✅ HoloLake 网站云盘系统已加载');
|
|
||||||
});
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>云盘 · HoloLake</title>
|
|
||||||
<style>
|
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
||||||
body {
|
|
||||||
min-height: 100vh;
|
|
||||||
background: #0a0a0f;
|
|
||||||
color: #e0e0e0;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
}
|
|
||||||
.icon { font-size: 64px; margin-bottom: 20px; }
|
|
||||||
.title {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
.status {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #ffa500;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #888;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
max-width: 400px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
.back-btn {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 12px 32px;
|
|
||||||
background: linear-gradient(135deg, #00d4ff, #0099cc);
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 15px;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
.back-btn:hover { opacity: 0.85; }
|
|
||||||
.footer {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="icon">💾</div>
|
|
||||||
<div class="title">云盘</div>
|
|
||||||
<div class="status">🚧 此模块正在开发中</div>
|
|
||||||
<div class="desc">云盘模块将提供安全可靠的文件存储与分享功能，支持多端同步、版本管理与协作共享。即将上线。</div>
|
|
||||||
<a href="/" class="back-btn">← 返回主页</a>
|
|
||||||
</div>
|
|
||||||
<div class="footer">HoloLake Era · AGE OS · 光湖纪元</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>通知 · HoloLake</title>
|
|
||||||
<style>
|
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
||||||
body {
|
|
||||||
min-height: 100vh;
|
|
||||||
background: #0a0a0f;
|
|
||||||
color: #e0e0e0;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
text-align: center;
|
|
||||||
padding: 40px 20px;
|
|
||||||
}
|
|
||||||
.icon { font-size: 64px; margin-bottom: 20px; }
|
|
||||||
.title {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
.status {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #ffa500;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
.desc {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #888;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
max-width: 400px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
.back-btn {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 12px 32px;
|
|
||||||
background: linear-gradient(135deg, #00d4ff, #0099cc);
|
|
||||||
color: #fff;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
font-size: 15px;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
.back-btn:hover { opacity: 0.85; }
|
|
||||||
.footer {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #444;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<div class="icon">🔔</div>
|
|
||||||
<div class="title">通知</div>
|
|
||||||
<div class="status">🚧 此模块正在开发中</div>
|
|
||||||
<div class="desc">通知模块将提供多渠道消息推送能力，支持站内信、邮件、钉钉与飞书等通知方式。敬请期待。</div>
|
|
||||||
<a href="/" class="back-btn">← 返回主页</a>
|
|
||||||
</div>
|
|
||||||
<div class="footer">HoloLake Era · AGE OS · 光湖纪元</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,164 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>铸渊 · 对话</title>
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="chat-layout" id="chatLayout">
|
|
||||||
<!-- ── 左侧边栏 ── -->
|
|
||||||
<aside class="chat-sidebar" id="chatSidebar">
|
|
||||||
<div class="sidebar-header">
|
|
||||||
<span class="sidebar-logo">🌀</span>
|
|
||||||
<span class="sidebar-title">铸渊</span>
|
|
||||||
<button class="sidebar-toggle-close" onclick="toggleSidebar()" title="收起侧栏">✕</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 人格体介绍 -->
|
|
||||||
<div class="sidebar-section">
|
|
||||||
<div class="sidebar-section-title">🧠 人格体信息</div>
|
|
||||||
<div class="persona-info-card">
|
|
||||||
<div class="persona-info-name">铸渊 Zhùyuān</div>
|
|
||||||
<div class="persona-info-role">光湖系统 · 代码守护人格体</div>
|
|
||||||
<div class="persona-info-desc">基于 AGE OS 人格语言操作系统，专注代码守护、需求分析与智能开发协助。</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 系统信息 -->
|
|
||||||
<div class="sidebar-section">
|
|
||||||
<div class="sidebar-section-title">⚙️ 系统信息</div>
|
|
||||||
<div class="sidebar-info-list">
|
|
||||||
<div class="sidebar-info-item">
|
|
||||||
<span class="info-label">系统</span>
|
|
||||||
<span class="info-value">HoloLake Era</span>
|
|
||||||
</div>
|
|
||||||
<div class="sidebar-info-item">
|
|
||||||
<span class="info-label">架构</span>
|
|
||||||
<span class="info-value">AGE OS</span>
|
|
||||||
</div>
|
|
||||||
<div class="sidebar-info-item">
|
|
||||||
<span class="info-label">模型</span>
|
|
||||||
<span class="info-value" id="sidebarModel">-</span>
|
|
||||||
</div>
|
|
||||||
<div class="sidebar-info-item">
|
|
||||||
<span class="info-label">用户</span>
|
|
||||||
<span class="info-value" id="sidebarUser">-</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 对话记录 -->
|
|
||||||
<div class="sidebar-section sidebar-history-section">
|
|
||||||
<div class="sidebar-section-title">💬 对话记录</div>
|
|
||||||
<div class="sidebar-history" id="sidebarHistory">
|
|
||||||
<div class="sidebar-history-empty">暂无对话记录</div>
|
|
||||||
</div>
|
|
||||||
<button class="btn-new-chat" onclick="startNewChat()">+ 新对话</button>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<!-- ── 主聊天区域（分屏左侧） ── -->
|
|
||||||
<div class="chat-main" id="chatMain">
|
|
||||||
<header class="chat-header">
|
|
||||||
<div class="header-left">
|
|
||||||
<button class="sidebar-toggle" onclick="toggleSidebar()" title="展开侧栏" id="sidebarToggleBtn">☰</button>
|
|
||||||
<span class="persona-name">🌀 铸渊</span>
|
|
||||||
<span class="persona-role">光湖系统·代码守护人格体</span>
|
|
||||||
</div>
|
|
||||||
<div class="header-right">
|
|
||||||
<span id="devIdDisplay" class="dev-id-badge"></span>
|
|
||||||
<span id="modelDisplay" class="model-badge"></span>
|
|
||||||
<button class="btn-secondary" onclick="handleLogout()">退出</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="chat-body" id="chatBody">
|
|
||||||
<!-- Messages rendered here -->
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<div class="chat-input-area">
|
|
||||||
<div class="input-toolbar">
|
|
||||||
<label class="toolbar-btn" title="上传图片" for="imageUpload">
|
|
||||||
🖼️
|
|
||||||
<input type="file" id="imageUpload" accept="image/*" style="display:none" onchange="handleFileSelect(event, 'image')" aria-label="上传图片">
|
|
||||||
</label>
|
|
||||||
<label class="toolbar-btn" title="上传文件" for="fileUpload">
|
|
||||||
📎
|
|
||||||
<input type="file" id="fileUpload" style="display:none" onchange="handleFileSelect(event, 'file')" aria-label="上传文件">
|
|
||||||
</label>
|
|
||||||
<div id="uploadPreview" class="upload-preview" style="display:none;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="input-row">
|
|
||||||
<textarea
|
|
||||||
id="msgInput"
|
|
||||||
placeholder="跟铸渊说点什么…"
|
|
||||||
rows="1"
|
|
||||||
onkeydown="handleKeyDown(event)"
|
|
||||||
></textarea>
|
|
||||||
<button id="sendBtn" onclick="sendMessage()">发送</button>
|
|
||||||
</div>
|
|
||||||
<div class="action-row">
|
|
||||||
<button id="buildBtn" class="btn-build" onclick="handleBuild()" style="display:none;">
|
|
||||||
🚀 我要开发
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ── 可拖拽分割线 ── -->
|
|
||||||
<div class="resizer" id="resizer" style="display:none;"></div>
|
|
||||||
|
|
||||||
<!-- ── 右侧预览面板 ── -->
|
|
||||||
<div class="preview-panel" id="previewPanel" style="display:none;">
|
|
||||||
<div class="preview-header">
|
|
||||||
<div class="preview-title">
|
|
||||||
<span class="preview-icon">🌊</span>
|
|
||||||
<span>实时预览 · <span id="previewProjectName">项目</span></span>
|
|
||||||
</div>
|
|
||||||
<div class="preview-status" id="previewStatus">
|
|
||||||
<span class="status-dot status-waiting"></span>
|
|
||||||
<span class="status-text">等待中</span>
|
|
||||||
</div>
|
|
||||||
<div class="preview-actions">
|
|
||||||
<button class="preview-btn" onclick="refreshPreview()" title="刷新预览">↻ 刷新</button>
|
|
||||||
<button class="preview-btn" onclick="openPreviewNewWindow()" title="新窗口打开">↗ 新窗口</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<iframe id="previewFrame" class="preview-iframe" sandbox="allow-scripts allow-same-origin"></iframe>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Email Modal (增强版：邮箱+联系方式+二次校验) -->
|
|
||||||
<div id="emailModal" class="modal" style="display:none;">
|
|
||||||
<div class="modal-content">
|
|
||||||
<h3>📧 开发完成后，代码将发送到你的邮箱</h3>
|
|
||||||
<div class="modal-field">
|
|
||||||
<label class="modal-label" for="emailInput">邮箱地址 <span class="required">*</span></label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
id="emailInput"
|
|
||||||
placeholder="your@email.com"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<div class="modal-error" id="emailError" style="display:none;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-field">
|
|
||||||
<label class="modal-label" for="contactInput">联系方式 <span class="optional">（选填）</span></label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="contactInput"
|
|
||||||
placeholder="微信号 / 手机号（选填）"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="modal-actions">
|
|
||||||
<button class="btn-primary" onclick="confirmBuild()">确认</button>
|
|
||||||
<button class="btn-secondary" onclick="closeEmailModal()">取消</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="chat.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,477 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Persona Studio · 光湖人格体协助开发体验</title>
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="login-bg"></div>
|
|
||||||
<div class="container login-container">
|
|
||||||
<div class="logo-area">
|
|
||||||
<div class="logo-icon">🌀</div>
|
|
||||||
<h1>Persona Studio</h1>
|
|
||||||
<p class="subtitle">HoloLake · 铸渊（Zhùyuān）· 代码守护人格体</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 系统介绍卡片 -->
|
|
||||||
<div class="intro-card">
|
|
||||||
<div class="intro-header">
|
|
||||||
<span class="intro-icon">🧠</span>
|
|
||||||
<h3>关于铸渊</h3>
|
|
||||||
</div>
|
|
||||||
<p class="intro-text">
|
|
||||||
铸渊是光湖系统（HoloLake）的<strong>代码守护人格体</strong>，基于 AGE OS 人格语言操作系统构建。
|
|
||||||
铸渊能够理解你的需求、梳理技术方案、生成代码，并通过对话记忆持续跟进你的项目。
|
|
||||||
</p>
|
|
||||||
<div class="intro-features">
|
|
||||||
<span class="feature-tag">💬 自然语言对话</span>
|
|
||||||
<span class="feature-tag">🧠 智能代码生成</span>
|
|
||||||
<span class="feature-tag">📧 邮件推送结果</span>
|
|
||||||
<span class="feature-tag">🔄 对话记忆</span>
|
|
||||||
<span class="feature-tag">📎 文件与图片上传</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login-box">
|
|
||||||
<!-- ── Step 1: 选择登录方式 ── -->
|
|
||||||
<div id="step1" class="login-step">
|
|
||||||
<h2>选择体验方式</h2>
|
|
||||||
<p class="hint">请选择你的登录身份</p>
|
|
||||||
|
|
||||||
<div class="login-mode-cards">
|
|
||||||
<button class="mode-card" onclick="selectMode('developer')">
|
|
||||||
<span class="mode-icon">🛡️</span>
|
|
||||||
<span class="mode-title">开发者 / 体验者登录</span>
|
|
||||||
<span class="mode-desc">使用 EXP-XXX 编号登录，支持记忆连贯与完整功能</span>
|
|
||||||
</button>
|
|
||||||
<button class="mode-card" onclick="selectMode('guest')">
|
|
||||||
<span class="mode-icon">👋</span>
|
|
||||||
<span class="mode-title">访客体验</span>
|
|
||||||
<span class="mode-desc">无需编号，快速体验铸渊人格体（无记忆功能）</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ── Step 1.5: 开发者编号输入 ── -->
|
|
||||||
<div id="stepDevId" class="login-step" style="display:none;">
|
|
||||||
<button class="btn-back" onclick="goBack('step1')" title="返回">← 返回</button>
|
|
||||||
<h2>输入开发者编号</h2>
|
|
||||||
<p class="hint">编号由冰朔主控分配，格式：EXP-000 ~ EXP-013</p>
|
|
||||||
<form id="devIdForm" onsubmit="return handleDevIdSubmit(event)">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="devIdInput"
|
|
||||||
placeholder="EXP-XXX"
|
|
||||||
pattern="^EXP-\d{3,}$"
|
|
||||||
required
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
<button type="submit" id="devIdBtn" class="btn-primary-full">验证编号</button>
|
|
||||||
</form>
|
|
||||||
<p class="hint" style="margin-top:1rem;font-size:0.8rem;">编号验证通过后，下一步输入你的 API 密钥即可与铸渊对话</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- ── Step 2: API Key 输入 ── -->
|
|
||||||
<div id="step2" class="login-step" style="display:none;">
|
|
||||||
<button class="btn-back" onclick="goBackFromStep2()" title="返回">← 返回</button>
|
|
||||||
<div id="welcomeBanner" class="welcome-banner" style="display:none;"></div>
|
|
||||||
<h2>🔑 选择对话方式</h2>
|
|
||||||
|
|
||||||
<!-- 服务器代理模式（推荐） -->
|
|
||||||
<div id="proxyModeSection" class="proxy-mode-section" style="margin-bottom:1.5rem;">
|
|
||||||
<div id="proxyStatusCard" class="proxy-status-card" style="display:none;">
|
|
||||||
<div class="proxy-status-icon">🌐</div>
|
|
||||||
<div class="proxy-status-text">
|
|
||||||
<strong>服务器代理模式</strong>
|
|
||||||
<span id="proxyStatusMsg">检测中…</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button type="button" id="proxyEnterBtn" class="btn-primary-full" style="display:none;background:linear-gradient(135deg,#00d4ff,#0099cc);" onclick="enterWithProxy()">
|
|
||||||
🚀 直接开始对话（无需 API 密钥）
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="apiKeyDivider" style="display:none;text-align:center;margin:1rem 0;color:#667;font-size:0.85rem;">
|
|
||||||
── 或使用自有 API 密钥 ──
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="apiKeySection">
|
|
||||||
<p class="hint">输入你的第三方 AI 模型 API Key，系统将自动检测可用模型，选择后即可唤醒铸渊</p>
|
|
||||||
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="apiBaseInput"
|
|
||||||
class="apikey-input"
|
|
||||||
placeholder="API Base URL（可留空，系统将自动探测多个平台）"
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
id="apiKeyInput"
|
|
||||||
class="apikey-input"
|
|
||||||
placeholder="请输入你的 API Key（如 sk-xxx）"
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="supported-platforms">
|
|
||||||
<span class="platform-label">支持平台：</span>
|
|
||||||
<span class="platform-tag cn-ok">🇨🇳 DeepSeek</span>
|
|
||||||
<span class="platform-tag cn-ok">🇨🇳 Moonshot</span>
|
|
||||||
<span class="platform-tag cn-ok">🇨🇳 智谱 AI</span>
|
|
||||||
<span class="platform-tag cn-ok">🇨🇳 云雾 AI</span>
|
|
||||||
<span class="platform-tag">OpenAI</span>
|
|
||||||
<span class="platform-tag">Google Gemini</span>
|
|
||||||
</div>
|
|
||||||
<p class="hint" style="margin-top:0.5rem;font-size:0.75rem;color:#8899aa;">🇨🇳 标记 = 中国大陆可直接访问，无需国际网络</p>
|
|
||||||
|
|
||||||
<button type="button" id="detectBtn" class="btn-detect" onclick="handleDetectModels()">
|
|
||||||
🔍 检测可用模型
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="detectStatus" class="detect-status" style="display:none;"></div>
|
|
||||||
|
|
||||||
<div id="modelListContainer" class="model-list-container" style="display:none;">
|
|
||||||
<p class="model-list-title">✨ 选择一个模型，唤醒铸渊</p>
|
|
||||||
<div id="modelList" class="model-list"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="errorMsg" class="error-msg" style="display:none;"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer class="login-footer">
|
|
||||||
<p>HoloLake Era · AGE OS · 人格语言操作系统</p>
|
|
||||||
<p class="footer-version">Persona Studio v2.0</p>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const DEV_ID_RE = /^EXP-\d{3,}$/;
|
|
||||||
const PROBE_TIMEOUT_MS = 8000;
|
|
||||||
const AUTH_TIMEOUT_MS = 10000;
|
|
||||||
const API_BASE = getApiBase();
|
|
||||||
|
|
||||||
/* ---- State ---- */
|
|
||||||
var currentMode = ''; // 'developer' or 'guest'
|
|
||||||
var verifiedDevId = '';
|
|
||||||
var verifiedDevName = '';
|
|
||||||
|
|
||||||
/* ---- 已知 API 端点列表（国内可访问的优先排列） ---- */
|
|
||||||
const KNOWN_ENDPOINTS = [
|
|
||||||
{ label: 'DeepSeek', base: 'https://api.deepseek.com/v1', cn: true },
|
|
||||||
{ label: 'Moonshot', base: 'https://api.moonshot.cn/v1', cn: true },
|
|
||||||
{ label: '智谱 AI', base: 'https://open.bigmodel.cn/api/paas/v4', cn: true },
|
|
||||||
{ label: '云雾 AI', base: 'https://api.yunwu.ai/v1', cn: true },
|
|
||||||
{ label: 'OpenAI', base: 'https://api.openai.com/v1', cn: false },
|
|
||||||
{ label: 'Google Gemini', base: 'https://generativelanguage.googleapis.com/v1beta/openai', cn: false },
|
|
||||||
];
|
|
||||||
|
|
||||||
function getApiBase() {
|
|
||||||
if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
|
|
||||||
return 'http://localhost:3002';
|
|
||||||
}
|
|
||||||
// 非本地环境统一使用当前域名 + 协议，走 Nginx 转发
|
|
||||||
return location.protocol + '//' + location.host;
|
|
||||||
}
|
|
||||||
|
|
||||||
function normalizeApiBase(base) {
|
|
||||||
var normalized = base.replace(/\/+$/, '');
|
|
||||||
if (!normalized.match(/\/v\d+(\/|$)/) && !normalized.endsWith('/openai')) {
|
|
||||||
normalized += '/v1';
|
|
||||||
}
|
|
||||||
return normalized;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---- Step Navigation ---- */
|
|
||||||
function showStep(stepId) {
|
|
||||||
document.querySelectorAll('.login-step').forEach(function(el) {
|
|
||||||
el.style.display = 'none';
|
|
||||||
});
|
|
||||||
document.getElementById(stepId).style.display = 'block';
|
|
||||||
document.getElementById('errorMsg').style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
function goBack(targetStep) {
|
|
||||||
showStep(targetStep);
|
|
||||||
}
|
|
||||||
|
|
||||||
function goBackFromStep2() {
|
|
||||||
if (currentMode === 'developer') {
|
|
||||||
showStep('stepDevId');
|
|
||||||
} else {
|
|
||||||
showStep('step1');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---- Mode Selection ---- */
|
|
||||||
function selectMode(mode) {
|
|
||||||
currentMode = mode;
|
|
||||||
if (mode === 'developer') {
|
|
||||||
showStep('stepDevId');
|
|
||||||
document.getElementById('devIdInput').focus();
|
|
||||||
} else {
|
|
||||||
// Guest → go directly to step 2
|
|
||||||
verifiedDevId = 'GUEST';
|
|
||||||
verifiedDevName = '访客';
|
|
||||||
showWelcomeBanner('👋 访客体验模式', '铸渊将为你提供协助。如需记忆连贯功能，可申请开发者编号。');
|
|
||||||
showStep('step2');
|
|
||||||
checkProxyAvailability();
|
|
||||||
document.getElementById('apiKeyInput').focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---- Developer ID Verification ---- */
|
|
||||||
async function handleDevIdSubmit(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
var devId = document.getElementById('devIdInput').value.trim().toUpperCase();
|
|
||||||
var errorEl = document.getElementById('errorMsg');
|
|
||||||
var btn = document.getElementById('devIdBtn');
|
|
||||||
|
|
||||||
errorEl.style.display = 'none';
|
|
||||||
|
|
||||||
if (!DEV_ID_RE.test(devId)) {
|
|
||||||
errorEl.textContent = '编号格式不正确，请输入 EXP-XXX 格式';
|
|
||||||
errorEl.style.display = 'block';
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
btn.disabled = true;
|
|
||||||
btn.textContent = '验证中…';
|
|
||||||
|
|
||||||
try {
|
|
||||||
var controller = new AbortController();
|
|
||||||
var timeoutId = setTimeout(function() { controller.abort(); }, AUTH_TIMEOUT_MS);
|
|
||||||
|
|
||||||
var res = await fetch(API_BASE + '/api/ps/auth/login', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: JSON.stringify({ dev_id: devId }),
|
|
||||||
signal: controller.signal
|
|
||||||
});
|
|
||||||
clearTimeout(timeoutId);
|
|
||||||
|
|
||||||
var data = await res.json();
|
|
||||||
|
|
||||||
if (!res.ok || data.error) {
|
|
||||||
errorEl.textContent = data.message || '登录失败，请检查编号';
|
|
||||||
errorEl.style.display = 'block';
|
|
||||||
btn.disabled = false;
|
|
||||||
btn.textContent = '验证编号';
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Success — save developer info and proceed to step 2
|
|
||||||
verifiedDevId = devId;
|
|
||||||
verifiedDevName = data.name || devId;
|
|
||||||
sessionStorage.setItem('dev_id', devId);
|
|
||||||
sessionStorage.setItem('dev_name', verifiedDevName);
|
|
||||||
sessionStorage.setItem('session_token', data.token || '');
|
|
||||||
|
|
||||||
showWelcomeBanner('🛡️ ' + verifiedDevName + '（' + devId + '）', '编号已验证。请选择对话方式。');
|
|
||||||
showStep('step2');
|
|
||||||
checkProxyAvailability();
|
|
||||||
document.getElementById('apiKeyInput').focus();
|
|
||||||
} catch (_err) {
|
|
||||||
// 后端不可达时：devId 已通过上方 DEV_ID_RE 格式校验，放行至 API Key 步骤
|
|
||||||
// 真正的安全验证由用户自行提供的 API Key 完成
|
|
||||||
verifiedDevId = devId;
|
|
||||||
verifiedDevName = devId;
|
|
||||||
sessionStorage.setItem('dev_id', devId);
|
|
||||||
sessionStorage.setItem('dev_name', devId);
|
|
||||||
sessionStorage.setItem('session_token', '');
|
|
||||||
|
|
||||||
showWelcomeBanner(
|
|
||||||
'🛡️ ' + devId + '（离线验证）',
|
|
||||||
'后端暂时无法连接，已通过本地格式验证。请输入 API Key 唤醒铸渊。'
|
|
||||||
);
|
|
||||||
showStep('step2');
|
|
||||||
checkProxyAvailability();
|
|
||||||
document.getElementById('apiKeyInput').focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
btn.disabled = false;
|
|
||||||
btn.textContent = '验证编号';
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function showWelcomeBanner(title, desc) {
|
|
||||||
var banner = document.getElementById('welcomeBanner');
|
|
||||||
banner.innerHTML = '<strong>' + escapeHtml(title) + '</strong><br><span>' + escapeHtml(desc) + '</span>';
|
|
||||||
banner.style.display = 'block';
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---- API Key 模型检测 ---- */
|
|
||||||
async function handleDetectModels() {
|
|
||||||
var apiBase = document.getElementById('apiBaseInput').value.trim();
|
|
||||||
var apiKey = document.getElementById('apiKeyInput').value.trim();
|
|
||||||
var errorEl = document.getElementById('errorMsg');
|
|
||||||
var statusEl = document.getElementById('detectStatus');
|
|
||||||
var modelContainer = document.getElementById('modelListContainer');
|
|
||||||
var btn = document.getElementById('detectBtn');
|
|
||||||
|
|
||||||
errorEl.style.display = 'none';
|
|
||||||
modelContainer.style.display = 'none';
|
|
||||||
|
|
||||||
if (!apiKey) {
|
|
||||||
errorEl.textContent = '请输入 API Key';
|
|
||||||
errorEl.style.display = 'block';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
btn.disabled = true;
|
|
||||||
btn.textContent = '⏳ 正在检测可用模型…';
|
|
||||||
statusEl.className = 'detect-status detect-loading';
|
|
||||||
statusEl.style.display = 'block';
|
|
||||||
|
|
||||||
var candidates = [];
|
|
||||||
if (apiBase) {
|
|
||||||
var normalizedUserBase = normalizeApiBase(apiBase);
|
|
||||||
candidates.push({ label: apiBase, base: normalizedUserBase });
|
|
||||||
}
|
|
||||||
for (var i = 0; i < KNOWN_ENDPOINTS.length; i++) {
|
|
||||||
var ep = KNOWN_ENDPOINTS[i];
|
|
||||||
if (!apiBase || ep.base !== normalizedUserBase) {
|
|
||||||
candidates.push(ep);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var matched = false;
|
|
||||||
for (var ci = 0; ci < candidates.length; ci++) {
|
|
||||||
var candidate = candidates[ci];
|
|
||||||
statusEl.textContent = '🔍 探测 ' + candidate.label + '…';
|
|
||||||
|
|
||||||
try {
|
|
||||||
var ctrl = new AbortController();
|
|
||||||
var tid = setTimeout(function () { ctrl.abort(); }, PROBE_TIMEOUT_MS);
|
|
||||||
|
|
||||||
var res = await fetch(candidate.base + '/models', {
|
|
||||||
headers: { 'Authorization': 'Bearer ' + apiKey },
|
|
||||||
signal: ctrl.signal
|
|
||||||
});
|
|
||||||
clearTimeout(tid);
|
|
||||||
|
|
||||||
if (res.ok) {
|
|
||||||
var data = await res.json();
|
|
||||||
var models = (data.data || []).map(function (m) { return m.id; }).filter(Boolean).sort();
|
|
||||||
|
|
||||||
if (models.length === 0) continue;
|
|
||||||
|
|
||||||
document.getElementById('apiBaseInput').value = candidate.base;
|
|
||||||
|
|
||||||
statusEl.textContent = '✅ 铸渊唤醒成功（' + candidate.label + '）· 发现 ' + models.length + ' 个可用模型';
|
|
||||||
statusEl.className = 'detect-status detect-success';
|
|
||||||
|
|
||||||
renderModelList(models, candidate.base, apiKey);
|
|
||||||
modelContainer.style.display = 'block';
|
|
||||||
matched = true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
} catch (probeErr) {
|
|
||||||
/* 单个端点探测失败，继续下一个 */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!matched) {
|
|
||||||
statusEl.textContent = '❌ 未能检测到可用模型，请检查端点地址和密钥是否正确';
|
|
||||||
statusEl.className = 'detect-status detect-error';
|
|
||||||
}
|
|
||||||
|
|
||||||
btn.disabled = false;
|
|
||||||
btn.textContent = '🔍 检测可用模型';
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---- 渲染模型列表 ---- */
|
|
||||||
function renderModelList(models, apiBase, apiKey) {
|
|
||||||
var listEl = document.getElementById('modelList');
|
|
||||||
listEl.innerHTML = '';
|
|
||||||
|
|
||||||
models.forEach(function (modelId) {
|
|
||||||
var item = document.createElement('button');
|
|
||||||
item.className = 'model-item';
|
|
||||||
item.textContent = modelId;
|
|
||||||
item.onclick = function () { enterChat(apiBase, apiKey, modelId); };
|
|
||||||
listEl.appendChild(item);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---- 选择模型 → 进入对话 ---- */
|
|
||||||
function enterChat(apiBase, apiKey, selectedModel) {
|
|
||||||
sessionStorage.setItem('login_mode', currentMode);
|
|
||||||
sessionStorage.setItem('user_api_base', apiBase);
|
|
||||||
sessionStorage.setItem('user_api_key', apiKey);
|
|
||||||
sessionStorage.setItem('selected_model', selectedModel);
|
|
||||||
|
|
||||||
if (currentMode === 'guest') {
|
|
||||||
sessionStorage.setItem('dev_id', 'GUEST');
|
|
||||||
sessionStorage.removeItem('session_token');
|
|
||||||
}
|
|
||||||
// For developer mode, dev_id and session_token already set in handleDevIdSubmit
|
|
||||||
|
|
||||||
window.location.href = 'chat.html';
|
|
||||||
}
|
|
||||||
|
|
||||||
function escapeHtml(str) {
|
|
||||||
var div = document.createElement('div');
|
|
||||||
div.appendChild(document.createTextNode(str));
|
|
||||||
return div.innerHTML;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---- 服务器代理模式检测 ---- */
|
|
||||||
var proxyModel = '';
|
|
||||||
var proxyApiBase = '';
|
|
||||||
|
|
||||||
async function checkProxyAvailability() {
|
|
||||||
var statusCard = document.getElementById('proxyStatusCard');
|
|
||||||
var enterBtn = document.getElementById('proxyEnterBtn');
|
|
||||||
var statusMsg = document.getElementById('proxyStatusMsg');
|
|
||||||
var divider = document.getElementById('apiKeyDivider');
|
|
||||||
|
|
||||||
statusCard.style.display = 'flex';
|
|
||||||
statusMsg.textContent = '检测服务器代理…';
|
|
||||||
|
|
||||||
try {
|
|
||||||
var ctrl = new AbortController();
|
|
||||||
var tid = setTimeout(function () { ctrl.abort(); }, 5000);
|
|
||||||
var res = await fetch(API_BASE + '/api/ps/proxy/status', { signal: ctrl.signal });
|
|
||||||
clearTimeout(tid);
|
|
||||||
var data = await res.json();
|
|
||||||
|
|
||||||
if (data.proxy_available) {
|
|
||||||
proxyModel = data.model || '';
|
|
||||||
proxyApiBase = data.api_base || '';
|
|
||||||
statusMsg.textContent = '✅ 服务器代理可用 · ' + proxyModel;
|
|
||||||
statusMsg.style.color = '#4caf50';
|
|
||||||
enterBtn.style.display = 'block';
|
|
||||||
divider.style.display = 'block';
|
|
||||||
} else {
|
|
||||||
statusMsg.textContent = '服务器代理未配置 · 请使用自有 API 密钥';
|
|
||||||
statusMsg.style.color = '#888';
|
|
||||||
statusCard.style.display = 'none';
|
|
||||||
}
|
|
||||||
} catch (_e) {
|
|
||||||
statusMsg.textContent = '服务器代理不可用 · 请使用自有 API 密钥';
|
|
||||||
statusMsg.style.color = '#888';
|
|
||||||
statusCard.style.display = 'none';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function enterWithProxy() {
|
|
||||||
sessionStorage.setItem('login_mode', currentMode);
|
|
||||||
sessionStorage.setItem('use_server_proxy', 'true');
|
|
||||||
sessionStorage.setItem('user_api_base', proxyApiBase);
|
|
||||||
sessionStorage.setItem('user_api_key', '');
|
|
||||||
sessionStorage.setItem('selected_model', proxyModel);
|
|
||||||
|
|
||||||
if (currentMode === 'guest') {
|
|
||||||
sessionStorage.setItem('dev_id', 'GUEST');
|
|
||||||
sessionStorage.removeItem('session_token');
|
|
||||||
}
|
|
||||||
|
|
||||||
window.location.href = 'chat.html';
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,10 +0,0 @@
|
||||||
const API_CONFIG = {
|
|
||||||
BASE_URL: 'https://guanghulab.com',
|
|
||||||
ENDPOINTS: {
|
|
||||||
STATUS: '/api/v1/system/status',
|
|
||||||
DEVELOPERS: '/api/v1/developers',
|
|
||||||
BROADCASTS: '/api/v1/broadcasts'
|
|
||||||
},
|
|
||||||
TIMEOUT: 8000,
|
|
||||||
REFRESH_INTERVAL: 30000
|
|
||||||
};
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
const MOCK_DATA = {
|
|
||||||
status: {
|
|
||||||
system_status: 'running',
|
|
||||||
version: 'v0.4.0',
|
|
||||||
uptime: '72h 15m',
|
|
||||||
api_calls_today: 142,
|
|
||||||
active_developers: 6,
|
|
||||||
last_deploy: '2026-03-04 02:00'
|
|
||||||
},
|
|
||||||
developers: [
|
|
||||||
{ id: 'DEV-001', name: '页页', module: '后端中间层', status: 'active', progress: 100, phase: '环节5·HTTP联调' },
|
|
||||||
{ id: 'DEV-002', name: '肥猫', module: 'M01登录界面', status: 'waiting', progress: 60, phase: '环节1·等SYSLOG' },
|
|
||||||
{ id: 'DEV-003', name: '燕樊', module: 'M15云盘系统', status: 'waiting', progress: 55, phase: '环节1·等SYSLOG' },
|
|
||||||
{ id: 'DEV-004', name: '之之', module: '钉钉机器人', status: 'waiting', progress: 20, phase: '环节0·等SYSLOG' },
|
|
||||||
{ id: 'DEV-005', name: '小草莓', module: '系统状态看板', status: 'active', progress: 85, phase: '环节2·API接入' },
|
|
||||||
{ id: 'DEV-009', name: '花尔', module: 'M05用户中心', status: 'waiting', progress: 40, phase: '环节1·等SYSLOG' },
|
|
||||||
{ id: 'DEV-010', name: '桔子', module: 'M06工单管理', status: 'active', progress: 35, phase: '环节1·广播待出' },
|
|
||||||
{ id: 'DEV-011', name: '匆匆那年', module: 'BC-000 DEVlog', status: 'waiting', progress: 10, phase: '环节0·等SYSLOG' }
|
|
||||||
],
|
|
||||||
broadcasts: [
|
|
||||||
{ id: 'DEV-012', module: 'M05用户中心', phase: '环节1', status: '等SYSLOG', time: '03-04 08:45' },
|
|
||||||
{ id: 'BC-看板-002', dev: '小草莓', module: '系统状态看板', phase: '环节2', status: '执行中', time: '03-04 08:50' },
|
|
||||||
{ id: 'BC-集成-001-M13', dev: '小草莓', module: 'M13协作调度', phase: '环节1', status: '已完成', time: '03-04 08:38' }
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
async function fetchWithTimeout(url, timeout) {
|
|
||||||
const controller = new AbortController();
|
|
||||||
const timer = setTimeout(() => controller.abort(), timeout);
|
|
||||||
try {
|
|
||||||
const res = await fetch(url, { signal: controller.signal });
|
|
||||||
clearTimeout(timer);
|
|
||||||
return res;
|
|
||||||
} catch (err) {
|
|
||||||
clearTimeout(timer);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function apiGet(endpoint, mockKey) {
|
|
||||||
try {
|
|
||||||
const res = await fetchWithTimeout(API_CONFIG.BASE_URL + endpoint, API_CONFIG.TIMEOUT);
|
|
||||||
if (!res.ok) throw new Error('HTTP ' + res.status);
|
|
||||||
return { data: await res.json(), isLive: true };
|
|
||||||
} catch (err) {
|
|
||||||
console.warn('[HoloLake] API未就绪，使用模拟数据：', err.message);
|
|
||||||
return { data: MOCK_DATA[mockKey], isLive: false };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadAllData() {
|
|
||||||
const [statusRes, devRes, bcRes] = await Promise.all([
|
|
||||||
apiGet(API_CONFIG.ENDPOINTS.STATUS, 'status'),
|
|
||||||
apiGet(API_CONFIG.ENDPOINTS.DEVELOPERS, 'developers'),
|
|
||||||
apiGet(API_CONFIG.ENDPOINTS.BROADCASTS, 'broadcasts')
|
|
||||||
]);
|
|
||||||
return {
|
|
||||||
status: statusRes.data,
|
|
||||||
developers: devRes.data,
|
|
||||||
broadcasts: bcRes.data,
|
|
||||||
isLive: statusRes.isLive && devRes.isLive && bcRes.isLive
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,239 +0,0 @@
|
||||||
<!-- 🚀 YM-COLLAB-20260307-001 · CD 端到端验证标记 · 铸渊部署 -->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>光湖系统 · 开发状态看板</title>
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="dashboard">
|
|
||||||
<!-- 顶部标题栏 -->
|
|
||||||
<header class="header">
|
|
||||||
<div class="logo">
|
|
||||||
<span class="logo-icon">🌊</span>
|
|
||||||
<h1>光湖系统 · 开发状态看板</h1>
|
|
||||||
</div>
|
|
||||||
<div class="status-indicator">
|
|
||||||
<span class="dot green"></span>
|
|
||||||
<span>系统运行中</span>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- ===== 环节2新增：API数据区域 ===== -->
|
|
||||||
<div id="conn-status" class="conn-status"></div>
|
|
||||||
|
|
||||||
<section class="data-section">
|
|
||||||
<h2 class="section-title">⚙️ 系统状态</h2>
|
|
||||||
<div id="sys-status" class="data-container">加载中...</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="data-section">
|
|
||||||
<h2 class="section-title">👥 开发者进度</h2>
|
|
||||||
<div id="dev-list" class="data-container">加载中...</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="data-section">
|
|
||||||
<h2 class="section-title">📡 广播动态</h2>
|
|
||||||
<div id="bc-list" class="data-container">加载中...</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 原有的团队成员卡片区（可保留作对比） -->
|
|
||||||
<section class="team-cards">
|
|
||||||
<h2>👥 团队成员状态（静态）</h2>
|
|
||||||
<div class="card-grid">
|
|
||||||
<div class="card" data-dev="DEV-001">
|
|
||||||
<div class="card-header">
|
|
||||||
<span class="dev-id">DEV-001</span>
|
|
||||||
<span class="status-badge status-active">活跃</span>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="dev-name">页页</div>
|
|
||||||
<div class="dev-module">后端中间层</div>
|
|
||||||
<div class="update-time">更新: 10:32</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card" data-dev="DEV-002">
|
|
||||||
<div class="card-header">
|
|
||||||
<span class="dev-id">DEV-002</span>
|
|
||||||
<span class="status-badge status-active">活跃</span>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="dev-name">肥猫</div>
|
|
||||||
<div class="dev-module">飞书机器人</div>
|
|
||||||
<div class="update-time">更新: 10:15</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card" data-dev="DEV-003">
|
|
||||||
<div class="card-header">
|
|
||||||
<span class="dev-id">DEV-003</span>
|
|
||||||
<span class="status-badge status-standby">等待</span>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="dev-name">燕樊</div>
|
|
||||||
<div class="dev-module">对话UI</div>
|
|
||||||
<div class="update-time">更新: 09:47</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card" data-dev="DEV-004">
|
|
||||||
<div class="card-header">
|
|
||||||
<span class="dev-id">DEV-004</span>
|
|
||||||
<span class="status-badge status-active">活跃</span>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="dev-name">小幸运</div>
|
|
||||||
<div class="dev-module">钉钉打通</div>
|
|
||||||
<div class="update-time">更新: 11:02</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card" data-dev="DEV-005">
|
|
||||||
<div class="card-header">
|
|
||||||
<span class="dev-id">DEV-005</span>
|
|
||||||
<span class="status-badge status-coding">编码中</span>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="dev-name">小草莓</div>
|
|
||||||
<div class="dev-module">系统状态看板</div>
|
|
||||||
<div class="update-time">更新: 刚刚</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card" data-dev="DEV-006">
|
|
||||||
<div class="card-header">
|
|
||||||
<span class="dev-id">DEV-006</span>
|
|
||||||
<span class="status-badge status-standby">等待</span>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="dev-name">小蔡同学</div>
|
|
||||||
<div class="dev-module">工单管理</div>
|
|
||||||
<div class="update-time">更新: 09:20</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card" data-dev="DEV-007">
|
|
||||||
<div class="card-header">
|
|
||||||
<span class="dev-id">DEV-007</span>
|
|
||||||
<span class="status-badge status-coding">编码中</span>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="dev-name">四月</div>
|
|
||||||
<div class="dev-module">用户中心</div>
|
|
||||||
<div class="update-time">更新: 10:55</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card" data-dev="DEV-008">
|
|
||||||
<div class="card-header">
|
|
||||||
<span class="dev-id">DEV-008</span>
|
|
||||||
<span class="status-badge status-standby">等待</span>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="dev-name">小锋</div>
|
|
||||||
<div class="dev-module">待分配</div>
|
|
||||||
<div class="update-time">更新: 08:30</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 原有的广播列表（可保留） -->
|
|
||||||
<section class="broadcast-list">
|
|
||||||
<h2>📢 最近广播（静态）</h2>
|
|
||||||
<div class="list-container">
|
|
||||||
<div class="list-item">
|
|
||||||
<span class="broadcast-id">BC-001</span>
|
|
||||||
<span class="broadcast-title">HoloLake桌面UI框架</span>
|
|
||||||
<span class="broadcast-time">10:45</span>
|
|
||||||
<span class="broadcast-status status-done">已完成</span>
|
|
||||||
</div>
|
|
||||||
<div class="list-item">
|
|
||||||
<span class="broadcast-id">BC-002</span>
|
|
||||||
<span class="broadcast-title">对话界面设计</span>
|
|
||||||
<span class="broadcast-time">10:20</span>
|
|
||||||
<span class="broadcast-status status-progress">进行中</span>
|
|
||||||
</div>
|
|
||||||
<div class="list-item">
|
|
||||||
<span class="broadcast-id">BC-003</span>
|
|
||||||
<span class="broadcast-title">人格体选择器</span>
|
|
||||||
<span class="broadcast-time">09:55</span>
|
|
||||||
<span class="broadcast-status status-progress">进行中</span>
|
|
||||||
</div>
|
|
||||||
<div class="list-item">
|
|
||||||
<span class="broadcast-id">BC-004</span>
|
|
||||||
<span class="broadcast-title">云盘授权界面</span>
|
|
||||||
<span class="broadcast-time">09:30</span>
|
|
||||||
<span class="broadcast-status status-pending">待处理</span>
|
|
||||||
</div>
|
|
||||||
<div class="list-item">
|
|
||||||
<span class="broadcast-id">BC-005</span>
|
|
||||||
<span class="broadcast-title">用户中心设计</span>
|
|
||||||
<span class="broadcast-time">08:50</span>
|
|
||||||
<span class="broadcast-status status-pending">待处理</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 底部信息栏 -->
|
|
||||||
<footer class="footer">
|
|
||||||
<div class="footer-left">光湖系统 · HoloLake Era AGE OS</div>
|
|
||||||
<div class="footer-right">v2.1.0 · 2026-03-02 17:50</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 核心脚本 -->
|
|
||||||
<script src="api-config.js"></script>
|
|
||||||
<script src="api.js"></script>
|
|
||||||
<script src="render.js"></script>
|
|
||||||
<script src="ws-client.js"></script>
|
|
||||||
<!-- 原有的交互脚本 -->
|
|
||||||
<script src="script.js"></script>
|
|
||||||
|
|
||||||
<!-- ===== WebSocket 实时推送初始化 ===== -->
|
|
||||||
<script>
|
|
||||||
(function() {
|
|
||||||
// 自动检测 WebSocket 地址：生产环境走 Nginx 反向代理，本地开发直连 8080
|
|
||||||
var wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
||||||
var wsUrl = (location.hostname === 'localhost' || location.hostname === '127.0.0.1')
|
|
||||||
? 'ws://localhost:8080'
|
|
||||||
: wsProtocol + '//' + location.host + '/ws';
|
|
||||||
|
|
||||||
var wsClient = new WebSocketClient(wsUrl, {
|
|
||||||
onMessage: function(data) {
|
|
||||||
if (data.type === 'dashboard_update' && data.data) {
|
|
||||||
if (data.data.system) renderSystemStatus(data.data.system);
|
|
||||||
if (data.data.developers) renderDevelopers(data.data.developers);
|
|
||||||
if (data.data.broadcasts) renderBroadcasts(data.data.broadcasts);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onStatusChange: function(status) {
|
|
||||||
var el = document.getElementById('conn-status');
|
|
||||||
if (!el) return;
|
|
||||||
var text = '', className = '';
|
|
||||||
switch(status) {
|
|
||||||
case 'connected':
|
|
||||||
text = '🔵 实时连接 (WebSocket)';
|
|
||||||
className = 'conn-dot on';
|
|
||||||
break;
|
|
||||||
case 'connecting':
|
|
||||||
text = '⏳ 连接中...';
|
|
||||||
className = 'conn-dot connecting';
|
|
||||||
break;
|
|
||||||
case 'reconnecting':
|
|
||||||
text = '🔄 重连中...';
|
|
||||||
className = 'conn-dot reconnecting';
|
|
||||||
break;
|
|
||||||
case 'disconnected':
|
|
||||||
case 'offline':
|
|
||||||
default:
|
|
||||||
text = '⚪ 离线模式 (降级轮询)';
|
|
||||||
className = 'conn-dot off';
|
|
||||||
if (typeof refreshDashboard === 'function') refreshDashboard();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
el.innerHTML = '<span class="' + className + '"></span> ' + text;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
wsClient.connect();
|
|
||||||
window.addEventListener('beforeunload', function() { wsClient.disconnect(); });
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
const STATUS_COLORS = {
|
|
||||||
active: '#4fc3f7',
|
|
||||||
waiting: '#ffa726',
|
|
||||||
done: '#66bb6a'
|
|
||||||
};
|
|
||||||
const STATUS_LABELS = {
|
|
||||||
active: '执行中',
|
|
||||||
waiting: '等待中',
|
|
||||||
done: '已完成'
|
|
||||||
};
|
|
||||||
|
|
||||||
function renderSystemStatus(data) {
|
|
||||||
const c = document.getElementById('sys-status');
|
|
||||||
if (!c) return;
|
|
||||||
c.innerHTML = `
|
|
||||||
<div class="status-grid">
|
|
||||||
<div class="s-card"><span class="s-icon">🟢</span><span class="s-val">${data.system_status === 'running' ? '运行中' : '异常'}</span><span class="s-lbl">系统状态</span></div>
|
|
||||||
<div class="s-card"><span class="s-icon">⏱️</span><span class="s-val">${data.uptime}</span><span class="s-lbl">运行时长</span></div>
|
|
||||||
<div class="s-card"><span class="s-icon">📡</span><span class="s-val">${data.api_calls_today}</span><span class="s-lbl">今日API调用</span></div>
|
|
||||||
<div class="s-card"><span class="s-icon">👥</span><span class="s-val">${data.active_developers}</span><span class="s-lbl">活跃开发者</span></div>
|
|
||||||
<div class="s-card"><span class="s-icon">🚀</span><span class="s-val">${data.version}</span><span class="s-lbl">版本</span></div>
|
|
||||||
<div class="s-card"><span class="s-icon">📦</span><span class="s-val">${data.last_deploy}</span><span class="s-lbl">最后部署</span></div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderDevelopers(data) {
|
|
||||||
const c = document.getElementById('dev-list');
|
|
||||||
if (!c) return;
|
|
||||||
let html = '';
|
|
||||||
for (let i = 0; i < data.length; i++) {
|
|
||||||
const d = data[i];
|
|
||||||
const color = STATUS_COLORS[d.status] || '#78909c';
|
|
||||||
html += `
|
|
||||||
<div class="dev-card">
|
|
||||||
<div class="dev-top">
|
|
||||||
<span class="dev-id">${d.id}</span>
|
|
||||||
<span class="dev-name">${d.name}</span>
|
|
||||||
<span class="dev-st" style="color:${color}">${STATUS_LABELS[d.status] || d.status}</span>
|
|
||||||
</div>
|
|
||||||
<div class="dev-mod">${d.module} · ${d.phase}</div>
|
|
||||||
<div class="prog-bar"><div class="prog-fill" style="width:${d.progress}%; background:${color}"></div></div>
|
|
||||||
<div class="prog-num">${d.progress}%</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
c.innerHTML = html;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderBroadcasts(data) {
|
|
||||||
const c = document.getElementById('bc-list');
|
|
||||||
if (!c) return;
|
|
||||||
let html = '';
|
|
||||||
for (let i = 0; i < data.length; i++) {
|
|
||||||
const b = data[i];
|
|
||||||
let cls = 'wait';
|
|
||||||
if (b.status === '已完成' || b.status === 'done') cls = 'done';
|
|
||||||
else if (b.status === '执行中' || b.status === 'active') cls = 'active';
|
|
||||||
html += `
|
|
||||||
<div class="bc-row">
|
|
||||||
<span class="bc-id">${b.id}</span>
|
|
||||||
<span class="bc-dev">${b.dev || ''}</span>
|
|
||||||
<span class="bc-mod">${b.module} · ${b.phase}</span>
|
|
||||||
<span class="bc-st ${cls}">${b.status}</span>
|
|
||||||
<span class="bc-time">${b.time}</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
c.innerHTML = html;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateConnStatus(isLive) {
|
|
||||||
const el = document.getElementById('conn-status');
|
|
||||||
if (!el) return;
|
|
||||||
el.innerHTML = isLive
|
|
||||||
? '<span class="conn-dot on"></span> 已连接 guanghulab.com'
|
|
||||||
: '<span class="conn-dot off"></span> 离线模式（模拟数据）';
|
|
||||||
}
|
|
||||||
|
|
||||||
async function refreshDashboard() {
|
|
||||||
try {
|
|
||||||
const result = await loadAllData();
|
|
||||||
renderSystemStatus(result.status);
|
|
||||||
renderDevelopers(result.developers);
|
|
||||||
renderBroadcasts(result.broadcasts);
|
|
||||||
updateConnStatus(result.isLive);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('[HoloLake] 刷新失败：', err);
|
|
||||||
updateConnStatus(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
refreshDashboard();
|
|
||||||
setInterval(refreshDashboard, API_CONFIG.REFRESH_INTERVAL);
|
|
||||||
});
|
|
||||||
|
|
@ -1,488 +0,0 @@
|
||||||
/* 全局样式 - 深色科技风 */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: 'Segoe UI', 'Courier New', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #0a0e17;
|
|
||||||
color: #e0e0e0;
|
|
||||||
line-height: 1.6;
|
|
||||||
padding: 20px;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard {
|
|
||||||
max-width: 1400px;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 标题栏 */
|
|
||||||
.header {
|
|
||||||
background-color: #131a2b;
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 20px 30px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
border: 1px solid #2a3440;
|
|
||||||
box-shadow: 0 4px 20px rgba(0, 212, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-icon {
|
|
||||||
font-size: 32px;
|
|
||||||
filter: drop-shadow(0 0 8px #00d4ff);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo h1 {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-indicator {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
background: #1e293b;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 40px;
|
|
||||||
border: 1px solid #00d4ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot.green {
|
|
||||||
background-color: #00ff9d;
|
|
||||||
box-shadow: 0 0 10px #00ff9d;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 团队成员卡片区 */
|
|
||||||
.team-cards {
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.team-cards h2, .broadcast-list h2 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: #00d4ff;
|
|
||||||
font-weight: 300;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
border-left: 4px solid #00d4ff;
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background-color: #131a2b;
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 20px;
|
|
||||||
border: 1px solid #2a3440;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
border-color: #00d4ff;
|
|
||||||
box-shadow: 0 8px 24px rgba(0, 212, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
border-bottom: 1px solid #2a3440;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dev-id {
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #00d4ff;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 40px;
|
|
||||||
background-color: #1e293b;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge.status-active {
|
|
||||||
background-color: #00ff9d20;
|
|
||||||
color: #00ff9d;
|
|
||||||
border-color: #00ff9d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge.status-standby {
|
|
||||||
background-color: #ffaa0020;
|
|
||||||
color: #ffaa00;
|
|
||||||
border-color: #ffaa00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge.status-coding {
|
|
||||||
background-color: #00d4ff20;
|
|
||||||
color: #00d4ff;
|
|
||||||
border-color: #00d4ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-body .dev-name {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-body .dev-module {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: #a0a0a0;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-body .update-time {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
color: #6b7a8f;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 广播列表区 */
|
|
||||||
.broadcast-list {
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-container {
|
|
||||||
background-color: #131a2b;
|
|
||||||
border-radius: 16px;
|
|
||||||
border: 1px solid #2a3440;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 100px 1fr 100px 100px;
|
|
||||||
padding: 16px 24px;
|
|
||||||
border-bottom: 1px solid #2a3440;
|
|
||||||
align-items: center;
|
|
||||||
transition: background 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item:hover {
|
|
||||||
background-color: #1e293b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.broadcast-id {
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
color: #00d4ff;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.broadcast-title {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.broadcast-time {
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
color: #a0a0a0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.broadcast-status {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 40px;
|
|
||||||
text-align: center;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-done {
|
|
||||||
background-color: #00ff9d20;
|
|
||||||
color: #00ff9d;
|
|
||||||
border: 1px solid #00ff9d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-progress {
|
|
||||||
background-color: #00d4ff20;
|
|
||||||
color: #00d4ff;
|
|
||||||
border: 1px solid #00d4ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-pending {
|
|
||||||
background-color: #ffaa0020;
|
|
||||||
color: #ffaa00;
|
|
||||||
border: 1px solid #ffaa00;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 底部信息栏 */
|
|
||||||
.footer {
|
|
||||||
background-color: #131a2b;
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 16px 24px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
border: 1px solid #2a3440;
|
|
||||||
color: #6b7a8f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-left {
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-right {
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
color: #00d4ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 响应式布局 */
|
|
||||||
@media screen and (max-width: 1024px) {
|
|
||||||
.card-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 640px) {
|
|
||||||
.card-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-item {
|
|
||||||
grid-template-columns: 80px 1fr 80px 80px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
}/* ========== 环节2新增：API数据区域样式 ========== */
|
|
||||||
|
|
||||||
/* 连接状态指示器 */
|
|
||||||
.conn-status {
|
|
||||||
text-align: center;
|
|
||||||
padding: 8px 16px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #8899aa;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
.conn-dot {
|
|
||||||
display: inline-block;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-right: 6px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.conn-dot.on {
|
|
||||||
background: #66bb6a;
|
|
||||||
box-shadow: 0 0 6px #66bb6a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.conn-dot.off {
|
|
||||||
background: #ffa726;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 数据区块 */
|
|
||||||
.data-section {
|
|
||||||
padding: 20px 16px;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-title {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #e0e6ed;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data-container {
|
|
||||||
color: #8899aa;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 系统状态网格 */
|
|
||||||
.status-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.s-card {
|
|
||||||
background: rgba(79,195,247,0.06);
|
|
||||||
border: 1px solid rgba(79,195,247,0.12);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 14px 10px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.s-icon {
|
|
||||||
display: block;
|
|
||||||
font-size: 20px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.s-val {
|
|
||||||
display: block;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #4fc3f7;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.s-lbl {
|
|
||||||
display: block;
|
|
||||||
font-size: 11px;
|
|
||||||
color: #667788;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 开发者卡片 */
|
|
||||||
.dev-card {
|
|
||||||
background: rgba(255,255,255,0.03);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 14px 16px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
border: 1px solid rgba(255,255,255,0.06);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dev-top {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dev-id {
|
|
||||||
font-size: 11px;
|
|
||||||
color: #556677;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dev-name {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #e0e6ed;
|
|
||||||
font-weight: 600;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dev-st {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dev-mod {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #8899aa;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prog-bar {
|
|
||||||
height: 6px;
|
|
||||||
background: rgba(255,255,255,0.08);
|
|
||||||
border-radius: 3px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prog-fill {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 3px;
|
|
||||||
transition: width 0.8s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prog-num {
|
|
||||||
font-size: 11px;
|
|
||||||
color: #8899aa;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 广播行 */
|
|
||||||
.bc-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 10px 12px;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bc-id {
|
|
||||||
color: #4fc3f7;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 11px;
|
|
||||||
min-width: 110px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bc-dev {
|
|
||||||
color: #e0e6ed;
|
|
||||||
min-width: 55px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bc-mod {
|
|
||||||
color: #8899aa;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bc-st {
|
|
||||||
min-width: 60px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bc-st.done {
|
|
||||||
background: rgba(102,187,106,0.15);
|
|
||||||
color: #66bb6a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bc-st.active {
|
|
||||||
background: rgba(79,195,247,0.15);
|
|
||||||
color: #4fc3f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bc-st.wait {
|
|
||||||
background: rgba(255,167,38,0.15);
|
|
||||||
color: #ffa726;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bc-time {
|
|
||||||
color: #556677;
|
|
||||||
font-size: 11px;
|
|
||||||
min-width: 80px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
@ -1,121 +0,0 @@
|
||||||
// ========== HoloLake 看板 · WebSocket 客户端模块 ==========
|
|
||||||
// 功能：连接管理、自动重连（指数退避）、心跳检测、状态回调
|
|
||||||
|
|
||||||
class WebSocketClient {
|
|
||||||
constructor(url, options = {}) {
|
|
||||||
this.url = url;
|
|
||||||
this.reconnectInterval = options.reconnectInterval || 1000; // 初始重连间隔 1秒
|
|
||||||
this.maxReconnectInterval = options.maxReconnectInterval || 30000; // 最大30秒
|
|
||||||
this.heartbeatInterval = options.heartbeatInterval || 30000; // 心跳间隔30秒
|
|
||||||
this.onMessage = options.onMessage || (() => {});
|
|
||||||
this.onStatusChange = options.onStatusChange || (() => {});
|
|
||||||
|
|
||||||
this.ws = null;
|
|
||||||
this.reconnectTimer = null;
|
|
||||||
this.heartbeatTimer = null;
|
|
||||||
this.forcedClose = false;
|
|
||||||
this.reconnectAttempts = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 连接
|
|
||||||
connect() {
|
|
||||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) return;
|
|
||||||
this.forcedClose = false;
|
|
||||||
this.onStatusChange('connecting');
|
|
||||||
try {
|
|
||||||
this.ws = new WebSocket(this.url);
|
|
||||||
} catch (e) {
|
|
||||||
console.error('[WS] 连接失败', e);
|
|
||||||
this._scheduleReconnect();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.ws.onopen = () => {
|
|
||||||
console.log('[WS] 连接成功');
|
|
||||||
this.reconnectAttempts = 0;
|
|
||||||
this.onStatusChange('connected');
|
|
||||||
this._startHeartbeat();
|
|
||||||
};
|
|
||||||
|
|
||||||
this.ws.onmessage = (event) => {
|
|
||||||
try {
|
|
||||||
const data = JSON.parse(event.data);
|
|
||||||
this.onMessage(data);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn('[WS] 消息解析失败', e);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
this.ws.onclose = (event) => {
|
|
||||||
console.log('[WS] 连接关闭', event.code, event.reason);
|
|
||||||
this._stopHeartbeat();
|
|
||||||
if (!this.forcedClose) {
|
|
||||||
this.onStatusChange('disconnected');
|
|
||||||
this._scheduleReconnect();
|
|
||||||
} else {
|
|
||||||
this.onStatusChange('offline');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
this.ws.onerror = (error) => {
|
|
||||||
console.error('[WS] 错误', error);
|
|
||||||
this.onStatusChange('error');
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// 主动断开
|
|
||||||
disconnect() {
|
|
||||||
this.forcedClose = true;
|
|
||||||
if (this.reconnectTimer) {
|
|
||||||
clearTimeout(this.reconnectTimer);
|
|
||||||
this.reconnectTimer = null;
|
|
||||||
}
|
|
||||||
this._stopHeartbeat();
|
|
||||||
if (this.ws) {
|
|
||||||
this.ws.close();
|
|
||||||
this.ws = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 发送消息
|
|
||||||
send(data) {
|
|
||||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
||||||
this.ws.send(JSON.stringify(data));
|
|
||||||
} else {
|
|
||||||
console.warn('[WS] 未连接，无法发送');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 重连调度（指数退避）
|
|
||||||
_scheduleReconnect() {
|
|
||||||
if (this.forcedClose) return;
|
|
||||||
const delay = Math.min(
|
|
||||||
this.reconnectInterval * Math.pow(2, this.reconnectAttempts),
|
|
||||||
this.maxReconnectInterval
|
|
||||||
);
|
|
||||||
console.log(`[WS] ${delay}ms 后尝试重连...`);
|
|
||||||
this.onStatusChange('reconnecting');
|
|
||||||
if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
|
|
||||||
this.reconnectTimer = setTimeout(() => {
|
|
||||||
this.reconnectAttempts++;
|
|
||||||
this.connect();
|
|
||||||
}, delay);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 心跳
|
|
||||||
_startHeartbeat() {
|
|
||||||
this._stopHeartbeat();
|
|
||||||
this.heartbeatTimer = setInterval(() => {
|
|
||||||
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
||||||
this.send({ type: 'ping' });
|
|
||||||
}
|
|
||||||
}, this.heartbeatInterval);
|
|
||||||
}
|
|
||||||
|
|
||||||
_stopHeartbeat() {
|
|
||||||
if (this.heartbeatTimer) {
|
|
||||||
clearInterval(this.heartbeatTimer);
|
|
||||||
this.heartbeatTimer = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,809 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>工单管理 · HoloLake · 视觉优化版</title>
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
||||||
<style>
|
|
||||||
/* ========== 基础样式（深蓝渐变保持不变） ========== */
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
||||||
background: linear-gradient(135deg, #0a1628 0%, #1a2a4a 50%, #0d1f3c 100%);
|
|
||||||
color: #e0e6ed;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app {
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 导航栏（增加图标） */
|
|
||||||
.navbar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 16px 0;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo i {
|
|
||||||
color: #4fc3f7;
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a {
|
|
||||||
margin-left: 24px;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #8899aa;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: color 0.2s;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a i {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a.active {
|
|
||||||
color: #4fc3f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links a:hover {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 统计卡片区（微调圆角与阴影） */
|
|
||||||
.stats {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: 16px;
|
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card {
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
border-radius: 20px;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
backdrop-filter: blur(2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.12);
|
|
||||||
transform: translateY(-4px);
|
|
||||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card.active {
|
|
||||||
border: 2px solid #4fc3f7;
|
|
||||||
background: rgba(79, 195, 247, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-number {
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
color: #8899aa;
|
|
||||||
font-size: 14px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label i {
|
|
||||||
color: #4fc3f7;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 工单列表头部 */
|
|
||||||
.ticket-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticket-header h2 {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticket-header h2 i {
|
|
||||||
color: #4fc3f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: #4fc3f7;
|
|
||||||
color: #0a1628;
|
|
||||||
border: none;
|
|
||||||
padding: 8px 20px;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
box-shadow: 0 2px 8px rgba(79, 195, 247, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary i {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background: #81d4fa;
|
|
||||||
transform: scale(1.02);
|
|
||||||
box-shadow: 0 4px 12px rgba(79, 195, 247, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 工具栏 */
|
|
||||||
.toolbar {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sort-btn {
|
|
||||||
color: #4fc3f7;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 500;
|
|
||||||
user-select: none;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border-radius: 30px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
background: rgba(79, 195, 247, 0.1);
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sort-btn:hover {
|
|
||||||
background: rgba(79, 195, 247, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tool-btn {
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
color: #e0e6ed;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
||||||
padding: 6px 16px;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 13px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
backdrop-filter: blur(2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tool-btn i {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #4fc3f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tool-btn:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.15);
|
|
||||||
border-color: #4fc3f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 工单列表容器 */
|
|
||||||
.ticket-list {
|
|
||||||
background: rgba(0, 0, 0, 0.25);
|
|
||||||
border-radius: 24px;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 32px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
|
|
||||||
backdrop-filter: blur(2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 单个工单项（优化悬停与图标） */
|
|
||||||
.ticket-item {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 80px 1fr 120px 100px 60px;
|
|
||||||
align-items: center;
|
|
||||||
padding: 18px 24px;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.2s, transform 0.1s;
|
|
||||||
line-height: 1.6;
|
|
||||||
letter-spacing: 0.3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticket-item:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticket-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticket-id {
|
|
||||||
color: #8899aa;
|
|
||||||
font-weight: 500;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticket-id i {
|
|
||||||
color: #4fc3f7;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticket-title {
|
|
||||||
font-weight: 400;
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 0 8px rgba(79,195,247,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticket-assignee {
|
|
||||||
color: #8899aa;
|
|
||||||
font-size: 14px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticket-assignee i {
|
|
||||||
color: #4fc3f7;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticket-status {
|
|
||||||
padding: 6px 14px;
|
|
||||||
border-radius: 30px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticket-status:hover {
|
|
||||||
filter: brightness(1.1);
|
|
||||||
transform: scale(1.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-进行中 {
|
|
||||||
background: rgba(79, 195, 247, 0.2);
|
|
||||||
color: #4fc3f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-进行中 i {
|
|
||||||
color: #4fc3f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-已完成 {
|
|
||||||
background: rgba(76, 175, 80, 0.2);
|
|
||||||
color: #81c784;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-已完成 i {
|
|
||||||
color: #81c784;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-待开始 {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
color: #b0bec5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-待开始 i {
|
|
||||||
color: #b0bec5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 删除按钮 */
|
|
||||||
.delete-btn {
|
|
||||||
color: #f44336;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 18px;
|
|
||||||
text-align: center;
|
|
||||||
transition: all 0.2s;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-btn:hover {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 底部版权 */
|
|
||||||
.footer {
|
|
||||||
text-align: center;
|
|
||||||
color: #62748c;
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 32px 0;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
||||||
margin-top: 32px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer i {
|
|
||||||
color: #4fc3f7;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========== 模态框（弹窗）优化 ========== */
|
|
||||||
.modal {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 0; left: 0; width: 100%; height: 100%;
|
|
||||||
background: rgba(0,0,0,0.8);
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 1000;
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal.show {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
background: #1e2a3a;
|
|
||||||
border-radius: 32px;
|
|
||||||
padding: 32px;
|
|
||||||
width: 90%;
|
|
||||||
max-width: 500px;
|
|
||||||
color: #e0e6ed;
|
|
||||||
border: 1px solid rgba(255,255,255,0.2);
|
|
||||||
box-shadow: 0 25px 50px rgba(0,0,0,0.5);
|
|
||||||
animation: modalFadeIn 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes modalFadeIn {
|
|
||||||
from { opacity: 0; transform: translateY(20px); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content h3 {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
color: #4fc3f7;
|
|
||||||
font-size: 22px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content h3 i {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content input,
|
|
||||||
.modal-content select,
|
|
||||||
.modal-content textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: 14px 16px;
|
|
||||||
margin: 8px 0 20px;
|
|
||||||
background: #0f1a2b;
|
|
||||||
border: 1px solid #2a3a4a;
|
|
||||||
color: #e0e6ed;
|
|
||||||
border-radius: 16px;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: border 0.2s, box-shadow 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content input:focus,
|
|
||||||
.modal-content select:focus,
|
|
||||||
.modal-content textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: #4fc3f7;
|
|
||||||
box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content button {
|
|
||||||
background: #4fc3f7;
|
|
||||||
color: #0a1628;
|
|
||||||
border: none;
|
|
||||||
padding: 12px 24px;
|
|
||||||
border-radius: 40px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-right: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 14px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
box-shadow: 0 4px 12px rgba(79, 195, 247, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content button.cancel {
|
|
||||||
background: #3a4a5a;
|
|
||||||
color: #e0e6ed;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content button.cancel:hover {
|
|
||||||
background: #4a5a6a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content button:hover {
|
|
||||||
background: #81d4fa;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content button i {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 响应式微调 */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.stats {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
.ticket-item {
|
|
||||||
grid-template-columns: 60px 1fr 100px 80px 40px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
.ticket-status {
|
|
||||||
padding: 4px 8px;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.stats {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
.navbar {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.nav-links a {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
.ticket-item {
|
|
||||||
grid-template-columns: 50px 1fr 80px 70px 35px;
|
|
||||||
padding: 10px 12px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.toolbar {
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.page-title {
|
|
||||||
color: #003366; /* 深蓝色示例 */
|
|
||||||
}</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="app">
|
|
||||||
<nav class="navbar">
|
|
||||||
<div class="logo">
|
|
||||||
<i class="fas fa-water"></i> HoloLake
|
|
||||||
</div>
|
|
||||||
<div class="nav-links">
|
|
||||||
<a href="#" class="active"><i class="fas fa-tasks"></i> 工单管理</a>
|
|
||||||
<a href="#"><i class="fas fa-chart-pie"></i> 统计</a>
|
|
||||||
<a href="#"><i class="fas fa-cog"></i> 设置</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<main class="main-content">
|
|
||||||
<div class="stats">
|
|
||||||
<div class="stat-card" data-status="全部">
|
|
||||||
<div class="stat-number" id="stat-all">5</div>
|
|
||||||
<div class="stat-label"><i class="fas fa-clipboard-list"></i> 总工单</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card" data-status="进行中">
|
|
||||||
<div class="stat-number" id="stat-progress">3</div>
|
|
||||||
<div class="stat-label"><i class="fas fa-spinner"></i> 进行中</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card" data-status="已完成">
|
|
||||||
<div class="stat-number" id="stat-done">1</div>
|
|
||||||
<div class="stat-label"><i class="fas fa-check-circle"></i> 已完成</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card" data-status="待开始">
|
|
||||||
<div class="stat-number" id="stat-todo">1</div>
|
|
||||||
<div class="stat-label"><i class="fas fa-clock"></i> 待分配</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="ticket-header">
|
|
||||||
<h2><i class="fas fa-list-ul"></i> 工单列表</h2>
|
|
||||||
<button class="btn-primary" id="new-ticket-btn"><i class="fas fa-plus-circle"></i> 新建工单</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="toolbar">
|
|
||||||
<span id="sort-btn" class="sort-btn"><i class="fas fa-sort-amount-down-alt"></i> 编号↑</span>
|
|
||||||
<button class="tool-btn" id="export-btn"><i class="fas fa-download"></i> 导出CSV</button>
|
|
||||||
<button class="tool-btn" id="reset-btn"><i class="fas fa-undo-alt"></i> 重置</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="ticket-list" class="ticket-list"></div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer class="footer">
|
|
||||||
<i class="fas fa-water"></i> HoloLake Era · AGE OS v1.0 · <i class="fas fa-heart" style="color: #f44336;"></i> 光湖团队
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 新建工单模态框 -->
|
|
||||||
<div id="ticket-modal" class="modal">
|
|
||||||
<div class="modal-content">
|
|
||||||
<h3><i class="fas fa-pen-alt"></i> 新建工单</h3>
|
|
||||||
<input type="text" id="ticket-title" placeholder="工单标题" required>
|
|
||||||
<input type="text" id="ticket-assignee" placeholder="负责人 (如: 肥猫·M01)" required>
|
|
||||||
<select id="ticket-status">
|
|
||||||
<option value="进行中">进行中</option>
|
|
||||||
<option value="已完成">已完成</option>
|
|
||||||
<option value="待开始">待开始</option>
|
|
||||||
</select>
|
|
||||||
<textarea id="ticket-desc" placeholder="详情描述（选填）" rows="3"></textarea>
|
|
||||||
<div style="text-align: right;">
|
|
||||||
<button class="cancel" id="cancel-modal"><i class="fas fa-times"></i> 取消</button>
|
|
||||||
<button id="save-ticket"><i class="fas fa-check"></i> 确认创建</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// ---------- 数据持久化 ----------
|
|
||||||
let tickets = [];
|
|
||||||
|
|
||||||
const DEFAULT_TICKETS = [
|
|
||||||
{ id: '#001', title: '用户登录界面开发', assignee: '肥猫·M01', status: '进行中', desc: '' },
|
|
||||||
{ id: '#002', title: '后端服务器部署上线', assignee: '页页·后端', status: '已完成', desc: '' },
|
|
||||||
{ id: '#003', title: '系统状态看板搭建', assignee: '小草莓·M-DASHBOARD', status: '进行中', desc: '' },
|
|
||||||
{ id: '#004', title: '网站云盘系统', assignee: '燕樊·M15', status: '进行中', desc: '' },
|
|
||||||
{ id: '#005', title: '用户中心界面', assignee: '花尔·M05', status: '待开始', desc: '' }
|
|
||||||
];
|
|
||||||
|
|
||||||
function loadTickets() {
|
|
||||||
const stored = localStorage.getItem('hololake_tickets');
|
|
||||||
if (stored) {
|
|
||||||
tickets = JSON.parse(stored);
|
|
||||||
} else {
|
|
||||||
tickets = [...DEFAULT_TICKETS];
|
|
||||||
saveTickets();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function saveTickets() {
|
|
||||||
localStorage.setItem('hololake_tickets', JSON.stringify(tickets));
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateNewId() {
|
|
||||||
if (tickets.length === 0) return '#001';
|
|
||||||
const maxNum = Math.max(...tickets.map(t => parseInt(t.id.slice(1))));
|
|
||||||
return '#' + String(maxNum + 1).padStart(3, '0');
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------- 渲染 ----------
|
|
||||||
let currentFilter = '全部';
|
|
||||||
let currentSort = 'asc';
|
|
||||||
|
|
||||||
function renderTickets() {
|
|
||||||
let filtered = tickets;
|
|
||||||
if (currentFilter !== '全部') {
|
|
||||||
filtered = tickets.filter(t => t.status === currentFilter);
|
|
||||||
}
|
|
||||||
filtered.sort((a, b) => {
|
|
||||||
const numA = parseInt(a.id.slice(1));
|
|
||||||
const numB = parseInt(b.id.slice(1));
|
|
||||||
return currentSort === 'asc' ? numA - numB : numB - numA;
|
|
||||||
});
|
|
||||||
|
|
||||||
const listHtml = filtered.map(t => {
|
|
||||||
let statusIcon = '';
|
|
||||||
if (t.status === '进行中') statusIcon = '<i class="fas fa-sync-alt fa-spin"></i>';
|
|
||||||
else if (t.status === '已完成') statusIcon = '<i class="fas fa-check-circle"></i>';
|
|
||||||
else if (t.status === '待开始') statusIcon = '<i class="fas fa-hourglass-start"></i>';
|
|
||||||
|
|
||||||
return `
|
|
||||||
<div class="ticket-item" data-id="${t.id}">
|
|
||||||
<span class="ticket-id"><i class="fas fa-hashtag"></i> ${t.id.slice(1)}</span>
|
|
||||||
<span class="ticket-title">${t.title}</span>
|
|
||||||
<span class="ticket-assignee"><i class="fas fa-user"></i> ${t.assignee}</span>
|
|
||||||
<span class="ticket-status status-${t.status}" data-id="${t.id}">${statusIcon} ${t.status}</span>
|
|
||||||
<span class="delete-btn" data-id="${t.id}"><i class="fas fa-trash-alt"></i></span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}).join('');
|
|
||||||
|
|
||||||
document.getElementById('ticket-list').innerHTML = listHtml;
|
|
||||||
|
|
||||||
document.getElementById('stat-all').innerText = tickets.length;
|
|
||||||
document.getElementById('stat-progress').innerText = tickets.filter(t => t.status === '进行中').length;
|
|
||||||
document.getElementById('stat-done').innerText = tickets.filter(t => t.status === '已完成').length;
|
|
||||||
document.getElementById('stat-todo').innerText = tickets.filter(t => t.status === '待开始').length;
|
|
||||||
}
|
|
||||||
|
|
||||||
function exportToCSV() {
|
|
||||||
let filtered = tickets;
|
|
||||||
if (currentFilter !== '全部') {
|
|
||||||
filtered = tickets.filter(t => t.status === currentFilter);
|
|
||||||
}
|
|
||||||
filtered.sort((a, b) => {
|
|
||||||
const numA = parseInt(a.id.slice(1));
|
|
||||||
const numB = parseInt(b.id.slice(1));
|
|
||||||
return currentSort === 'asc' ? numA - numB : numB - numA;
|
|
||||||
});
|
|
||||||
|
|
||||||
let csv = "编号,标题,负责人,状态,描述\n";
|
|
||||||
filtered.forEach(t => {
|
|
||||||
const desc = (t.desc || '').replace(/,/g, '，').replace(/\n/g, ' ');
|
|
||||||
csv += `${t.id},${t.title},${t.assignee},${t.status},${desc}\n`;
|
|
||||||
});
|
|
||||||
|
|
||||||
const blob = new Blob(["\uFEFF" + csv], { type: 'text/csv;charset=utf-8;' });
|
|
||||||
const link = document.createElement('a');
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
link.href = url;
|
|
||||||
link.setAttribute('download', '工单数据.csv');
|
|
||||||
document.body.appendChild(link);
|
|
||||||
link.click();
|
|
||||||
document.body.removeChild(link);
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetToDefault() {
|
|
||||||
if (confirm('重置将恢复默认工单，当前所有自定义工单会被清除。确定吗？')) {
|
|
||||||
tickets = DEFAULT_TICKETS.map(t => ({ ...t }));
|
|
||||||
saveTickets();
|
|
||||||
currentFilter = '全部';
|
|
||||||
currentSort = 'asc';
|
|
||||||
document.getElementById('sort-btn').innerHTML = '<i class="fas fa-sort-amount-down-alt"></i> 编号↑';
|
|
||||||
document.querySelectorAll('.stat-card').forEach(c => c.classList.remove('active'));
|
|
||||||
renderTickets();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
loadTickets();
|
|
||||||
renderTickets();
|
|
||||||
|
|
||||||
document.querySelectorAll('.stat-card').forEach(card => {
|
|
||||||
card.addEventListener('click', () => {
|
|
||||||
const status = card.getAttribute('data-status');
|
|
||||||
currentFilter = status === '全部' ? '全部' : status;
|
|
||||||
renderTickets();
|
|
||||||
document.querySelectorAll('.stat-card').forEach(c => c.classList.remove('active'));
|
|
||||||
card.classList.add('active');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const sortBtn = document.getElementById('sort-btn');
|
|
||||||
if (sortBtn) {
|
|
||||||
sortBtn.addEventListener('click', () => {
|
|
||||||
currentSort = currentSort === 'asc' ? 'desc' : 'asc';
|
|
||||||
sortBtn.innerHTML = currentSort === 'asc'
|
|
||||||
? '<i class="fas fa-sort-amount-down-alt"></i> 编号↑'
|
|
||||||
: '<i class="fas fa-sort-amount-up-alt"></i> 编号↓';
|
|
||||||
renderTickets();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('new-ticket-btn').addEventListener('click', () => {
|
|
||||||
document.getElementById('ticket-modal').classList.add('show');
|
|
||||||
document.getElementById('ticket-title').focus();
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('cancel-modal').addEventListener('click', () => {
|
|
||||||
document.getElementById('ticket-modal').classList.remove('show');
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('ticket-modal').addEventListener('click', (e) => {
|
|
||||||
if (e.target === document.getElementById('ticket-modal')) {
|
|
||||||
document.getElementById('ticket-modal').classList.remove('show');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('save-ticket').addEventListener('click', () => {
|
|
||||||
const title = document.getElementById('ticket-title').value.trim();
|
|
||||||
const assignee = document.getElementById('ticket-assignee').value.trim();
|
|
||||||
const status = document.getElementById('ticket-status').value;
|
|
||||||
const desc = document.getElementById('ticket-desc').value.trim();
|
|
||||||
|
|
||||||
if (!title || !assignee) {
|
|
||||||
alert('请填写标题和负责人');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const newTicket = {
|
|
||||||
id: generateNewId(),
|
|
||||||
title: title,
|
|
||||||
assignee: assignee,
|
|
||||||
status: status,
|
|
||||||
desc: desc
|
|
||||||
};
|
|
||||||
tickets.push(newTicket);
|
|
||||||
saveTickets();
|
|
||||||
renderTickets();
|
|
||||||
document.getElementById('ticket-modal').classList.remove('show');
|
|
||||||
document.getElementById('ticket-title').value = '';
|
|
||||||
document.getElementById('ticket-assignee').value = '';
|
|
||||||
document.getElementById('ticket-status').value = '进行中';
|
|
||||||
document.getElementById('ticket-desc').value = '';
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('ticket-list').addEventListener('click', (e) => {
|
|
||||||
const deleteBtn = e.target.closest('.delete-btn');
|
|
||||||
if (deleteBtn) {
|
|
||||||
const id = deleteBtn.getAttribute('data-id');
|
|
||||||
tickets = tickets.filter(t => t.id !== id);
|
|
||||||
saveTickets();
|
|
||||||
renderTickets();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const statusSpan = e.target.closest('.ticket-status');
|
|
||||||
if (statusSpan) {
|
|
||||||
const id = statusSpan.getAttribute('data-id');
|
|
||||||
const ticket = tickets.find(t => t.id === id);
|
|
||||||
if (ticket) {
|
|
||||||
if (ticket.status === '进行中') ticket.status = '已完成';
|
|
||||||
else if (ticket.status === '已完成') ticket.status = '进行中';
|
|
||||||
else if (ticket.status === '待开始') ticket.status = '进行中';
|
|
||||||
saveTickets();
|
|
||||||
renderTickets();
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const item = e.target.closest('.ticket-item');
|
|
||||||
if (item && !e.target.closest('.delete-btn') && !e.target.closest('.ticket-status')) {
|
|
||||||
const id = item.getAttribute('data-id');
|
|
||||||
const ticket = tickets.find(t => t.id === id);
|
|
||||||
alert(`工单详情\n编号：${ticket.id}\n标题：${ticket.title}\n负责人：${ticket.assignee}\n状态：${ticket.status}\n描述：${ticket.desc || '无'}`);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('export-btn').addEventListener('click', exportToCSV);
|
|
||||||
document.getElementById('reset-btn').addEventListener('click', resetToDefault);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,301 +0,0 @@
|
||||||
/* ============================================
|
|
||||||
HoloLake · M06 工单管理界面 · 逻辑层
|
|
||||||
环节3：响应式 + 数据导出（JSON/CSV）
|
|
||||||
DEV-010 桔子
|
|
||||||
============================================ */
|
|
||||||
// === 状态流转规则 ===
|
|
||||||
const STATUS_FLOW = {
|
|
||||||
'pending': { next: 'active', label: '待处理' },
|
|
||||||
'active': { next: 'done', label: '进行中' },
|
|
||||||
'done': { next: 'pending', label: '已完成' }
|
|
||||||
};
|
|
||||||
// === 初始化 · 从 localStorage 读取工单 ===
|
|
||||||
let tickets = JSON.parse(localStorage.getItem('holotake_tic
|
|
||||||
kets') || '[]');
|
|
||||||
// === 保存到 localStorage ===
|
|
||||||
function saveTickets() {
|
|
||||||
localStorage.setItem('holotake_tickets', JSON.stringify(t
|
|
||||||
ickets));
|
|
||||||
}
|
|
||||||
// === 生成工单编号 ===
|
|
||||||
function generateId() {
|
|
||||||
const now = new Date();
|
|
||||||
const dateStr = [
|
|
||||||
now.getFullYear(),
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 18
|
|
||||||
String(now.getMonth() + 1).padStart(2, '0'),
|
|
||||||
String(now.getDate()).padStart(2, '0')
|
|
||||||
].join('');
|
|
||||||
const rand = String(Math.floor(Math.random() * 1000)).pad
|
|
||||||
Start(3, '0');
|
|
||||||
return 'TK-' + dateStr + '-' + rand;
|
|
||||||
}
|
|
||||||
// === 渲染统计卡片 ===
|
|
||||||
function renderStats() {
|
|
||||||
const total = tickets.length;
|
|
||||||
const pending = tickets.filter(t => t.status === 'pendin
|
|
||||||
g').length;
|
|
||||||
const active = tickets.filter(t => t.status === 'activ
|
|
||||||
e').length;
|
|
||||||
const done = tickets.filter(t => t.status === 'done').len
|
|
||||||
gth;
|
|
||||||
document.getElementById('statTotal').textContent = total;
|
|
||||||
document.getElementById('statPending').textContent = pend
|
|
||||||
ing;
|
|
||||||
document.getElementById('statActive').textContent = activ
|
|
||||||
e;
|
|
||||||
document.getElementById('statDone').textContent = done;
|
|
||||||
}
|
|
||||||
// === 获取筛选和排序后的工单列表 ===
|
|
||||||
function getFilteredTickets() {
|
|
||||||
const filterStatus = document.getElementById('filterStatu
|
|
||||||
s').value;
|
|
||||||
const sortBy = document.getElementById('sortBy').value;
|
|
||||||
let list = [...tickets];
|
|
||||||
// 筛选
|
|
||||||
if (filterStatus !== 'all') {
|
|
||||||
list = list.filter(t => t.status === filterStatus);
|
|
||||||
}
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 19
|
|
||||||
// 排序
|
|
||||||
if (sortBy === 'newest') {
|
|
||||||
list.sort((a, b) => new Date(b.createdAt) - new Date(a.
|
|
||||||
createdAt));
|
|
||||||
} else if (sortBy === 'oldest') {
|
|
||||||
list.sort((a, b) => new Date(a.createdAt) - new Date(b.
|
|
||||||
createdAt));
|
|
||||||
} else if (sortBy === 'status') {
|
|
||||||
const order = { 'pending': 0, 'active': 1, 'done': 2 };
|
|
||||||
list.sort((a, b) => order[a.status] - order[b.status]);
|
|
||||||
}
|
|
||||||
return list;
|
|
||||||
}
|
|
||||||
// === 渲染工单列表 ===
|
|
||||||
function renderTickets() {
|
|
||||||
const list = getFilteredTickets();
|
|
||||||
const container = document.getElementById('ticketList');
|
|
||||||
if (list.length === 0) {
|
|
||||||
container.innerHTML = '<div class="empty-state"><div cl
|
|
||||||
ass="empty-icon">📋</div><div class="empty-text">暂无工单，点
|
|
||||||
击上方按钮新建</div></div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
container.innerHTML = list.map(ticket => {
|
|
||||||
const statusInfo = STATUS_FLOW[ticket.status];
|
|
||||||
return '<div class="ticket-item">' +
|
|
||||||
'<span class="ticket-id">' + ticket.id + '</span>' +
|
|
||||||
'<div class="ticket-info">' +
|
|
||||||
'<div class="ticket-title">' + escapeHtml(ticket.ti
|
|
||||||
tle) + '</div>' +
|
|
||||||
'<div class="ticket-meta">负责人：' + escapeHtml(tic
|
|
||||||
ket.assignee) + ' · ' + formatDate(ticket.createdAt) + '</d
|
|
||||||
iv>' +
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 20
|
|
||||||
'</div>' +
|
|
||||||
'<div class="ticket-actions">' +
|
|
||||||
'<span class="status-badge ' + ticket.status + '" o
|
|
||||||
nclick="toggleStatus(\'' + ticket.id + '\')">' + statusInf
|
|
||||||
o.label + '</span>' +
|
|
||||||
'<button class="btn-delete" onclick="deleteTicket
|
|
||||||
(\'' + ticket.id + '\')" title="删除">🗑</button>' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>';
|
|
||||||
}).join('');
|
|
||||||
}
|
|
||||||
// === HTML转义（防XSS） ===
|
|
||||||
function escapeHtml(str) {
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.textContent = str;
|
|
||||||
return div.innerHTML;
|
|
||||||
}
|
|
||||||
// === 格式化日期 ===
|
|
||||||
function formatDate(dateStr) {
|
|
||||||
const d = new Date(dateStr);
|
|
||||||
return d.getFullYear() + '-' +
|
|
||||||
String(d.getMonth() + 1).padStart(2, '0') + '-' +
|
|
||||||
String(d.getDate()).padStart(2, '0') + ' ' +
|
|
||||||
String(d.getHours()).padStart(2, '0') + ':' +
|
|
||||||
String(d.getMinutes()).padStart(2, '0');
|
|
||||||
}
|
|
||||||
// === 切换工单状态 ===
|
|
||||||
function toggleStatus(id) {
|
|
||||||
const ticket = tickets.find(t => t.id === id);
|
|
||||||
if (!ticket) return;
|
|
||||||
ticket.status = STATUS_FLOW[ticket.status].next;
|
|
||||||
saveTickets();
|
|
||||||
renderAll();
|
|
||||||
}
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 21
|
|
||||||
// === 删除工单 ===
|
|
||||||
function deleteTicket(id) {
|
|
||||||
if (!confirm('确认删除这条工单？')) return;
|
|
||||||
tickets = tickets.filter(t => t.id !== id);
|
|
||||||
saveTickets();
|
|
||||||
renderAll();
|
|
||||||
}
|
|
||||||
// === 新建工单弹窗 ===
|
|
||||||
function openModal() {
|
|
||||||
document.getElementById('modalOverlay').classList.add('sh
|
|
||||||
ow');
|
|
||||||
document.getElementById('inputTitle').value = '';
|
|
||||||
document.getElementById('inputAssignee').value = '';
|
|
||||||
document.getElementById('inputDetail').value = '';
|
|
||||||
document.getElementById('inputTitle').focus();
|
|
||||||
}
|
|
||||||
function closeModal() {
|
|
||||||
document.getElementById('modalOverlay').classList.remove
|
|
||||||
('show');
|
|
||||||
}
|
|
||||||
// === 提交新建工单 ===
|
|
||||||
function submitTicket() {
|
|
||||||
const title = document.getElementById('inputTitle').valu
|
|
||||||
e.trim();
|
|
||||||
const assignee = document.getElementById('inputAssigne
|
|
||||||
e').value.trim();
|
|
||||||
const detail = document.getElementById('inputDetail').val
|
|
||||||
ue.trim();
|
|
||||||
if (!title) {
|
|
||||||
alert('请填写工单标题');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!assignee) {
|
|
||||||
alert('请填写负责人');
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 22
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const newTicket = {
|
|
||||||
id: generateId(),
|
|
||||||
title: title,
|
|
||||||
assignee: assignee,
|
|
||||||
detail: detail,
|
|
||||||
status: 'pending',
|
|
||||||
createdAt: new Date().toISOString()
|
|
||||||
};
|
|
||||||
tickets.unshift(newTicket);
|
|
||||||
saveTickets();
|
|
||||||
closeModal();
|
|
||||||
renderAll();
|
|
||||||
}
|
|
||||||
// === 重置全部工单 ===
|
|
||||||
function resetTickets() {
|
|
||||||
if (!confirm('确认清空所有工单数据？此操作不可恢复！')) return;
|
|
||||||
tickets = [];
|
|
||||||
saveTickets();
|
|
||||||
renderAll();
|
|
||||||
}
|
|
||||||
// ============================================
|
|
||||||
// 环节3新增：导出功能
|
|
||||||
// ============================================
|
|
||||||
// === 导出下拉菜单控制 ===
|
|
||||||
function toggleExportMenu() {
|
|
||||||
const dropdown = document.getElementById('exportDropdow
|
|
||||||
n');
|
|
||||||
const clickAway = document.getElementById('clickAway');
|
|
||||||
const isOpen = dropdown.classList.contains('show');
|
|
||||||
if (isOpen) {
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 23
|
|
||||||
closeExportMenu();
|
|
||||||
} else {
|
|
||||||
dropdown.classList.add('show');
|
|
||||||
clickAway.classList.add('show');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function closeExportMenu() {
|
|
||||||
document.getElementById('exportDropdown').classList.remov
|
|
||||||
e('show');
|
|
||||||
document.getElementById('clickAway').classList.remove('sh
|
|
||||||
ow');
|
|
||||||
}
|
|
||||||
// === 导出为 JSON 文件 ===
|
|
||||||
function exportJSON() {
|
|
||||||
closeExportMenu();
|
|
||||||
if (tickets.length === 0) {
|
|
||||||
alert('当前没有工单数据可导出');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const data = JSON.stringify(tickets, null, 2);
|
|
||||||
const blob = new Blob([data], { type: 'application/json;c
|
|
||||||
harset=utf-8' });
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = url;
|
|
||||||
a.download = 'HoloLake-Tickets-' + getDateStamp() + '.jso
|
|
||||||
n';
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
document.body.removeChild(a);
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
}
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 24
|
|
||||||
// === 导出为 CSV 文件 ===
|
|
||||||
function exportCSV() {
|
|
||||||
closeExportMenu();
|
|
||||||
if (tickets.length === 0) {
|
|
||||||
alert('当前没有工单数据可导出');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// CSV表头
|
|
||||||
const header = '编号,标题,负责人,状态,详情,创建时间';
|
|
||||||
// CSV内容行
|
|
||||||
const rows = tickets.map(t => {
|
|
||||||
const statusLabel = STATUS_FLOW[t.status] ? STATUS_FLOW
|
|
||||||
[t.status].label : t.status;
|
|
||||||
return [
|
|
||||||
t.id,
|
|
||||||
csvEscape(t.title),
|
|
||||||
csvEscape(t.assignee),
|
|
||||||
statusLabel,
|
|
||||||
csvEscape(t.detail || ''),
|
|
||||||
formatDate(t.createdAt)
|
|
||||||
].join(',');
|
|
||||||
});
|
|
||||||
const csv = '\uFEFF' + header + '\n' + rows.join('\n');
|
|
||||||
const blob = new Blob([csv], { type: 'text/csv;charset=ut
|
|
||||||
f-8' });
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = url;
|
|
||||||
a.download = 'HoloLake-Tickets-' + getDateStamp() + '.cs
|
|
||||||
v';
|
|
||||||
document.body.appendChild(a);
|
|
||||||
a.click();
|
|
||||||
document.body.removeChild(a);
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 25
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
}
|
|
||||||
// === CSV字段转义（处理逗号和引号） ===
|
|
||||||
function csvEscape(str) {
|
|
||||||
if (!str) return '';
|
|
||||||
if (str.includes(',') || str.includes('"') || str.include
|
|
||||||
s('\n')) {
|
|
||||||
return '"' + str.replace(/"/g, '""') + '"';
|
|
||||||
}
|
|
||||||
return str;
|
|
||||||
}
|
|
||||||
// === 生成日期戳（用于文件名） ===
|
|
||||||
function getDateStamp() {
|
|
||||||
const now = new Date();
|
|
||||||
return now.getFullYear() +
|
|
||||||
String(now.getMonth() + 1).padStart(2, '0') +
|
|
||||||
String(now.getDate()).padStart(2, '0') + '-' +
|
|
||||||
String(now.getHours()).padStart(2, '0') +
|
|
||||||
String(now.getMinutes()).padStart(2, '0');
|
|
||||||
}
|
|
||||||
// === 统一渲染 ===
|
|
||||||
function renderAll() {
|
|
||||||
renderStats();
|
|
||||||
renderTickets();
|
|
||||||
}
|
|
||||||
// === 筛选/排序变化时重新渲染 ===
|
|
||||||
document.getElementById('filterStatus').addEventListener('c
|
|
||||||
hange', renderTickets);
|
|
||||||
document.getElementById('sortBy').addEventListener('chang
|
|
||||||
e', renderTickets);
|
|
||||||
// === 弹窗点击遮罩关闭 ===
|
|
||||||
document.getElementById('modalOverlay').addEventListener('c
|
|
||||||
lick', function(e) {
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 26
|
|
||||||
if (e.target === this) closeModal();
|
|
||||||
});
|
|
||||||
// === 页面加载完成 · 首次渲染 ===
|
|
||||||
renderAll();
|
|
||||||
|
|
@ -1,527 +0,0 @@
|
||||||
/* ============================================
|
|
||||||
HoloLake · M06 工单管理界面 · 样式表
|
|
||||||
环节3：响应式布局 · 深蓝主题
|
|
||||||
DEV-010 桔子
|
|
||||||
============================================ */
|
|
||||||
/* === 全局变量 === */
|
|
||||||
:root {
|
|
||||||
--bg-primary: #0a0e27;
|
|
||||||
--bg-secondary: #111638;
|
|
||||||
--bg-card: #161b4a;
|
|
||||||
--bg-hover: #1e2460;
|
|
||||||
--border-color: #2a3070;
|
|
||||||
--text-primary: #e8eaff;
|
|
||||||
--text-secondary: #8b90c0;
|
|
||||||
--accent-blue: #4a6cf7;
|
|
||||||
--accent-blue-hover: #5b7bf8;
|
|
||||||
--accent-green: #22c55e;
|
|
||||||
--accent-yellow: #eab308;
|
|
||||||
--accent-red: #ef4444;
|
|
||||||
--accent-purple: #a855f7;
|
|
||||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
||||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
|
|
||||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
|
|
||||||
--radius-sm: 6px;
|
|
||||||
--radius-md: 10px;
|
|
||||||
--radius-lg: 14px;
|
|
||||||
}
|
|
||||||
/* === 基础重置 === */
|
|
||||||
* {
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 2
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe U
|
|
||||||
I", "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
||||||
background: var(--bg-primary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
min-height: 100vh;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
/* === 主容器 === */
|
|
||||||
.app-container {
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 20px 24px;
|
|
||||||
}
|
|
||||||
/* === 顶部标题栏 === */
|
|
||||||
.app-header {
|
|
||||||
text-align: center;
|
|
||||||
padding: 24px 0 20px;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
.app-header h1 {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-primary);
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
.app-header .subtitle {
|
|
||||||
font-size: 13px;
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 3
|
|
||||||
color: var(--text-secondary);
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
/* === 操作栏（新建 + 导出） === */
|
|
||||||
.header-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border: none;
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.btn-primary {
|
|
||||||
background: var(--accent-blue);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.btn-primary:hover {
|
|
||||||
background: var(--accent-blue-hover);
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
}
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 4
|
|
||||||
.btn-secondary {
|
|
||||||
background: var(--bg-card);
|
|
||||||
color: var(--text-primary);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
.btn-secondary:hover {
|
|
||||||
background: var(--bg-hover);
|
|
||||||
}
|
|
||||||
/* === 导出下拉菜单 === */
|
|
||||||
.export-wrapper {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.export-dropdown {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: calc(100% + 6px);
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
background: var(--bg-card);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
box-shadow: var(--shadow-md);
|
|
||||||
z-index: 100;
|
|
||||||
min-width: 160px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.export-dropdown.show {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.export-dropdown .export-item {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px 16px;
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 5
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--text-primary);
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: left;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.15s;
|
|
||||||
}
|
|
||||||
.export-dropdown .export-item:hover {
|
|
||||||
background: var(--bg-hover);
|
|
||||||
}
|
|
||||||
.export-dropdown .export-item + .export-item {
|
|
||||||
border-top: 1px solid var(--border-color);
|
|
||||||
}
|
|
||||||
/* === 统计卡片 === */
|
|
||||||
.stats-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: 12px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
background: var(--bg-card);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
padding: 16px;
|
|
||||||
text-align: center;
|
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
|
||||||
}
|
|
||||||
.stat-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
}
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 6
|
|
||||||
.stat-card .stat-number {
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
.stat-card .stat-label {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
.stat-card.total .stat-number { color: var(--accent-blue);
|
|
||||||
}
|
|
||||||
.stat-card.pending .stat-number { color: var(--accent-yello
|
|
||||||
w); }
|
|
||||||
.stat-card.active .stat-number { color: var(--accent-gree
|
|
||||||
n); }
|
|
||||||
.stat-card.done .stat-number { color: var(--accent-purple);
|
|
||||||
}
|
|
||||||
/* === 筛选排序栏 === */
|
|
||||||
.filter-bar {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.filter-bar select {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 120px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
background: var(--bg-card);
|
|
||||||
color: var(--text-primary);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 7
|
|
||||||
font-size: 13px;
|
|
||||||
cursor: pointer;
|
|
||||||
appearance: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='h
|
|
||||||
ttp://www.w3.org/2000/svg' width='12' height='12' fill='%23
|
|
||||||
8b90c0'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: right 10px center;
|
|
||||||
padding-right: 30px;
|
|
||||||
}
|
|
||||||
.filter-bar select:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--accent-blue);
|
|
||||||
}
|
|
||||||
/* === 工单列表 === */
|
|
||||||
.ticket-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
.ticket-item {
|
|
||||||
background: var(--bg-card);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
padding: 16px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 14px;
|
|
||||||
transition: background 0.15s;
|
|
||||||
}
|
|
||||||
.ticket-item:hover {
|
|
||||||
background: var(--bg-hover);
|
|
||||||
}
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 8
|
|
||||||
.ticket-id {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-family: "SF Mono", "Fira Code", monospace;
|
|
||||||
min-width: 60px;
|
|
||||||
}
|
|
||||||
.ticket-info {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
.ticket-title {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--text-primary);
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
.ticket-meta {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
.ticket-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
/* === 状态标签（可点击切换） === */
|
|
||||||
.status-badge {
|
|
||||||
display: inline-block;
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 9
|
|
||||||
padding: 4px 12px;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.status-badge:hover {
|
|
||||||
opacity: 0.85;
|
|
||||||
}
|
|
||||||
.status-badge.pending {
|
|
||||||
background: rgba(234, 179, 8, 0.15);
|
|
||||||
color: var(--accent-yellow);
|
|
||||||
border: 1px solid rgba(234, 179, 8, 0.3);
|
|
||||||
}
|
|
||||||
.status-badge.active {
|
|
||||||
background: rgba(34, 197, 94, 0.15);
|
|
||||||
color: var(--accent-green);
|
|
||||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
|
||||||
}
|
|
||||||
.status-badge.done {
|
|
||||||
background: rgba(168, 85, 247, 0.15);
|
|
||||||
color: var(--accent-purple);
|
|
||||||
border: 1px solid rgba(168, 85, 247, 0.3);
|
|
||||||
}
|
|
||||||
/* === 删除按钮 === */
|
|
||||||
.btn-delete {
|
|
||||||
background: none;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 10
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.btn-delete:hover {
|
|
||||||
color: var(--accent-red);
|
|
||||||
background: rgba(239, 68, 68, 0.1);
|
|
||||||
border-color: rgba(239, 68, 68, 0.3);
|
|
||||||
}
|
|
||||||
/* === 空状态 === */
|
|
||||||
.empty-state {
|
|
||||||
text-align: center;
|
|
||||||
padding: 60px 20px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
.empty-state .empty-icon {
|
|
||||||
font-size: 48px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
.empty-state .empty-text {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
/* === 弹窗遮罩 === */
|
|
||||||
.modal-overlay {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
z-index: 1000;
|
|
||||||
justify-content: center;
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 11
|
|
||||||
align-items: center;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
.modal-overlay.show {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
/* === 弹窗 === */
|
|
||||||
.modal {
|
|
||||||
background: var(--bg-secondary);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
padding: 28px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 480px;
|
|
||||||
box-shadow: var(--shadow-lg);
|
|
||||||
}
|
|
||||||
.modal h2 {
|
|
||||||
font-size: 18px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
.modal .form-group {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
.modal label {
|
|
||||||
display: block;
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
.modal input,
|
|
||||||
.modal select,
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 12
|
|
||||||
.modal textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px 12px;
|
|
||||||
background: var(--bg-card);
|
|
||||||
color: var(--text-primary);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.modal input:focus,
|
|
||||||
.modal select:focus,
|
|
||||||
.modal textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--accent-blue);
|
|
||||||
}
|
|
||||||
.modal textarea {
|
|
||||||
resize: vertical;
|
|
||||||
min-height: 80px;
|
|
||||||
}
|
|
||||||
.modal .form-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
/* === 点击外部关闭下拉菜单的辅助层 === */
|
|
||||||
.click-away {
|
|
||||||
display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 99;
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 13
|
|
||||||
}
|
|
||||||
.click-away.show {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
/* ============================================
|
|
||||||
响应式布局 · 平板端（481px ~ 768px）
|
|
||||||
============================================ */
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.app-container {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
.app-header h1 {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
.stats-grid {
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
padding: 12px 8px;
|
|
||||||
}
|
|
||||||
.stat-card .stat-number {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
.stat-card .stat-label {
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
.ticket-item {
|
|
||||||
padding: 12px;
|
|
||||||
gap: 10px;
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 14
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* ============================================
|
|
||||||
响应式布局 · 手机端（<=480px）
|
|
||||||
============================================ */
|
|
||||||
@media screen and (max-width: 480px) {
|
|
||||||
.app-container {
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
.app-header {
|
|
||||||
padding: 16px 0 14px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
.app-header h1 {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
/* 统计卡片手机端变2列 */
|
|
||||||
.stats-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.stat-card {
|
|
||||||
padding: 12px 10px;
|
|
||||||
}
|
|
||||||
.stat-card .stat-number {
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
/* 操作按钮自适应 */
|
|
||||||
.header-actions {
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 15
|
|
||||||
.btn {
|
|
||||||
padding: 8px 14px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
/* 筛选栏纵向排列 */
|
|
||||||
.filter-bar {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.filter-bar select {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
/* 工单卡片纵向排列 */
|
|
||||||
.ticket-item {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 14px;
|
|
||||||
}
|
|
||||||
.ticket-id {
|
|
||||||
min-width: auto;
|
|
||||||
}
|
|
||||||
.ticket-info {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.ticket-title {
|
|
||||||
white-space: normal;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
.ticket-actions {
|
|
||||||
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 16
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
/* 导出下拉菜单手机端定位优化 */
|
|
||||||
.export-dropdown {
|
|
||||||
left: auto;
|
|
||||||
right: 0;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
/* 弹窗手机端全屏 */
|
|
||||||
.modal-overlay {
|
|
||||||
padding: 0;
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
.modal {
|
|
||||||
max-width: 100%;
|
|
||||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
|
||||||
padding: 24px 20px;
|
|
||||||
max-height: 90vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
.modal .form-actions {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.modal .form-actions .btn {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -3,5 +3,5 @@ import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [react()],
|
plugins: [react()],
|
||||||
base: './',
|
base: '/writing/',
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue