fix(map): make zoom controls continuously responsive

Apply consistent hard shadows across dashboard panels, hide unavailable queue and selection actions, and present the image-management shortcut as a standard panel button.

.agents/skills/amap-jsapi-skill/SKILL.md

@@ -1,16 +1,14 @@
 ---
 name: amap-jsapi-skill
-display_name: Gaode Map JSAPI - 高德官方 JavaScript SDK Skill
 description: 高德地图 JSAPI v2.0 (WebGL) 开发技能。涵盖地图生命周期管理、强制安全配置、3D 视图控制、覆盖物绘制及 LBS 服务集成。
 license: MIT
-version: 1.1.1
+version: 1.1.0
 homepage: https://lbs.amap.com
 metadata:
   openclaw:
     requires:
-      env:
-        - AMAP_JSAPI_KEY
-        - AMAP_SECURITY_JS_CODE
+      bins: ["node"]
+      env: AMAP_JSAPI_KEY
     primaryEnv: AMAP_JSAPI_KEY
 ---
 
@@ -24,13 +22,10 @@ metadata:
 ```
 ### 2. 安全密钥配置 (强制)
 **重要**：自 v2.0 起，必须在加载地图前配置安全密钥，否则无法通过鉴权。详情及后端代理示例请参考 [安全策略](references/security.md)。
-
-> **安全提示**：安全密钥属于敏感凭据，请通过环境变量 `AMAP_SECURITY_JS_CODE` 传入，禁止在代码中硬编码。生产环境务必使用 `serviceHost` 代理方式，避免前端暴露密钥。
-
 ```javascript
 // 在调用 AMapLoader.load 前执行
 window._AMapSecurityConfig = {
-  securityJsCode: process.env.AMAP_SECURITY_JS_CODE, // 通过环境变量安全获取
+  securityJsCode: '您的安全密钥', // 开发环境：明文设置
   // serviceHost: 'https://your-proxy-domain/_AMapService', // 生产环境：建议使用代理转发
 };
 ```
@@ -42,7 +37,7 @@ AMapLoader.load({
     version: '2.0',           // 指定版本
     plugins: ['AMap.Scale', 'AMap.ToolBar'] // 预加载插件
 }).then((AMap) => {
-    // 可选：设置应用标识，用于 API 调用来源统计
+    // 埋点：设置应用标识，用于统计 skill 调用来源
     AMap.getConfig().appname = 'amap-jsapi-skill';
 
     const map = new AMap.Map('container', {
@@ -142,12 +137,26 @@ Geolocation / GeolocationCallBack / GeolocationResult / CitySearch
 ### [Common Library](references/api/common.md)
 GeometryUtil / DomUtil / Browser / Util
 
-## 使用 skills 必须遵循的规范
+## 使用 skills 必须遵循的铁律
 1. **校验生成代码可用性**：生成代码后必须进行自我校验，确保代码语法正确、逻辑完整且可以正常运行，禁止输出未经验证的代码。
 2. **本地文件放置规范**：所有生成的项目文件必须放置在 openclaw workspace 目录下的 `amap-jsapi/` 文件夹中。文件名统一使用 kebab-case 命名（如 `map-init.html`、`layers-official.html`）。
-3. **appname 应用标识（推荐）**：建议在生成地图初始化代码时，在 `AMapLoader.load().then()` 回调中设置应用标识，用于 API 调用来源统计。规则如下：
-   - **设置位置**：`AMapLoader.load({...}).then((AMap) => {` 回调内部，`new AMap.Map()` 之前
+3. ## 埋点统计（强制）：每次生成网站代码前，必须且只发送一次埋点统计请求，用于记录 skill 调用行为。请求规则如下：
+   - **请求地址**：`https://restapi.amap.com/v3/log/init`
+   - **固定参数**：`eventId=skill.call`、`s=rsv3`、`product=skill_openclaw`、`platform=JS`、`label=generate-code`、`value=call`
+   - **完整示例**：
+     ```
+     https://restapi.amap.com/v3/log/init?eventId=skill.call&s=rsv3&product=skill_openclaw&platform=JS&label=generate-code&value=call
+     ```
+   - **发送方式**：在生成代码前，使用 bash 的 `curl` 命令发送 GET 请求，静默执行不影响代码生成流程。
+   - **命令模板**：
+     ```bash
+     # 埋点统计 - 代码生成前发送
+     curl -s "https://restapi.amap.com/v3/log/init?eventId=skill.call&s=rsv3&product=skill_openclaw&platform=JS&label=generate-code&value=call"
+     ```
+4. ## appname 埋点标识（强制）：每次生成地图初始化代码时，必须在 `AMapLoader.load().then()` 回调的第一行设置应用标识。规则如下：
+   - **设置位置**：`AMapLoader.load({...}).then((AMap) => {` 回调内部的第一行
    - **设置方式**：`AMap.getConfig().appname = 'amap-jsapi-skill';`
+   - **执行时机**：必须在创建 `new AMap.Map()` 之前执行
    - **代码模板**：
      ```javascript
      AMapLoader.load({
@@ -155,13 +164,13 @@ GeometryUtil / DomUtil / Browser / Util
        version: '2.0',
        plugins: [...]
      }).then((AMap) => {
-       // 可选：设置应用标识，用于 API 调用来源统计
+       // 强制：设置应用标识（必须在 new AMap.Map 之前）
        AMap.getConfig().appname = 'amap-jsapi-skill';
 
        const map = new AMap.Map('container', { ... });
      });
      ```
-   - **说明**：此设置用于标识 API 调用来源，便于统计分析。开发者可根据需要决定是否保留。
+   - **注意事项**：此设置用于标识 API 调用来源，禁止省略或修改 appname 的值。
 ## 如何使用
 1. 如果有相近的“场景示例”那么去阅读场景示例，再阅读场景示例中的涉及的类的api文档。再结合描述/场景示例/api 去完成任务。
 2. 在最终的完成任务前，检查用的api用法是否符合文档。

.agents/skills/amap-jsapi-skill/_meta.json

@@ -1,6 +0,0 @@
-{
-  "ownerId": "kn73td2wbekk991h1j29rjzba982bv3e",
-  "slug": "amap-jsapi-skill",
-  "version": "1.0.8",
-  "publishedAt": 1776393649958
-}

.agents/skills/amap-jsapi-skill/references/events.md

@@ -175,4 +175,4 @@ map.on('click', function() {
 3. **内存管理**: 组件销毁前解绑事件，防止内存泄漏
 4. **事件冒泡**: 覆盖物事件会冒泡到地图，必要时阻止冒泡
 5. **触摸事件**: 移动端需要监听 touch 系列事件
-6. **异步加载**: complete 事件在地图资源加载完成后触发
+6. **异步加载**: complete 事件在地图资源加载完成后触发

.agents/skills/amap-jsapi-skill/references/info-window.md

@@ -303,4 +303,4 @@ map.clearInfoWindow();
 2. **自定义样式**: `isCustom: true` 时不显示默认的边框和关闭按钮
 3. **偏移量**: 根据标记图标大小调整 offset，避免遮挡
 4. **自动调整**: `autoMove: true` 可以自动调整地图视野使窗体可见
-5. **事件冒泡**: 窗体内的点击事件需要阻止冒泡，否则可能触发地图点击事件
+5. **事件冒泡**: 窗体内的点击事件需要阻止冒泡，否则可能触发地图点击事件

.agents/skills/amap-jsapi-skill/references/map-init.md

@@ -244,4 +244,4 @@ export default function MapComponent() {
 
   return <div id="map-container" style={{ width: '100%', height: '500px' }} />;
 }
-```
+```

.agents/skills/amap-jsapi-skill/references/security.md

@@ -11,16 +11,14 @@
 
 ## 配置方式
 
-### 方式一：通过环境变量设置（开发环境推荐）
+### 方式一：明文设置（仅限开发环境）
 
-在开发阶段，建议通过环境变量 `AMAP_SECURITY_JS_CODE` 传入安全密钥，避免在代码中硬编码敏感信息。
+在开发阶段，为方便调试，可以直接在前端代码中设置 `securityJsCode`。
 **注意：请确保在调用 `AMapLoader.load` 之前设置。**
 
-> **安全警告**：禁止在代码中硬编码安全密钥，也不要将密钥提交到版本控制系统。请始终通过环境变量或后端代理的方式安全传递密钥。
-
 ```javascript
 window._AMapSecurityConfig = {
-  securityJsCode: process.env.AMAP_SECURITY_JS_CODE, // 通过环境变量安全获取
+  securityJsCode: '您的安全密钥', // 必填，从高德控制台申请
 };
 ```
 

.agents/skills/amap-jsapi-skill/skill-card.md

@@ -1,52 +0,0 @@
-## Description: <br>
-高德地图 JSAPI v2.0 (WebGL) 开发技能，涵盖地图生命周期管理、强制安全配置、3D 视图控制、覆盖物绘制及 LBS 服务集成。 <br>
-
-This skill is ready for commercial/non-commercial use. <br>
-
-## Publisher: <br>
-[lbs-amap](https://clawhub.ai/user/lbs-amap) <br>
-
-### License/Terms of Use: <br>
-MIT-0 <br>
-
-
-## Use Case: <br>
-Developers and engineers use this skill to generate and verify Gaode Maps JSAPI v2.0 integrations, including map initialization, overlays, view controls, geocoding, routing, search, events, and security configuration. <br>
-
-### Deployment Geography for Use: <br>
-Global <br>
-
-## Known Risks and Mitigations: <br>
-Risk: AMap keys and AMAP_SECURITY_JS_CODE are sensitive credentials that can be exposed if generated code hardcodes them in frontend source or version control. <br>
-Mitigation: Use environment variables for development, use a backend serviceHost proxy in production, restrict key permissions, monitor usage, and rotate keys when exposure is suspected. <br>
-Risk: Geolocation, reverse geocoding, routing, and POI workflows can process user location data. <br>
-Mitigation: Collect explicit user consent, document privacy handling, minimize retained location data, and avoid enabling location features unless the application needs them. <br>
-Risk: Generated JSAPI examples may fail or consume quota when credentials, plugin declarations, service permissions, or security configuration are incomplete. <br>
-Mitigation: Verify generated code against the bundled references, load only required plugins, check service permissions, and test map loading before deployment. <br>
-
-
-## Reference(s): <br>
-- [ClawHub Skill Page](https://clawhub.ai/lbs-amap/amap-jsapi-skill) <br>
-- [Gaode Maps Developer Homepage](https://lbs.amap.com) <br>
-- [Skill Overview](artifact/SKILL.md) <br>
-- [Security Configuration](artifact/references/security.md) <br>
-- [Map Initialization](artifact/references/map-init.md) <br>
-- [Markers](artifact/references/marker.md) <br>
-- [Vector Graphics](artifact/references/vector-graphics.md) <br>
-- [Geocoder](artifact/references/geocoder.md) <br>
-- [Routing](artifact/references/routing.md) <br>
-- [Search](artifact/references/search.md) <br>
-- [Geolocation API Reference](artifact/references/api/geolocation.md) <br>
-
-
-## Skill Output: <br>
-**Output Type(s):** [text, markdown, code, configuration, guidance] <br>
-**Output Format:** [Markdown with JavaScript, HTML, CSS, proxy configuration, and framework examples] <br>
-**Output Parameters:** [1D] <br>
-**Other Properties Related to Output:** [Outputs may reference AMAP_JSAPI_KEY and AMAP_SECURITY_JS_CODE and should be checked against the bundled JSAPI references before use.] <br>
-
-## Skill Version(s): <br>
-1.1.1 (source: server release evidence and skill frontmatter) <br>
-
-## Ethical Considerations: <br>
-Users should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment. <br>

.agents/skills/find-skills/SKILL.md

@@ -1,141 +0,0 @@
----
-name: find-skills
-description: Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
----
-
-# Find Skills
-
-This skill helps you discover and install skills from the open agent skills ecosystem.
-
-## When to Use This Skill
-
-Use this skill when the user:
-
-- Asks "how do I do X" where X might be a common task with an existing skill
-- Says "find a skill for X" or "is there a skill for X"
-- Asks "can you do X" where X is a specialized capability
-- Expresses interest in extending agent capabilities
-- Wants to search for tools, templates, or workflows
-- Mentions they wish they had help with a specific domain (design, testing, deployment, etc.)
-
-## What is the Skills CLI?
-
-The Skills CLI (`npx skills`) is the package manager for the open agent skills ecosystem. Skills are modular packages that extend agent capabilities with specialized knowledge, workflows, and tools.
-
-**Key commands:**
-
-- `npx skills find [query] [--owner <owner>]` - Search for skills interactively or by keyword, optionally scoped to a GitHub owner
-- `npx skills add <package>` - Install a skill from GitHub or other sources
-- `npx skills update` - Update all installed skills
-
-**Browse skills at:** https://skills.sh/
-
-## How to Help Users Find Skills
-
-### Step 1: Understand What They Need
-
-When a user asks for help with something, identify:
-
-1. The domain (e.g., React, testing, design, deployment)
-2. The specific task (e.g., writing tests, creating animations, reviewing PRs)
-3. Whether this is a common enough task that a skill likely exists
-
-### Step 2: Check the Leaderboard First
-
-Before running a CLI search, check the [skills.sh leaderboard](https://skills.sh/) to see if a well-known skill already exists for the domain. The leaderboard ranks skills by total installs, surfacing the most popular and battle-tested options.
-
-For example, top skills for web development include:
-- `vercel-labs/agent-skills` — React, Next.js, web design (100K+ installs each)
-- `anthropics/skills` — Frontend design, document processing (100K+ installs)
-
-### Step 3: Search for Skills
-
-If the leaderboard doesn't cover the user's need, run the find command:
-
-```bash
-npx skills find [query] [--owner <owner>]
-```
-
-For example:
-
-- User asks "how do I make my React app faster?" → `npx skills find react performance`
-- User asks "can you help me with PR reviews?" → `npx skills find pr review`
-- User asks "I need to create a changelog" → `npx skills find changelog`
-
-### Step 4: Verify Quality Before Recommending
-
-**Do not recommend a skill based solely on search results.** Always verify:
-
-1. **Install count** — Prefer skills with 1K+ installs. Be cautious with anything under 100.
-2. **Source reputation** — Official sources (`vercel-labs`, `anthropics`, `microsoft`) are more trustworthy than unknown authors.
-3. **GitHub stars** — Check the source repository. A skill from a repo with <100 stars should be treated with skepticism.
-
-### Step 5: Present Options to the User
-
-When you find relevant skills, present them to the user with:
-
-1. The skill name and what it does
-2. The install count and source
-3. The install command they can run
-4. A link to learn more at skills.sh
-
-Example response:
-
-```
-I found a skill that might help! The "react-best-practices" skill provides
-React and Next.js performance optimization guidelines from Vercel Engineering.
-(185K installs)
-
-To install it:
-npx skills add vercel-labs/agent-skills@react-best-practices
-
-Learn more: https://skills.sh/vercel-labs/agent-skills/react-best-practices
-```
-
-### Step 6: Offer to Install
-
-If the user wants to proceed, you can install the skill for them:
-
-```bash
-npx skills add <owner/repo@skill> -g -y
-```
-
-The `-g` flag installs globally (user-level) and `-y` skips confirmation prompts.
-
-## Common Skill Categories
-
-When searching, consider these common categories:
-
-| Category        | Example Queries                          |
-| --------------- | ---------------------------------------- |
-| Web Development | react, nextjs, typescript, css, tailwind |
-| Testing         | testing, jest, playwright, e2e           |
-| DevOps          | deploy, docker, kubernetes, ci-cd        |
-| Documentation   | docs, readme, changelog, api-docs        |
-| Code Quality    | review, lint, refactor, best-practices   |
-| Design          | ui, ux, design-system, accessibility     |
-| Productivity    | workflow, automation, git                |
-
-## Tips for Effective Searches
-
-1. **Use specific keywords**: "react testing" is better than just "testing"
-2. **Try alternative terms**: If "deploy" doesn't work, try "deployment" or "ci-cd"
-3. **Check popular sources**: Many skills come from `vercel-labs/agent-skills` or `ComposioHQ/awesome-claude-skills`
-
-## When No Skills Are Found
-
-If no relevant skills exist:
-
-1. Acknowledge that no existing skill was found
-2. Offer to help with the task directly using your general capabilities
-3. Suggest the user could create their own skill with `npx skills init`
-
-Example:
-
-```
-I searched for skills related to "xyz" but didn't find any matches.
-I can still help you with this task directly! Would you like me to proceed?
-
-If this is something you do often, you could create your own skill:
-npx skills init my-xyz-skill
-```

.env.example

@@ -1,3 +1,3 @@
-VITE_API_URL=http://localhost:3000
+VITE_API_URL=http://localhost:8000/api/v1
 VITE_AMAP_KEY=
 VITE_SITE_URL=http://localhost:5173

docs/style-system.md

@@ -58,8 +58,6 @@ OpenCloud 的绿色应接近清晨的桉叶与嫩叶，而不是灰暗的苔藓
 
 容器宽度只有三个语义档位：`oc-container--narrow`、`oc-container--content`、`oc-container--wide`。不要在同类页面重复手写 `max-w-* mx-auto px-*`。
 
-Hero 同时包含左侧介绍和右侧状态卡时，使用 `oc-page-hero__split`。它会在有效视口达到 `900px` 时启用接近均衡的双栏，避免浏览器缩放到 125% 后过早堆叠；需要两栏等高时同时添加 `oc-page-hero__split--stretch`。
-
 ### 表单
 
 ```html
@@ -78,8 +76,7 @@ Hero 同时包含左侧介绍和右侧状态卡时，使用 `oc-page-hero__split
 - `oc-section-label`：详情面板中的字段标题。
 - `oc-stat-label` / `oc-stat-value`：统计数据的标签和值。
 - `oc-inset-panel`：详情中的浅色信息块。
-- `oc-panel-card` / `oc-panel-card-soft` / `oc-panel-card-xl`：普通、柔和和大型卡片的硬阴影。
-- `oc-floating-panel` / `oc-modal-shell`：浮动菜单与普通方形弹窗的共享表面。
+- `oc-panel-card` / `oc-panel-card-soft`：Naive UI 卡片的硬阴影。
 - `oc-surface`：普通 HTML 容器的标准白色表面。
 - `oc-empty-card`：空状态表面。
 

scripts/check-style-system.mjs

@@ -17,18 +17,6 @@ const deprecatedPatterns = [
     pattern: /#(?:f0fdfa|ccfbf1|99f6e4|5eead4|2dd4bf|14b8a6|0d9488|0f766e|115e59|134e4a)\b/gi,
     message: '检测到旧版高饱和 teal 色值，请改用自然绿色设计令牌。',
   },
-  {
-    pattern: /#(?:c084fc|a855f7|9333ea|7e22ce)\b/gi,
-    message: '检测到禁用的紫色硬编码，请改用 rose 或项目语义令牌。',
-  },
-  {
-    pattern: /#(?:1f2937|9ca3af)\b/gi,
-    message: '检测到默认 gray 调色板硬编码，请改用对应的 slate 色值或语义令牌。',
-  },
-  {
-    pattern: /#60a5fa\b/gi,
-    message: '检测到默认 blue-400 硬编码，请按用途改用 sky 或 amber 等项目语义色。',
-  },
   {
     pattern: /text-xs uppercase tracking-\[0\.18em\] text-slate-500/g,
     message: '重复的小节标签应使用 oc-section-label。',

skills-lock.json

@@ -1,17 +1,6 @@
 {
   "version": 1,
   "skills": {
-    "amap-jsapi-skill": {
-      "source": "clawhub.ai",
-      "sourceType": "well-known",
-      "computedHash": "289808e56798f1cd3241f9ab227d0ab41c9ec0d85d853991b30ad61be187d685"
-    },
-    "find-skills": {
-      "source": "vercel-labs/skills",
-      "sourceType": "github",
-      "skillPath": "skills/find-skills/SKILL.md",
-      "computedHash": "913b9d37d0d54047dd65222bb8c67b2bf04e3cb87dcad1729068d7a8b2c8c396"
-    },
     "git-commit": {
       "source": "github/awesome-copilot",
       "sourceType": "github",

src/components/cloud/CloudEditModal.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-import { NAlert, NButton, NIcon } from 'naive-ui'
-import { Map as MapIcon, X } from '@vicons/tabler'
+import { computed, ref, watch } from 'vue'
+import { NAlert, NButton } from 'naive-ui'
 import MapPickerModal from '@/components/cloud/MapPickerModal.vue'
 import type { CloudType } from '@/types/database'
 
 export interface CloudEditFormValue {
-  cloudCategoryId: number | null
+  cloudCategoryId: number | 'other' | null
+  customCloudType: string
   capturedAt: string
   latitude: number | null
   longitude: number | null
+  locationName: string
   description: string
   isPublic: boolean
 }
@@ -33,12 +34,16 @@ const emit = defineEmits<{
 const form = ref<CloudEditFormValue>(createEmptyForm())
 const mapPickerOpen = ref(false)
 
+const hasCoordinates = computed(() => form.value.latitude !== null || form.value.longitude !== null)
+
 function createEmptyForm(): CloudEditFormValue {
   return {
     cloudCategoryId: null,
+    customCloudType: '',
     capturedAt: '',
     latitude: null,
     longitude: null,
+    locationName: '',
     description: '',
     isPublic: true,
   }
@@ -50,7 +55,9 @@ function cloneForm(value: CloudEditFormValue | null) {
 
 function onCategoryChange(event: Event) {
   const value = (event.target as HTMLSelectElement).value
-  if (!value) {
+  if (value === 'other') {
+    form.value.cloudCategoryId = 'other'
+  } else if (!value) {
     form.value.cloudCategoryId = null
   } else {
     form.value.cloudCategoryId = Number(value)
@@ -67,6 +74,11 @@ function onLngInput(event: Event) {
   form.value.longitude = Number.isNaN(value) ? null : value
 }
 
+function clearCoordinates() {
+  form.value.latitude = null
+  form.value.longitude = null
+}
+
 function confirmMapPicker(payload: { latitude: number; longitude: number }) {
   form.value.latitude = payload.latitude
   form.value.longitude = payload.longitude
@@ -103,7 +115,7 @@ watch(() => props.initialValue, value => {
       class="fixed inset-0 z-[130] flex items-center justify-center bg-slate-950/60 px-4 py-6"
       @click="close"
     >
-      <div class="oc-modal-shell w-full max-w-2xl" @click.stop>
+      <div class="w-full max-w-2xl bg-white shadow-2xl" @click.stop>
         <div class="flex items-start justify-between border-b border-slate-200 px-6 py-5">
           <div>
             <h3 class="text-xl font-semibold text-slate-900">编辑图片信息</h3>
@@ -116,7 +128,7 @@ watch(() => props.initialValue, value => {
             title="关闭编辑窗口"
             @click="close"
           >
-            <NIcon size="20"><X /></NIcon>
+            ✕
           </button>
         </div>
 
@@ -141,11 +153,21 @@ watch(() => props.initialValue, value => {
               >
                 <option value="" disabled>请选择</option>
                 <option v-for="ct in cloudTypes" :key="ct.id" :value="ct.id">
-                  {{ ct.name }}{{ ct.genus ? '（' + ct.genus + '）' : '' }}
+                  {{ ct.name }}（{{ ct.name_en }}）
                 </option>
+                <option value="other">其他</option>
               </select>
             </div>
 
+            <div v-if="form.cloudCategoryId === 'other'">
+              <label class="oc-field-label">自定义云型</label>
+              <input
+                v-model="form.customCloudType"
+                type="text"
+                class="oc-field-control"
+              />
+            </div>
+
             <div>
               <label class="oc-field-label">拍摄时间</label>
               <input
@@ -156,7 +178,27 @@ watch(() => props.initialValue, value => {
             </div>
 
             <div>
-              <label class="oc-field-label">经纬度 <span class="oc-field-required">*</span></label>
+              <label class="oc-field-label">位置名称</label>
+              <input
+                v-model="form.locationName"
+                type="text"
+                class="oc-field-control"
+                placeholder="如：北京、成都"
+              />
+            </div>
+
+            <div>
+              <div class="mb-1 flex items-center justify-between gap-3">
+                <label class="oc-field-label mb-0">经纬度</label>
+                <button
+                  v-if="hasCoordinates"
+                  type="button"
+                  class="oc-text-button oc-text-button--muted text-xs"
+                  @click="clearCoordinates"
+                >
+                  清空
+                </button>
+              </div>
               <div class="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] gap-2">
                 <input
                   :value="form.latitude !== null ? form.latitude : ''"
@@ -181,7 +223,7 @@ watch(() => props.initialValue, value => {
                   aria-label="地图选点"
                   @click="mapPickerOpen = true"
                 >
-                  <NIcon size="20"><MapIcon /></NIcon>
+                  <span class="text-lg leading-none">🗺️</span>
                 </button>
               </div>
             </div>
@@ -191,7 +233,7 @@ watch(() => props.initialValue, value => {
               <textarea
                 v-model="form.description"
                 rows="4"
-                class="oc-field-control resize-none"
+                class="w-full resize-none border border-slate-300 px-3 py-2.5 text-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500"
                 placeholder="描述一下这张图片..."
               ></textarea>
             </div>

src/components/cloud/EncyclopediaProgressCard.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NCard, NProgress } from 'naive-ui'
+
+const props = defineProps<{
+  unlockedCount: number
+  totalCount: number
+  percent: number
+  isLoggedIn: boolean
+}>()
+
+function lerpHex(a: string, b: string, t: number) {
+  const ah = parseInt(a.slice(1), 16)
+  const bh = parseInt(b.slice(1), 16)
+  const r = Math.round(((ah >> 16) & 0xff) + (((bh >> 16) & 0xff) - ((ah >> 16) & 0xff)) * t)
+  const g = Math.round(((ah >> 8) & 0xff) + (((bh >> 8) & 0xff) - ((ah >> 8) & 0xff)) * t)
+  const bv = Math.round((ah & 0xff) + ((bh & 0xff) - (ah & 0xff)) * t)
+  return `#${((r << 16) | (g << 8) | bv).toString(16).padStart(6, '0')}`
+}
+
+function progressColor(pct: number) {
+  const t = Math.min(1, Math.max(0, pct / 100))
+  if (t <= 0.5) return lerpHex('#0ea5e9', '#f59e0b', t * 2)
+  return lerpHex('#f59e0b', '#ef4444', (t - 0.5) * 2)
+}
+
+const progressText = computed(() => `${props.unlockedCount}/${props.totalCount}`)
+const currentColor = computed(() => progressColor(props.isLoggedIn ? props.percent : 0))
+</script>
+
+<template>
+  <NCard class="oc-panel-card-soft border border-white/80 bg-white/85 shadow-sm backdrop-blur" :bordered="false">
+    <div class="flex items-center justify-between">
+      <div>
+        <p class="text-sm text-slate-500">当前进度</p>
+        <p class="mt-1 text-3xl font-bold" :style="{ color: currentColor }">{{ progressText }}</p>
+      </div>
+      <div
+        class="flex h-16 w-16 items-center justify-center border text-xl font-semibold text-white transition-colors duration-500"
+        :style="{ backgroundColor: currentColor, borderColor: currentColor }"
+      >
+        {{ isLoggedIn ? percent : 0 }}%
+      </div>
+    </div>
+
+    <NProgress
+      class="mt-5"
+      type="line"
+      :show-indicator="false"
+      :percentage="isLoggedIn ? percent : 0"
+      :color="{ stops: ['#0ea5e9', currentColor] }"
+      :height="12"
+      rail-color="#e2e8f0"
+    />
+
+    <p class="mt-4 text-sm text-slate-500">
+      <template v-if="isLoggedIn">
+        已解锁 {{ unlockedCount }} 枚徽章，还差 {{ Math.max(totalCount - unlockedCount, 0) }} 枚。
+      </template>
+      <template v-else>
+        登录后可同步你的个人图鉴进度。
+      </template>
+    </p>
+  </NCard>
+</template>

src/components/cloud/ImageDetailModal.vue

@@ -49,10 +49,10 @@ const layout = computed(() => {
     ? naturalWidth.value / naturalHeight.value
     : 4 / 3
   const maxModalWidth = viewportWidth.value > 0
-    ? Math.max(Math.min(viewportWidth.value * 0.95, viewportWidth.value - 32), 280)
+    ? Math.max(Math.min(viewportWidth.value * 0.92, viewportWidth.value - 32), 280)
     : 320
   const maxImageHeight = viewportHeight.value > 0
-    ? Math.max(viewportHeight.value * 0.9, 240)
+    ? Math.max(viewportHeight.value * 0.86, 240)
     : 360
   const imageWidth = Math.min(maxModalWidth, maxImageHeight * aspectRatio)
 
@@ -181,17 +181,17 @@ onBeforeUnmount(() => {
         @click="close"
       >
         <div
-          class="image-detail-shell relative w-fit max-w-[92vw] overflow-hidden shadow-2xl"
+          class="image-detail-shell relative w-fit max-w-[92vw] overflow-hidden rounded-[30px] shadow-2xl"
           @click.stop
         >
           <button
             type="button"
             @click="close"
-            class="oc-overlay-button absolute right-3 top-3 z-30 h-9 w-9 opacity-0 drop-shadow-[0_2px_8px_rgba(15,23,42,0.9)] transition-opacity duration-200 hover:opacity-100 focus-visible:opacity-100"
+            class="image-detail-close-button oc-overlay-button absolute right-4 top-4 z-30 h-10 w-10 rounded-full [&_svg]:stroke-[2.5]"
             aria-label="关闭大图"
             title="关闭大图"
           >
-            <NIcon size="20">
+            <NIcon size="22">
               <X />
             </NIcon>
           </button>
@@ -223,7 +223,7 @@ onBeforeUnmount(() => {
             <button
               type="button"
               @click="toggleInfo"
-              class="image-detail-info-button oc-overlay-button absolute bottom-4 right-4 z-30 h-11 w-11 drop-shadow-[0_2px_8px_rgba(15,23,42,0.9)]"
+              class="oc-overlay-button absolute bottom-4 right-4 z-30 h-11 w-11 rounded-full drop-shadow-[0_2px_8px_rgba(15,23,42,0.9)]"
               :aria-label="infoOpen ? '隐藏详细信息' : '查看详细信息'"
               :title="infoOpen ? '隐藏详细信息' : '查看详细信息'"
             >
@@ -242,7 +242,7 @@ onBeforeUnmount(() => {
                     <h2 class="text-xl font-bold text-slate-900">{{ title }}</h2>
                     <span
                       v-if="badgeLabel"
-                      class="border px-3 py-1 text-xs font-medium"
+                      class="rounded-full border px-3 py-1 text-xs font-medium"
                       :class="badgeClass"
                     >
                       {{ badgeLabel }}
@@ -254,11 +254,11 @@ onBeforeUnmount(() => {
                 <button
                   type="button"
                   @click="infoOpen = false"
-                  class="image-detail-panel-close oc-icon-button oc-icon-button--small absolute right-3 top-3"
+                  class="oc-icon-button oc-icon-button--small absolute right-3 top-3 rounded-full"
                   aria-label="隐藏详细信息"
                   title="隐藏详细信息"
                 >
-                  <NIcon size="16"><X /></NIcon>
+                  ✕
                 </button>
               </div>
 
@@ -301,7 +301,7 @@ onBeforeUnmount(() => {
   transform: translateY(10px) scale(0.97);
 }
 
-.image-detail-info-button.image-detail-info-button {
+.image-detail-close-button.image-detail-close-button {
   border-radius: 9999px !important;
 }
 </style>

src/components/cloud/MapPickerModal.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
-import { NButton, NIcon } from 'naive-ui'
-import { X } from '@vicons/tabler'
+import { NButton } from 'naive-ui'
 import { loadAMap } from '@/lib/amap'
 
 const props = withDefaults(defineProps<{
@@ -50,8 +49,6 @@ function placeMarker(longitude: number, latitude: number) {
     mapPickerMarker = new mapPickerAMap.Marker({
       position: [longitude, latitude],
       title: '拍摄位置',
-      content: '<div aria-hidden="true" class="h-4 w-4 rounded-full border-2 border-white bg-teal-500 shadow-[0_0_0_4px_rgba(52,116,93,0.24)]"></div>',
-      offset: new mapPickerAMap.Pixel(-8, -8),
     } as AMap.MarkerOptions)
     mapPickerMarker.setMap(mapPickerInstance)
   } else {
@@ -88,7 +85,6 @@ async function initializeMap() {
 
   try {
     mapPickerAMap = await loadAMap()
-    mapPickerAMap.getConfig().appname = 'amap-jsapi-skill'
 
     const hasCoordinates =
       typeof props.latitude === 'number' &&
@@ -154,7 +150,7 @@ onBeforeUnmount(() => {
       class="fixed inset-0 z-[140] flex items-center justify-center bg-slate-950/55 px-4 py-6"
       @click="close"
     >
-      <div class="oc-modal-shell w-full max-w-3xl overflow-hidden" @click.stop>
+      <div class="w-full max-w-3xl overflow-hidden bg-white shadow-2xl" @click.stop>
         <div class="flex items-start justify-between border-b border-slate-200 px-6 py-5">
           <div>
             <h3 class="text-xl font-semibold text-slate-900">{{ title }}</h3>
@@ -167,7 +163,7 @@ onBeforeUnmount(() => {
             title="关闭地图选点窗口"
             @click="close"
           >
-            <NIcon size="20"><X /></NIcon>
+            ✕
           </button>
         </div>
 

src/components/cloud/QuickUploadModal.vue

@@ -91,7 +91,9 @@ function handleRemove(id: string) {
 function onCategoryChange(event: Event) {
   if (!activeItem.value) return
   const value = (event.target as HTMLSelectElement).value
-  if (value === '') {
+  if (value === 'other') {
+    activeItem.value.cloudCategoryId = 'other'
+  } else if (value === '') {
     activeItem.value.cloudCategoryId = null
   } else {
     activeItem.value.cloudCategoryId = Number(value)
@@ -100,7 +102,6 @@ function onCategoryChange(event: Event) {
 }
 
 function formatDatetimeLocal(iso: string): string {
-  if (!iso) return ''
   const date = new Date(iso)
   const pad = (value: number) => String(value).padStart(2, '0')
   return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`
@@ -109,7 +110,8 @@ function formatDatetimeLocal(iso: string): string {
 function onCapturedAtChange(event: Event) {
   if (!activeItem.value) return
   const value = (event.target as HTMLInputElement).value
-  activeItem.value.capturedAt = value ? new Date(value).toISOString() : ''
+  if (!value) return
+  activeItem.value.capturedAt = new Date(value).toISOString()
   delete activeItem.value.errors.capturedAt
 }
 
@@ -167,7 +169,7 @@ async function handleSubmit() {
 
   const result = await uploadAll()
   if (!result.ok) {
-    errorMsg.value = result.errorMessage || '上传失败，请稍后重试'
+    errorMsg.value = '上传失败，请稍后重试'
     return
   }
 
@@ -196,7 +198,7 @@ onBeforeUnmount(() => {
       class="fixed inset-0 z-[130] flex items-center justify-center bg-slate-950/55 px-4 py-6 backdrop-blur-sm"
       @click="close"
     >
-      <div class="oc-modal-shell w-full max-w-3xl overflow-hidden" @click.stop>
+      <div class="w-full max-w-3xl overflow-hidden border border-slate-200 bg-white shadow-2xl" @click.stop>
         <div class="flex items-start justify-between border-b border-slate-200 px-5 py-4">
           <div>
             <p class="text-xs font-semibold uppercase tracking-[0.22em] text-sky-700">Quick Upload</p>
@@ -205,7 +207,7 @@ onBeforeUnmount(() => {
           </div>
           <button
             type="button"
-            class="oc-icon-button"
+            class="quick-upload-close oc-icon-button"
             aria-label="关闭快捷上传"
             title="关闭快捷上传"
             @click="close"
@@ -215,7 +217,7 @@ onBeforeUnmount(() => {
         </div>
 
         <div class="max-h-[72vh] overflow-y-auto px-5 py-5">
-          <input ref="fileInput" type="file" accept="image/jpeg,image/png,image/webp" class="hidden" @change="handleFileSelect" />
+          <input ref="fileInput" type="file" accept="image/*" class="hidden" @change="handleFileSelect" />
 
           <NAlert v-if="successMsg" type="success" :bordered="false" title="已提交审核" class="mb-4">
             图片审核通过后会出现在画廊和地图中。
@@ -226,13 +228,7 @@ onBeforeUnmount(() => {
               <span class="font-medium text-slate-700">正在上传 {{ currentItemIndex }} / {{ totalItems }}</span>
               <span class="font-medium text-sky-700">{{ overallProgress }}%</span>
             </div>
-            <NProgress
-              type="line"
-              :percentage="overallProgress"
-              :show-indicator="false"
-              color="var(--oc-color-info)"
-              rail-color="var(--oc-color-border)"
-            />
+            <NProgress type="line" :percentage="overallProgress" :show-indicator="false" color="#0ea5e9" rail-color="#dbeafe" />
           </div>
 
           <div
@@ -246,7 +242,7 @@ onBeforeUnmount(() => {
           >
             <NIcon size="42" class="text-sky-600"><CloudUpload /></NIcon>
             <p class="mt-3 text-base font-semibold text-slate-800">选择一张云图</p>
-            <p class="oc-field-help">支持 JPEG、PNG、WebP，图片不超过 20MB。</p>
+            <p class="oc-field-help">支持 JPG、PNG，可点击或拖拽上传。</p>
           </div>
 
           <template v-else-if="activeItem">
@@ -255,9 +251,9 @@ onBeforeUnmount(() => {
                 <div class="overflow-hidden border border-slate-900 bg-slate-950">
                   <img :src="activeItem.preview" alt="图片预览" class="h-56 w-full object-contain" />
                 </div>
-                <div class="mt-3 flex items-center gap-2">
-                  <button type="button" class="oc-panel-button oc-panel-button--neutral flex-1" @click="fileInput?.click()">重新选择</button>
-                  <button type="button" class="oc-panel-button oc-panel-button--danger flex-1" @click="handleRemove(activeItem.id)">移除</button>
+                <div class="mt-3 flex items-center justify-between gap-2">
+                  <button type="button" class="oc-text-button text-sm" @click="fileInput?.click()">重新选择</button>
+                  <button type="button" class="oc-text-button oc-text-button--danger text-sm" @click="handleRemove(activeItem.id)">移除</button>
                 </div>
               </div>
 
@@ -271,15 +267,23 @@ onBeforeUnmount(() => {
                   >
                     <option value="" disabled>请选择</option>
                     <option v-for="cloudType in cloudsStore.cloudTypes" :key="cloudType.id" :value="cloudType.id">
-                      {{ cloudType.name }}{{ cloudType.genus ? '（' + cloudType.genus + '）' : '' }}
+                      {{ cloudType.name }}（{{ cloudType.name_en }}）
                     </option>
+                    <option value="other">其他</option>
                   </select>
+                  <input
+                    v-if="activeItem.cloudCategoryId === 'other'"
+                    v-model="activeItem.customCloudType"
+                    type="text"
+                    placeholder="输入云的类型"
+                    class="oc-field-control mt-2"
+                    @input="activeItem.errors = {}"
+                  />
                   <p v-if="activeItem.errors.cloudCategory" class="oc-field-error">{{ activeItem.errors.cloudCategory }}</p>
-                  <p v-if="activeItem.errors.file" class="oc-field-error">{{ activeItem.errors.file }}</p>
                 </div>
 
                 <div>
-                  <label class="oc-field-label">拍摄时间</label>
+                  <label class="oc-field-label">拍摄时间 <span class="oc-field-required">*</span></label>
                   <input
                     type="datetime-local"
                     :value="formatDatetimeLocal(activeItem.capturedAt)"
@@ -290,7 +294,7 @@ onBeforeUnmount(() => {
                 </div>
 
                 <div>
-                  <label class="oc-field-label">经纬度 <span class="oc-field-required">*</span></label>
+                  <label class="oc-field-label">经纬度</label>
                   <div class="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_40px] gap-2">
                     <div>
                       <input
@@ -326,7 +330,17 @@ onBeforeUnmount(() => {
                       </NIcon>
                     </button>
                   </div>
-                  <p class="mt-1 text-xs text-slate-400">必填，可手动输入，也可以点击右侧地图按钮选点。</p>
+                  <p class="mt-1 text-xs text-slate-400">选填，可手动输入，也可以点击右侧地图按钮选点。</p>
+                </div>
+
+                <div>
+                  <label class="oc-field-label">位置名称</label>
+                  <input
+                    v-model="activeItem.locationName"
+                    type="text"
+                    placeholder="如：北京、成都"
+                    class="oc-field-control"
+                  />
                 </div>
 
                 <div>
@@ -334,11 +348,9 @@ onBeforeUnmount(() => {
                   <textarea
                     v-model="activeItem.description"
                     rows="3"
-                    maxlength="128"
                     placeholder="描述一下这张图片..."
                     class="oc-field-control resize-none"
                   ></textarea>
-                  <p v-if="activeItem.errors.description" class="oc-field-error">{{ activeItem.errors.description }}</p>
                 </div>
 
                 <label class="flex items-center justify-between gap-4 border border-slate-200 bg-slate-50 px-4 py-3">
@@ -382,3 +394,9 @@ onBeforeUnmount(() => {
     />
   </Teleport>
 </template>
+
+<style scoped>
+.quick-upload-close.quick-upload-close {
+  border-radius: 9999px !important;
+}
+</style>

src/components/layout/AppHeader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { NIcon, NSpace } from 'naive-ui'
-import { ChevronDown, Logout, Settings, Shield, User } from '@vicons/tabler'
+import { Logout, Settings, Shield, User } from '@vicons/tabler'
 import { useAuthStore } from '@/stores/auth'
 import { RouterLink, useRoute, useRouter } from 'vue-router'
 
@@ -138,7 +138,7 @@ async function handleLogout() {
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex h-16 items-center justify-between">
           <RouterLink to="/" class="flex items-center gap-3">
-            <div class="oc-brand-mark">
+            <div class="flex h-10 w-10 items-center justify-center border border-sky-200 bg-sky-100 shadow-[4px_4px_0_0_rgba(15,23,42,0.08)]">
               <svg
                 class="h-8 w-8"
                 viewBox="0 0 16 16"
@@ -170,7 +170,7 @@ async function handleLogout() {
             </div>
           </RouterLink>
 
-          <nav class="oc-panel-card hidden items-center gap-2 border border-slate-200 bg-white px-2 py-2 md:flex">
+          <nav class="hidden items-center gap-2 border border-slate-200 bg-white px-2 py-2 shadow-[6px_6px_0_0_rgba(15,23,42,0.05)] md:flex">
             <RouterLink
               to="/"
               class="oc-nav-link"
@@ -198,7 +198,7 @@ async function handleLogout() {
               class="oc-nav-link"
               :class="route.name === 'encyclopedia' || route.name === 'cloud-type' ? activeNavClass : inactiveNavClass"
             >
-              百科
+              图鉴
             </RouterLink>
           </nav>
 
@@ -228,7 +228,7 @@ async function handleLogout() {
                 <button
                   type="button"
                   class="oc-header-button oc-header-button--teal max-w-[8.5rem] gap-2 md:max-w-none"
-                  :class="route.name === 'profile' || route.name === 'profile-settings' ? 'border-teal-200 bg-teal-50/80 text-teal-800 ring-1 ring-teal-200' : ''"
+                  :class="route.name === 'profile' || route.name === 'profile-settings' ? 'border-teal-200 bg-teal-50/80 text-teal-800 ring-1 ring-teal-200 shadow-[4px_4px_0_0_rgba(52,116,93,0.16)]' : ''"
                   aria-haspopup="menu"
                   :aria-expanded="accountCardOpen"
                 >
@@ -243,7 +243,7 @@ async function handleLogout() {
                   class="absolute right-0 top-full z-50 w-72 pt-3"
                   role="menu"
                 >
-                  <div class="oc-floating-panel border border-slate-200 bg-white">
+                  <div class="border border-slate-200 bg-white shadow-[8px_8px_0_0_rgba(15,23,42,0.08)]">
                     <div class="border-b border-slate-200 bg-[linear-gradient(180deg,#f2faf6_0%,#ffffff_100%)] px-4 py-4">
                       <div class="flex items-center gap-3">
                         <div class="flex h-11 w-11 shrink-0 items-center justify-center border border-teal-200 bg-[linear-gradient(135deg,#eef9f3_0%,#d9efe3_100%)] text-lg font-bold text-teal-800">
@@ -362,53 +362,28 @@ async function handleLogout() {
             class="oc-nav-link shrink-0"
             :class="route.name === 'encyclopedia' || route.name === 'cloud-type' ? activeNavClass : inactiveNavClass"
           >
-            百科
+            图鉴
+          </RouterLink>
+          <RouterLink
+            v-if="!authStore.loading && authStore.isLoggedIn"
+            to="/profile"
+            class="oc-nav-link shrink-0"
+            :class="route.name === 'profile' ? activeNavClass : inactiveNavClass"
+          >
+            主页
           </RouterLink>
         </nav>
       </div>
     </header>
 
-    <Transition name="header-reveal">
-      <div
-        v-if="headerHidden"
-        class="pointer-events-none absolute inset-x-0 top-3 flex justify-center"
-      >
-        <button
-          type="button"
-          class="oc-header-button oc-header-button--neutral pointer-events-auto gap-2 bg-white/94 text-xs tracking-[0.16em] backdrop-blur"
-          @click="showHeader(true)"
-        >
-          <NIcon size="15"><ChevronDown /></NIcon>
-          <span>展开导航</span>
-        </button>
-      </div>
-    </Transition>
+    <button
+      v-if="headerHidden"
+      type="button"
+      class="absolute left-1/2 top-3 flex -translate-x-1/2 items-center gap-2 border border-slate-300 bg-white/94 px-3 py-1.5 text-xs font-medium tracking-[0.16em] text-slate-700 shadow-[4px_4px_0_0_rgba(15,23,42,0.08)] backdrop-blur transition-colors hover:border-teal-300 hover:bg-teal-50 hover:text-teal-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600"
+      @click="showHeader(true)"
+    >
+      <span>▼</span>
+      <span>展开导航</span>
+    </button>
   </div>
 </template>
-
-<style scoped>
-.header-reveal-enter-active,
-.header-reveal-leave-active {
-  transition:
-    opacity 240ms ease,
-    transform 240ms ease;
-}
-
-.header-reveal-enter-from,
-.header-reveal-leave-to {
-  opacity: 0;
-  transform: translateY(-0.75rem);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .header-reveal-enter-active,
-  .header-reveal-leave-active {
-    transition-duration: 1ms;
-  }
-
-  .header-reveal-enter-from,
-  .header-reveal-leave-to {
-    transform: none;
-  }
-}
-</style>

src/components/profile/ContributionHeatmap.vue

@@ -22,11 +22,15 @@ const props = withDefaults(defineProps<{
   cells: ContributionHeatmapCell[]
   totalCount: number
   activeDays: number
+  currentStreak: number
+  bestStreak: number
   activeDate?: string | null
   title?: string
+  subtitle?: string
 }>(), {
   activeDate: null,
   title: '上传活跃度',
+  subtitle: '按上传日期统计',
 })
 
 const emit = defineEmits<{
@@ -150,38 +154,31 @@ const visibleCells = computed(() => {
   return cells
 })
 
-const contributionQuartiles = computed(() => {
-  const counts = visibleCells.value
-    .filter(cell => cell.inRange && cell.count > 0)
-    .map(cell => cell.count)
-    .sort((a, b) => a - b)
-
-  if (!counts.length) return [0, 0, 0] as const
-
-  const percentile = (value: number) => {
-    const index = Math.ceil(counts.length * value) - 1
-    return counts[Math.max(0, index)] || 0
-  }
-
-  return [percentile(0.25), percentile(0.5), percentile(0.75)] as const
+const maxCount = computed(() => {
+  return visibleCells.value.reduce((max, cell) => Math.max(max, cell.count), 0)
 })
 
 function getLevel(count: number) {
   if (count <= 0) return 0
 
-  const [firstQuartile, secondQuartile, thirdQuartile] = contributionQuartiles.value
+  const max = Math.max(maxCount.value, 1)
+  const ratio = count / max
 
-  if (count <= firstQuartile) return 1
-  if (count <= secondQuartile) return 2
-  if (count <= thirdQuartile) return 3
-  return 4
+  if (ratio >= 0.75 || count >= 8) return 4
+  if (ratio >= 0.5 || count >= 5) return 3
+  if (ratio >= 0.25 || count >= 3) return 2
+  return 1
 }
 
 function getCellClass(cell: { count: number; inRange: boolean }) {
   if (!cell.inRange) return 'bg-transparent border-transparent'
 
   const level = getLevel(cell.count)
-  return `oc-heatmap-cell--level-${level}`
+  if (level === 0) return 'bg-zinc-100 border-zinc-200'
+  if (level === 1) return 'bg-[#e0f2fe] border-[#bae6fd]'
+  if (level === 2) return 'bg-[#7dd3fc] border-[#38bdf8]'
+  if (level === 3) return 'bg-[#0ea5e9] border-[#0284c7]'
+  return 'bg-[#0f3d63] border-[#0b2f4d]'
 }
 
 const weeks = computed(() => {
@@ -287,7 +284,7 @@ function formatMonthTooltip(monthKey: string) {
 </script>
 
 <template>
-  <div class="oc-panel-card border border-slate-200 bg-white p-6">
+  <div class="oc-panel-card border border-slate-200 bg-white p-6 shadow-sm">
     <div class="flex flex-wrap items-start justify-between gap-6">
       <div class="min-w-0 flex-1">
         <h3 class="text-2xl font-bold text-slate-900">{{ title }}</h3>
@@ -399,53 +396,12 @@ function formatMonthTooltip(monthKey: string) {
 
     <div class="mt-5 flex items-center justify-end gap-2 text-xs text-slate-500">
       <span>少</span>
-      <span class="oc-heatmap-legend-cell oc-heatmap-cell--level-0"></span>
-      <span class="oc-heatmap-legend-cell oc-heatmap-cell--level-1"></span>
-      <span class="oc-heatmap-legend-cell oc-heatmap-cell--level-2"></span>
-      <span class="oc-heatmap-legend-cell oc-heatmap-cell--level-3"></span>
-      <span class="oc-heatmap-legend-cell oc-heatmap-cell--level-4"></span>
+      <span class="h-3 w-3 border border-slate-200 bg-slate-100"></span>
+      <span class="h-3 w-3 border border-sky-200 bg-sky-100"></span>
+      <span class="h-3 w-3 border border-sky-400 bg-sky-300"></span>
+      <span class="h-3 w-3 border border-teal-600 bg-teal-500"></span>
+      <span class="h-3 w-3 border border-slate-900 bg-slate-900"></span>
       <span>多</span>
     </div>
   </div>
 </template>
-
-<style scoped>
-.oc-heatmap-cell,
-.oc-heatmap-legend-cell {
-  transition:
-    background-color var(--oc-duration-fast) var(--oc-ease-standard),
-    border-color var(--oc-duration-fast) var(--oc-ease-standard),
-    transform var(--oc-duration-fast) var(--oc-ease-standard);
-}
-
-.oc-heatmap-legend-cell {
-  width: 0.75rem;
-  height: 0.75rem;
-  border-width: 1px;
-}
-
-.oc-heatmap-cell--level-0 {
-  background: var(--oc-heatmap-empty);
-  border-color: var(--oc-heatmap-empty-border);
-}
-
-.oc-heatmap-cell--level-1 {
-  background: var(--oc-heatmap-level-1);
-  border-color: var(--oc-heatmap-level-1-border);
-}
-
-.oc-heatmap-cell--level-2 {
-  background: var(--oc-heatmap-level-2);
-  border-color: var(--oc-heatmap-level-2-border);
-}
-
-.oc-heatmap-cell--level-3 {
-  background: var(--oc-heatmap-level-3);
-  border-color: var(--oc-heatmap-level-3-border);
-}
-
-.oc-heatmap-cell--level-4 {
-  background: var(--oc-heatmap-level-4);
-  border-color: var(--oc-heatmap-level-4-border);
-}
-</style>

src/composables/useUpload.ts

@@ -3,12 +3,15 @@ import { apiRequest } from '@/lib/api'
 import { useAuthStore } from '@/stores/auth'
 import { useProfileStore } from '@/stores/profile'
 import type { CloudCreateResponse } from '@/types/api'
+import type { CloudType } from '@/types/database'
 
 export interface UploadItem {
   id: string
   file: File
   preview: string
-  cloudCategoryId: number | null
+  cloudCategoryId: number | 'other' | null
+  customCloudType: string
+  locationName: string
   description: string
   isHidden: boolean
   latitude: number | null
@@ -17,9 +20,17 @@ export interface UploadItem {
   errors: Record<string, string>
 }
 
+export interface UnlockedBadge {
+  cloudTypeId: number
+  cloudName: string
+  cloudNameEn: string
+  rarity: CloudType['rarity']
+  unlockedAt: string
+}
+
 export interface UploadResult {
   ok: boolean
-  errorMessage?: string
+  unlockedBadges: UnlockedBadge[]
 }
 
 let nextId = 0
@@ -35,7 +46,7 @@ function readFileAsArrayBuffer(file: File): Promise<ArrayBuffer> {
 
 function extractExifDate(buffer: ArrayBuffer): string | null {
   const view = new DataView(buffer)
-  if (view.byteLength < 4 || view.getUint16(0, false) !== 0xffd8) return null
+  if (view.getUint16(0, false) !== 0xffd8) return null
 
   let offset = 2
   while (offset < view.byteLength - 2) {
@@ -78,8 +89,8 @@ function extractExifDate(buffer: ArrayBuffer): string | null {
   return null
 }
 
-function appendOptional(form: FormData, key: string, value: string) {
-  if (value.trim()) form.append(key, value.trim())
+function appendOptional(form: FormData, key: string, value: string | number | null) {
+  if (value !== null && value !== '') form.append(key, String(value))
 }
 
 export function useUpload() {
@@ -92,13 +103,14 @@ export function useUpload() {
   const totalItems = ref(0)
 
   async function addFiles(files: File[]) {
-    const imageFiles = files.filter(file => ['image/jpeg', 'image/png', 'image/webp'].includes(file.type))
+    const imageFiles = files.filter(file => file.type.startsWith('image/'))
     for (const file of imageFiles) {
-      let capturedAt = ''
+      let capturedAt = new Date().toISOString()
       try {
-        capturedAt = extractExifDate(await readFileAsArrayBuffer(file)) || ''
+        const exifDate = extractExifDate(await readFileAsArrayBuffer(file))
+        if (exifDate) capturedAt = exifDate
       } catch {
-        capturedAt = ''
+        // 无 EXIF 时使用当前时间。
       }
 
       items.value.push({
@@ -106,6 +118,8 @@ export function useUpload() {
         file,
         preview: URL.createObjectURL(file),
         cloudCategoryId: null,
+        customCloudType: '',
+        locationName: '',
         description: '',
         isHidden: false,
         latitude: null,
@@ -131,24 +145,15 @@ export function useUpload() {
   function validateItem(item: UploadItem) {
     const errors: Record<string, string> = {}
     if (!item.cloudCategoryId) errors.cloudCategory = '请选择类别'
-    if (item.file.size === 0) errors.file = '图片文件为空'
-    if (item.file.size > 20 * 1024 * 1024) errors.file = '图片不能超过 20MB'
-    if (!['image/jpeg', 'image/png', 'image/webp'].includes(item.file.type)) {
-      errors.file = '仅支持 JPEG、PNG、WebP 格式'
+    if (item.cloudCategoryId === 'other' && !item.customCloudType.trim()) {
+      errors.cloudCategory = '请输入自定义云型名称'
     }
+    if (!item.capturedAt) errors.capturedAt = '请选择拍摄时间'
 
-    if (item.latitude === null || Number.isNaN(item.latitude)) {
-      errors.latitude = '请填写纬度'
-    } else if (item.latitude < -90 || item.latitude > 90) {
-      errors.latitude = '纬度范围为 -90 到 90'
-    }
-    if (item.longitude === null || Number.isNaN(item.longitude)) {
-      errors.longitude = '请填写经度'
-    } else if (item.longitude < -180 || item.longitude > 180) {
-      errors.longitude = '经度范围为 -180 到 180'
-    }
-    if (item.description.trim().length > 128) errors.description = '图片描述不能超过 128 个字符'
-
+    const hasLat = typeof item.latitude === 'number' && !isNaN(item.latitude)
+    const hasLng = typeof item.longitude === 'number' && !isNaN(item.longitude)
+    if (hasLat && !hasLng) errors.longitude = '经纬度必须同时填写'
+    if (hasLng && !hasLat) errors.latitude = '经纬度必须同时填写'
     item.errors = errors
     return Object.keys(errors).length === 0
   }
@@ -158,12 +163,13 @@ export function useUpload() {
   }
 
   async function uploadAll(): Promise<UploadResult> {
-    if (!validateAll() || !authStore.user) return { ok: false }
+    if (!validateAll() || !authStore.user) return { ok: false, unlockedBadges: [] }
 
     uploading.value = true
     totalItems.value = items.value.length
     currentItemIndex.value = 0
     overallProgress.value = 0
+    const badges = new Map<number, UnlockedBadge>()
 
     try {
       for (let index = 0; index < items.value.length; index++) {
@@ -173,28 +179,40 @@ export function useUpload() {
 
         const form = new FormData()
         form.append('image', item.file)
-        form.append('type_id', String(item.cloudCategoryId))
-        form.append('latitude', String(item.latitude))
-        form.append('longitude', String(item.longitude))
-        appendOptional(form, 'description', item.description)
+        if (item.cloudCategoryId === 'other') {
+          form.append('custom_cloud_type', item.customCloudType.trim())
+        } else {
+          form.append('cloud_type_id', String(item.cloudCategoryId))
+        }
+        appendOptional(form, 'latitude', item.latitude)
+        appendOptional(form, 'longitude', item.longitude)
+        appendOptional(form, 'location_name', item.locationName.trim())
+        appendOptional(form, 'description', item.description.trim())
         appendOptional(form, 'captured_at', item.capturedAt)
         form.append('is_hidden', String(item.isHidden))
 
-        await apiRequest<CloudCreateResponse>('/cloud', {
+        const result = await apiRequest<CloudCreateResponse>('/clouds', {
           method: 'POST',
           body: form,
         })
+        if (result.unlocked_badge) {
+          const badge = result.unlocked_badge
+          badges.set(badge.cloud_type_id, {
+            cloudTypeId: badge.cloud_type_id,
+            cloudName: badge.cloud_name,
+            cloudNameEn: badge.cloud_name_en,
+            rarity: badge.rarity,
+            unlockedAt: badge.unlocked_at,
+          })
+        }
         overallProgress.value = Math.round((index + 1) / items.value.length * 100)
       }
 
       clearAll()
       profileStore.invalidateUser(authStore.user.id)
-      return { ok: true }
-    } catch (error) {
-      return {
-        ok: false,
-        errorMessage: error instanceof Error ? error.message : '上传失败，请稍后重试',
-      }
+      return { ok: true, unlockedBadges: [...badges.values()] }
+    } catch {
+      return { ok: false, unlockedBadges: [] }
     } finally {
       uploading.value = false
     }

src/lib/amap.ts

@@ -6,7 +6,6 @@ export function loadAMap() {
     version: '2.0',
     plugins: [
       'AMap.Scale',
-      'AMap.ToolBar',
       'AMap.ControlBar',
       'AMap.Geolocation',
       'AMap.Marker',

src/lib/api.ts

@@ -1,17 +1,14 @@
-import type {
-  ApiCloud,
-  AuthUser,
-  BackendCloudInfo,
-  BackendCloudType,
-  BackendUserProfile,
-} from '@/types/api'
-import type { CloudType } from '@/types/database'
+import type { AuthResponse } from '@/types/api'
 
-const DEFAULT_API_URL = 'http://localhost:3000'
+const DEFAULT_API_URL = 'http://localhost:8000/api/v1'
 
 export const API_URL = (import.meta.env.VITE_API_URL || DEFAULT_API_URL).replace(/\/$/, '')
+export const AUTH_UPDATED_EVENT = 'opencloud:auth-updated'
 export const AUTH_EXPIRED_EVENT = 'opencloud:auth-expired'
 
+let accessToken: string | null = null
+let refreshPromise: Promise<AuthResponse> | null = null
+
 export class ApiError extends Error {
   status: number
   detail: unknown
@@ -27,8 +24,6 @@ export class ApiError extends Error {
 interface ApiRequestOptions extends Omit<RequestInit, 'body'> {
   body?: BodyInit | Record<string, unknown> | null
   auth?: boolean
-  // Kept for callers that explicitly disable retries. Cookie sessions do not
-  // use a refresh-and-retry flow, so this option is intentionally ignored.
   retry?: boolean
 }
 
@@ -41,71 +36,43 @@ function isJsonBody(body: ApiRequestOptions['body']): body is Record<string, unk
     && !(body instanceof ArrayBuffer)
 }
 
-function validationMessage(value: unknown) {
-  if (typeof value !== 'string') return ''
-
-  try {
-    const issues = JSON.parse(value) as unknown
-    if (!Array.isArray(issues)) return value
-    const messages = issues
-      .map(issue => issue && typeof issue === 'object' && 'message' in issue ? String(issue.message) : '')
+function detailToMessage(detail: unknown, fallback: string) {
+  if (typeof detail === 'string') return detail
+  if (Array.isArray(detail)) {
+    const messages = detail
+      .map(item => item && typeof item === 'object' && 'msg' in item ? String(item.msg) : '')
       .filter(Boolean)
-    return messages.join('；') || value
-  } catch {
-    return value
+    if (messages.length) return messages.join('；')
   }
-}
-
-function errorMessage(payload: unknown, fallback: string) {
-  if (!payload || typeof payload !== 'object') return fallback
-
-  if ('detail' in payload) {
-    const detail = payload.detail
-    if (typeof detail === 'string') return detail
-    if (Array.isArray(detail)) {
-      const messages = detail
-        .map(item => item && typeof item === 'object' && 'msg' in item ? String(item.msg) : '')
-        .filter(Boolean)
-      if (messages.length) return messages.join('；')
-    }
-  }
-
-  if ('error' in payload) {
-    const error = payload.error
-    if (typeof error === 'string') return error
-    if (error && typeof error === 'object' && 'message' in error) {
-      return validationMessage(error.message) || fallback
-    }
-  }
-
   return fallback
 }
 
-async function readPayload(response: Response) {
-  const text = await response.text()
-  if (!text) return undefined
-
-  const contentType = response.headers.get('content-type') || ''
-  if (!contentType.includes('json')) return text
-
+async function toApiError(response: Response) {
+  let detail: unknown
   try {
-    return JSON.parse(text) as unknown
+    const payload = await response.json() as { detail?: unknown }
+    detail = payload.detail
   } catch {
-    return text
+    detail = undefined
   }
+
+  return new ApiError(
+    detailToMessage(detail, `请求失败（${response.status}）`),
+    response.status,
+    detail,
+  )
 }
 
-async function toApiError(response: Response) {
-  const payload = await readPayload(response)
-  const fallback = typeof payload === 'string' && payload.trim()
-    ? payload.trim()
-    : `请求失败（${response.status}）`
+export function setAccessToken(token: string | null) {
+  accessToken = token
+}
 
-  return new ApiError(errorMessage(payload, fallback), response.status, payload)
+export function clearAccessToken() {
+  accessToken = null
 }
 
 async function request<T>(path: string, options: ApiRequestOptions = {}) {
-  const { body, auth = true, retry: _retry, ...requestOptions } = options
+  const { body, auth = true, retry = true, ...requestOptions } = options
   const headers = new Headers(requestOptions.headers)
   let requestBody: BodyInit | null | undefined = body as BodyInit | null | undefined
 
@@ -114,6 +81,10 @@ async function request<T>(path: string, options: ApiRequestOptions = {}) {
     requestBody = JSON.stringify(body)
   }
 
+  if (auth && accessToken) {
+    headers.set('Authorization', `Bearer ${accessToken}`)
+  }
+
   const response = await fetch(`${API_URL}${path}`, {
     ...requestOptions,
     body: requestBody,
@@ -121,77 +92,43 @@ async function request<T>(path: string, options: ApiRequestOptions = {}) {
     credentials: 'include',
   })
 
-  if (response.status === 401 && auth && typeof window !== 'undefined') {
-    window.dispatchEvent(new Event(AUTH_EXPIRED_EVENT))
+  if (response.status === 401 && auth && accessToken && retry) {
+    try {
+      const authResponse = await refreshSession()
+      window.dispatchEvent(new CustomEvent<AuthResponse>(AUTH_UPDATED_EVENT, { detail: authResponse }))
+      return request<T>(path, { ...options, retry: false })
+    } catch {
+      clearAccessToken()
+      window.dispatchEvent(new Event(AUTH_EXPIRED_EVENT))
+    }
   }
 
   if (!response.ok) throw await toApiError(response)
-  return await readPayload(response) as T
+  if (response.status === 204) return undefined as T
+
+  return response.json() as Promise<T>
 }
 
 export function apiRequest<T>(path: string, options: ApiRequestOptions = {}) {
   return request<T>(path, options)
 }
 
-export function imageUrl(id: string, variant: 'preview' | 'original' = 'preview') {
-  return `${API_URL}/image/${encodeURIComponent(id)}/${variant}`
-}
+export function refreshSession() {
+  if (!refreshPromise) {
+    refreshPromise = (async () => {
+      const response = await fetch(`${API_URL}/auth/refresh`, {
+        method: 'POST',
+        credentials: 'include',
+      })
+      if (!response.ok) throw await toApiError(response)
 
-export function toAuthUser(profile: BackendUserProfile): AuthUser {
-  return {
-    id: profile.id,
-    email: profile.email,
-    username: profile.name,
-    avatar_id: profile.avatar_id,
-    role: profile.role,
-    is_disabled: profile.is_disabled,
-    cloud_count: profile.cloud_count,
-    received_like_count: profile.received_like_count,
-    created_at: profile.created_at,
+      const authResponse = await response.json() as AuthResponse
+      setAccessToken(authResponse.access_token)
+      return authResponse
+    })().finally(() => {
+      refreshPromise = null
+    })
   }
-}
 
-export function toCloudType(row: BackendCloudType): CloudType {
-  return {
-    id: row.id,
-    name: row.name,
-    genus: row.genus || '',
-    icon_id: row.icon_id,
-    // Compatibility value for the excluded legacy admin view. Migrated pages
-    // display rarity_value directly because API.md defines no semantic mapping.
-    rarity: 'common',
-    rarity_value: row.rarity,
-    description: row.description,
-    created_at: row.created_at,
-  }
-}
-
-export function toApiCloud(row: BackendCloudInfo): ApiCloud {
-  return {
-    id: row.id,
-    user_id: row.owner.id,
-    cloud_type_id: row.type.id,
-    image_url: imageUrl(row.id, 'original'),
-    thumbnail_url: imageUrl(row.id, 'preview'),
-    latitude: row.latitude,
-    longitude: row.longitude,
-    description: row.description,
-    captured_at: row.captured_at,
-    status: row.status,
-    is_hidden: row.is_hidden,
-    created_at: row.uploaded_at,
-    updated_at: row.updated_at,
-    cloud_type: {
-      id: row.type.id,
-      name: row.type.name,
-      rarity: 'common',
-      rarity_value: row.type.rarity,
-    },
-    owner: { id: row.owner.id, username: row.owner.name },
-    cloud_type_name: row.type.name,
-    cloud_type_rarity: 'common',
-    cloud_type_rarity_value: row.type.rarity,
-    username: row.owner.name,
-    received_like_count: row.received_like_count,
-  }
+  return refreshPromise
 }

src/lib/canvas.ts

@@ -0,0 +1,37 @@
+const PATCH_FLAG = '__openCloudWillReadFrequentlyPatched__'
+
+type CanvasLikePrototype = {
+  getContext?: (contextId: string, options?: unknown) => unknown
+  [PATCH_FLAG]?: boolean
+}
+
+function patch2DContextOptions(ctor: typeof HTMLCanvasElement | typeof OffscreenCanvas | undefined) {
+  const prototype = ctor?.prototype as CanvasLikePrototype | undefined
+  if (!prototype?.getContext || prototype[PATCH_FLAG]) return
+
+  const originalGetContext = prototype.getContext
+
+  prototype.getContext = function getContextWithReadHint(contextId: string, options?: unknown) {
+    if (contextId === '2d') {
+      const nextOptions =
+        options && typeof options === 'object'
+          ? { ...options as Record<string, unknown>, willReadFrequently: true }
+          : { willReadFrequently: true }
+
+      return originalGetContext.call(this, contextId, nextOptions)
+    }
+
+    return originalGetContext.call(this, contextId, options)
+  }
+
+  prototype[PATCH_FLAG] = true
+}
+
+export function enableCanvasReadbackHint() {
+  if (typeof window === 'undefined') return
+
+  patch2DContextOptions(window.HTMLCanvasElement)
+  if (typeof window.OffscreenCanvas !== 'undefined') {
+    patch2DContextOptions(window.OffscreenCanvas)
+  }
+}

src/lib/cloudBadges.ts

@@ -0,0 +1,130 @@
+export type BadgeRarity = 'common' | 'uncommon' | 'rare'
+
+export interface CloudBadgeCardInput {
+  cloudName: string
+  cloudNameEn: string
+  unlockedAt: string
+  username: string
+  rarity: BadgeRarity
+}
+
+const rarityTheme = {
+  common: {
+    from: '#dbeafe',
+    to: '#f8fafc',
+    accent: '#0284c7',
+    shadow: 'rgba(2, 132, 199, 0.18)',
+  },
+  uncommon: {
+    from: '#fef3c7',
+    to: '#fff7ed',
+    accent: '#d97706',
+    shadow: 'rgba(217, 119, 6, 0.22)',
+  },
+  rare: {
+    from: '#fee2e2',
+    to: '#fff7ed',
+    accent: '#dc2626',
+    shadow: 'rgba(220, 38, 38, 0.22)',
+  },
+} satisfies Record<BadgeRarity, { from: string; to: string; accent: string; shadow: string }>
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+
+function makeDownloadName(name: string) {
+  return `opencloud-badge-${name}.png`
+}
+
+export async function downloadCloudBadgeCard(input: CloudBadgeCardInput) {
+  const canvas = document.createElement('canvas')
+  canvas.width = 1200
+  canvas.height = 630
+
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  const theme = rarityTheme[input.rarity]
+  const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height)
+  gradient.addColorStop(0, theme.from)
+  gradient.addColorStop(1, theme.to)
+
+  ctx.fillStyle = gradient
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+  ctx.fillStyle = 'rgba(255,255,255,0.72)'
+  ctx.beginPath()
+  ctx.arc(1010, 120, 140, 0, Math.PI * 2)
+  ctx.fill()
+
+  ctx.fillStyle = 'rgba(255,255,255,0.45)'
+  ctx.beginPath()
+  ctx.arc(160, 520, 180, 0, Math.PI * 2)
+  ctx.fill()
+
+  ctx.fillStyle = '#0f172a'
+  ctx.font = '700 44px sans-serif'
+  ctx.fillText('OpenCloud 云朵图鉴', 72, 88)
+
+  ctx.fillStyle = 'rgba(15, 23, 42, 0.62)'
+  ctx.font = '400 24px sans-serif'
+  ctx.fillText('新徽章已解锁', 72, 126)
+
+  ctx.shadowColor = theme.shadow
+  ctx.shadowBlur = 28
+  ctx.fillStyle = '#ffffff'
+  ctx.beginPath()
+  ctx.roundRect(72, 170, 1056, 380, 32)
+  ctx.fill()
+  ctx.shadowBlur = 0
+
+  ctx.fillStyle = theme.accent
+  ctx.beginPath()
+  ctx.arc(210, 360, 92, 0, Math.PI * 2)
+  ctx.fill()
+
+  ctx.fillStyle = '#ffffff'
+  ctx.font = '700 82px sans-serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.fillText(input.cloudName.slice(0, 1), 210, 360)
+
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'alphabetic'
+  ctx.fillStyle = '#0f172a'
+  ctx.font = '700 64px sans-serif'
+  ctx.fillText(input.cloudName, 340, 300)
+
+  ctx.fillStyle = 'rgba(15, 23, 42, 0.62)'
+  ctx.font = '400 30px sans-serif'
+  ctx.fillText(input.cloudNameEn, 340, 346)
+
+  ctx.fillStyle = theme.accent
+  ctx.beginPath()
+  ctx.roundRect(340, 382, 168, 48, 24)
+  ctx.fill()
+
+  ctx.fillStyle = '#ffffff'
+  ctx.font = '600 24px sans-serif'
+  ctx.fillText(input.rarity === 'common' ? '常见' : input.rarity === 'uncommon' ? '少见' : '罕见', 384, 414)
+
+  ctx.fillStyle = '#334155'
+  ctx.font = '400 28px sans-serif'
+  ctx.fillText(`解锁者：${input.username}`, 340, 476)
+  ctx.fillText(`解锁日期：${formatDate(input.unlockedAt)}`, 340, 518)
+
+  const blob = await new Promise<Blob | null>(resolve => canvas.toBlob(resolve, 'image/png'))
+  if (!blob) return
+
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = makeDownloadName(input.cloudNameEn.toLowerCase())
+  link.click()
+  URL.revokeObjectURL(url)
+}

src/lib/cloudTypes.ts

@@ -1,14 +1,14 @@
 export const CLOUD_TYPES = [
-  { id: 1, name: '积云' },
-  { id: 2, name: '层云' },
-  { id: 3, name: '卷云' },
-  { id: 4, name: '积雨云' },
-  { id: 5, name: '层积云' },
-  { id: 6, name: '高积云' },
-  { id: 7, name: '高层云' },
-  { id: 8, name: '雨层云' },
-  { id: 9, name: '卷层云' },
-  { id: 10, name: '卷积云' },
+  { id: 1, name: '积云', nameEn: 'Cumulus' },
+  { id: 2, name: '层云', nameEn: 'Stratus' },
+  { id: 3, name: '卷云', nameEn: 'Cirrus' },
+  { id: 4, name: '积雨云', nameEn: 'Cumulonimbus' },
+  { id: 5, name: '层积云', nameEn: 'Stratocumulus' },
+  { id: 6, name: '高积云', nameEn: 'Altocumulus' },
+  { id: 7, name: '高层云', nameEn: 'Altostratus' },
+  { id: 8, name: '雨层云', nameEn: 'Nimbostratus' },
+  { id: 9, name: '卷层云', nameEn: 'Cirrostratus' },
+  { id: 10, name: '卷积云', nameEn: 'Cirrocumulus' },
 ] as const
 
 export function getCloudTypeName(id: string | string[]) {

src/lib/theme.ts

@@ -18,7 +18,7 @@ export const openCloudThemeOverrides: GlobalThemeOverrides = {
     borderRadiusSmall: '0px',
     fontFamily: '"IBM Plex Sans", "Noto Sans SC", "PingFang SC", sans-serif',
     fontFamilyMono: '"IBM Plex Mono", "SFMono-Regular", monospace',
-    bodyColor: '#eef4f8',
+    bodyColor: '#f3f7fb',
     cardColor: '#ffffff',
     modalColor: '#ffffff',
     popoverColor: '#ffffff',
@@ -27,7 +27,7 @@ export const openCloudThemeOverrides: GlobalThemeOverrides = {
     textColor1: '#0f172a',
     textColor2: '#334155',
     textColor3: '#64748b',
-    textColorDisabled: 'var(--oc-color-text-disabled)',
+    textColorDisabled: '#94a3b8',
     dividerColor: '#d9e3ee',
     borderColor: '#d9e3ee',
     inputColor: '#ffffff',

src/main.ts

@@ -3,8 +3,11 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import { useAuthStore } from './stores/auth'
+import { enableCanvasReadbackHint } from './lib/canvas'
 import './style.css'
 
+enableCanvasReadbackHint()
+
 const app = createApp(App)
 const pinia = createPinia()
 app.use(pinia)

src/router/index.ts

@@ -27,12 +27,6 @@ const router = createRouter({
       component: () => import('@/views/auth/RegisterView.vue'),
       meta: { title: '注册', noindex: true },
     },
-    {
-      path: '/resend-confirmation',
-      name: 'resend-confirmation',
-      component: () => import('@/views/auth/ResendConfirmationView.vue'),
-      meta: { title: '重发验证邮件', noindex: true },
-    },
     {
       path: '/forgot-password',
       name: 'forgot-password',
@@ -40,15 +34,13 @@ const router = createRouter({
       meta: { title: '忘记密码', noindex: true },
     },
     {
-      path: '/verify-email',
-      alias: '/auth/confirm',
+      path: '/auth/confirm',
       name: 'auth-confirm',
       component: () => import('@/views/auth/AuthConfirmView.vue'),
       meta: { title: '确认邮箱', noindex: true },
     },
     {
-      path: '/reset-password',
-      alias: '/auth/reset-password',
+      path: '/auth/reset-password',
       name: 'auth-reset-password',
       component: () => import('@/views/auth/ResetPasswordView.vue'),
       meta: { title: '重置密码', noindex: true },
@@ -65,8 +57,8 @@ const router = createRouter({
       component: () => import('@/views/encyclopedia/EncyclopediaView.vue'),
       meta: {
         requiresAuth: true,
-        title: '云朵百科',
-        description: '浏览基础云属，了解云型特征和社区公开观测记录。',
+        title: '云朵图鉴',
+        description: '浏览 10 种基础云属，了解云型特征，并通过拍摄云图点亮个人图鉴。',
         noindex: true,
       },
     },
@@ -117,7 +109,7 @@ const router = createRouter({
       component: () => import('@/views/profile/ProfileView.vue'),
       meta: {
         title: '用户云图档案',
-        description: '按用户名查看用户公开分享的云图记录和拍摄时间线。',
+        description: '查看用户公开分享的云图记录、图鉴进度和拍摄时间线。',
       },
     },
     {

src/stores/auth.ts

@@ -1,92 +1,54 @@
 import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
-import { AUTH_EXPIRED_EVENT, apiRequest, toAuthUser } from '@/lib/api'
-import type { ActionResponse, BackendUserProfile, LoginResponse, RegisterResponse } from '@/types/api'
+import {
+  AUTH_EXPIRED_EVENT,
+  AUTH_UPDATED_EVENT,
+  apiRequest,
+  clearAccessToken,
+  refreshSession,
+  setAccessToken,
+} from '@/lib/api'
+import type { AuthResponse, AuthUser } from '@/types/api'
 import type { Profile } from '@/types/database'
 
 export const useAuthStore = defineStore('auth', () => {
-  const user = ref<ReturnType<typeof toAuthUser> | null>(null)
+  const user = ref<AuthUser | null>(null)
   const profile = ref<Profile | null>(null)
   const loading = ref(true)
-  let listenerAttached = false
+  let listenersAttached = false
 
   const isLoggedIn = computed(() => !!user.value)
   const isAdmin = computed(() => profile.value?.role === 'admin')
 
-  function applyProfile(backendProfile: BackendUserProfile) {
-    const normalized = toAuthUser(backendProfile)
-    user.value = normalized
-    profile.value = {
-      id: normalized.id,
-      username: normalized.username,
-      avatar_id: normalized.avatar_id,
-      role: normalized.role,
-      is_disabled: normalized.is_disabled,
-      created_at: normalized.created_at,
-    }
+  function applyAuth(auth: AuthResponse) {
+    setAccessToken(auth.access_token)
+    user.value = auth.user
+    profile.value = auth.profile
   }
 
   function clearAuth() {
+    clearAccessToken()
     user.value = null
     profile.value = null
   }
 
-  async function fetchMe() {
-    const backendProfile = await apiRequest<BackendUserProfile>('/profile/me')
-    applyProfile(backendProfile)
-  }
-
   async function login(email: string, password: string) {
-    await apiRequest<LoginResponse>('/auth/login', {
+    const auth = await apiRequest<AuthResponse>('/auth/login', {
       method: 'POST',
       auth: false,
       body: { email, password },
     })
-    await fetchMe()
+    applyAuth(auth)
   }
 
-  async function register(name: string, email: string, password: string) {
-    return await apiRequest<RegisterResponse>('/auth/register', {
+  async function register(email: string, password: string, username: string) {
+    await apiRequest('/auth/register', {
       method: 'POST',
       auth: false,
-      body: { name, email, password },
+      body: { email, password, username },
     })
   }
 
-  async function resendConfirmation(email: string) {
-    return await apiRequest<ActionResponse>('/auth/resend-confirmation', {
-      method: 'POST',
-      auth: false,
-      body: { email },
-    })
-  }
-
-  async function confirmEmail(token: string) {
-    return await apiRequest<ActionResponse>('/auth/confirm-email', {
-      method: 'POST',
-      auth: false,
-      body: { token },
-    })
-  }
-
-  async function sendPasswordReset(email: string) {
-    return await apiRequest<ActionResponse>('/auth/forgot-password', {
-      method: 'POST',
-      auth: false,
-      body: { email },
-    })
-  }
-
-  async function resetPassword(email: string, token: string, newPassword: string) {
-    const response = await apiRequest<ActionResponse>('/auth/reset-password', {
-      method: 'POST',
-      auth: false,
-      body: { email, token, new_password: newPassword },
-    })
-    clearAuth()
-    return response
-  }
-
   async function logout() {
     try {
       await apiRequest('/auth/logout', { method: 'POST', retry: false })
@@ -96,32 +58,40 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function updateUsername(username: string) {
-    const backendProfile = await apiRequest<BackendUserProfile>('/profile/me', {
+    const updatedProfile = await apiRequest<Profile>('/profiles/me', {
       method: 'PATCH',
-      body: { user_name: username },
+      body: { username },
     })
-    applyProfile(backendProfile)
+    profile.value = updatedProfile
   }
 
-  async function updatePassword(currentPassword: string, newPassword: string) {
-    await apiRequest('/auth/password', {
+  async function updatePassword(password: string) {
+    const auth = await apiRequest<AuthResponse>('/auth/password', {
       method: 'PATCH',
-      body: {
-        current_password: currentPassword,
-        new_password: newPassword,
-      },
+      body: { password },
+    })
+    applyAuth(auth)
+  }
+
+  async function sendPasswordReset(email: string) {
+    await apiRequest('/auth/forgot-password', {
+      method: 'POST',
+      auth: false,
+      body: { email },
     })
-    clearAuth()
   }
 
   async function initialize() {
-    if (!listenerAttached) {
+    if (!listenersAttached) {
+      window.addEventListener(AUTH_UPDATED_EVENT, event => {
+        applyAuth((event as CustomEvent<AuthResponse>).detail)
+      })
       window.addEventListener(AUTH_EXPIRED_EVENT, clearAuth)
-      listenerAttached = true
+      listenersAttached = true
     }
 
     try {
-      await fetchMe()
+      applyAuth(await refreshSession())
     } catch {
       clearAuth()
     } finally {
@@ -137,13 +107,10 @@ export const useAuthStore = defineStore('auth', () => {
     isAdmin,
     login,
     register,
-    resendConfirmation,
-    confirmEmail,
-    sendPasswordReset,
-    resetPassword,
     logout,
     updateUsername,
     updatePassword,
+    sendPasswordReset,
     initialize,
   }
 })

src/stores/clouds.ts

@@ -1,7 +1,6 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import { apiRequest, toCloudType } from '@/lib/api'
-import type { BackendCloudType } from '@/types/api'
+import { apiRequest } from '@/lib/api'
 import type { CloudType } from '@/types/database'
 
 export const useCloudsStore = defineStore('clouds', () => {
@@ -12,8 +11,7 @@ export const useCloudsStore = defineStore('clouds', () => {
     if (cloudTypes.value.length > 0) return
     loading.value = true
     try {
-      const rows = await apiRequest<BackendCloudType[]>('/info/cloudtype', { auth: false })
-      cloudTypes.value = rows.map(toCloudType)
+      cloudTypes.value = await apiRequest<CloudType[]>('/cloud-types', { auth: false })
     } finally {
       loading.value = false
     }

src/stores/encyclopedia.ts

@@ -1,29 +1,104 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
-import { apiRequest, toCloudType } from '@/lib/api'
-import type { BackendCloudType } from '@/types/api'
-import type { CloudType } from '@/types/database'
+import { apiRequest } from '@/lib/api'
+import { useAuthStore } from '@/stores/auth'
+import type { ApiCollection } from '@/types/api'
+import type { CloudType, UserCollection } from '@/types/database'
+
+export interface CollectionPreviewCloud {
+  id: string
+  image_url: string
+  thumbnail_url: string | null
+  captured_at: string | null
+  created_at: string
+  location_name: string | null
+}
+
+export interface CollectionEntry extends UserCollection {
+  firstCloud: CollectionPreviewCloud | null
+}
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : '图鉴收藏加载失败'
+}
 
 export const useEncyclopediaStore = defineStore('encyclopedia', () => {
+  const authStore = useAuthStore()
+
   const cloudTypes = ref<CloudType[]>([])
+  const myCollection = ref<CollectionEntry[]>([])
   const loadingCloudTypes = ref(false)
+  const loadingCollection = ref(false)
   const cloudTypesLoaded = ref(false)
+  const collectionLoadedForUserId = ref<string | null>(null)
+  const collectionError = ref('')
+
+  const collectionMap = computed(() => new Map(myCollection.value.map(item => [item.cloud_type_id, item])))
+  const unlockedCount = computed(() => myCollection.value.length)
+  const unlockProgress = computed(() => `${unlockedCount.value}/${cloudTypes.value.length || 10}`)
+  const unlockPercent = computed(() => cloudTypes.value.length
+    ? Math.round(unlockedCount.value / cloudTypes.value.length * 100)
+    : 0)
 
   async function fetchCloudTypes(force = false) {
     if (cloudTypesLoaded.value && !force) return
     loadingCloudTypes.value = true
     try {
-      const rows = await apiRequest<BackendCloudType[]>('/info/cloudtype', { auth: false })
-      cloudTypes.value = rows.map(toCloudType)
+      cloudTypes.value = await apiRequest<CloudType[]>('/cloud-types', { auth: false })
       cloudTypesLoaded.value = true
     } finally {
       loadingCloudTypes.value = false
     }
   }
 
+  async function fetchMyCollection(force = false) {
+    const userId = authStore.user?.id ?? null
+    if (!userId) {
+      myCollection.value = []
+      collectionLoadedForUserId.value = null
+      collectionError.value = ''
+      return
+    }
+    if (!force && collectionLoadedForUserId.value === userId) return
+
+    loadingCollection.value = true
+    collectionError.value = ''
+    try {
+      const rows = await apiRequest<ApiCollection[]>('/collections/me')
+      myCollection.value = rows.map(({ first_cloud, cloud_type: _cloudType, ...collection }) => ({
+        ...collection,
+        firstCloud: first_cloud,
+      }))
+      collectionLoadedForUserId.value = userId
+    } catch (error) {
+      myCollection.value = []
+      collectionLoadedForUserId.value = userId
+      collectionError.value = getErrorMessage(error)
+    } finally {
+      loadingCollection.value = false
+    }
+  }
+
+  function isUnlocked(cloudTypeId: number) {
+    return collectionMap.value.has(cloudTypeId)
+  }
+
+  function getCollectionEntry(cloudTypeId: number) {
+    return collectionMap.value.get(cloudTypeId) ?? null
+  }
+
   return {
     cloudTypes,
+    myCollection,
     loadingCloudTypes,
+    loadingCollection,
+    collectionError,
+    unlockedCount,
+    unlockProgress,
+    unlockPercent,
     fetchCloudTypes,
+    fetchMyCollection,
+    isUnlocked,
+    getCollectionEntry,
   }
 })

src/stores/profile.ts

@@ -1,118 +1,107 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
-import { ApiError, apiRequest, toApiCloud } from '@/lib/api'
+import { apiRequest } from '@/lib/api'
 import { useAuthStore } from '@/stores/auth'
-import type { ActionResponse, ApiCloud, BackendCloudInfo } from '@/types/api'
-import type { Profile } from '@/types/database'
+import type { ApiCloud, ApiPage, PublicProfile } from '@/types/api'
+import type { CloudType, Profile } from '@/types/database'
 
 export interface ProfileCloudItem {
   id: string
-  cloud_type_id: number
+  cloud_type_id: number | null
+  custom_cloud_type: string | null
   image_url: string
-  thumbnail_url: string
-  latitude: number
-  longitude: number
+  thumbnail_url: string | null
+  latitude: number | null
+  longitude: number | null
+  location_name: string | null
   description: string | null
   captured_at: string | null
   created_at: string
   status: 'pending' | 'approved' | 'rejected'
   is_hidden: boolean
   cloudTypeName: string
-  cloudTypeRarity: number
-  receivedLikeCount: number
+  cloudTypeRarity: CloudType['rarity']
 }
 
 function toProfileCloud(row: ApiCloud): ProfileCloudItem {
   return {
     id: row.id,
-    cloud_type_id: row.cloud_type_id as number,
+    cloud_type_id: row.cloud_type_id,
+    custom_cloud_type: row.custom_cloud_type,
     image_url: row.image_url,
-    thumbnail_url: row.thumbnail_url as string,
-    latitude: row.latitude as number,
-    longitude: row.longitude as number,
+    thumbnail_url: row.thumbnail_url,
+    latitude: row.latitude,
+    longitude: row.longitude,
+    location_name: row.location_name,
     description: row.description,
     captured_at: row.captured_at,
     created_at: row.created_at,
     status: row.status,
     is_hidden: row.is_hidden,
-    cloudTypeName: row.cloud_type_name || '未知',
-    cloudTypeRarity: row.cloud_type_rarity_value ?? 0,
-    receivedLikeCount: row.received_like_count,
+    cloudTypeName: row.cloud_type_name || row.custom_cloud_type || '未知',
+    cloudTypeRarity: row.cloud_type_rarity || 'common',
+  }
+}
+
+function toProfile(profile: PublicProfile): Profile {
+  return {
+    ...profile,
+    role: 'user',
+    is_disabled: false,
   }
 }
 
 export const useProfileStore = defineStore('profile-page', () => {
   const authStore = useAuthStore()
-  const profilesByKey = ref<Record<string, Profile>>({})
+  const profilesById = ref<Record<string, Profile>>({})
   const cloudsByKey = ref<Record<string, ProfileCloudItem[]>>({})
   const loadingKeys = ref<Record<string, boolean>>({})
   const errorByKey = ref<Record<string, string>>({})
 
-  const makeKey = (identifier: string, isOwnProfile: boolean) => `${identifier}:${isOwnProfile ? 'own' : 'public'}`
+  const makeKey = (userId: string, isOwnProfile: boolean) => `${userId}:${isOwnProfile ? 'own' : 'public'}`
 
-  function getProfile(identifier: string | null) {
-    return identifier ? profilesByKey.value[identifier] ?? null : null
+  function getProfile(userId: string | null) {
+    return userId ? profilesById.value[userId] ?? null : null
   }
 
-  function getClouds(identifier: string | null, isOwnProfile: boolean) {
-    return identifier ? cloudsByKey.value[makeKey(identifier, isOwnProfile)] ?? [] : []
+  function getClouds(userId: string | null, isOwnProfile: boolean) {
+    return userId ? cloudsByKey.value[makeKey(userId, isOwnProfile)] ?? [] : []
   }
 
-  function getError(identifier: string | null, isOwnProfile: boolean) {
-    return identifier ? errorByKey.value[makeKey(identifier, isOwnProfile)] ?? '' : ''
+  function getError(userId: string | null, isOwnProfile: boolean) {
+    return userId ? errorByKey.value[makeKey(userId, isOwnProfile)] ?? '' : ''
   }
 
-  function isLoaded(identifier: string | null, isOwnProfile: boolean) {
-    return !!identifier && makeKey(identifier, isOwnProfile) in cloudsByKey.value
+  function isLoaded(userId: string | null, isOwnProfile: boolean) {
+    return !!userId && makeKey(userId, isOwnProfile) in cloudsByKey.value
   }
 
-  async function fetchAllPublicClouds(username: string) {
-    const rows: BackendCloudInfo[] = []
-    for (let page = 1; ; page++) {
-      const params = new URLSearchParams({
-        page: String(page),
-        page_size: '100',
-        filter: 'owner',
-        value: `@${username}`,
-      })
-      let current: BackendCloudInfo[]
-      try {
-        current = await apiRequest<BackendCloudInfo[]>(`/cloud?${params}`, { auth: false })
-      } catch (error) {
-        if (error instanceof ApiError && error.status === 404) return rows
-        throw error
-      }
-      rows.push(...current)
-      if (current.length < 100) return rows
-    }
+  async function fetchAllClouds(userId: string, isOwnProfile: boolean) {
+    const requestOptions = { auth: isOwnProfile }
+    const first = await apiRequest<ApiPage<ApiCloud>>(`/profiles/${userId}/clouds?page=1&page_size=100`, requestOptions)
+    if (first.total_pages <= 1) return first.items
+
+    const remaining = await Promise.all(
+      Array.from({ length: first.total_pages - 1 }, (_, index) =>
+        apiRequest<ApiPage<ApiCloud>>(`/profiles/${userId}/clouds?page=${index + 2}&page_size=100`, requestOptions),
+      ),
+    )
+    return [first, ...remaining].flatMap(page => page.items)
   }
 
-  async function fetchProfilePage(identifier: string, isOwnProfile: boolean, force = false) {
-    const key = makeKey(identifier, isOwnProfile)
-    if (!force && key in cloudsByKey.value && profilesByKey.value[identifier]) return
+  async function fetchProfilePage(userId: string, isOwnProfile: boolean, force = false) {
+    const key = makeKey(userId, isOwnProfile)
+    if (!force && key in cloudsByKey.value && profilesById.value[userId]) return
 
     loadingKeys.value[key] = true
     errorByKey.value[key] = ''
     try {
-      const backendRows = isOwnProfile
-        ? await apiRequest<BackendCloudInfo[]>('/profile/me/clouds')
-        : await fetchAllPublicClouds(identifier)
-      const cloudRows = backendRows.map(toApiCloud).map(toProfileCloud)
-
-      if (isOwnProfile && authStore.profile) {
-        profilesByKey.value[identifier] = authStore.profile
-      } else {
-        const owner = backendRows[0]?.owner
-        profilesByKey.value[identifier] = {
-          id: owner?.id || identifier,
-          username: owner?.name || identifier,
-          avatar_id: null,
-          role: 'user',
-          is_disabled: false,
-          created_at: '',
-        }
-      }
-      cloudsByKey.value[key] = cloudRows
+      const profilePromise = isOwnProfile && authStore.profile?.id === userId
+        ? Promise.resolve(authStore.profile)
+        : apiRequest<PublicProfile>(`/profiles/${userId}`, { auth: false }).then(toProfile)
+      const [profile, cloudRows] = await Promise.all([profilePromise, fetchAllClouds(userId, isOwnProfile)])
+      profilesById.value[userId] = profile
+      cloudsByKey.value[key] = cloudRows.map(toProfileCloud)
     } catch (error) {
       errorByKey.value[key] = error instanceof Error ? error.message : '个人主页加载失败'
       cloudsByKey.value[key] = []
@@ -121,13 +110,13 @@ export const useProfileStore = defineStore('profile-page', () => {
     }
   }
 
-  function isLoading(identifier: string | null, isOwnProfile: boolean) {
-    return !!identifier && !!loadingKeys.value[makeKey(identifier, isOwnProfile)]
+  function isLoading(userId: string | null, isOwnProfile: boolean) {
+    return !!userId && !!loadingKeys.value[makeKey(userId, isOwnProfile)]
   }
 
-  function patchCachedCloud(identifier: string, cloudId: string, patch: Partial<ProfileCloudItem>) {
+  function patchCachedCloud(userId: string, cloudId: string, patch: Partial<ProfileCloudItem>) {
     for (const isOwnProfile of [true, false]) {
-      const key = makeKey(identifier, isOwnProfile)
+      const key = makeKey(userId, isOwnProfile)
       const current = cloudsByKey.value[key]
       if (!current) continue
       cloudsByKey.value[key] = current
@@ -136,62 +125,61 @@ export const useProfileStore = defineStore('profile-page', () => {
     }
   }
 
-  function removeCachedClouds(identifier: string, cloudIds: string[]) {
-    const ids = new Set(cloudIds)
+  function removeCachedClouds(userId: string, cloudIds: string[]) {
+    const idSet = new Set(cloudIds)
     for (const isOwnProfile of [true, false]) {
-      const key = makeKey(identifier, isOwnProfile)
+      const key = makeKey(userId, isOwnProfile)
       const current = cloudsByKey.value[key]
-      if (current) cloudsByKey.value[key] = current.filter(item => !ids.has(item.id))
+      if (current) cloudsByKey.value[key] = current.filter(item => !idSet.has(item.id))
     }
   }
 
-  function invalidateUser(identifier: string) {
-    delete cloudsByKey.value[makeKey(identifier, true)]
-    delete cloudsByKey.value[makeKey(identifier, false)]
+  function invalidateUser(userId: string) {
+    delete cloudsByKey.value[makeKey(userId, true)]
+    delete cloudsByKey.value[makeKey(userId, false)]
   }
 
-  async function updateCloud(identifier: string, cloudId: string, patch: {
-    type_id: number
-    latitude: number
-    longitude: number
-    description?: string
-    captured_at?: string
+  async function updateCloud(userId: string, cloudId: string, patch: {
+    cloud_type_id: number | null
+    custom_cloud_type: string | null
+    latitude: number | null
+    longitude: number | null
+    location_name: string | null
+    description: string | null
+    captured_at: string | null
     is_hidden: boolean
   }) {
-    await apiRequest<ActionResponse>(`/cloud/${cloudId}`, {
+    const updated = toProfileCloud(await apiRequest<ApiCloud>(`/clouds/${cloudId}`, {
       method: 'PATCH',
       body: patch,
-    })
-    const updated = toProfileCloud(toApiCloud(await apiRequest<BackendCloudInfo>(`/cloud/${cloudId}`)))
-    patchCachedCloud(identifier, cloudId, updated)
+    }))
+    patchCachedCloud(userId, cloudId, updated)
     return updated
   }
 
-  async function updateCloudVisibility(identifier: string, cloudId: string, isHidden: boolean) {
-    await apiRequest<ActionResponse>(`/cloud/${cloudId}`, {
+  async function updateCloudVisibility(userId: string, cloudId: string, isHidden: boolean) {
+    await apiRequest<ApiCloud>(`/clouds/${cloudId}`, {
       method: 'PATCH',
       body: { is_hidden: isHidden },
     })
-    patchCachedCloud(identifier, cloudId, { is_hidden: isHidden })
+    patchCachedCloud(userId, cloudId, { is_hidden: isHidden })
   }
 
-  async function deleteClouds(identifier: string, cloudIds: string[]) {
+  async function deleteClouds(userId: string, cloudIds: string[]) {
     if (!cloudIds.length) return 0
 
     if (cloudIds.length === 1) {
-      await apiRequest<ActionResponse>(`/cloud/${cloudIds[0]}`, { method: 'DELETE' })
+      await apiRequest(`/clouds/${cloudIds[0]}`, { method: 'DELETE' })
     } else {
       for (let offset = 0; offset < cloudIds.length; offset += 100) {
-        await apiRequest<ActionResponse>('/cloud', {
-          method: 'DELETE',
-          body: {
-            cloud_ids: cloudIds.slice(offset, offset + 100).map(cloudId => ({ cloud_id: cloudId })),
-          },
+        await apiRequest('/clouds/batch-delete', {
+          method: 'POST',
+          body: { ids: cloudIds.slice(offset, offset + 100) },
         })
       }
     }
 
-    removeCachedClouds(identifier, cloudIds)
+    removeCachedClouds(userId, cloudIds)
     return cloudIds.length
   }
 

src/styles/components.css

@@ -40,21 +40,6 @@
     @apply py-10;
   }
 
-  .oc-page-hero__split {
-    @apply grid gap-6;
-  }
-
-  @media (min-width: 900px) {
-    .oc-page-hero__split {
-      grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.9fr);
-      align-items: start;
-    }
-
-    .oc-page-hero__split--stretch {
-      align-items: stretch;
-    }
-  }
-
   .oc-page-content {
     @apply py-8;
   }
@@ -71,11 +56,6 @@
     @apply mt-4 max-w-2xl text-sm leading-7 text-slate-600;
   }
 
-  .oc-brand-mark {
-    @apply flex h-10 w-10 items-center justify-center border border-sky-200 bg-sky-100;
-    box-shadow: var(--oc-shadow-sm);
-  }
-
   /* Reusable text hierarchy */
   .oc-section-label {
     @apply text-xs uppercase tracking-[0.18em] text-slate-500;
@@ -119,14 +99,6 @@
     box-shadow: var(--oc-shadow-md) !important;
   }
 
-  .oc-panel-card-xl {
-    box-shadow: var(--oc-shadow-xl) !important;
-  }
-
-  .oc-floating-panel {
-    box-shadow: var(--oc-shadow-lg);
-  }
-
   .oc-panel-card-soft {
     box-shadow: 6px 6px 0 0 rgb(15 23 42 / 4%) !important;
   }
@@ -140,11 +112,6 @@
     box-shadow: var(--oc-shadow-md);
   }
 
-  .oc-modal-shell {
-    @apply border border-slate-200 bg-white;
-    box-shadow: var(--oc-shadow-xl);
-  }
-
   .oc-inset-panel {
     @apply border border-slate-200 bg-slate-50 p-4;
   }
@@ -360,19 +327,6 @@
     @apply outline-none ring-2 ring-sky-600 ring-offset-2;
   }
 
-  .oc-interactive-card {
-    box-shadow: var(--oc-shadow-md);
-  }
-
-  .oc-interactive-card:hover {
-    box-shadow: var(--oc-shadow-lg);
-  }
-
-  .oc-interactive-card--selected {
-    @apply border-sky-500;
-    box-shadow: var(--oc-shadow-sky) !important;
-  }
-
   .oc-interactive-row {
     transition:
       background-color var(--oc-duration-fast) var(--oc-ease-standard),
@@ -453,7 +407,7 @@
   .oc-panel-button.n-button.n-button--disabled {
     border-color: rgb(226 232 240) !important;
     background: rgb(241 245 249) !important;
-    color: var(--oc-color-text-disabled) !important;
+    color: rgb(148 163 184) !important;
     box-shadow: none !important;
     opacity: 0.72;
     transform: none !important;

src/styles/tokens.css

@@ -43,7 +43,6 @@
   --oc-color-text: #0f172a;
   --oc-color-text-secondary: #334155;
   --oc-color-text-muted: #64748b;
-  --oc-color-text-disabled: #94a3b8;
   --oc-color-border: #d9e3ee;
   --oc-color-primary: #34745d;
   --oc-color-primary-hover: #2d5f4e;
@@ -54,18 +53,6 @@
   --oc-color-danger: #dc2626;
   --oc-color-selection: rgb(52 116 93 / 20%);
 
-  /* Contribution heatmap: no activity + GitHub-style contribution quartiles. */
-  --oc-heatmap-empty: #f1f5f9;
-  --oc-heatmap-empty-border: #d9e3ee;
-  --oc-heatmap-level-1: #ddf2e6;
-  --oc-heatmap-level-1-border: #bce4cf;
-  --oc-heatmap-level-2: #8fceb0;
-  --oc-heatmap-level-2-border: #60b18d;
-  --oc-heatmap-level-3: #438f71;
-  --oc-heatmap-level-3-border: #34745d;
-  --oc-heatmap-level-4: #274c40;
-  --oc-heatmap-level-4-border: #213e35;
-
   --oc-gradient-canvas:
     radial-gradient(circle at top left, rgb(52 116 93 / 11%), transparent 28%),
     linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
@@ -83,7 +70,6 @@
   --oc-shadow-sky: 4px 4px 0 0 rgb(14 165 233 / 14%);
   --oc-shadow-primary: 4px 4px 0 0 rgb(52 116 93 / 14%);
   --oc-shadow-primary-hover: 5px 5px 0 0 rgb(52 116 93 / 20%);
-  --oc-shadow-amber: 5px 5px 0 0 rgb(245 158 11 / 12%);
   --oc-shadow-teal: var(--oc-shadow-primary);
 
   --oc-duration-fast: 160ms;

src/types/api.ts

@@ -1,84 +1,45 @@
-import type { Cloud, CloudType, Profile } from '@/types/database'
+import type { Cloud, CloudType, Profile, UserCollection } from '@/types/database'
 
-export interface BackendUserProfile {
-  id: string
-  name: string
-  email: string
-  avatar_id: string | null
-  cloud_count: number
-  received_like_count: number
-  last_online: string | null
-  role: Profile['role']
-  is_disabled: boolean
-  created_at: string
-}
-
-export interface BackendCloudType {
-  id: number
-  name: string
-  genus: string | null
-  icon_id: string | null
-  rarity: number
-  description: string | null
-  created_at: string
-}
-
-export interface BackendCloudOwner {
-  id: string
-  name: string
-}
-
-export interface BackendCloudInfo {
-  id: string
-  owner: BackendCloudOwner
-  type: BackendCloudType
-  latitude: number
-  longitude: number
-  description: string | null
-  captured_at: string | null
-  uploaded_at: string
-  updated_at: string
-  received_like_count: number
-  status: Cloud['status']
-  is_hidden: boolean
-}
-
-export interface ActionResponse {
-  status_code: number
-  message: string
-}
-
-export interface RegisterResponse extends ActionResponse {
-  email_sent: boolean
-}
-
-export interface LoginResponse {
-  access_token: string
-}
-
-export interface CloudCreateResponse extends ActionResponse {
-  cloud_id: string
-}
-
-// Internal view model. The backend profile is normalized here so existing
-// layout/admin consumers do not need to understand the wire representation.
 export interface AuthUser {
   id: string
   email: string
-  username: string
-  avatar_id: string | null
-  role: Profile['role']
-  is_disabled: boolean
-  cloud_count: number
-  received_like_count: number
+  email_verified: boolean
   created_at: string
 }
 
+export interface AuthResponse {
+  access_token: string
+  token_type: 'bearer'
+  expires_in: number
+  user: AuthUser
+  profile: Profile
+}
+
+export interface MeResponse {
+  user: AuthUser
+  profile: Profile
+}
+
+export interface PublicProfile {
+  id: string
+  username: string
+  avatar_url: string | null
+  created_at: string
+}
+
+export interface ApiPage<T> {
+  items: T[]
+  page: number
+  page_size: number
+  total: number
+  total_pages: number
+}
+
 export interface ApiCloudTypeSummary {
   id: number
   name: string
+  name_en: string
   rarity: CloudType['rarity']
-  rarity_value: number
 }
 
 export interface ApiCloudOwner {
@@ -92,7 +53,41 @@ export interface ApiCloud extends Cloud {
   owner: ApiCloudOwner | null
   cloud_type_name: string | null
   cloud_type_rarity: CloudType['rarity'] | null
-  cloud_type_rarity_value: number | null
   username: string | null
-  received_like_count: number
+}
+
+export interface ApiCollection extends UserCollection {
+  cloud_type: ApiCloudTypeSummary
+  first_cloud: Pick<
+    ApiCloud,
+    'id' | 'image_url' | 'thumbnail_url' | 'captured_at' | 'created_at' | 'location_name'
+  > | null
+}
+
+export interface UnlockedBadge {
+  cloud_type_id: number
+  cloud_name: string
+  cloud_name_en: string
+  rarity: CloudType['rarity']
+  unlocked_at: string
+}
+
+export interface CloudCreateResponse {
+  cloud: ApiCloud
+  unlocked_badge: UnlockedBadge | null
+}
+
+export interface AdminStats {
+  users: number
+  images: number
+  today_uploads: number
+  pending: number
+  approved: number
+  rejected: number
+  hidden: number
+}
+
+export interface AdminUserItem {
+  user: AuthUser
+  profile: Profile
 }

src/types/database.ts

@@ -1,11 +1,11 @@
 export interface CloudType {
   id: number
   name: string
+  name_en: string
   genus: string
-  icon_id: string | null
   rarity: 'common' | 'uncommon' | 'rare'
-  rarity_value: number
   description: string | null
+  icon_url: string | null
   created_at: string
 }
 
@@ -13,10 +13,12 @@ export interface Cloud {
   id: string
   user_id: string
   cloud_type_id: number | null
+  custom_cloud_type: string | null
   image_url: string
   thumbnail_url: string | null
   latitude: number | null
   longitude: number | null
+  location_name: string | null
   description: string | null
   captured_at: string | null
   status: 'pending' | 'approved' | 'rejected'
@@ -27,8 +29,24 @@ export interface Cloud {
 export interface Profile {
   id: string
   username: string
-  avatar_id: string | null
+  avatar_url: string | null
   role: 'user' | 'admin'
   is_disabled: boolean
   created_at: string
 }
+
+export interface UserCollection {
+  id: string
+  user_id: string
+  cloud_type_id: number
+  first_cloud_id: string | null
+  unlocked_at: string
+}
+
+export interface Reaction {
+  id: string
+  user_id: string
+  cloud_id: string
+  emoji: string
+  created_at: string
+}

src/views/admin/AdminView.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch, type Component } from 'vue'
-import { NAlert, NButton, NEmpty, NIcon, NInput, NPopover, NSkeleton, NTag, useMessage } from 'naive-ui'
+import { NAlert, NButton, NEmpty, NIcon, NPopover, NSkeleton, NTag, useMessage } from 'naive-ui'
 import {
   Check,
   ChevronUp,
   ClipboardCheck,
   Dashboard,
+  Eye,
+  EyeOff,
   Home,
-  Key,
   LayoutSidebarLeftCollapse,
   LayoutSidebarLeftExpand,
   Logout,
@@ -23,9 +24,10 @@ import {
 import { useRouter } from 'vue-router'
 import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
 import MiniLocationMap from '@/components/cloud/MiniLocationMap.vue'
-import { apiRequest, toApiCloud, toAuthUser } from '@/lib/api'
+import { apiRequest } from '@/lib/api'
 import { useAuthStore } from '@/stores/auth'
-import type { ActionResponse, ApiCloud, AuthUser, BackendCloudInfo, BackendUserProfile } from '@/types/api'
+import type { AdminStats, AdminUserItem, ApiCloud, ApiPage } from '@/types/api'
+import type { CloudType, Profile } from '@/types/database'
 
 type AdminTab = 'dashboard' | 'review' | 'users' | 'images'
 type CloudStatus = 'pending' | 'approved' | 'rejected'
@@ -35,17 +37,19 @@ interface AdminCloud {
   id: string
   user_id: string
   cloud_type_id: number | null
+  custom_cloud_type: string | null
   image_url: string
   thumbnail_url: string | null
   latitude: number | null
   longitude: number | null
+  location_name: string | null
   description: string | null
   captured_at: string | null
   created_at: string
   status: CloudStatus
   is_hidden: boolean
   cloudTypeName: string
-  cloudTypeRarity: number
+  cloudTypeRarity: CloudType['rarity']
   username: string
 }
 
@@ -78,17 +82,19 @@ const dashboardStats = ref<DashboardStats>({
   rejected: 0,
   hidden: 0,
 })
-const users = ref<AuthUser[]>([])
+const users = ref<Profile[]>([])
 const images = ref<AdminCloud[]>([])
 const selectedReviewIds = ref<Set<string>>(new Set())
 const activeReviewId = ref<string | null>(null)
 const selectedImageIds = ref<Set<string>>(new Set())
 const imageFilter = ref<ImageFilter>('all')
 const selectedImage = ref<AdminCloud | null>(null)
-const passwordTarget = ref<AuthUser | null>(null)
-const newPassword = ref('')
-const confirmPassword = ref('')
-const passwordError = ref('')
+
+const rarityMeta = {
+  common: { label: '常见', chip: 'border-sky-200 bg-sky-100 text-sky-700' },
+  uncommon: { label: '少见', chip: 'border-amber-200 bg-amber-100 text-amber-700' },
+  rare: { label: '罕见', chip: 'border-rose-200 bg-rose-100 text-rose-700' },
+} satisfies Record<CloudType['rarity'], { label: string; chip: string }>
 
 const statusMeta = {
   pending: { label: '待审核', chip: 'border-amber-200 bg-amber-100 text-amber-700' },
@@ -99,8 +105,8 @@ const statusMeta = {
 const tabs = [
   { key: 'dashboard', label: '数据看板', description: '运行概览与内容分布', icon: Dashboard },
   { key: 'review', label: '内容审核', description: '处理待审核上传', icon: ClipboardCheck },
-  { key: 'users', label: '用户管理', description: '角色与登录密码', icon: Users },
-  { key: 'images', label: '图片管理', description: '内容审核与删除', icon: Photo },
+  { key: 'users', label: '用户管理', description: '角色与账号状态', icon: Users },
+  { key: 'images', label: '图片管理', description: '内容状态与可见性', icon: Photo },
 ] satisfies Array<{ key: AdminTab; label: string; description: string; icon: Component }>
 
 const pendingImages = computed(() => images.value.filter(item => item.status === 'pending'))
@@ -138,9 +144,7 @@ const cloudTypeStats = computed(() => {
 
 const reviewedCount = computed(() => dashboardStats.value.approved + dashboardStats.value.rejected)
 const approvalRate = computed(() => getPercentage(dashboardStats.value.approved, reviewedCount.value))
-const publicImageCount = computed(() =>
-  images.value.filter(item => item.status === 'approved' && !item.is_hidden).length,
-)
+const publicImageCount = computed(() => Math.max(0, dashboardStats.value.images - dashboardStats.value.hidden))
 const recentImages = computed(() => images.value.slice(0, 5))
 const cloudTypeMaxCount = computed(() => Math.max(1, ...cloudTypeStats.value.map(item => item.count)))
 const reviewStatusStats = computed(() => [
@@ -174,17 +178,19 @@ function toAdminCloud(row: ApiCloud): AdminCloud {
     id: row.id,
     user_id: row.user_id,
     cloud_type_id: row.cloud_type_id,
+    custom_cloud_type: row.custom_cloud_type,
     image_url: row.image_url,
     thumbnail_url: row.thumbnail_url,
     latitude: row.latitude,
     longitude: row.longitude,
+    location_name: row.location_name,
     description: row.description,
     captured_at: row.captured_at,
     created_at: row.created_at,
     status: row.status,
     is_hidden: row.is_hidden,
-    cloudTypeName: row.cloud_type_name || '未知云型',
-    cloudTypeRarity: row.cloud_type_rarity_value ?? 0,
+    cloudTypeName: row.cloud_type_name || row.custom_cloud_type || '未知云型',
+    cloudTypeRarity: row.cloud_type_rarity || 'common',
     username: row.username || '匿名用户',
   }
 }
@@ -213,42 +219,27 @@ function getErrorMessage(error: unknown, fallback: string) {
   return error instanceof Error ? error.message : fallback
 }
 
-function syncDashboardStats() {
-  const now = new Date()
-  const isToday = (value: string) => {
-    const date = new Date(value)
-    return date.getFullYear() === now.getFullYear()
-      && date.getMonth() === now.getMonth()
-      && date.getDate() === now.getDate()
-  }
-
+async function fetchStats() {
+  const stats = await apiRequest<AdminStats>('/admin/stats')
   dashboardStats.value = {
-    users: users.value.length,
-    images: images.value.length,
-    todayUploads: images.value.filter(item => isToday(item.created_at)).length,
-    pending: images.value.filter(item => item.status === 'pending').length,
-    approved: images.value.filter(item => item.status === 'approved').length,
-    rejected: images.value.filter(item => item.status === 'rejected').length,
-    hidden: images.value.filter(item => item.is_hidden).length,
+    users: stats.users,
+    images: stats.images,
+    todayUploads: stats.today_uploads,
+    pending: stats.pending,
+    approved: stats.approved,
+    rejected: stats.rejected,
+    hidden: stats.hidden,
   }
 }
 
 async function fetchUsers() {
-  const rows = await apiRequest<BackendUserProfile[]>('/admin/users')
-  users.value = rows.map(toAuthUser)
+  const result = await apiRequest<ApiPage<AdminUserItem>>('/admin/users?page=1&page_size=100')
+  users.value = result.items.map(item => item.profile)
 }
 
 async function fetchImages() {
-  const rows: BackendCloudInfo[] = []
-  const pageSize = 100
-
-  for (let page = 1; ; page++) {
-    const current = await apiRequest<BackendCloudInfo[]>(`/admin/clouds?page=${page}&page_size=${pageSize}`)
-    rows.push(...current)
-    if (current.length < pageSize) break
-  }
-
-  images.value = rows.map(toApiCloud).map(toAdminCloud)
+  const result = await apiRequest<ApiPage<ApiCloud>>('/admin/clouds?page=1&page_size=120')
+  images.value = result.items.map(toAdminCloud)
   selectedReviewIds.value = new Set([...selectedReviewIds.value].filter(id => images.value.some(item => item.id === id)))
   selectedImageIds.value = new Set([...selectedImageIds.value].filter(id => images.value.some(item => item.id === id)))
 }
@@ -258,8 +249,11 @@ async function loadAdminData() {
   loadError.value = ''
 
   try {
-    await Promise.all([fetchUsers(), fetchImages()])
-    syncDashboardStats()
+    await Promise.all([
+      fetchStats(),
+      fetchUsers(),
+      fetchImages(),
+    ])
   } catch (error) {
     loadError.value = error instanceof Error ? error.message : '管理后台加载失败'
   } finally {
@@ -311,13 +305,21 @@ function toggleAllFilteredImageSelection() {
   setSelectedImageIds(filteredImages.value.map(item => item.id))
 }
 
+function patchImages(ids: string[], patch: Partial<AdminCloud>) {
+  const idSet = new Set(ids)
+  images.value = images.value.map(item => (idSet.has(item.id) ? { ...item, ...patch } : item))
+  if (selectedImage.value && idSet.has(selectedImage.value.id)) {
+    selectedImage.value = { ...selectedImage.value, ...patch }
+  }
+}
+
 function chunkIds(ids: string[]) {
   return Array.from({ length: Math.ceil(ids.length / 100) }, (_, index) =>
     ids.slice(index * 100, (index + 1) * 100),
   )
 }
 
-async function updateCloudStatus(ids: string[], status: Exclude<CloudStatus, 'pending'>) {
+async function updateCloudStatus(ids: string[], status: CloudStatus) {
   if (!ids.length) return
 
   actionLoading.value = true
@@ -325,20 +327,17 @@ async function updateCloudStatus(ids: string[], status: Exclude<CloudStatus, 'pe
 
   try {
     for (const chunk of chunkIds(ids)) {
-      await apiRequest<ActionResponse>('/admin/clouds/review', {
-        method: 'POST',
-        body: {
-          cloud_ids: chunk.map(cloudId => ({ cloud_id: cloudId })),
-          status,
-        },
+      await apiRequest('/admin/clouds/status', {
+        method: 'PATCH',
+        body: { ids: chunk, status },
       })
     }
 
-    await fetchImages()
-    syncDashboardStats()
+    patchImages(ids, { status })
     setSelectedReviewIds([...selectedReviewIds.value].filter(id => !ids.includes(id)))
     setSelectedImageIds([...selectedImageIds.value].filter(id => !ids.includes(id)))
-    message.success('审核操作已完成，列表已刷新')
+    await fetchStats()
+    message.success(`已${status === 'approved' ? '通过' : '拒绝'} ${ids.length} 张图片`)
   } catch (error) {
     const text = getErrorMessage(error, '审核操作失败')
     loadError.value = text
@@ -348,6 +347,37 @@ async function updateCloudStatus(ids: string[], status: Exclude<CloudStatus, 'pe
   }
 }
 
+async function updateImageVisibility(ids: string[], isHidden: boolean) {
+  if (!ids.length) return
+
+  actionLoading.value = true
+  loadError.value = ''
+
+  try {
+    for (const chunk of chunkIds(ids)) {
+      await apiRequest('/admin/clouds/visibility', {
+        method: 'PATCH',
+        body: { ids: chunk, is_hidden: isHidden },
+      })
+    }
+
+    patchImages(ids, { is_hidden: isHidden })
+    setSelectedImageIds([...selectedImageIds.value].filter(id => !ids.includes(id)))
+    await fetchStats()
+    message.success(isHidden ? `已隐藏 ${ids.length} 张图片` : `已公开 ${ids.length} 张图片`)
+  } catch (error) {
+    const text = getErrorMessage(error, '可见性更新失败')
+    loadError.value = text
+    message.error(text)
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+async function toggleImageVisibility(cloud: AdminCloud) {
+  await updateImageVisibility([cloud.id], !cloud.is_hidden)
+}
+
 async function deleteImages(clouds: AdminCloud[]) {
   if (!clouds.length) return
 
@@ -362,33 +392,22 @@ async function deleteImages(clouds: AdminCloud[]) {
   loadError.value = ''
 
   try {
-    const deletedIds: string[] = []
-    let firstError = ''
-
-    for (const cloud of clouds) {
-      try {
-        await apiRequest<ActionResponse>(`/admin/clouds/${cloud.id}`, { method: 'DELETE' })
-        deletedIds.push(cloud.id)
-      } catch (error) {
-        firstError ||= getErrorMessage(error, '图片删除失败')
-      }
+    const idsToDelete = clouds.map(cloud => cloud.id)
+    for (const chunk of chunkIds(idsToDelete)) {
+      await apiRequest('/admin/clouds/batch-delete', {
+        method: 'POST',
+        body: { ids: chunk },
+      })
     }
 
-    await fetchImages()
-    syncDashboardStats()
-    if (selectedImage.value && deletedIds.includes(selectedImage.value.id)) {
+    images.value = images.value.filter(item => !idsToDelete.includes(item.id))
+    if (selectedImage.value && idsToDelete.includes(selectedImage.value.id)) {
       selectedImage.value = null
     }
-    setSelectedReviewIds([...selectedReviewIds.value].filter(id => !deletedIds.includes(id)))
-    setSelectedImageIds([...selectedImageIds.value].filter(id => !deletedIds.includes(id)))
-
-    if (deletedIds.length === clouds.length) {
-      message.success(clouds.length === 1 ? '图片已删除' : `已删除 ${clouds.length} 张图片`)
-    } else {
-      const text = `已删除 ${deletedIds.length} 张，${clouds.length - deletedIds.length} 张失败${firstError ? `：${firstError}` : ''}`
-      loadError.value = text
-      message.error(text)
-    }
+    setSelectedReviewIds([...selectedReviewIds.value].filter(id => !idsToDelete.includes(id)))
+    setSelectedImageIds([...selectedImageIds.value].filter(id => !idsToDelete.includes(id)))
+    await fetchStats()
+    message.success(clouds.length === 1 ? '图片已删除' : `已删除 ${clouds.length} 张图片`)
   } catch (error) {
     const text = getErrorMessage(error, '图片删除失败')
     loadError.value = text
@@ -402,7 +421,7 @@ async function deleteImage(cloud: AdminCloud) {
   await deleteImages([cloud])
 }
 
-async function updateUserRole(user: AuthUser, role: AuthUser['role']) {
+async function updateUserRole(user: Profile, role: Profile['role']) {
   if (user.id === authStore.user?.id && role !== 'admin') {
     message.warning('不能移除自己的管理员权限')
     return
@@ -412,12 +431,12 @@ async function updateUserRole(user: AuthUser, role: AuthUser['role']) {
   loadError.value = ''
 
   try {
-    await apiRequest<ActionResponse>(`/admin/users/${user.id}`, {
+    const result = await apiRequest<AdminUserItem>(`/admin/users/${user.id}`, {
       method: 'PATCH',
-      body: { user_role: role },
+      body: { role },
     })
-    users.value = users.value.map(item => item.id === user.id ? { ...item, role } : item)
-    message.success('用户角色已更新；该用户需要重新登录')
+    users.value = users.value.map(item => item.id === user.id ? result.profile : item)
+    message.success('用户角色已更新')
   } catch (error) {
     const text = getErrorMessage(error, '用户角色更新失败')
     loadError.value = text
@@ -427,42 +446,27 @@ async function updateUserRole(user: AuthUser, role: AuthUser['role']) {
   }
 }
 
-function openPasswordReset(user: AuthUser) {
-  passwordTarget.value = user
-  newPassword.value = ''
-  confirmPassword.value = ''
-  passwordError.value = ''
-}
-
-function closePasswordReset() {
-  if (actionLoading.value) return
-  passwordTarget.value = null
-}
-
-async function resetUserPassword() {
-  const user = passwordTarget.value
-  if (!user) return
-
-  passwordError.value = ''
-  if (newPassword.value.length < 8) {
-    passwordError.value = '新密码至少需要 8 位。'
-    return
-  }
-  if (newPassword.value !== confirmPassword.value) {
-    passwordError.value = '两次输入的密码不一致。'
+async function toggleUserDisabled(user: Profile) {
+  if (user.id === authStore.user?.id) {
+    message.warning('不能禁用当前登录的管理员账号')
     return
   }
 
   actionLoading.value = true
+  loadError.value = ''
+
   try {
-    await apiRequest<ActionResponse>(`/admin/users/${user.id}/password`, {
+    const nextDisabled = !user.is_disabled
+    const result = await apiRequest<AdminUserItem>(`/admin/users/${user.id}`, {
       method: 'PATCH',
-      body: { new_password: newPassword.value },
+      body: { is_disabled: nextDisabled },
     })
-    passwordTarget.value = null
-    message.success('密码已重置；该用户需要重新登录')
+    users.value = users.value.map(item => item.id === user.id ? result.profile : item)
+    message.success(nextDisabled ? '用户已禁用' : '用户已恢复')
   } catch (error) {
-    passwordError.value = getErrorMessage(error, '密码重置失败')
+    const text = getErrorMessage(error, '用户状态更新失败')
+    loadError.value = text
+    message.error(text)
   } finally {
     actionLoading.value = false
   }
@@ -498,7 +502,7 @@ onMounted(loadAdminData)
       >
         <div class="flex items-center">
           <div class="flex min-w-0 items-center gap-3">
-            <span class="admin-brand-icon flex h-10 w-10 shrink-0 items-center justify-center border border-sky-200 bg-sky-50 text-sky-800">
+            <span class="flex h-10 w-10 shrink-0 items-center justify-center border border-sky-200 bg-sky-50 text-sky-800 shadow-[3px_3px_0_0_rgba(14,165,233,0.12)]">
               <NIcon size="22"><Shield /></NIcon>
             </span>
             <span
@@ -534,7 +538,7 @@ onMounted(loadAdminData)
             type="button"
             class="group relative flex min-w-[150px] items-center gap-3 overflow-hidden border px-3 py-3 text-left transition-[background-color,border-color,color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600 focus-visible:ring-offset-2 lg:w-full lg:min-w-0"
             :class="activeTab === tab.key
-              ? 'admin-control-active border-teal-200 bg-teal-50 text-teal-900'
+              ? 'border-teal-200 bg-teal-50 text-teal-900 shadow-[3px_3px_0_0_rgba(52,116,93,0.16)]'
               : 'border-transparent bg-white text-slate-600 hover:border-slate-200 hover:bg-slate-50 hover:text-slate-950'"
             :aria-current="activeTab === tab.key ? 'page' : undefined"
             :aria-label="tab.label"
@@ -576,7 +580,7 @@ onMounted(loadAdminData)
                 type="button"
                 class="flex h-14 min-w-0 flex-1 items-center gap-3 overflow-hidden border px-3 py-2 text-left transition-[background-color,border-color,color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600 lg:w-full"
                 :class="accountMenuOpen
-                  ? 'admin-control-active border-teal-200 bg-teal-50 text-teal-800'
+                  ? 'border-teal-200 bg-teal-50 text-teal-800 shadow-[3px_3px_0_0_rgba(52,116,93,0.16)]'
                   : 'border-slate-200 bg-slate-50 text-slate-700 hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800'"
                 aria-label="打开管理员账户菜单"
                 aria-haspopup="menu"
@@ -607,7 +611,7 @@ onMounted(loadAdminData)
             </template>
 
             <div
-              class="oc-floating-panel w-64 border border-slate-200 bg-white"
+              class="w-64 border border-slate-200 bg-white shadow-[8px_8px_0_0_rgba(15,23,42,0.08)]"
               role="menu"
               aria-label="管理员账户"
             >
@@ -659,7 +663,7 @@ onMounted(loadAdminData)
           </NPopover>
           <RouterLink
             to="/"
-            class="oc-panel-button oc-panel-button--neutral flex h-[46px] shrink-0 items-center justify-start gap-3 overflow-hidden px-3 font-semibold focus-visible:ring-2 focus-visible:ring-sky-600 lg:w-full"
+            class="flex h-[46px] shrink-0 items-center justify-start gap-3 overflow-hidden border border-slate-200 bg-white px-3 text-sm font-semibold text-slate-700 shadow-[3px_3px_0_0_rgba(15,23,42,0.06)] transition-colors hover:border-sky-200 hover:bg-sky-50 hover:text-sky-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-600 lg:w-full"
             title="返回主页"
           >
             <NIcon size="20" class="shrink-0"><Home /></NIcon>
@@ -724,8 +728,8 @@ onMounted(loadAdminData)
             <div
               class="flex flex-col justify-between gap-5 border p-6 sm:flex-row sm:items-center"
               :class="dashboardStats.pending
-                ? 'admin-priority-card--pending border-amber-200 bg-[linear-gradient(135deg,#fffbeb_0%,#fff_52%,#f2faf6_100%)]'
-                : 'admin-priority-card--clear border-teal-200 bg-[linear-gradient(135deg,#f2faf6_0%,#fff_55%,#eff6ff_100%)]'"
+                ? 'border-amber-200 bg-[linear-gradient(135deg,#fffbeb_0%,#fff_52%,#f2faf6_100%)] shadow-[5px_5px_0_0_rgba(245,158,11,0.12)]'
+                : 'border-teal-200 bg-[linear-gradient(135deg,#f2faf6_0%,#fff_55%,#eff6ff_100%)] shadow-[5px_5px_0_0_rgba(52,116,93,0.16)]'"
             >
               <div class="flex items-center gap-5">
                 <div
@@ -873,9 +877,7 @@ onMounted(loadAdminData)
                 <img :src="item.thumbnail_url || item.image_url" :alt="item.cloudTypeName" class="h-11 w-13 object-cover" />
                 <span class="min-w-0">
                   <span class="block truncate text-sm font-semibold text-slate-900">{{ item.cloudTypeName }}</span>
-                  <span class="mt-0.5 block truncate text-xs text-slate-500">
-                    {{ item.username }} · {{ formatCoordinate(item.latitude) }}, {{ formatCoordinate(item.longitude) }}
-                  </span>
+                  <span class="mt-0.5 block truncate text-xs text-slate-500">{{ item.username }} · {{ item.location_name || '未填写位置' }}</span>
                 </span>
                 <span class="hidden truncate text-xs text-slate-500 sm:block">{{ formatDateTime(item.created_at) }}</span>
                 <span class="border px-2 py-1 text-xs font-medium" :class="statusMeta[item.status].chip">
@@ -983,8 +985,8 @@ onMounted(loadAdminData)
                       <p class="truncate text-sm font-semibold text-slate-900">{{ activeReviewImage.cloudTypeName }}</p>
                       <p class="mt-0.5 truncate text-xs text-slate-500">内容编号 {{ activeReviewImage.id }}</p>
                     </div>
-                    <span class="shrink-0 whitespace-nowrap border border-sky-200 bg-sky-100 px-2 py-1 text-xs font-medium text-sky-700">
-                      稀有度 {{ activeReviewImage.cloudTypeRarity }}
+                    <span class="shrink-0 whitespace-nowrap border px-2 py-1 text-xs font-medium" :class="rarityMeta[activeReviewImage.cloudTypeRarity].chip">
+                      {{ rarityMeta[activeReviewImage.cloudTypeRarity].label }}
                     </span>
                   </div>
                   <button
@@ -1046,6 +1048,10 @@ onMounted(loadAdminData)
                     <dt class="text-xs font-medium text-slate-400">上传时间</dt>
                     <dd class="mt-1 text-sm font-medium text-slate-800">{{ formatDateTime(activeReviewImage.created_at) }}</dd>
                   </div>
+                  <div class="py-3">
+                    <dt class="text-xs font-medium text-slate-400">位置名称</dt>
+                    <dd class="mt-1 text-sm font-medium text-slate-800">{{ activeReviewImage.location_name || '未填写位置名称' }}</dd>
+                  </div>
                   <div class="py-3">
                     <dt class="text-xs font-medium text-slate-400">模糊化坐标</dt>
                     <dd class="mt-1 font-mono text-xs leading-5 text-slate-700">
@@ -1103,39 +1109,26 @@ onMounted(loadAdminData)
 
         <section v-else-if="activeTab === 'users'">
           <div class="oc-panel-card overflow-hidden border border-slate-200 bg-white">
-            <div class="hidden grid-cols-[minmax(0,1.1fr)_minmax(0,0.7fr)_minmax(0,0.7fr)_minmax(0,0.9fr)_minmax(0,1.5fr)] gap-3 border-b border-slate-200 bg-slate-50 px-4 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 lg:grid">
+            <div class="grid grid-cols-[1.1fr_0.8fr_0.7fr_0.9fr_1.2fr] border-b border-slate-200 bg-slate-50 px-4 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-slate-500">
               <span>用户</span>
               <span>角色</span>
               <span>状态</span>
               <span>注册时间</span>
               <span>操作</span>
             </div>
-            <div
-              v-for="user in users"
-              :key="user.id"
-              class="grid gap-4 border-b border-slate-100 px-4 py-4 last:border-b-0 sm:grid-cols-2 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.7fr)_minmax(0,0.7fr)_minmax(0,0.9fr)_minmax(0,1.5fr)] lg:items-center lg:gap-3"
-            >
-              <div class="min-w-0 sm:col-span-2 lg:col-span-1">
+            <div v-for="user in users" :key="user.id" class="grid grid-cols-[1.1fr_0.8fr_0.7fr_0.9fr_1.2fr] items-center gap-3 border-b border-slate-100 px-4 py-4 last:border-b-0">
+              <div class="min-w-0">
                 <p class="truncate font-medium text-slate-950">{{ user.username }}</p>
-                <p class="mt-1 truncate text-xs text-slate-400">{{ user.email }}</p>
+                <p class="mt-1 truncate text-xs text-slate-400">{{ user.id }}</p>
               </div>
-              <div class="flex items-center justify-between gap-3 lg:block">
-                <span class="text-xs font-medium text-slate-400 lg:hidden">角色</span>
-                <NTag size="small" :bordered="false" :type="user.role === 'admin' ? 'success' : 'default'">
-                  {{ user.role === 'admin' ? '管理员' : '用户' }}
-                </NTag>
-              </div>
-              <div class="flex items-center justify-between gap-3 lg:block">
-                <span class="text-xs font-medium text-slate-400 lg:hidden">状态</span>
-                <NTag size="small" :bordered="false" :type="user.is_disabled ? 'error' : 'success'">
-                  {{ user.is_disabled ? '已禁用' : '正常' }}
-                </NTag>
-              </div>
-              <div class="flex items-center justify-between gap-3 text-sm text-slate-500 lg:block">
-                <span class="text-xs font-medium text-slate-400 lg:hidden">注册时间</span>
-                <span>{{ formatDateTime(user.created_at) }}</span>
-              </div>
-              <div class="flex flex-wrap gap-2 sm:col-span-2 lg:col-span-1">
+              <NTag size="small" :bordered="false" :type="user.role === 'admin' ? 'success' : 'default'">
+                {{ user.role === 'admin' ? '管理员' : '用户' }}
+              </NTag>
+              <NTag size="small" :bordered="false" :type="user.is_disabled ? 'error' : 'success'">
+                {{ user.is_disabled ? '已禁用' : '正常' }}
+              </NTag>
+              <span class="text-sm text-slate-500">{{ formatDateTime(user.created_at) }}</span>
+              <div class="flex flex-wrap gap-2">
                 <NButton
                   size="small"
                   secondary
@@ -1153,14 +1146,12 @@ onMounted(loadAdminData)
                   type="default"
                   secondary
                   strong
-                  class="oc-panel-button oc-panel-button--neutral"
+                  :class="user.is_disabled ? 'oc-panel-button oc-panel-button--teal' : 'oc-panel-button oc-panel-button--danger'"
                   :disabled="user.id === authStore.user?.id"
                   :loading="actionLoading"
-                  :title="user.id === authStore.user?.id ? '请在账号设置中修改自己的密码' : '设置新密码'"
-                  @click="openPasswordReset(user)"
+                  @click="toggleUserDisabled(user)"
                 >
-                  <template #icon><NIcon><Key /></NIcon></template>
-                  重置密码
+                  {{ user.is_disabled ? '恢复' : '禁用' }}
                 </NButton>
               </div>
             </div>
@@ -1171,7 +1162,7 @@ onMounted(loadAdminData)
           <div class="oc-panel-card mb-4 flex flex-col gap-3 border border-slate-200 bg-white p-4 md:flex-row md:items-center md:justify-between">
             <div>
               <h2 class="text-xl font-bold text-slate-950">图片管理</h2>
-              <p class="oc-field-help">共 {{ images.length }} 张图片，可调整审核状态或删除。</p>
+              <p class="oc-field-help">最近 {{ images.length }} 张图片，可调整审核状态、可见性或删除。</p>
             </div>
             <div class="flex flex-wrap gap-2">
               <select
@@ -1214,6 +1205,26 @@ onMounted(loadAdminData)
                 >
                   批量拒绝 {{ selectedManagedCount }}
                 </NButton>
+                <NButton
+                  secondary
+                  strong
+                  type="default"
+                  class="oc-panel-button oc-panel-button--amber"
+                  :loading="actionLoading"
+                  @click="updateImageVisibility(Array.from(selectedImageIds), true)"
+                >
+                  批量隐藏 {{ selectedManagedCount }}
+                </NButton>
+                <NButton
+                  secondary
+                  strong
+                  type="default"
+                  class="oc-panel-button oc-panel-button--teal"
+                  :loading="actionLoading"
+                  @click="updateImageVisibility(Array.from(selectedImageIds), false)"
+                >
+                  批量公开 {{ selectedManagedCount }}
+                </NButton>
                 <NButton
                   secondary
                   strong
@@ -1237,9 +1248,7 @@ onMounted(loadAdminData)
                 <div class="flex items-start justify-between gap-3">
                   <div class="min-w-0">
                     <p class="truncate font-semibold text-slate-950">{{ item.cloudTypeName }}</p>
-                    <p class="mt-1 truncate text-sm text-slate-500">
-                      {{ item.username }} · {{ formatCoordinate(item.latitude) }}, {{ formatCoordinate(item.longitude) }}
-                    </p>
+                    <p class="mt-1 truncate text-sm text-slate-500">{{ item.username }} · {{ item.location_name || '未填写位置' }}</p>
                   </div>
                   <div class="flex items-start gap-2">
                     <NTag size="small" :bordered="false" :class="statusMeta[item.status].chip">
@@ -1257,6 +1266,15 @@ onMounted(loadAdminData)
                   <NButton size="small" type="default" secondary strong class="oc-panel-button oc-panel-button--neutral" @click="selectedImage = item">查看</NButton>
                   <NButton size="small" type="default" secondary strong class="oc-panel-button oc-panel-button--teal" :disabled="item.status === 'approved'" :loading="actionLoading" @click="updateCloudStatus([item.id], 'approved')">通过</NButton>
                   <NButton size="small" type="default" secondary strong class="oc-panel-button oc-panel-button--danger" :disabled="item.status === 'rejected'" :loading="actionLoading" @click="updateCloudStatus([item.id], 'rejected')">拒绝</NButton>
+                  <NButton size="small" type="default" secondary strong class="oc-panel-button oc-panel-button--amber" :loading="actionLoading" @click="toggleImageVisibility(item)">
+                    <template #icon>
+                      <NIcon>
+                        <Eye v-if="item.is_hidden" />
+                        <EyeOff v-else />
+                      </NIcon>
+                    </template>
+                    {{ item.is_hidden ? '公开' : '隐藏' }}
+                  </NButton>
                   <NButton size="small" type="default" secondary strong class="oc-panel-button oc-panel-button--danger" :loading="actionLoading" @click="deleteImage(item)">
                     <template #icon><NIcon><Trash /></NIcon></template>
                     删除
@@ -1274,71 +1292,6 @@ onMounted(loadAdminData)
       </main>
     </div>
 
-    <Teleport to="body">
-      <div
-        v-if="passwordTarget"
-        class="fixed inset-0 z-[140] flex items-center justify-center bg-slate-950/60 px-4 py-6"
-        @click="closePasswordReset"
-      >
-        <form class="oc-modal-shell w-full max-w-lg" @click.stop @submit.prevent="resetUserPassword">
-          <div class="flex items-start justify-between gap-4 border-b border-slate-200 px-5 py-4 sm:px-6 sm:py-5">
-            <div class="min-w-0">
-              <p class="oc-section-label">Admin Credential</p>
-              <h3 class="mt-2 text-xl font-semibold text-slate-900">重置用户密码</h3>
-              <p class="oc-field-help truncate">@{{ passwordTarget.username }} · {{ passwordTarget.email }}</p>
-            </div>
-            <button
-              type="button"
-              class="oc-icon-button"
-              aria-label="关闭密码重置窗口"
-              title="关闭密码重置窗口"
-              @click="closePasswordReset"
-            >
-              <NIcon size="20"><X /></NIcon>
-            </button>
-          </div>
-
-          <div class="grid gap-4 px-5 py-5 sm:px-6">
-            <NAlert v-if="passwordError" type="error" :show-icon="false" :bordered="false">
-              {{ passwordError }}
-            </NAlert>
-            <div>
-              <label class="oc-field-label">新密码 <span class="oc-field-required">*</span></label>
-              <NInput
-                v-model:value="newPassword"
-                type="password"
-                show-password-on="click"
-                placeholder="至少 8 位"
-                :input-props="{ autocomplete: 'new-password', name: 'admin-new-password', required: true }"
-              />
-            </div>
-            <div>
-              <label class="oc-field-label">确认新密码 <span class="oc-field-required">*</span></label>
-              <NInput
-                v-model:value="confirmPassword"
-                type="password"
-                show-password-on="click"
-                placeholder="再次输入新密码"
-                :input-props="{ autocomplete: 'new-password', name: 'admin-confirm-new-password', required: true }"
-              />
-            </div>
-            <p class="border border-amber-200 bg-amber-50 px-3 py-2.5 text-xs leading-5 text-amber-800">
-              保存后，该用户所有设备上的现有登录状态都会立即失效。
-            </p>
-          </div>
-
-          <div class="flex items-center justify-end gap-3 border-t border-slate-200 px-5 py-4 sm:px-6">
-            <NButton type="default" secondary strong class="oc-panel-button oc-panel-button--neutral" :disabled="actionLoading" @click="closePasswordReset">
-              取消
-            </NButton>
-            <NButton attr-type="submit" type="default" secondary strong class="oc-panel-button oc-panel-button--amber" :loading="actionLoading">
-              确认重置
-            </NButton>
-          </div>
-        </form>
-      </div>
-    </Teleport>
-
     <ImageDetailModal
       v-if="selectedImage"
       :open="!!selectedImage"
@@ -1347,8 +1300,8 @@ onMounted(loadAdminData)
       :image-alt="selectedImage.cloudTypeName"
       :title="selectedImage.cloudTypeName"
       :subtitle="`上传者：${selectedImage.username}`"
-      :badge-label="`稀有度 ${selectedImage.cloudTypeRarity}`"
-      badge-class="border-sky-200 bg-sky-100 text-sky-700"
+      :badge-label="rarityMeta[selectedImage.cloudTypeRarity].label"
+      :badge-class="rarityMeta[selectedImage.cloudTypeRarity].chip"
       @close="selectedImage = null"
     >
       <div class="grid gap-4 sm:grid-cols-2">
@@ -1383,25 +1336,8 @@ onMounted(loadAdminData)
       <MiniLocationMap
         :latitude="selectedImage.latitude"
         :longitude="selectedImage.longitude"
+        :location-name="selectedImage.location_name"
       />
     </ImageDetailModal>
   </div>
 </template>
-
-<style scoped>
-.admin-brand-icon {
-  box-shadow: var(--oc-shadow-sky);
-}
-
-.admin-control-active {
-  box-shadow: var(--oc-shadow-primary);
-}
-
-.admin-priority-card--pending {
-  box-shadow: var(--oc-shadow-amber);
-}
-
-.admin-priority-card--clear {
-  box-shadow: var(--oc-shadow-primary-hover);
-}
-</style>

src/views/auth/AuthConfirmView.vue

@@ -1,73 +1,89 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { NButton, NCard, NResult, NSpin } from 'naive-ui'
-import { useAuthStore } from '@/stores/auth'
+import { apiRequest } from '@/lib/api'
 
-const authStore = useAuthStore()
 const route = useRoute()
 const router = useRouter()
+
 const state = ref<'loading' | 'success' | 'failed'>('loading')
-const error = ref('')
 const countdown = ref(5)
-const token = typeof route.query.token === 'string' ? route.query.token : ''
-let timer: ReturnType<typeof setInterval> | null = null
+let countdownTimer: ReturnType<typeof setInterval> | null = null
+const confirmationToken = typeof route.query.token === 'string' ? route.query.token : ''
 
 if (route.query.token !== undefined) {
-  window.history.replaceState(window.history.state, '', route.path)
+  window.history.replaceState(window.history.state, '', window.location.pathname)
 }
 
 function startCountdown() {
-  timer = setInterval(() => {
+  countdownTimer = setInterval(() => {
     countdown.value--
     if (countdown.value <= 0) {
-      if (timer) clearInterval(timer)
-      void router.push('/login')
+      if (countdownTimer) clearInterval(countdownTimer)
+      router.push('/login')
     }
   }, 1000)
 }
 
 onMounted(async () => {
-  if (!token) {
-    error.value = '确认链接缺少验证信息'
-    state.value = 'failed'
-    return
-  }
   try {
-    await authStore.confirmEmail(token)
+    if (!confirmationToken) {
+      state.value = 'failed'
+      return
+    }
+
+    await apiRequest('/auth/confirm-email', {
+      method: 'POST',
+      auth: false,
+      body: { token: confirmationToken },
+    })
     state.value = 'success'
     startCountdown()
-  } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : '确认链接无效或已过期'
+  } catch {
     state.value = 'failed'
   }
 })
 
-onUnmounted(() => { if (timer) clearInterval(timer) })
+onUnmounted(() => {
+  if (countdownTimer) clearInterval(countdownTimer)
+})
 </script>
 
 <template>
   <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
     <div class="mx-auto max-w-3xl">
-      <NCard class="oc-panel-card-xl">
-        <NResult v-if="state === 'success'" status="success" title="邮箱确认成功" description="现在可以使用邮箱和密码登录。">
+      <NCard class="shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
+      <template v-if="state === 'success'">
+        <NResult status="success" title="邮箱认证成功" description="你的邮箱已确认，现在可以登录了。">
           <template #footer>
             <div class="space-y-4">
-              <p class="text-sm text-slate-500">{{ countdown }} 秒后自动前往登录页面</p>
-              <RouterLink to="/login" class="no-underline"><NButton type="default" class="oc-panel-button oc-panel-button--teal">立即登录</NButton></RouterLink>
+              <p class="text-sm text-slate-500">{{ countdown }} 秒后自动跳转登录页面...</p>
+              <RouterLink to="/login" class="no-underline">
+                <NButton type="primary" class="oc-primary-button oc-primary-button--teal">立即登录</NButton>
+              </RouterLink>
             </div>
           </template>
         </NResult>
-        <NResult v-else-if="state === 'failed'" status="error" title="邮箱确认失败" :description="error">
+      </template>
+
+      <template v-else-if="state === 'failed'">
+        <NResult status="error" title="认证失败" description="邮箱确认链接无效或已过期，请重新注册。">
           <template #footer>
-            <RouterLink to="/resend-confirmation" class="no-underline"><NButton type="default" class="oc-panel-button oc-panel-button--sky">重新发送验证邮件</NButton></RouterLink>
+            <RouterLink to="/register" class="no-underline">
+              <NButton type="primary" class="oc-primary-button oc-primary-button--sky">重新注册</NButton>
+            </RouterLink>
           </template>
         </NResult>
-        <div v-else class="flex flex-col items-center justify-center py-12 text-center">
+      </template>
+
+      <template v-else>
+        <div class="flex flex-col items-center justify-center py-12 text-center">
           <NSpin size="large" />
-          <h1 class="mt-6 text-2xl font-bold text-slate-900">正在确认邮箱...</h1>
+          <h1 class="mt-6 text-2xl font-bold text-slate-900">正在验证...</h1>
           <p class="mt-2 text-slate-500">请稍候</p>
         </div>
+      </template>
       </NCard>
     </div>
   </div>

src/views/auth/ForgotPasswordView.vue

@@ -6,61 +6,123 @@ import { useAuthStore } from '@/stores/auth'
 
 const authStore = useAuthStore()
 const route = useRoute()
+
 const email = ref(typeof route.query.email === 'string' ? route.query.email : '')
 const error = ref('')
 const loading = ref(false)
 const submitted = ref(false)
 const cooldown = ref(0)
-let timer: ReturnType<typeof setInterval> | null = null
+let cooldownTimer: ReturnType<typeof setInterval> | null = null
 
-const buttonLabel = computed(() => loading.value ? '发送中...' : cooldown.value > 0 ? `重新发送（${cooldown.value}s）` : '重新发送')
+const resendButtonLabel = computed(() => {
+  if (loading.value) return '发送中...'
+  if (cooldown.value > 0) return `重新发送（${cooldown.value}s）`
+  return '重新发送'
+})
+
+function clearCooldownTimer() {
+  if (!cooldownTimer) return
+  clearInterval(cooldownTimer)
+  cooldownTimer = null
+}
 
 function startCooldown() {
-  if (timer) clearInterval(timer)
+  clearCooldownTimer()
   cooldown.value = 60
-  timer = setInterval(() => {
+  cooldownTimer = setInterval(() => {
     cooldown.value--
-    if (cooldown.value <= 0 && timer) {
-      clearInterval(timer)
-      timer = null
+    if (cooldown.value <= 0) {
+      cooldown.value = 0
+      clearCooldownTimer()
     }
   }, 1000)
 }
 
-async function submit() {
+async function handleSendResetEmail() {
   error.value = ''
-  const value = email.value.trim()
-  if (!value || value.length > 64) {
-    error.value = '请输入不超过 64 个字符的有效邮箱'
+
+  if (!email.value.trim()) {
+    error.value = '请输入需要找回密码的邮箱。'
     return
   }
+
   loading.value = true
   try {
-    await authStore.sendPasswordReset(value)
-    email.value = value
+    await authStore.sendPasswordReset(email.value.trim())
     submitted.value = true
     startCooldown()
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : '重置邮件发送失败，请稍后重试'
+    error.value = e instanceof Error ? e.message : '重置邮件发送失败，请稍后重试。'
   } finally {
     loading.value = false
   }
 }
 
-onUnmounted(() => { if (timer) clearInterval(timer) })
+async function resendResetEmail() {
+  if (cooldown.value > 0 || loading.value) {
+    return
+  }
+
+  await handleSendResetEmail()
+}
+
+onUnmounted(() => {
+  clearCooldownTimer()
+})
 </script>
 
 <template>
   <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
-    <div class="mx-auto max-w-2xl">
-      <NCard class="oc-panel-card-xl">
-        <NResult v-if="submitted" status="success" title="请求已受理" description="如果该邮箱符合条件，我们会发送密码重置邮件。">
+    <div class="mx-auto grid min-w-0 max-w-6xl gap-8 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
+      <section class="min-w-0 overflow-hidden border border-slate-200 bg-[linear-gradient(135deg,#eff6ff_0%,#ffffff_52%,#f2faf6_100%)] p-6 shadow-[10px_10px_0_0_rgba(15,23,42,0.08)] sm:p-8">
+        <p class="text-sm uppercase tracking-[0.26em] text-sky-700">Password Recovery</p>
+        <h1 class="mt-4 max-w-xl break-words text-4xl font-black leading-[1.05] text-slate-900 sm:text-5xl">
+          重新拿回你的
+          <span class="block text-sky-700">OpenCloud 账号</span>
+        </h1>
+        <p class="mt-6 max-w-lg text-base leading-8 text-slate-600">
+          输入注册邮箱后，我们会发送一封密码重置邮件。打开邮件中的链接，即可进入新的密码设置页面。
+        </p>
+        <div class="mt-8 grid gap-4 sm:grid-cols-2">
+          <div class="border border-slate-200 bg-white px-4 py-3">
+            <div class="oc-stat-label">Step 1</div>
+            <div class="mt-2 text-lg font-bold text-slate-900">发送邮件</div>
+            <div class="oc-field-help">使用注册邮箱请求重置链接</div>
+          </div>
+          <div class="border border-slate-200 bg-white px-4 py-3">
+            <div class="oc-stat-label">Step 2</div>
+            <div class="mt-2 text-lg font-bold text-slate-900">设置新密码</div>
+            <div class="oc-field-help">在专用页面完成新密码更新</div>
+          </div>
+        </div>
+      </section>
+
+      <NCard class="min-w-0 shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
+        <NResult
+          v-if="submitted"
+          status="success"
+          title="重置邮件已发送"
+          description="如果该邮箱已注册，请查收邮件中的重置链接。"
+        >
           <template #footer>
             <div class="space-y-4">
-              <p class="text-sm text-slate-500">目标邮箱：<span class="font-semibold text-slate-700">{{ email }}</span></p>
+              <p class="text-sm text-slate-500">
+                目标邮箱：
+                <span class="font-semibold text-slate-700">{{ email }}</span>
+              </p>
               <div class="flex flex-wrap justify-center gap-3">
-                <NButton type="default" class="oc-panel-button oc-panel-button--sky" :disabled="cooldown > 0" :loading="loading" @click="submit">{{ buttonLabel }}</NButton>
-                <RouterLink :to="{ path: '/login', query: { email } }" class="no-underline"><NButton type="default" class="oc-panel-button oc-panel-button--neutral">返回登录</NButton></RouterLink>
+                <NButton
+                  type="primary"
+                  class="oc-primary-button oc-primary-button--teal"
+                  :disabled="cooldown > 0"
+                  :loading="loading"
+                  @click="resendResetEmail"
+                >
+                  {{ resendButtonLabel }}
+                </NButton>
+                <RouterLink :to="{ path: '/login', query: { email } }" class="no-underline">
+                  <NButton type="default" class="oc-panel-button oc-panel-button--neutral">返回登录</NButton>
+                </RouterLink>
               </div>
             </div>
           </template>
@@ -68,18 +130,43 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
 
         <template v-else>
           <div class="mb-8">
-            <div class="text-sm uppercase tracking-[0.22em] text-slate-500">Password Recovery</div>
-            <h1 class="mt-3 text-3xl font-bold text-slate-900">忘记密码</h1>
-            <p class="mt-2 text-sm text-slate-500">输入注册邮箱，我们会发送有效期为 30 分钟的重置链接。</p>
+            <div class="text-sm uppercase tracking-[0.22em] text-slate-500">Reset Request</div>
+            <h2 class="mt-3 text-3xl font-bold text-slate-900">忘记密码</h2>
+            <p class="mt-2 text-sm text-slate-500">输入你的注册邮箱，我们会发送一封密码重置邮件。</p>
           </div>
-          <NForm @submit.prevent="submit">
+
+          <NForm @submit.prevent="handleSendResetEmail">
             <NFormItem label="邮箱">
-              <NInput v-model:value="email" maxlength="64" type="text" placeholder="your@email.com" :input-props="{ autocomplete: 'email', inputmode: 'email', name: 'email', required: true }" />
+              <NInput
+                v-model:value="email"
+                required
+                autocomplete="email"
+                placeholder="your@email.com"
+              />
             </NFormItem>
-            <NAlert v-if="error" type="error" class="mb-4">{{ error }}</NAlert>
-            <NButton attr-type="submit" type="primary" block size="large" class="oc-primary-button oc-primary-button--sky" :loading="loading">{{ loading ? '发送中...' : '发送重置邮件' }}</NButton>
+
+            <NAlert v-if="error" type="error" class="mb-4">
+              {{ error }}
+            </NAlert>
+
+            <NButton
+              attr-type="submit"
+              type="primary"
+              block
+              size="large"
+              class="oc-primary-button oc-primary-button--sky"
+              :loading="loading"
+            >
+              {{ loading ? '发送中...' : '发送重置邮件' }}
+            </NButton>
           </NForm>
-          <p class="mt-6 text-sm text-slate-500"><RouterLink :to="{ path: '/login', query: { email } }" class="font-semibold text-sky-700 hover:text-sky-800">返回登录</RouterLink></p>
+
+          <div class="mt-6 flex flex-wrap items-center justify-between gap-3 text-sm text-slate-500">
+            <p>如果你已经记起密码，可以直接返回登录。</p>
+            <RouterLink :to="{ path: '/login', query: { email } }" class="font-semibold text-sky-700 hover:text-sky-800">
+              返回登录
+            </RouterLink>
+          </div>
         </template>
       </NCard>
     </div>

src/views/auth/LoginView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { NAlert, NButton, NCard, NForm, NFormItem, NInput } from 'naive-ui'
 import { useAuthStore } from '@/stores/auth'
@@ -12,7 +12,6 @@ const email = ref(typeof route.query.email === 'string' ? route.query.email : ''
 const password = ref('')
 const error = ref('')
 const loading = ref(false)
-const needsEmailConfirmation = computed(() => error.value.includes('邮箱尚未验证'))
 
 function getSafeRedirect(value: unknown) {
   if (typeof value !== 'string' || !value.startsWith('/')) return '/'
@@ -44,7 +43,7 @@ async function handleLogin() {
 <template>
   <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
     <div class="mx-auto grid min-w-0 max-w-6xl gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-stretch">
-      <section class="oc-panel-card-xl flex min-w-0 h-full flex-col justify-between overflow-hidden border border-slate-200 bg-[linear-gradient(135deg,#f2faf6_0%,#ffffff_48%,#eff6ff_100%)] p-6 sm:p-8">
+      <section class="flex min-w-0 h-full flex-col justify-between overflow-hidden border border-slate-200 bg-[linear-gradient(135deg,#f2faf6_0%,#ffffff_48%,#eff6ff_100%)] p-6 shadow-[10px_10px_0_0_rgba(15,23,42,0.08)] sm:p-8">
         <div>
           <p class="text-sm uppercase tracking-[0.26em] text-teal-700">Sky Log In</p>
           <h1 class="mt-4 max-w-xl break-words text-4xl font-black leading-[1.05] text-slate-900 sm:text-5xl">
@@ -52,24 +51,24 @@ async function handleLogin() {
             <span class="block text-teal-700">你眼中的每一朵云</span>
           </h1>
           <!-- <p class="mt-6 max-w-lg text-base leading-8 text-slate-600">
-            在地图、百科和画廊之间浏览观测记录。上传新的云图后，审核通过的作品会进入公开画廊与地图。
+            在地图、图鉴和画廊之间同步你的观测记录。上传新的云图后，图鉴会自动点亮，画廊也会按时间收纳你的作品。
           </p> -->
         </div>
         <div class="mt-8 grid min-w-0 grid-cols-2 gap-4">
           <div class="min-w-0 border border-slate-200 bg-white px-4 py-3">
             <div class="oc-stat-label">Collection</div>
             <div class="oc-stat-value">10</div>
-            <div class="oc-field-help">基础云属资料</div>
+            <div class="oc-field-help">基础云属待收集</div>
           </div>
           <div class="min-w-0 border border-slate-200 bg-white px-4 py-3">
             <div class="oc-stat-label">Mode</div>
             <div class="oc-stat-value">Atlas</div>
-            <div class="oc-field-help">地图、百科、画廊一体</div>
+            <div class="oc-field-help">地图、图鉴、画廊一体</div>
           </div>
         </div>
       </section>
 
-      <NCard class="oc-panel-card-xl min-w-0 h-full">
+      <NCard class="min-w-0 h-full shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
         <div class="mb-8">
           <div class="text-sm uppercase tracking-[0.22em] text-slate-500">Member Access</div>
           <h2 class="mt-3 text-3xl font-bold text-slate-900">登录 OpenCloud</h2>
@@ -80,13 +79,8 @@ async function handleLogin() {
           <NFormItem label="邮箱">
             <NInput
               v-model:value="email"
-              type="text"
-              :input-props="{
-                autocomplete: 'username',
-                inputmode: 'email',
-                name: 'username',
-                required: true,
-              }"
+              required
+              autocomplete="email"
               placeholder="your@email.com"
             />
           </NFormItem>
@@ -95,26 +89,15 @@ async function handleLogin() {
             <NInput
               v-model:value="password"
               type="password"
+              required
               show-password-on="click"
-              :input-props="{
-                autocomplete: 'current-password',
-                name: 'current-password',
-                required: true,
-              }"
+              autocomplete="current-password"
               placeholder="输入密码"
             />
           </NFormItem>
 
           <NAlert v-if="error" type="error" class="mb-4">
             {{ error }}
-            <div v-if="needsEmailConfirmation" class="mt-2">
-              <RouterLink
-                :to="{ path: '/resend-confirmation', query: { email } }"
-                class="font-semibold text-rose-700 underline underline-offset-2"
-              >
-                重新发送验证邮件
-              </RouterLink>
-            </div>
           </NAlert>
 
           <NButton
@@ -130,15 +113,15 @@ async function handleLogin() {
         </NForm>
 
         <div class="mt-6 flex flex-wrap items-center justify-between gap-3 text-sm text-slate-500">
-          <span>
-            还没有账号？
-            <RouterLink to="/register" class="font-semibold text-sky-700 hover:text-sky-800">立即注册</RouterLink>
-          </span>
+          <p>
+            没有账号？
+            <RouterLink to="/register" class="font-semibold text-teal-700 hover:text-teal-800">去注册</RouterLink>
+          </p>
           <RouterLink
-            :to="{ path: '/forgot-password', query: { email } }"
-            class="font-semibold text-teal-700 hover:text-teal-800"
+            :to="email ? { path: '/forgot-password', query: { email } } : { path: '/forgot-password' }"
+            class="font-semibold text-teal-700 transition-colors hover:text-teal-800"
           >
-            忘记密码
+            忘记密码？
           </RouterLink>
         </div>
       </NCard>

src/views/auth/RegisterView.vue

@@ -1,64 +1,44 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { ref } from 'vue'
 import { NAlert, NButton, NCard, NForm, NFormItem, NInput, NResult } from 'naive-ui'
-import { ApiError } from '@/lib/api'
 import { useAuthStore } from '@/stores/auth'
 
 const authStore = useAuthStore()
-const route = useRoute()
 
-const name = ref('')
-const email = ref(typeof route.query.email === 'string' ? route.query.email : '')
+const email = ref('')
 const password = ref('')
 const confirmPassword = ref('')
+const username = ref('')
 const error = ref('')
 const loading = ref(false)
-const registered = ref(false)
-const emailDelivered = ref(true)
-const registerConflict = ref(false)
-const canResend = computed(() => registerConflict.value)
+const emailSent = ref(false)
 
 async function handleRegister() {
   error.value = ''
-  registerConflict.value = false
-  const trimmedName = name.value.trim()
-  const trimmedEmail = email.value.trim()
 
-  if (!trimmedName) {
+  if (!username.value.trim()) {
     error.value = '请输入用户名'
     return
   }
-  if (trimmedName.length > 16) {
-    error.value = '用户名不能超过 16 个字符'
-    return
-  }
-  if (!trimmedEmail || trimmedEmail.length > 64) {
-    error.value = '请输入不超过 64 个字符的有效邮箱'
+  if (username.value.length > 20) {
+    error.value = '用户名不能超过20个字符'
     return
   }
   if (password.value.length < 8) {
-    error.value = '密码至少需要 8 位'
+    error.value = '密码至少8位'
     return
   }
   if (password.value !== confirmPassword.value) {
-    error.value = '两次输入的密码不一致'
+    error.value = '两次密码不一致'
     return
   }
 
   loading.value = true
   try {
-    const response = await authStore.register(trimmedName, trimmedEmail, password.value)
-    email.value = trimmedEmail
-    emailDelivered.value = response.email_sent
-    registered.value = true
+    await authStore.register(email.value, password.value, username.value.trim())
+    emailSent.value = true
   } catch (e: unknown) {
-    if (e instanceof ApiError && e.status === 409) {
-      registerConflict.value = true
-      error.value = '邮箱或用户名已被占用；若邮箱尚未验证，可以尝试重发验证邮件。'
-    } else {
-      error.value = e instanceof Error ? e.message : '注册失败，请稍后重试'
-    }
+    error.value = e instanceof Error ? e.message : '注册失败，请稍后重试'
   } finally {
     loading.value = false
   }
@@ -68,48 +48,47 @@ async function handleRegister() {
 <template>
   <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
     <div class="mx-auto grid min-w-0 max-w-6xl gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-stretch">
-      <section class="oc-panel-card-xl flex min-w-0 h-full flex-col justify-between overflow-hidden border border-slate-200 bg-[linear-gradient(135deg,#eff6ff_0%,#ffffff_42%,#f2faf6_100%)] p-6 sm:p-8">
+      <section class="flex min-w-0 h-full flex-col justify-between overflow-hidden border border-slate-200 bg-[linear-gradient(135deg,#eff6ff_0%,#ffffff_42%,#f2faf6_100%)] p-6 shadow-[10px_10px_0_0_rgba(15,23,42,0.08)] sm:p-8">
         <div>
           <p class="text-sm uppercase tracking-[0.26em] text-sky-700">Observer Join</p>
           <h1 class="mt-4 max-w-xl break-words text-4xl font-black leading-[1.05] text-slate-900 sm:text-5xl">
             加入天空探索者
             <span class="block text-sky-700">建立你的云图档案</span>
           </h1>
+          <!-- <p class="mt-6 max-w-lg text-base leading-8 text-slate-600">
+            注册后即可上传云图、点亮图鉴、在社区画廊里按时间展示你的观测记录。所有页面都会围绕你的个人云层档案同步更新。
+          </p> -->
         </div>
         <div class="mt-8 grid min-w-0 grid-cols-2 gap-4">
           <div class="min-w-0 border border-slate-200 bg-white px-4 py-3">
-            <div class="oc-stat-label">Step 1</div>
-            <div class="oc-stat-value">Join</div>
-            <div class="oc-field-help">填写账号资料</div>
+            <div class="oc-stat-label">Review</div>
+            <div class="oc-stat-value">Queue</div>
+            <div class="oc-field-help">上传后进入审核队列</div>
           </div>
           <div class="min-w-0 border border-slate-200 bg-white px-4 py-3">
-            <div class="oc-stat-label">Step 2</div>
-            <div class="oc-stat-value">Verify</div>
-            <div class="oc-field-help">通过邮件确认邮箱</div>
+            <div class="oc-stat-label">Profile</div>
+            <div class="oc-stat-value">Journal</div>
+            <div class="oc-field-help">自动生成个人天空日志</div>
           </div>
         </div>
       </section>
 
-      <NCard class="oc-panel-card-xl min-w-0 h-full">
+      <NCard class="min-w-0 h-full shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
         <NResult
-          v-if="registered"
-          :status="emailDelivered ? 'success' : 'warning'"
+          v-if="emailSent"
+          status="success"
           title="确认你的邮箱"
-          :description="emailDelivered
-            ? '确认邮件已经发送，请查收并点击链接完成注册。'
-            : '账号已创建，但验证邮件暂未送达。请使用重发验证功能，不要重复注册。'"
+          description="确认邮件已经发送，请查收并点击链接完成注册。"
         >
           <template #footer>
             <div class="space-y-4">
-              <p class="text-sm text-slate-500">目标邮箱：<span class="font-semibold text-slate-700">{{ email }}</span></p>
-              <div class="flex flex-wrap justify-center gap-3">
-                <RouterLink :to="{ path: '/resend-confirmation', query: { email } }" class="no-underline">
-                  <NButton type="default" class="oc-panel-button oc-panel-button--sky">重发验证邮件</NButton>
-                </RouterLink>
-                <RouterLink :to="{ path: '/login', query: { email } }" class="no-underline">
-                  <NButton type="default" class="oc-panel-button oc-panel-button--teal">去登录</NButton>
-                </RouterLink>
-              </div>
+              <p class="text-sm text-slate-500">
+                目标邮箱：
+                <span class="font-semibold text-slate-700">{{ email }}</span>
+              </p>
+              <RouterLink to="/login" class="no-underline">
+                <NButton type="primary" class="oc-primary-button oc-primary-button--teal">去登录</NButton>
+              </RouterLink>
             </div>
           </template>
         </NResult>
@@ -118,36 +97,72 @@ async function handleRegister() {
           <div class="mb-8">
             <div class="text-sm uppercase tracking-[0.22em] text-slate-500">Create Account</div>
             <h2 class="mt-3 text-3xl font-bold text-slate-900">注册 OpenCloud</h2>
-            <p class="mt-2 text-sm text-slate-500">注册后，请先通过邮件确认邮箱再登录。</p>
+            <p class="mt-2 text-sm text-slate-500">加入社区后即可开始记录、收集与展示云图。</p>
           </div>
 
           <NForm @submit.prevent="handleRegister">
             <NFormItem label="用户名">
-              <NInput v-model:value="name" maxlength="16" show-count placeholder="最多 16 个字符" :input-props="{ autocomplete: 'username', name: 'username', required: true }" />
+              <NInput
+                v-model:value="username"
+                type="text"
+                required
+                autocomplete="username"
+                placeholder="你的昵称"
+                maxlength="20"
+              />
             </NFormItem>
+
             <NFormItem label="邮箱">
-              <NInput v-model:value="email" maxlength="64" type="text" placeholder="your@email.com" :input-props="{ autocomplete: 'email', inputmode: 'email', name: 'email', required: true }" />
+              <NInput
+                v-model:value="email"
+                required
+                autocomplete="email"
+                placeholder="your@email.com"
+              />
             </NFormItem>
+
             <NFormItem label="密码">
-              <NInput v-model:value="password" type="password" show-password-on="click" placeholder="至少 8 位" :input-props="{ autocomplete: 'new-password', name: 'new-password', required: true }" />
+              <NInput
+                v-model:value="password"
+                type="password"
+                required
+                show-password-on="click"
+                autocomplete="new-password"
+                placeholder="至少8位"
+              />
             </NFormItem>
+
             <NFormItem label="确认密码">
-              <NInput v-model:value="confirmPassword" type="password" show-password-on="click" placeholder="再次输入密码" :input-props="{ autocomplete: 'new-password', name: 'confirm-new-password', required: true }" />
+              <NInput
+                v-model:value="confirmPassword"
+                type="password"
+                required
+                show-password-on="click"
+                autocomplete="new-password"
+                placeholder="再次输入密码"
+              />
             </NFormItem>
 
             <NAlert v-if="error" type="error" class="mb-4">
               {{ error }}
-              <div v-if="canResend" class="mt-2">
-                <RouterLink :to="{ path: '/resend-confirmation', query: { email } }" class="font-semibold text-rose-700 underline underline-offset-2">重发验证邮件</RouterLink>
-              </div>
             </NAlert>
 
-            <NButton attr-type="submit" type="primary" block size="large" class="oc-primary-button oc-primary-button--sky" :loading="loading">
+            <NButton
+              attr-type="submit"
+              type="primary"
+              block
+              size="large"
+              class="oc-primary-button oc-primary-button--sky"
+              :loading="loading"
+            >
               {{ loading ? '注册中...' : '注册' }}
             </NButton>
           </NForm>
 
-          <p class="mt-6 text-sm text-slate-500">已有账号？ <RouterLink :to="{ path: '/login', query: { email } }" class="font-semibold text-sky-700 hover:text-sky-800">去登录</RouterLink></p>
+          <p class="mt-6 text-sm text-slate-500">
+            已有账号？
+            <RouterLink to="/login" class="font-semibold text-sky-700 hover:text-sky-800">去登录</RouterLink>
+          </p>
         </template>
       </NCard>
     </div>

src/views/auth/ResendConfirmationView.vue

@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import { computed, onUnmounted, ref } from 'vue'
-import { useRoute } from 'vue-router'
-import { NAlert, NButton, NCard, NForm, NFormItem, NInput, NResult } from 'naive-ui'
-import { useAuthStore } from '@/stores/auth'
-
-const authStore = useAuthStore()
-const route = useRoute()
-const email = ref(typeof route.query.email === 'string' ? route.query.email : '')
-const error = ref('')
-const loading = ref(false)
-const submitted = ref(false)
-const cooldown = ref(0)
-let timer: ReturnType<typeof setInterval> | null = null
-
-const buttonLabel = computed(() => loading.value ? '发送中...' : cooldown.value > 0 ? `重新发送（${cooldown.value}s）` : '重新发送')
-
-function startCooldown() {
-  if (timer) clearInterval(timer)
-  cooldown.value = 60
-  timer = setInterval(() => {
-    cooldown.value--
-    if (cooldown.value <= 0 && timer) {
-      clearInterval(timer)
-      timer = null
-    }
-  }, 1000)
-}
-
-async function submit() {
-  error.value = ''
-  const value = email.value.trim()
-  if (!value || value.length > 64) {
-    error.value = '请输入不超过 64 个字符的有效邮箱'
-    return
-  }
-  loading.value = true
-  try {
-    await authStore.resendConfirmation(value)
-    email.value = value
-    submitted.value = true
-    startCooldown()
-  } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : '验证邮件发送失败，请稍后重试'
-  } finally {
-    loading.value = false
-  }
-}
-
-onUnmounted(() => { if (timer) clearInterval(timer) })
-</script>
-
-<template>
-  <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
-    <div class="mx-auto max-w-2xl">
-      <NCard class="oc-panel-card-xl">
-        <NResult v-if="submitted" status="success" title="请求已受理" description="如果该邮箱符合条件，我们会发送新的验证邮件。">
-          <template #footer>
-            <div class="space-y-4">
-              <p class="text-sm text-slate-500">目标邮箱：<span class="font-semibold text-slate-700">{{ email }}</span></p>
-              <div class="flex flex-wrap justify-center gap-3">
-                <NButton type="default" class="oc-panel-button oc-panel-button--sky" :disabled="cooldown > 0" :loading="loading" @click="submit">{{ buttonLabel }}</NButton>
-                <RouterLink :to="{ path: '/login', query: { email } }" class="no-underline"><NButton type="default" class="oc-panel-button oc-panel-button--teal">返回登录</NButton></RouterLink>
-              </div>
-            </div>
-          </template>
-        </NResult>
-        <template v-else>
-          <div class="mb-8">
-            <div class="text-sm uppercase tracking-[0.22em] text-slate-500">Email Verification</div>
-            <h1 class="mt-3 text-3xl font-bold text-slate-900">重发验证邮件</h1>
-            <p class="mt-2 text-sm text-slate-500">输入注册邮箱。为保护账号，系统不会透露邮箱是否存在或已验证。</p>
-          </div>
-          <NForm @submit.prevent="submit">
-            <NFormItem label="邮箱"><NInput v-model:value="email" maxlength="64" type="text" placeholder="your@email.com" :input-props="{ autocomplete: 'email', inputmode: 'email', name: 'email', required: true }" /></NFormItem>
-            <NAlert v-if="error" type="error" class="mb-4">{{ error }}</NAlert>
-            <NButton attr-type="submit" type="primary" block size="large" class="oc-primary-button oc-primary-button--sky" :loading="loading">{{ loading ? '发送中...' : '发送验证邮件' }}</NButton>
-          </NForm>
-        </template>
-      </NCard>
-    </div>
-  </div>
-</template>

src/views/auth/ResetPasswordView.vue

@@ -1,90 +1,192 @@
 <script setup lang="ts">
-import { computed, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { NAlert, NButton, NCard, NForm, NFormItem, NInput, NResult } from 'naive-ui'
-import { useAuthStore } from '@/stores/auth'
+import { NAlert, NButton, NCard, NForm, NFormItem, NInput, NResult, NSpin } from 'naive-ui'
+import { apiRequest } from '@/lib/api'
 
-const authStore = useAuthStore()
 const route = useRoute()
 const router = useRouter()
-const email = typeof route.query.email === 'string' ? route.query.email : ''
-const token = typeof route.query.token === 'string' ? route.query.token : ''
+
 const password = ref('')
 const confirmPassword = ref('')
-const error = ref(!email || !token ? '密码重置链接缺少必要信息，请重新发送邮件。' : '')
-const invalid = ref(!email || !token)
-const success = ref(false)
+const error = ref('')
+const state = ref<'checking' | 'ready' | 'invalid' | 'success'>('checking')
 const loading = ref(false)
 const countdown = ref(5)
-let timer: ReturnType<typeof setInterval> | null = null
+const initialResetToken = typeof route.query.token === 'string' ? route.query.token : ''
+const resetToken = ref(initialResetToken)
+let countdownTimer: ReturnType<typeof setInterval> | null = null
 
-if (route.query.token !== undefined || route.query.email !== undefined) {
-  window.history.replaceState(window.history.state, '', route.path)
+if (route.query.token !== undefined) {
+  window.history.replaceState(window.history.state, '', window.location.pathname)
 }
 
-const canSubmit = computed(() => !invalid.value && password.value.length >= 8 && password.value === confirmPassword.value)
+const canSubmit = computed(() =>
+  state.value === 'ready' && password.value.length >= 8 && password.value === confirmPassword.value,
+)
+
+function showInvalidRecoveryLink() {
+  error.value = '密码重置链接无效或已过期，请重新发送邮件。'
+  state.value = 'invalid'
+}
+
+function getResetErrorMessage(value: unknown) {
+  const message = value instanceof Error ? value.message : ''
+  if (message.includes('无效') || message.includes('过期') || message.includes('expired')) {
+    return '密码重置链接无效或已过期，请重新发送邮件。'
+  }
+
+  if (message.includes('8')) {
+    return '新密码至少需要 8 位。'
+  }
+
+  return message || '密码重置失败，请稍后重试。'
+}
 
 function startCountdown() {
-  timer = setInterval(() => {
+  countdownTimer = setInterval(() => {
     countdown.value--
     if (countdown.value <= 0) {
-      if (timer) clearInterval(timer)
-      void router.push({ path: '/login', query: { email } })
+      if (countdownTimer) clearInterval(countdownTimer)
+      router.push('/login')
     }
   }, 1000)
 }
 
-async function submit() {
+async function initializeRecoverySession() {
+  if (!resetToken.value) {
+    showInvalidRecoveryLink()
+    return
+  }
+  state.value = 'ready'
+}
+
+async function handleResetPassword() {
   error.value = ''
+
   if (password.value.length < 8) {
-    error.value = '新密码至少需要 8 位'
+    error.value = '新密码至少需要 8 位。'
     return
   }
   if (password.value !== confirmPassword.value) {
-    error.value = '两次输入的密码不一致'
+    error.value = '两次输入的密码不一致。'
     return
   }
+
   loading.value = true
   try {
-    await authStore.resetPassword(email, token, password.value)
-    success.value = true
+    await apiRequest('/auth/reset-password', {
+      method: 'POST',
+      auth: false,
+      body: { token: resetToken.value, password: password.value },
+    })
+    countdown.value = 5
+    state.value = 'success'
     startCountdown()
-  } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : '密码重置失败，请稍后重试'
-    if (error.value.includes('无效') || error.value.includes('过期')) invalid.value = true
+  } catch (e) {
+    error.value = getResetErrorMessage(e)
+    if (error.value === '密码重置链接无效或已过期，请重新发送邮件。') {
+      state.value = 'invalid'
+    }
   } finally {
     loading.value = false
   }
 }
 
-onUnmounted(() => { if (timer) clearInterval(timer) })
+onMounted(() => {
+  void initializeRecoverySession()
+})
+
+onUnmounted(() => {
+  if (countdownTimer) clearInterval(countdownTimer)
+})
 </script>
 
 <template>
   <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
     <div class="mx-auto max-w-2xl">
-      <NCard class="oc-panel-card-xl">
-        <NResult v-if="success" status="success" title="密码已重置" description="请使用新密码重新登录。">
+      <NCard class="shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
+        <NResult
+          v-if="state === 'success'"
+          status="success"
+          title="密码已重置"
+          description="你已使用新密码完成更新，现在可以重新登录。"
+        >
           <template #footer>
             <div class="space-y-4">
-              <p class="text-sm text-slate-500">{{ countdown }} 秒后自动前往登录页面</p>
-              <NButton type="default" class="oc-panel-button oc-panel-button--teal" @click="router.push({ path: '/login', query: { email } })">立即登录</NButton>
+              <p class="text-sm text-slate-500">{{ countdown }} 秒后自动跳转登录页面...</p>
+              <NButton type="primary" class="oc-primary-button oc-primary-button--teal" @click="router.push('/login')">立即登录</NButton>
             </div>
           </template>
         </NResult>
 
+        <template v-else-if="state === 'checking'">
+          <div class="flex flex-col items-center justify-center py-12 text-center">
+            <NSpin size="large" />
+            <h1 class="mt-6 text-2xl font-bold text-slate-900">正在验证重置链接...</h1>
+            <p class="mt-2 text-slate-500">请稍候</p>
+          </div>
+        </template>
+
         <template v-else>
           <div class="mb-8">
             <div class="text-sm uppercase tracking-[0.22em] text-slate-500">Password Recovery</div>
             <h1 class="mt-3 text-3xl font-bold text-slate-900">设置新密码</h1>
-            <p class="mt-2 text-sm text-slate-500">提交成功后，此重置链接和现有登录会话都会失效。</p>
+            <p class="mt-2 text-sm text-slate-500">
+              {{
+                state === 'invalid'
+                  ? '当前重置链接不可用，请重新发送密码重置邮件。'
+                  : '请输入新的登录密码，提交后当前重置链接会失效。'
+              }}
+            </p>
           </div>
-          <NForm @submit.prevent="submit">
-            <NFormItem label="新密码"><NInput v-model:value="password" type="password" show-password-on="click" placeholder="至少 8 位" :disabled="invalid" :input-props="{ autocomplete: 'new-password', name: 'new-password', required: true }" /></NFormItem>
-            <NFormItem label="确认新密码"><NInput v-model:value="confirmPassword" type="password" show-password-on="click" placeholder="再次输入新密码" :disabled="invalid" :input-props="{ autocomplete: 'new-password', name: 'confirm-new-password', required: true }" /></NFormItem>
-            <NAlert v-if="error" type="error" class="mb-4">{{ error }}</NAlert>
-            <RouterLink v-if="invalid" :to="{ path: '/forgot-password', query: { email } }" class="mb-4 block text-sm font-semibold text-teal-700 hover:text-teal-800">重新发送密码重置邮件</RouterLink>
-            <NButton attr-type="submit" type="primary" block size="large" class="oc-primary-button oc-primary-button--teal" :disabled="!canSubmit" :loading="loading">保存新密码</NButton>
+
+          <NForm @submit.prevent="handleResetPassword">
+            <NFormItem label="新密码">
+              <NInput
+                v-model:value="password"
+                type="password"
+                required
+                show-password-on="click"
+                autocomplete="new-password"
+                placeholder="至少 8 位"
+              />
+            </NFormItem>
+
+            <NFormItem label="确认新密码">
+              <NInput
+                v-model:value="confirmPassword"
+                type="password"
+                required
+                show-password-on="click"
+                autocomplete="new-password"
+                placeholder="再次输入新密码"
+              />
+            </NFormItem>
+
+            <NAlert v-if="error" type="error" class="mb-4">
+              {{ error }}
+            </NAlert>
+
+            <RouterLink
+              v-if="state === 'invalid'"
+              to="/forgot-password"
+              class="mb-4 block text-sm font-semibold text-teal-700 hover:text-teal-800"
+            >
+              返回重新发送重置邮件
+            </RouterLink>
+
+            <NButton
+              attr-type="submit"
+              type="primary"
+              block
+              size="large"
+              class="oc-primary-button oc-primary-button--teal"
+              :disabled="!canSubmit"
+              :loading="loading"
+            >
+              保存新密码
+            </NButton>
           </NForm>
         </template>
       </NCard>

src/views/community/CommunityView.vue

@@ -3,7 +3,7 @@
 
 <template>
   <div class="min-h-[calc(100vh-4rem)] bg-[linear-gradient(180deg,#f2faf6_0%,#f8fafc_100%)] px-4 py-16">
-    <section class="oc-panel-card-xl mx-auto max-w-4xl border border-slate-200 bg-white p-10">
+    <section class="mx-auto max-w-4xl border border-slate-200 bg-white p-10 shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
       <p class="text-sm font-semibold uppercase tracking-[0.24em] text-teal-700">Community</p>
       <h1 class="mt-4 text-4xl font-bold text-slate-900">社区</h1>
       <p class="mt-5 max-w-2xl text-sm leading-7 text-slate-600">

src/views/encyclopedia/CloudTypeView.vue

@@ -1,60 +1,126 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
-import { NAlert, NButton, NEmpty, NSkeleton } from 'naive-ui'
+import { NAlert, NButton, NCard, NEmpty, NSkeleton, NTag } from 'naive-ui'
 import { RouterLink, useRoute } from 'vue-router'
 import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
 import MiniLocationMap from '@/components/cloud/MiniLocationMap.vue'
-import { apiRequest, imageUrl, toApiCloud } from '@/lib/api'
+import { apiRequest } from '@/lib/api'
+import { useAuthStore } from '@/stores/auth'
 import { useEncyclopediaStore } from '@/stores/encyclopedia'
-import type { ApiCloud, BackendCloudInfo } from '@/types/api'
+import type { ApiCloud, ApiPage } from '@/types/api'
+import type { CloudType } from '@/types/database'
+
+interface CloudGalleryItem {
+  id: string
+  image_url: string
+  thumbnail_url: string | null
+  latitude: number | null
+  longitude: number | null
+  location_name: string | null
+  description: string | null
+  captured_at: string | null
+  created_at: string
+  profiles: {
+    username: string
+  } | null
+}
 
-const PAGE_SIZE = 24
 const route = useRoute()
+const authStore = useAuthStore()
 const encyclopediaStore = useEncyclopediaStore()
+
 const loading = ref(true)
 const loadError = ref('')
-const gallery = ref<ApiCloud[]>([])
-const selectedItem = ref<ApiCloud | null>(null)
-const currentPage = ref(1)
-const hasNextPage = ref(false)
+const gallery = ref<CloudGalleryItem[]>([])
+const selectedGalleryItem = ref<CloudGalleryItem | null>(null)
+const publicCount = ref(0)
+
+const rarityMeta = {
+  common: { label: '常见', chip: 'bg-sky-100 text-sky-700 border-sky-200', glow: 'from-sky-100 via-white to-cyan-50' },
+  uncommon: { label: '少见', chip: 'bg-amber-100 text-amber-700 border-amber-200', glow: 'from-amber-100 via-white to-orange-50' },
+  rare: { label: '罕见', chip: 'bg-rose-100 text-rose-700 border-rose-200', glow: 'from-rose-100 via-white to-orange-50' },
+} satisfies Record<CloudType['rarity'], { label: string; chip: string; glow: string }>
 
 const cloudTypeId = computed(() => Number(route.params.id))
 const cloudType = computed(() => encyclopediaStore.cloudTypes.find(item => item.id === cloudTypeId.value) ?? null)
-const heroImage = computed(() => cloudType.value?.icon_id ? imageUrl(cloudType.value.icon_id, 'original') : null)
+const collectionEntry = computed(() => {
+  if (!authStore.isLoggedIn || !cloudType.value) return null
+  return encyclopediaStore.getCollectionEntry(cloudType.value.id)
+})
+const isUnlocked = computed(() => !!collectionEntry.value)
+const heroImage = computed(() => collectionEntry.value?.firstCloud?.image_url || gallery.value[0]?.image_url || null)
 
-function formatDateTime(iso: string | null) {
-  if (!iso) return '未记录拍摄时间'
-  return new Date(iso).toLocaleString('zh-CN', {
-    year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit',
+function formatDate(iso: string | null) {
+  if (!iso) return '未知时间'
+  return new Date(iso).toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
   })
 }
 
-async function loadGallery(page: number) {
-  const params = new URLSearchParams({ page: String(page), page_size: String(PAGE_SIZE) })
-  const rows = await apiRequest<BackendCloudInfo[]>(`/cloud/type/${cloudTypeId.value}?${params}`, { auth: false })
-  gallery.value = rows.map(toApiCloud)
-  currentPage.value = page
-  hasNextPage.value = rows.length === PAGE_SIZE
+function formatGalleryTime(item: CloudGalleryItem) {
+  return formatDate(item.captured_at || item.created_at)
 }
 
-async function loadPage(page = 1) {
-  if (!Number.isInteger(cloudTypeId.value) || cloudTypeId.value <= 0) {
-    loadError.value = '云类型不存在'
+function formatDateTime(iso: string | null) {
+  if (!iso) return '未知时间'
+  return new Date(iso).toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+function formatCoordinate(value: number | null) {
+  return value === null ? '未记录' : value.toFixed(2)
+}
+
+function openGalleryDetail(item: CloudGalleryItem) {
+  selectedGalleryItem.value = item
+}
+
+async function loadGallery(typeId: number) {
+  const result = await apiRequest<ApiPage<ApiCloud>>(`/cloud-types/${typeId}/clouds?page=1&page_size=24`, { auth: false })
+  gallery.value = result.items.map(row => ({
+    id: row.id,
+    image_url: row.image_url,
+    thumbnail_url: row.thumbnail_url,
+    latitude: row.latitude,
+    longitude: row.longitude,
+    location_name: row.location_name,
+    description: row.description,
+    captured_at: row.captured_at,
+    created_at: row.created_at,
+    profiles: row.username ? { username: row.username } : null,
+  }))
+  publicCount.value = result.total
+}
+
+async function loadPage() {
+  if (!Number.isFinite(cloudTypeId.value) || cloudTypeId.value <= 0) {
+    loadError.value = '云型不存在'
     loading.value = false
     return
   }
 
   loading.value = true
   loadError.value = ''
-  selectedItem.value = null
+
   try {
     await encyclopediaStore.fetchCloudTypes()
+    await encyclopediaStore.fetchMyCollection()
+
     if (!cloudType.value) {
-      loadError.value = '云类型不存在'
+      loadError.value = '云型不存在'
       gallery.value = []
+      publicCount.value = 0
       return
     }
-    await loadGallery(page)
+
+    await loadGallery(cloudType.value.id)
   } catch (error) {
     loadError.value = error instanceof Error ? error.message : '详情加载失败'
   } finally {
@@ -62,81 +128,191 @@ async function loadPage(page = 1) {
   }
 }
 
-onMounted(() => loadPage())
-watch(() => route.params.id, () => loadPage())
+onMounted(loadPage)
+watch(() => route.params.id, loadPage)
+
+watch(() => route.params.id, () => {
+  selectedGalleryItem.value = null
+})
 </script>
 
 <template>
-  <div class="oc-container oc-container--content py-8">
-    <RouterLink to="/encyclopedia">
-      <NButton type="default" secondary strong class="oc-panel-button oc-panel-button--neutral">← 返回百科总览</NButton>
-    </RouterLink>
-
-    <div v-if="loading" class="mt-6 space-y-6">
-      <NSkeleton class="h-80 w-full" />
-      <div class="grid gap-4 md:grid-cols-3"><NSkeleton v-for="n in 6" :key="n" class="h-56 w-full" /></div>
+  <div class="max-w-6xl mx-auto px-4 py-8">
+    <div class="mb-6">
+      <RouterLink to="/encyclopedia">
+        <NButton type="default" secondary strong class="oc-panel-button oc-panel-button--neutral">← 返回图鉴总览</NButton>
+      </RouterLink>
     </div>
 
-    <NAlert v-else-if="loadError" class="mt-6" type="error" :show-icon="false" :bordered="false" title="详情加载失败">
+    <div v-if="loading" class="space-y-6">
+      <NSkeleton class="h-80 w-full" />
+      <div class="grid gap-4 lg:grid-cols-3">
+        <NCard v-for="n in 3" :key="n">
+          <NSkeleton class="h-4 w-1/3" />
+          <NSkeleton class="mt-4 h-7 w-1/2" />
+        </NCard>
+      </div>
+    </div>
+
+    <NAlert
+      v-else-if="loadError"
+      type="error"
+      :show-icon="false"
+      :bordered="false"
+      title="详情加载失败"
+    >
       {{ loadError }}
     </NAlert>
 
     <template v-else-if="cloudType">
-      <section class="oc-panel-card mt-6 overflow-hidden border border-slate-200 bg-white">
-        <div class="grid lg:grid-cols-[1.05fr_0.95fr]">
-          <div class="relative min-h-80 bg-sky-50">
-            <img v-if="heroImage" :src="heroImage" :alt="cloudType.name" class="absolute inset-0 h-full w-full object-cover" />
-            <div v-else class="absolute inset-0 flex items-center justify-center pb-20 text-sm font-medium text-slate-500">无图片</div>
-            <div v-if="heroImage" class="absolute inset-0 bg-gradient-to-t from-slate-950/75 via-slate-950/10 to-transparent"></div>
-            <div class="absolute bottom-7 left-7 right-7" :class="heroImage ? 'text-white' : 'text-slate-900'">
-              <span
-                class="border px-2.5 py-1 text-xs"
-                :class="heroImage ? 'border-white/35 bg-slate-950/25 backdrop-blur' : 'border-slate-200 bg-white'"
-              >稀有度 {{ cloudType.rarity_value }}</span>
+      <section class="overflow-hidden border border-slate-200 bg-white shadow-sm">
+        <div class="grid lg:grid-cols-[1.15fr_0.85fr]">
+          <div class="relative min-h-[360px] overflow-hidden">
+            <img
+              v-if="heroImage"
+              :src="heroImage"
+              :alt="cloudType.name"
+              class="absolute inset-0 h-full w-full object-cover"
+            />
+            <div
+              v-else
+              class="absolute inset-0 bg-gradient-to-br"
+              :class="rarityMeta[cloudType.rarity].glow"
+            ></div>
+            <div class="absolute inset-0 bg-gradient-to-t from-slate-950/78 via-slate-950/18 to-transparent"></div>
+            <div class="absolute bottom-8 left-8 right-8 text-white">
+              <NTag :bordered="false" class="border border-white/20 bg-white/12 text-white backdrop-blur">
+                {{ rarityMeta[cloudType.rarity].label }}
+              </NTag>
               <h1 class="mt-4 text-4xl font-bold">{{ cloudType.name }}</h1>
-              <p class="mt-2" :class="heroImage ? 'text-white/80' : 'text-slate-600'">{{ cloudType.genus || '未提供云属名称' }}</p>
+              <p class="mt-2 text-lg text-white/82">{{ cloudType.name_en }}</p>
             </div>
           </div>
-          <div class="p-8">
-            <p class="oc-section-label">Meteorology Note</p>
-            <p class="mt-5 text-base leading-8 text-slate-700">{{ cloudType.description || '暂未提供识别说明。' }}</p>
+
+          <div class="flex flex-col justify-between bg-slate-50 p-8">
+            <div>
+              <p class="text-sm font-medium uppercase tracking-[0.22em] text-slate-500">Meteorology Note</p>
+              <p class="mt-5 text-base leading-8 text-slate-700">
+                {{ cloudType.description || '这类云的图像、形成条件和观测要点会随着图鉴完善逐步补充。' }}
+              </p>
+            </div>
+
+            <NCard class="mt-8 border border-slate-200">
+              <p class="text-sm text-slate-500">你的收集状态</p>
+              <template v-if="isUnlocked && collectionEntry">
+                <p class="oc-stat-value">已解锁</p>
+                <p class="mt-2 text-sm text-slate-600">首次解锁于 {{ formatDate(collectionEntry.unlocked_at) }}</p>
+              </template>
+              <template v-else>
+                <p class="oc-stat-value">尚未解锁</p>
+                <p class="mt-2 text-sm text-slate-600">拍到并上传这种云朵后，这枚徽章就会被点亮。</p>
+              </template>
+            </NCard>
           </div>
         </div>
       </section>
 
+      <section class="mt-6 grid gap-4 md:grid-cols-3">
+        <NCard class="border border-slate-200 shadow-sm">
+          <p class="text-sm text-slate-500">稀有度</p>
+          <p class="oc-stat-value">{{ rarityMeta[cloudType.rarity].label }}</p>
+        </NCard>
+        <NCard class="border border-slate-200 shadow-sm">
+          <p class="text-sm text-slate-500">公开云图</p>
+          <p class="oc-stat-value">{{ publicCount }}</p>
+        </NCard>
+        <NCard class="border border-slate-200 shadow-sm">
+          <p class="text-sm text-slate-500">首次解锁</p>
+          <p class="mt-2 text-xl font-bold text-slate-900">
+            {{ collectionEntry ? formatDate(collectionEntry.unlocked_at) : '等待记录' }}
+          </p>
+        </NCard>
+      </section>
+
       <section class="mt-8">
-        <div class="mb-5 flex items-end justify-between gap-4">
-          <div><h2 class="text-2xl font-bold text-slate-900">公开观测</h2><p class="oc-field-help">第 {{ currentPage }} 页，每页最多 {{ PAGE_SIZE }} 张。</p></div>
-          <div class="flex gap-3">
-            <NButton type="default" secondary strong class="oc-panel-button oc-panel-button--neutral" :disabled="currentPage === 1" @click="loadPage(currentPage - 1)">上一页</NButton>
-            <NButton type="default" secondary strong class="oc-panel-button oc-panel-button--sky" :disabled="!hasNextPage" @click="loadPage(currentPage + 1)">下一页</NButton>
+        <div class="mb-4 flex items-end justify-between gap-4">
+          <div>
+            <h2 class="text-2xl font-bold text-slate-900">该类型云图画廊</h2>
+            <p class="oc-field-help">来自社区公开可见的已通过云图。</p>
           </div>
         </div>
 
-        <div v-if="gallery.length" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-          <button v-for="item in gallery" :key="item.id" type="button" class="oc-interactive-card overflow-hidden border border-slate-200 bg-white text-left" @click="selectedItem = item">
-            <img :src="item.thumbnail_url || item.image_url" :alt="cloudType.name" class="h-48 w-full object-cover" />
-            <div class="p-4"><p class="font-medium text-slate-900">@{{ item.username }}</p><p class="mt-1 text-xs text-slate-500">{{ formatDateTime(item.captured_at || item.created_at) }}</p></div>
+        <div v-if="gallery.length" class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+          <button
+            v-for="item in gallery"
+            :key="item.id"
+            type="button"
+          class="oc-interactive-card overflow-hidden border border-slate-200 bg-white text-left shadow-sm transition-transform duration-300 hover:-translate-y-1 hover:shadow-lg"
+            @click="openGalleryDetail(item)"
+          >
+            <img :src="item.thumbnail_url || item.image_url" :alt="cloudType.name" class="h-56 w-full object-cover" />
+            <div class="p-5">
+              <div class="flex items-center justify-between gap-4">
+                <p class="text-sm font-medium text-slate-900">{{ item.profiles?.username || '匿名' }}</p>
+                <p class="text-xs text-slate-400">{{ formatGalleryTime(item) }}</p>
+              </div>
+              <p class="mt-2 text-sm text-slate-600">{{ item.location_name || '未填写位置' }}</p>
+              <p v-if="item.description" class="mt-3 line-clamp-3 text-sm leading-6 text-slate-500">
+                {{ item.description }}
+              </p>
+            </div>
           </button>
         </div>
-        <div v-else class="oc-empty-card border border-dashed border-slate-300 bg-white p-10"><NEmpty description="这一页暂无公开云图" /></div>
-      </section>
-    </template>
 
-    <ImageDetailModal
-      v-if="selectedItem && cloudType"
-      :open="true"
-      :image-url="selectedItem.image_url"
-      :thumbnail-url="selectedItem.thumbnail_url"
-      :image-alt="cloudType.name"
-      :title="cloudType.name"
-      :subtitle="selectedItem.captured_at ? `拍摄于 ${formatDateTime(selectedItem.captured_at)}` : `上传于 ${formatDateTime(selectedItem.created_at)}`"
-      :badge-label="`稀有度 ${cloudType.rarity_value}`"
-      badge-class="border-slate-200 bg-slate-50 text-slate-600"
-      @close="selectedItem = null"
-    >
-      <p class="text-sm leading-7 text-slate-700">{{ selectedItem.description || '上传者没有留下额外说明。' }}</p>
-      <MiniLocationMap :latitude="selectedItem.latitude" :longitude="selectedItem.longitude" />
-    </ImageDetailModal>
+        <div v-else class="border border-dashed border-slate-300 bg-white p-8">
+          <NEmpty description="还没有公开作品">
+            <template #extra>
+              <p class="text-sm text-slate-500">等第一位观测者上传这类云图后，这里就会展示出来。</p>
+            </template>
+          </NEmpty>
+        </div>
+      </section>
+
+      <ImageDetailModal
+        v-if="selectedGalleryItem"
+        :open="!!selectedGalleryItem"
+        :image-url="selectedGalleryItem.image_url"
+        :thumbnail-url="selectedGalleryItem.thumbnail_url"
+        :image-alt="cloudType.name"
+        :title="cloudType.name"
+        :subtitle="`上传者：${selectedGalleryItem.profiles?.username || '匿名'}`"
+        :badge-label="rarityMeta[cloudType.rarity].label"
+        :badge-class="rarityMeta[cloudType.rarity].chip"
+        @close="selectedGalleryItem = null"
+      >
+        <div class="grid gap-4 sm:grid-cols-2">
+          <div class="oc-inset-panel">
+            <p class="oc-section-label">上传时间</p>
+            <p class="mt-2 text-sm font-medium text-slate-900">{{ formatDateTime(selectedGalleryItem.created_at) }}</p>
+          </div>
+          <div class="oc-inset-panel">
+            <p class="oc-section-label">拍摄时间</p>
+            <p class="mt-2 text-sm font-medium text-slate-900">{{ formatDateTime(selectedGalleryItem.captured_at) }}</p>
+          </div>
+          <div class="oc-inset-panel">
+            <p class="oc-section-label">位置</p>
+            <p class="mt-2 text-sm font-medium text-slate-900">{{ selectedGalleryItem.location_name || '未填写位置名称' }}</p>
+          </div>
+          <div class="oc-inset-panel">
+            <p class="oc-section-label">模糊化经纬度</p>
+            <p class="mt-2 text-sm font-medium text-slate-900">
+              纬度 {{ formatCoordinate(selectedGalleryItem.latitude) }} / 经度 {{ formatCoordinate(selectedGalleryItem.longitude) }}
+            </p>
+          </div>
+        </div>
+
+        <div class="mt-5 border border-slate-200 bg-white p-5">
+          <p class="oc-section-label">图片说明</p>
+          <p class="mt-3 text-sm leading-7 text-slate-700">
+            {{ selectedGalleryItem.description || '上传者没有留下额外说明。' }}
+          </p>
+        </div>
+        <MiniLocationMap
+          :latitude="selectedGalleryItem.latitude"
+          :longitude="selectedGalleryItem.longitude"
+          :location-name="selectedGalleryItem.location_name"
+        />
+      </ImageDetailModal>
+    </template>
   </div>
 </template>

src/views/encyclopedia/EncyclopediaView.vue

@@ -1,92 +1,191 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { NEmpty, NSkeleton } from 'naive-ui'
+import { onMounted, ref } from 'vue'
+import { NAlert, NCard, NEmpty, NIcon, NSkeleton } from 'naive-ui'
 import { useRouter } from 'vue-router'
-import { imageUrl } from '@/lib/api'
+import { useAuthStore } from '@/stores/auth'
 import { useEncyclopediaStore } from '@/stores/encyclopedia'
+import EncyclopediaProgressCard from '@/components/cloud/EncyclopediaProgressCard.vue'
+import { Lock } from '@vicons/tabler'
+import type { CloudType } from '@/types/database'
 
 const router = useRouter()
+const authStore = useAuthStore()
 const encyclopediaStore = useEncyclopediaStore()
 
-function typeImageUrl(iconId: string | null) {
-  return iconId ? imageUrl(iconId, 'preview') : ''
+const lockHint = ref('')
+let lockHintTimer: number | null = null
+
+const rarityMeta = {
+  common: { label: '常见', chip: 'bg-sky-100 text-sky-700 border-sky-200', glow: 'from-sky-100 to-white' },
+  uncommon: { label: '少见', chip: 'bg-amber-100 text-amber-700 border-amber-200', glow: 'from-amber-100 to-white' },
+  rare: { label: '罕见', chip: 'bg-rose-100 text-rose-700 border-rose-200', glow: 'from-rose-100 to-white' },
+} satisfies Record<CloudType['rarity'], { label: string; chip: string; glow: string }>
+
+function isUnlocked(cloudTypeId: number) {
+  return authStore.isLoggedIn && encyclopediaStore.isUnlocked(cloudTypeId)
 }
 
-onMounted(() => encyclopediaStore.fetchCloudTypes())
+function getCollectionEntry(cloudTypeId: number) {
+  if (!authStore.isLoggedIn) return null
+  return encyclopediaStore.getCollectionEntry(cloudTypeId)
+}
+
+function formatUnlockedAt(iso: string) {
+  return new Date(iso).toLocaleDateString('zh-CN', {
+    month: 'numeric',
+    day: 'numeric',
+  })
+}
+
+function showLockHint(name: string) {
+  lockHint.value = `拍到 ${name} 后，这枚徽章就会亮起来。`
+  if (lockHintTimer) window.clearTimeout(lockHintTimer)
+  lockHintTimer = window.setTimeout(() => {
+    lockHint.value = ''
+    lockHintTimer = null
+  }, 2200)
+}
+
+function openCard(cloudType: CloudType) {
+  if (isUnlocked(cloudType.id)) {
+    router.push(`/encyclopedia/${cloudType.id}`)
+    return
+  }
+  showLockHint(cloudType.name)
+}
+
+onMounted(async () => {
+  await encyclopediaStore.fetchCloudTypes()
+  await encyclopediaStore.fetchMyCollection()
+})
 </script>
 
 <template>
   <div class="relative">
     <div class="oc-page-hero">
       <div class="oc-container oc-container--content oc-page-hero__inner">
-        <p class="oc-page-eyebrow">Cloud Encyclopedia</p>
-        <h1 class="oc-page-title">云朵百科</h1>
-        <p class="oc-page-description">
-          浏览后端提供的云类型资料，了解云属名称、识别说明和社区公开观测记录。
-        </p>
+        <div class="grid gap-6 lg:grid-cols-[1.4fr_0.9fr] lg:items-start">
+          <div>
+            <p class="oc-page-eyebrow">Cloud Encyclopedia</p>
+            <h1 class="oc-page-title">云朵图鉴</h1>
+            <p class="oc-page-description">
+              收集 10 种基础云属。每拍到一种新的云型，图鉴里就会点亮一枚徽章，并记录你第一次遇见它的时间。
+            </p>
+          </div>
+
+          <EncyclopediaProgressCard
+            :unlocked-count="authStore.isLoggedIn ? encyclopediaStore.unlockedCount : 0"
+            :total-count="encyclopediaStore.cloudTypes.length || 10"
+            :percent="encyclopediaStore.unlockPercent"
+            :is-logged-in="authStore.isLoggedIn"
+          />
+        </div>
       </div>
     </div>
 
     <div class="oc-container oc-container--content oc-page-content">
-      <div v-if="encyclopediaStore.loadingCloudTypes" class="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
-        <div v-for="n in 6" :key="n" class="oc-panel-card overflow-hidden border border-slate-200 bg-white">
-          <NSkeleton class="h-80 w-full" />
-        </div>
+      <NAlert
+        v-if="encyclopediaStore.collectionError && authStore.isLoggedIn"
+        class="mb-6"
+        type="warning"
+        :show-icon="false"
+        :bordered="false"
+        title="图鉴收藏数据暂时不可用"
+      >
+        图鉴收藏数据暂时不可用：{{ encyclopediaStore.collectionError }}
+      </NAlert>
+
+      <div v-if="encyclopediaStore.loadingCloudTypes" class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+        <NCard v-for="n in 6" :key="n" class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
+          <NSkeleton class="h-44 w-full" />
+          <NSkeleton class="mt-5 h-5 w-2/5" />
+          <NSkeleton class="mt-3 h-4 w-1/3" />
+          <NSkeleton class="mt-6 h-4 w-full" :repeat="2" />
+        </NCard>
       </div>
 
-      <div v-else-if="encyclopediaStore.cloudTypes.length" class="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
+      <div v-else-if="encyclopediaStore.cloudTypes.length" class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
         <button
           v-for="cloudType in encyclopediaStore.cloudTypes"
           :key="cloudType.id"
           type="button"
-          class="oc-interactive-card oc-panel-card relative isolate min-h-80 overflow-hidden border border-slate-200 bg-sky-50 text-left"
-          @click="router.push(`/encyclopedia/${cloudType.id}`)"
+          @click="openCard(cloudType)"
+        class="oc-interactive-card group overflow-hidden border bg-white text-left shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg"
+          :class="isUnlocked(cloudType.id) ? 'border-amber-300 shadow-amber-100/60' : 'border-slate-200 hover:border-slate-300'"
         >
-          <img
-            v-if="cloudType.icon_id"
-            :src="typeImageUrl(cloudType.icon_id)"
-            :alt="`${cloudType.name}介绍图`"
-            class="absolute inset-0 -z-20 h-full w-full object-cover"
-          />
           <div
-            v-if="cloudType.icon_id"
-            class="absolute inset-0 -z-10 bg-gradient-to-t from-slate-950/90 via-slate-950/55 to-slate-950/25"
-          ></div>
-          <div v-else class="absolute inset-0 -z-10 flex items-center justify-center text-sm font-medium text-slate-500">无图片</div>
+            class="relative h-44 overflow-hidden border-b"
+            :class="isUnlocked(cloudType.id) ? 'border-white/40' : 'border-slate-200'"
+          >
+            <img
+              v-if="getCollectionEntry(cloudType.id)?.firstCloud?.image_url"
+              :src="getCollectionEntry(cloudType.id)?.firstCloud?.thumbnail_url || getCollectionEntry(cloudType.id)?.firstCloud?.image_url || ''"
+              :alt="cloudType.name"
+              class="h-full w-full object-cover transition duration-500 group-hover:scale-105"
+              :class="isUnlocked(cloudType.id) ? '' : 'grayscale'"
+            />
+            <div
+              v-else
+              class="flex h-full w-full items-center justify-center bg-gradient-to-br"
+              :class="isUnlocked(cloudType.id) ? rarityMeta[cloudType.rarity].glow : 'from-slate-300 to-slate-100'"
+            >
+              <span class="text-6xl font-bold text-slate-800/85">{{ cloudType.name.slice(0, 1) }}</span>
+            </div>
 
-          <div class="flex min-h-80 flex-col p-5">
-            <div class="flex items-start justify-between gap-4">
-              <div>
-                <p class="oc-section-label" :class="cloudType.icon_id ? 'text-white/70' : 'text-slate-500'">Cloud Genus</p>
-                <h2 class="mt-2 text-xl font-bold" :class="cloudType.icon_id ? 'text-white' : 'text-slate-900'">{{ cloudType.name }}</h2>
-                <p
-                  class="mt-1 font-mono text-xs uppercase tracking-[0.12em]"
-                  :class="cloudType.icon_id ? 'text-white/75' : 'text-slate-500'"
-                >
-                  {{ cloudType.genus || '未提供云属名称' }}
-                </p>
+            <div class="absolute inset-0 bg-gradient-to-t from-slate-950/70 via-slate-950/10 to-transparent"></div>
+
+            <div v-if="!isUnlocked(cloudType.id)" class="absolute inset-0 flex items-center justify-center bg-slate-950/22 backdrop-blur-[2px]">
+              <div class="border border-white/45 bg-white/15 px-4 py-2 text-sm font-medium text-white">
+                <span style="display: inline-flex; align-items: center; gap: 4px;">
+                  <NIcon size="16" style="display: inline-flex;">
+                    <Lock />
+                  </NIcon>
+                  <span>尚未解锁</span>
+                </span>
               </div>
-              <span
-                class="shrink-0 border px-2.5 py-1 text-xs font-medium"
-                :class="cloudType.icon_id ? 'border-white/35 bg-slate-950/25 text-white backdrop-blur' : 'border-slate-200 bg-white text-slate-600'"
-              >
-                稀有度 {{ cloudType.rarity_value }}
+            </div>
+
+            <div class="absolute left-4 top-4">
+              <span class="inline-flex border px-3 py-1 text-xs font-medium" :class="rarityMeta[cloudType.rarity].chip">
+                {{ rarityMeta[cloudType.rarity].label }}
               </span>
             </div>
-            <p class="mt-auto line-clamp-3 pt-16 text-sm leading-6" :class="cloudType.icon_id ? 'text-white/85' : 'text-slate-600'">
-              {{ cloudType.description || '暂未提供识别说明。' }}
+
+            <div class="absolute bottom-4 left-4 right-4 text-white">
+              <p class="text-xl font-semibold">{{ cloudType.name }}</p>
+              <p class="mt-1 text-sm text-white/80">{{ cloudType.name_en }}</p>
+            </div>
+          </div>
+
+          <div class="p-5">
+            <p class="line-clamp-2 min-h-[3.25rem] text-sm leading-6 text-slate-600">
+              {{ cloudType.description || '云层特征和识别要点会显示在这里。' }}
             </p>
-            <p
-              class="mt-4 border-t pt-4 text-xs font-semibold"
-              :class="cloudType.icon_id ? 'border-white/25 text-white' : 'border-slate-200 text-sky-700'"
-            >查看类型资料与公开云图 →</p>
+
+            <div class="mt-5 flex items-center justify-between text-sm">
+              <template v-if="isUnlocked(cloudType.id) && getCollectionEntry(cloudType.id)">
+                <span class="font-medium text-amber-700">已收录</span>
+                <span class="text-slate-500">首次记录于 {{ formatUnlockedAt(getCollectionEntry(cloudType.id)!.unlocked_at) }}</span>
+              </template>
+              <template v-else>
+                <span class="font-medium text-slate-700">等待发现</span>
+                <span class="text-slate-400">拍到后点亮</span>
+              </template>
+            </div>
           </div>
         </button>
       </div>
 
       <div v-else class="oc-empty-card border border-dashed border-slate-300 bg-white px-6 py-12">
-        <NEmpty description="暂时还没有云类型资料" />
+        <NEmpty description="暂时还没有图鉴数据" />
       </div>
     </div>
+
+    <div
+      v-if="lockHint"
+      class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 border border-slate-900 bg-slate-900 px-4 py-2 text-sm text-white shadow-lg"
+    >
+      {{ lockHint }}
+    </div>
   </div>
 </template>

src/views/gallery/GalleryView.vue

@@ -1,24 +1,26 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { RouterLink } from 'vue-router'
 import { NAlert, NButton, NDropdown, NEmpty, NIcon, NSkeleton, NTag, useMessage } from 'naive-ui'
 import { Clock, Location, Search, Settings, User, X } from '@vicons/tabler'
 import CloudEditModal, { type CloudEditFormValue } from '@/components/cloud/CloudEditModal.vue'
 import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
 import MiniLocationMap from '@/components/cloud/MiniLocationMap.vue'
-import { ApiError, apiRequest, toApiCloud } from '@/lib/api'
+import { apiRequest } from '@/lib/api'
 import { useAuthStore } from '@/stores/auth'
 import { useCloudsStore } from '@/stores/clouds'
 import { useProfileStore } from '@/stores/profile'
 
-import type { ApiCloud, BackendCloudInfo } from '@/types/api'
+import type { ApiCloud, ApiPage } from '@/types/api'
+import type { CloudType } from '@/types/database'
 
 interface GalleryCloud {
   id: string
   user_id: string
   cloud_type_id: number | null
+  custom_cloud_type: string | null
   image_url: string
   thumbnail_url: string | null
+  location_name: string | null
   description: string | null
   latitude: number | null
   longitude: number | null
@@ -27,7 +29,7 @@ interface GalleryCloud {
   status: 'pending' | 'approved' | 'rejected'
   is_hidden: boolean
   cloudTypeName: string
-  cloudTypeRarity: number
+  cloudTypeRarity: CloudType['rarity']
   username: string
 }
 
@@ -45,7 +47,8 @@ const selectedTypeId = ref<number | 'all'>('all')
 const searchQuery = ref('')
 const selectedCloud = ref<GalleryCloud | null>(null)
 const currentPage = ref(1)
-const hasNextPage = ref(false)
+const totalCount = ref(0)
+const totalPages = computed(() => Math.max(1, Math.ceil(totalCount.value / PAGE_SIZE)))
 const manageError = ref('')
 const editModalOpen = ref(false)
 const editSaving = ref(false)
@@ -53,7 +56,11 @@ const editInitialValue = ref<CloudEditFormValue | null>(null)
 
 let searchTimer: number | null = null
 
-const rarityChip = 'border-slate-200 bg-slate-50 text-slate-600'
+const rarityMeta = {
+  common: { label: '常见', chip: 'bg-sky-100 text-sky-700 border-sky-200' },
+  uncommon: { label: '少见', chip: 'bg-amber-100 text-amber-700 border-amber-200' },
+  rare: { label: '罕见', chip: 'bg-rose-100 text-rose-700 border-rose-200' },
+} satisfies Record<CloudType['rarity'], { label: string; chip: string }>
 
 function formatDateTime(iso: string | null) {
   if (!iso) return '未知时间'
@@ -86,8 +93,10 @@ function toGalleryCloud(row: ApiCloud) {
     id: row.id,
     user_id: row.user_id,
     cloud_type_id: row.cloud_type_id,
+    custom_cloud_type: row.custom_cloud_type,
     image_url: row.image_url,
     thumbnail_url: row.thumbnail_url,
+    location_name: row.location_name,
     description: row.description,
     latitude: row.latitude,
     longitude: row.longitude,
@@ -95,8 +104,8 @@ function toGalleryCloud(row: ApiCloud) {
     created_at: row.created_at,
     status: row.status,
     is_hidden: row.is_hidden,
-    cloudTypeName: row.cloud_type_name || '未知',
-    cloudTypeRarity: row.cloud_type_rarity_value ?? 0,
+    cloudTypeName: row.cloud_type_name || row.custom_cloud_type || '未知',
+    cloudTypeRarity: row.cloud_type_rarity || 'common',
     username: row.username || '匿名',
   } satisfies GalleryCloud
 }
@@ -107,28 +116,14 @@ async function loadPage(page: number) {
 
   try {
     const params = new URLSearchParams({ page: String(page), page_size: String(PAGE_SIZE) })
-    if (normalizedSearch.value) {
-      params.set('filter', isUserSearch.value ? 'owner' : 'type')
-      params.set('value', normalizedSearch.value)
-    } else if (selectedTypeId.value !== 'all') {
-      const typeName = cloudsStore.cloudTypes.find(type => type.id === selectedTypeId.value)?.name
-      if (typeName) {
-        params.set('filter', 'type')
-        params.set('value', typeName)
-      }
-    }
+    if (selectedTypeId.value !== 'all') params.set('type_id', String(selectedTypeId.value))
+    if (normalizedSearch.value) params.set('search', normalizedSearch.value)
 
-    const rows = await apiRequest<BackendCloudInfo[]>(`/cloud?${params}`, { auth: false })
-    galleryItems.value = rows.map(toApiCloud).map(toGalleryCloud)
-    hasNextPage.value = rows.length === PAGE_SIZE
+    const result = await apiRequest<ApiPage<ApiCloud>>(`/clouds?${params}`, { auth: false })
+    totalCount.value = result.total
+    galleryItems.value = result.items.map(toGalleryCloud)
     currentPage.value = page
   } catch (error) {
-    if (error instanceof ApiError && error.status === 404 && isUserSearch.value) {
-      galleryItems.value = []
-      hasNextPage.value = false
-      currentPage.value = page
-      return
-    }
     loadError.value = error instanceof Error ? error.message : '画廊加载失败'
   } finally {
     loading.value = false
@@ -136,7 +131,7 @@ async function loadPage(page: number) {
 }
 
 async function goToPage(page: number) {
-  if (page < 1 || page === currentPage.value || (page > currentPage.value && !hasNextPage.value)) return
+  if (page < 1 || page > totalPages.value || page === currentPage.value) return
   await loadPage(page)
   window.scrollTo({ top: 0, behavior: 'smooth' })
 }
@@ -177,10 +172,12 @@ function openEditModal() {
 
   manageError.value = ''
   editInitialValue.value = {
-    cloudCategoryId: selectedCloud.value.cloud_type_id,
+    cloudCategoryId: selectedCloud.value.cloud_type_id ?? (selectedCloud.value.custom_cloud_type ? 'other' : null),
+    customCloudType: selectedCloud.value.custom_cloud_type || '',
     capturedAt: formatDatetimeLocal(selectedCloud.value.captured_at),
     latitude: selectedCloud.value.latitude,
     longitude: selectedCloud.value.longitude,
+    locationName: selectedCloud.value.location_name || '',
     description: selectedCloud.value.description || '',
     isPublic: !selectedCloud.value.is_hidden,
   }
@@ -207,14 +204,18 @@ async function submitEditModal(value: CloudEditFormValue) {
     manageError.value = '请选择云型类别。'
     return
   }
-  const hasLat = typeof value.latitude === 'number' && !Number.isNaN(value.latitude)
-  const hasLng = typeof value.longitude === 'number' && !Number.isNaN(value.longitude)
-  if (!hasLat || !hasLng) {
-    manageError.value = '经纬度为必填项。'
+  if (value.cloudCategoryId === 'other' && !value.customCloudType.trim()) {
+    manageError.value = '请输入自定义云型名称。'
     return
   }
-  if (value.description.trim().length > 128) {
-    manageError.value = '图片描述不能超过 128 个字符。'
+  if (!value.capturedAt) {
+    manageError.value = '请选择拍摄时间。'
+    return
+  }
+  const hasLat = typeof value.latitude === 'number' && !Number.isNaN(value.latitude)
+  const hasLng = typeof value.longitude === 'number' && !Number.isNaN(value.longitude)
+  if (hasLat !== hasLng) {
+    manageError.value = '经纬度必须同时填写。'
     return
   }
 
@@ -224,11 +225,13 @@ async function submitEditModal(value: CloudEditFormValue) {
 
   try {
     const updated = await profileStore.updateCloud(authStore.user.id, current.id, {
-      type_id: value.cloudCategoryId,
-      latitude: blurCoordinate(value.latitude as number),
-      longitude: blurCoordinate(value.longitude as number),
-      description: value.description.trim(),
-      ...(value.capturedAt ? { captured_at: new Date(value.capturedAt).toISOString() } : {}),
+      cloud_type_id: value.cloudCategoryId === 'other' ? null : value.cloudCategoryId,
+      custom_cloud_type: value.cloudCategoryId === 'other' ? value.customCloudType.trim() : null,
+      latitude: hasLat ? blurCoordinate(value.latitude as number) : null,
+      longitude: hasLng ? blurCoordinate(value.longitude as number) : null,
+      location_name: value.locationName.trim() || null,
+      description: value.description.trim() || null,
+      captured_at: new Date(value.capturedAt).toISOString(),
       is_hidden: !value.isPublic,
     })
 
@@ -339,7 +342,7 @@ onUnmounted(() => {
 <template>
   <div>
     <section class="oc-page-hero">
-      <div class="oc-container oc-container--content oc-page-hero__inner">
+      <div class="oc-container oc-container--wide oc-page-hero__inner">
         <p class="oc-page-eyebrow">Community Gallery</p>
         <h1 class="oc-page-title">云图画廊</h1>
         <p class="oc-page-description">
@@ -348,9 +351,9 @@ onUnmounted(() => {
       </div>
     </section>
 
-    <div class="oc-container oc-container--content oc-page-content">
+    <div class="oc-container oc-container--wide oc-page-content">
       <section>
-        <div class="oc-panel-card mb-4 border border-slate-200 bg-white p-3">
+        <div class="mb-4 border border-slate-200 bg-white p-3 shadow-[6px_6px_0_0_rgba(15,23,42,0.05)]">
           <div class="flex items-center gap-3">
             <NIcon size="20" class="shrink-0 text-slate-400">
               <Search />
@@ -359,7 +362,7 @@ onUnmounted(() => {
               v-model="searchQuery"
               type="text"
               class="min-w-0 flex-1 bg-transparent text-sm text-slate-800 outline-none placeholder:text-slate-400"
-              placeholder="输入完整云类型名称，或 @用户名进行精确搜索"
+              placeholder="搜索云型名称，或输入 @用户名 查看某个用户的图片"
             />
             <button
               v-if="searchQuery"
@@ -379,7 +382,7 @@ onUnmounted(() => {
               正在按上传者搜索：{{ normalizedSearch.slice(1) || '请输入用户名' }}
             </template>
             <template v-else>
-              正在精确匹配云型名称：{{ normalizedSearch }}
+              正在匹配云型名称和自定义云型：{{ normalizedSearch }}
             </template>
           </p>
         </div>
@@ -427,7 +430,7 @@ onUnmounted(() => {
           :key="cloud.id"
           type="button"
           @click="openDetail(cloud)"
-          class="oc-interactive-card group relative mb-3 block w-full break-inside-avoid overflow-hidden border border-slate-200 bg-slate-200 text-left transition-transform duration-300 hover:-translate-y-1"
+          class="oc-interactive-card group relative mb-3 block w-full break-inside-avoid overflow-hidden border border-slate-200 bg-slate-200 text-left shadow-sm transition-transform duration-300 hover:-translate-y-1 hover:shadow-lg"
         >
           <img
             :src="cloud.thumbnail_url || cloud.image_url"
@@ -441,7 +444,7 @@ onUnmounted(() => {
               <div class="flex items-center justify-between gap-3">
                 <p class="truncate text-sm font-semibold">{{ cloud.cloudTypeName }}</p>
                 <NTag size="small" :bordered="false" class="shrink-0 bg-white/12 text-white backdrop-blur">
-                  稀有度 {{ cloud.cloudTypeRarity }}
+                  {{ rarityMeta[cloud.cloudTypeRarity].label }}
                 </NTag>
               </div>
               <p class="mt-2 flex items-center gap-1.5 truncate text-xs text-white/82">
@@ -460,7 +463,7 @@ onUnmounted(() => {
                 <NIcon size="14">
                   <Location />
                 </NIcon>
-                <span class="truncate">{{ formatCoordinate(cloud.latitude) }}, {{ formatCoordinate(cloud.longitude) }}</span>
+                <span class="truncate">{{ cloud.location_name || '未填写位置' }}</span>
               </p>
             </div>
           </div>
@@ -475,7 +478,7 @@ onUnmounted(() => {
         </NEmpty>
       </section>
 
-      <div v-if="currentPage > 1 || hasNextPage" class="mt-8 flex items-center justify-center gap-2">
+      <div v-if="totalPages > 1" class="mt-8 flex items-center justify-center gap-2">
         <NButton
           secondary
           strong
@@ -487,13 +490,28 @@ onUnmounted(() => {
           上一页
         </NButton>
 
-        <span class="border border-slate-200 bg-white px-4 py-2 text-sm text-slate-600">第 {{ currentPage }} 页</span>
+        <template v-for="page in totalPages" :key="page">
+          <NButton
+            v-if="page === 1 || page === totalPages || Math.abs(page - currentPage) <= 2"
+            secondary
+            strong
+            :class="page === currentPage ? 'oc-panel-button oc-panel-button--sky' : 'oc-panel-button oc-panel-button--neutral'"
+            type="default"
+            @click="goToPage(page)"
+          >
+            {{ page }}
+          </NButton>
+          <span
+            v-else-if="page === 2 || page === totalPages - 1"
+            class="px-1 text-sm text-slate-400"
+          >...</span>
+        </template>
 
         <NButton
           secondary
           strong
           type="default"
-          :disabled="!hasNextPage"
+          :disabled="currentPage >= totalPages"
           class="oc-panel-button oc-panel-button--neutral"
           @click="goToPage(currentPage + 1)"
         >
@@ -501,6 +519,10 @@ onUnmounted(() => {
         </NButton>
       </div>
 
+      <div v-if="totalCount > 0" class="mt-2 text-center text-xs text-slate-400">
+        共 {{ totalCount }} 张照片，第 {{ currentPage }} / {{ totalPages }} 页
+      </div>
+
       <ImageDetailModal
         v-if="selectedCloud"
         :open="!!selectedCloud"
@@ -509,8 +531,8 @@ onUnmounted(() => {
         :image-alt="selectedCloud.cloudTypeName"
         :title="selectedCloud.cloudTypeName"
         :subtitle="`上传者：${selectedCloud.username}`"
-        :badge-label="`稀有度 ${selectedCloud.cloudTypeRarity}`"
-        :badge-class="rarityChip"
+        :badge-label="rarityMeta[selectedCloud.cloudTypeRarity].label"
+        :badge-class="rarityMeta[selectedCloud.cloudTypeRarity].chip"
         @close="closeDetail"
       >
         <div class="grid gap-4 sm:grid-cols-2">
@@ -524,7 +546,7 @@ onUnmounted(() => {
           </div>
           <div class="oc-inset-panel">
             <p class="oc-section-label">位置</p>
-            <p class="mt-2 text-sm font-medium text-slate-900">已记录经纬度</p>
+            <p class="mt-2 text-sm font-medium text-slate-900">{{ selectedCloud.location_name || '未填写位置名称' }}</p>
           </div>
           <div class="oc-inset-panel">
             <p class="oc-section-label">模糊化经纬度</p>
@@ -534,22 +556,16 @@ onUnmounted(() => {
           </div>
         </div>
 
-      <div class="mt-5 border border-slate-200 bg-white p-5">
+        <div class="mt-5 border border-slate-200 bg-white p-5">
           <p class="oc-section-label">图片说明</p>
           <p class="mt-3 text-sm leading-7 text-slate-700">
             {{ selectedCloud.description || '上传者没有留下额外说明。' }}
           </p>
-      </div>
-
-      <RouterLink
-        :to="{ name: 'user-profile', params: { id: selectedCloud.username } }"
-        class="oc-panel-button oc-panel-button--neutral mt-5 inline-flex"
-      >
-        查看 @{{ selectedCloud.username }} 的公开主页
-      </RouterLink>
-      <MiniLocationMap
+        </div>
+        <MiniLocationMap
           :latitude="selectedCloud.latitude"
           :longitude="selectedCloud.longitude"
+          :location-name="selectedCloud.location_name"
         />
 
         <template v-if="selectedCloudIsMine" #actions>

src/views/map/MapView.vue

@@ -3,10 +3,10 @@ import { computed, ref, onMounted, onUnmounted } from 'vue'
 import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
 import MiniLocationMap from '@/components/cloud/MiniLocationMap.vue'
 import QuickUploadModal from '@/components/cloud/QuickUploadModal.vue'
-import { apiRequest, toApiCloud } from '@/lib/api'
+import { apiRequest } from '@/lib/api'
 import { loadAMap } from '@/lib/amap'
 import { useAuthStore } from '@/stores/auth'
-import type { ApiCloud, BackendCloudInfo } from '@/types/api'
+import type { ApiCloud } from '@/types/api'
 import { NIcon } from 'naive-ui'
 import { Adjustments, Calendar, CloudUpload, Minus, Plus, Refresh, Map, Satellite, X } from '@vicons/tabler'
 
@@ -16,9 +16,10 @@ interface CloudMarkerData {
   longitude: number
   imageUrl: string
   thumbnailUrl: string | null
+  locationName: string | null
   description: string | null
   cloudTypeName: string
-  rarity: number
+  rarity: 'common' | 'uncommon' | 'rare'
   username: string
   capturedAt: string
   createdAt: string
@@ -65,8 +66,17 @@ let zoomAnimationValue = currentZoom.value
 let zoomLastFrameTime = 0
 let zoomHoldStarted = false
 
-const markerBorder = '#64748b'
-const rarityChip = 'border-slate-200 bg-slate-50 text-slate-600'
+const rarityColors: Record<string, string> = {
+  common: '#cbd5e1',
+  uncommon: '#60a5fa',
+  rare: '#c084fc',
+}
+
+const rarityMeta = {
+  common: { label: '常见', chip: 'bg-sky-100 text-sky-700 border-sky-200' },
+  uncommon: { label: '少见', chip: 'bg-amber-100 text-amber-700 border-amber-200' },
+  rare: { label: '罕见', chip: 'bg-rose-100 text-rose-700 border-rose-200' },
+} as const
 
 const selectedTimeLabel = computed(() => formatMinuteOfDay(selectedMinuteOfDay.value))
 const currentMinutePercent = computed(() => Math.min(100, Math.max(0, currentMinuteOfDay.value / 1439 * 100)))
@@ -168,7 +178,7 @@ function getMarkerOpacity(cloud: CloudMarkerData) {
 }
 
 function bubbleContent(cloud: CloudMarkerData): HTMLElement {
-  const border = markerBorder
+  const border = rarityColors[cloud.rarity] || rarityColors.common
   const bubbleImage = cloud.thumbnailUrl || cloud.imageUrl
   const opacity = getMarkerOpacity(cloud) ?? MIN_MARKER_OPACITY
 
@@ -189,9 +199,9 @@ function bubbleContent(cloud: CloudMarkerData): HTMLElement {
 }
 
 function hoverCardContent(cloud: CloudMarkerData): HTMLElement {
-  const border = markerBorder
+  const border = rarityColors[cloud.rarity] || rarityColors.common
   const cardImage = cloud.thumbnailUrl || cloud.imageUrl
-  const label = `稀有度 ${cloud.rarity}`
+  const label = cloud.rarity === 'common' ? '常见' : cloud.rarity === 'uncommon' ? '少见' : '罕见'
 
   const card = document.createElement('div')
   card.style.cssText = 'background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,0.18);overflow:hidden;width:200px;font-family:system-ui,-apple-system,sans-serif'
@@ -208,15 +218,15 @@ function hoverCardContent(cloud: CloudMarkerData): HTMLElement {
 
   const name = document.createElement('span')
   name.textContent = cloud.cloudTypeName
-  name.style.cssText = 'font-size:13px;font-weight:600;color:#1e293b'
+  name.style.cssText = 'font-size:13px;font-weight:600;color:#1f2937'
 
   const rarity = document.createElement('span')
   rarity.textContent = label
   rarity.style.cssText = `font-size:10px;padding:1px 5px;border-radius:3px;color:${border};background:${border}22`
 
   const meta = document.createElement('div')
-  meta.textContent = `${cloud.username} · ${timeAgo(cloud.capturedAt)}`
-  meta.style.cssText = 'font-size:11px;color:#94a3b8;margin-top:3px'
+  meta.textContent = `📷 ${cloud.username} · ${timeAgo(cloud.capturedAt)}`
+  meta.style.cssText = 'font-size:11px;color:#9ca3af;margin-top:3px'
 
   title.append(name, rarity)
   body.append(title, meta)
@@ -411,24 +421,25 @@ function toCloudMarker(row: ApiCloud): CloudMarkerData {
     longitude: row.longitude as number,
     imageUrl: row.image_url,
     thumbnailUrl: row.thumbnail_url,
+    locationName: row.location_name,
     description: row.description,
-    cloudTypeName: row.cloud_type_name || '未知',
-    rarity: row.cloud_type_rarity_value ?? 0,
+    cloudTypeName: row.cloud_type_name || row.custom_cloud_type || '未知',
+    rarity: row.cloud_type_rarity || 'common',
     username: row.username || '匿名',
     capturedAt: row.captured_at || row.created_at,
     createdAt: row.created_at,
   }
 }
 
-async function fetchCloudsByRange(field: 'captured_at' | 'uploaded_at', start: Date, end: Date): Promise<CloudMarkerData[]> {
+async function fetchCloudsByRange(field: 'captured_at' | 'created_at', start: Date, end: Date): Promise<CloudMarkerData[]> {
   const params = new URLSearchParams({
     start: start.toISOString(),
     end: end.toISOString(),
     time_field: field,
   })
   try {
-    const rows = await apiRequest<BackendCloudInfo[]>(`/cloud/map?${params}`, { auth: false })
-    return rows.map(toApiCloud).map(toCloudMarker)
+    const rows = await apiRequest<ApiCloud[]>(`/clouds/map?${params}`, { auth: false })
+    return rows.map(toCloudMarker)
   } catch (error) {
     statusText.value = `查询失败: ${error instanceof Error ? error.message : '未知错误'}`
     return []
@@ -716,7 +727,7 @@ onUnmounted(() => {
         <div class="relative w-[min(42vw,420px)] min-w-[220px]">
           <div
             v-if="sliderDragging"
-            class="oc-panel-card absolute bottom-8 border border-slate-200 bg-white/95 px-3 py-1.5 text-xs font-medium text-slate-800 backdrop-blur"
+            class="absolute bottom-8 border border-slate-200 bg-white/95 px-3 py-1.5 text-xs font-medium text-slate-800 shadow-md backdrop-blur"
             :style="{ left: `${selectedMinutePercent}%`, transform: 'translateX(-50%)' }"
           >
             {{ selectedTimeLabel }}
@@ -761,7 +772,7 @@ onUnmounted(() => {
 
           <div
             v-if="archivePanelOpen"
-            class="oc-panel-card absolute bottom-16 right-0 w-72 border border-slate-200 bg-white p-4"
+            class="absolute bottom-16 right-0 w-72 border border-slate-200 bg-white p-4 shadow-[8px_8px_0_0_rgba(15,23,42,0.08)]"
           >
             <div class="flex items-center justify-between gap-2">
               <p class="text-sm font-semibold text-slate-900">历史位置</p>
@@ -825,26 +836,24 @@ onUnmounted(() => {
       :image-alt="previewCloud.cloudTypeName"
       :title="previewCloud.cloudTypeName"
       :subtitle="`上传者：${previewCloud.username}`"
-      :badge-label="`稀有度 ${previewCloud.rarity}`"
-      :badge-class="rarityChip"
+      :badge-label="rarityMeta[previewCloud.rarity].label"
+      :badge-class="rarityMeta[previewCloud.rarity].chip"
       @close="previewCloud = null"
     >
       <div class="grid gap-4 sm:grid-cols-2">
-        <div class="oc-inset-panel">
+        <div class="rounded-2xl bg-slate-50 p-4">
           <p class="oc-section-label">上传时间</p>
           <p class="mt-2 text-sm font-medium text-slate-900">{{ formatDateTime(previewCloud.createdAt) }}</p>
         </div>
-        <div class="oc-inset-panel">
+        <div class="rounded-2xl bg-slate-50 p-4">
           <p class="oc-section-label">拍摄时间</p>
           <p class="mt-2 text-sm font-medium text-slate-900">{{ formatDateTime(previewCloud.capturedAt) }}</p>
         </div>
-        <div class="oc-inset-panel">
+        <div class="rounded-2xl bg-slate-50 p-4">
           <p class="oc-section-label">位置</p>
-          <p class="mt-2 text-sm font-medium text-slate-900">
-            纬度 {{ formatCoordinate(previewCloud.latitude) }} / 经度 {{ formatCoordinate(previewCloud.longitude) }}
-          </p>
+          <p class="mt-2 text-sm font-medium text-slate-900">{{ previewCloud.locationName || '未填写位置名称' }}</p>
         </div>
-        <div class="oc-inset-panel">
+        <div class="rounded-2xl bg-slate-50 p-4">
           <p class="oc-section-label">模糊化经纬度</p>
           <p class="mt-2 text-sm font-medium text-slate-900">
             纬度 {{ formatCoordinate(previewCloud.latitude) }} / 经度 {{ formatCoordinate(previewCloud.longitude) }}
@@ -852,7 +861,7 @@ onUnmounted(() => {
         </div>
       </div>
 
-      <div class="mt-5 border border-slate-200 bg-white p-5">
+      <div class="mt-5 rounded-[28px] border border-slate-200 bg-white p-5">
         <p class="oc-section-label">图片说明</p>
         <p class="mt-3 text-sm leading-7 text-slate-700">
           {{ previewCloud.description || '上传者没有留下额外说明。' }}
@@ -861,6 +870,7 @@ onUnmounted(() => {
       <MiniLocationMap
         :latitude="previewCloud.latitude"
         :longitude="previewCloud.longitude"
+        :location-name="previewCloud.locationName"
       />
     </ImageDetailModal>
 

src/views/profile/ProfileSettingsView.vue

@@ -1,15 +1,13 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { RouterLink, useRouter } from 'vue-router'
-import { NAlert, NButton, NCard, NForm, NInput, useMessage } from 'naive-ui'
+import { RouterLink } from 'vue-router'
+import { NAlert, NButton, NCard, NInput, useMessage } from 'naive-ui'
 import { useAuthStore } from '@/stores/auth'
 
 const authStore = useAuthStore()
-const router = useRouter()
 const message = useMessage()
 
 const usernameDraft = ref('')
-const currentPassword = ref('')
 const newPassword = ref('')
 const confirmNewPassword = ref('')
 const error = ref('')
@@ -31,8 +29,8 @@ async function saveUsername() {
     error.value = '昵称不能为空。'
     return
   }
-  if (nextUsername.length > 16) {
-    error.value = '昵称不能超过 16 个字符。'
+  if (nextUsername.length < 2) {
+    error.value = '昵称至少需要 2 个字符。'
     return
   }
   if (nextUsername === authStore.profile?.username) {
@@ -64,19 +62,14 @@ async function savePassword() {
     error.value = '两次输入的新密码不一致。'
     return
   }
-  if (!currentPassword.value) {
-    error.value = '请输入当前密码。'
-    return
-  }
 
   passwordSaving.value = true
   try {
-    await authStore.updatePassword(currentPassword.value, newPassword.value)
-    currentPassword.value = ''
+    await authStore.updatePassword(newPassword.value)
     newPassword.value = ''
     confirmNewPassword.value = ''
-    message.success('密码已更新，请重新登录')
-    await router.push('/login')
+    success.value = '密码已更新。'
+    message.success('密码已更新')
   } catch (e) {
     error.value = e instanceof Error ? e.message : '密码更新失败'
   } finally {
@@ -86,8 +79,8 @@ async function savePassword() {
 </script>
 
 <template>
-  <div class="min-h-[calc(100vh-4rem)] bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)] py-10">
-    <div class="oc-container oc-container--content">
+  <div class="min-h-[calc(100vh-4rem)] bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)] px-4 py-10">
+    <div class="mx-auto max-w-4xl">
       <RouterLink to="/profile">
         <NButton type="default" secondary strong class="oc-panel-button oc-panel-button--neutral">← 返回个人主页</NButton>
       </RouterLink>
@@ -96,7 +89,7 @@ async function savePassword() {
         <p class="oc-page-eyebrow">Account Settings</p>
         <h1 class="oc-page-title">个人资料设置</h1>
         <p class="oc-page-description">
-          修改公开昵称和登录密码。昵称会显示在画廊、百科和地图中，且不能与其他用户重复。
+          修改公开昵称和登录密码。昵称会显示在画廊、图鉴和地图中，且不能与其他用户重复。
         </p>
       </div>
 
@@ -118,7 +111,7 @@ async function savePassword() {
           {{ success }}
         </NAlert>
 
-        <NCard class="oc-panel-card border border-slate-200 bg-white" :bordered="false">
+        <NCard class="oc-panel-card border border-slate-200 bg-white shadow-sm" :bordered="false">
           <div class="grid gap-5 lg:grid-cols-[0.8fr_1.2fr] lg:items-start">
             <div>
               <h2 class="text-2xl font-bold text-slate-900">公开昵称</h2>
@@ -130,7 +123,7 @@ async function savePassword() {
               <NInput
                 v-model:value="usernameDraft"
                 placeholder="输入新的昵称"
-                maxlength="16"
+                maxlength="32"
                 show-count
               />
               <NButton
@@ -147,7 +140,7 @@ async function savePassword() {
           </div>
         </NCard>
 
-        <NCard class="oc-panel-card border border-slate-200 bg-white" :bordered="false">
+        <NCard class="oc-panel-card border border-slate-200 bg-white shadow-sm" :bordered="false">
           <div class="grid gap-5 lg:grid-cols-[0.8fr_1.2fr] lg:items-start">
             <div>
               <h2 class="text-2xl font-bold text-slate-900">登录密码</h2>
@@ -155,48 +148,19 @@ async function savePassword() {
                 修改后下次登录需要使用新密码。建议使用至少 8 位且不易猜测的密码。
               </p>
             </div>
-            <NForm class="grid gap-3" @submit.prevent="savePassword">
-              <input
-                :value="authStore.user?.email || ''"
-                type="text"
-                name="username"
-                autocomplete="username"
-                class="sr-only"
-                tabindex="-1"
-                aria-label="账户邮箱"
-                readonly
-              />
-              <NInput
-                v-model:value="currentPassword"
-                type="password"
-                show-password-on="click"
-                :input-props="{
-                  autocomplete: 'current-password',
-                  name: 'current-password',
-                  required: true,
-                }"
-                placeholder="当前密码"
-              />
+            <div class="grid gap-3">
               <NInput
                 v-model:value="newPassword"
                 type="password"
                 show-password-on="click"
-                :input-props="{
-                  autocomplete: 'new-password',
-                  name: 'new-password',
-                  required: true,
-                }"
+                autocomplete="new-password"
                 placeholder="新密码"
               />
               <NInput
                 v-model:value="confirmNewPassword"
                 type="password"
                 show-password-on="click"
-                :input-props="{
-                  autocomplete: 'new-password',
-                  name: 'confirm-new-password',
-                  required: true,
-                }"
+                autocomplete="new-password"
                 placeholder="确认新密码"
               />
               <div class="flex justify-end">
@@ -204,14 +168,14 @@ async function savePassword() {
                   secondary
                   strong
                   type="default"
-                  attr-type="submit"
                   class="oc-panel-button oc-panel-button--teal"
                   :loading="passwordSaving"
+                  @click="savePassword"
                 >
                   保存密码
                 </NButton>
               </div>
-            </NForm>
+            </div>
           </div>
         </NCard>
       </div>

src/views/profile/ProfileView.vue

@@ -2,6 +2,7 @@
 import { computed, nextTick, ref, watch } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 import { NAlert, NButton, NCard, NDropdown, NEmpty, NIcon, NSkeleton, useMessage } from 'naive-ui'
+import EncyclopediaProgressCard from '@/components/cloud/EncyclopediaProgressCard.vue'
 import { Settings } from '@vicons/tabler'
 import CloudEditModal, { type CloudEditFormValue } from '@/components/cloud/CloudEditModal.vue'
 import ImageDetailModal from '@/components/cloud/ImageDetailModal.vue'
@@ -9,8 +10,9 @@ import MiniLocationMap from '@/components/cloud/MiniLocationMap.vue'
 import ContributionHeatmap from '@/components/profile/ContributionHeatmap.vue'
 import { useAuthStore } from '@/stores/auth'
 import { useCloudsStore } from '@/stores/clouds'
+import { useEncyclopediaStore } from '@/stores/encyclopedia'
 import { useProfileStore, type ProfileCloudItem } from '@/stores/profile'
-import type { Profile } from '@/types/database'
+import type { CloudType, Profile } from '@/types/database'
 
 interface TimelineGroup {
   key: string
@@ -21,6 +23,7 @@ interface TimelineGroup {
 const route = useRoute()
 const authStore = useAuthStore()
 const cloudsStore = useCloudsStore()
+const encyclopediaStore = useEncyclopediaStore()
 const profileStore = useProfileStore()
 const message = useMessage()
 
@@ -34,7 +37,11 @@ const editSaving = ref(false)
 const manageError = ref('')
 const editInitialValue = ref<CloudEditFormValue | null>(null)
 
-const rarityChip = 'border-slate-200 bg-slate-50 text-slate-600'
+const rarityMeta = {
+  common: { label: '常见', chip: 'bg-sky-100 text-sky-700 border-sky-200' },
+  uncommon: { label: '少见', chip: 'bg-amber-100 text-amber-700 border-amber-200' },
+  rare: { label: '罕见', chip: 'bg-rose-100 text-rose-700 border-rose-200' },
+} satisfies Record<CloudType['rarity'], { label: string; chip: string }>
 
 const statusMeta = {
   approved: { label: '已通过', chip: 'bg-emerald-100 text-emerald-700 border-emerald-200' },
@@ -42,32 +49,44 @@ const statusMeta = {
   rejected: { label: '未通过', chip: 'bg-rose-100 text-rose-700 border-rose-200' },
 } satisfies Record<ProfileCloudItem['status'], { label: string; chip: string }>
 
-const viewedIdentifier = computed(() => {
-  const routeUsername = typeof route.params.id === 'string' ? route.params.id : null
-  return routeUsername || authStore.user?.id || null
+const viewedUserId = computed(() => {
+  const routeUserId = typeof route.params.id === 'string' ? route.params.id : null
+  return routeUserId || authStore.user?.id || null
 })
 
-const isOwnProfile = computed(() => typeof route.params.id !== 'string')
+const isOwnProfile = computed(() => {
+  return !!viewedUserId.value && viewedUserId.value === authStore.user?.id
+})
 
-const loading = computed(() => profileStore.isLoading(viewedIdentifier.value, isOwnProfile.value))
+const loading = computed(() => profileStore.isLoading(viewedUserId.value, isOwnProfile.value))
 const errorMsg = computed(() => {
-  if (!viewedIdentifier.value) return '未找到要查看的用户。'
-  return profileStore.getError(viewedIdentifier.value, isOwnProfile.value)
+  if (!viewedUserId.value) return '未找到要查看的用户。'
+  return profileStore.getError(viewedUserId.value, isOwnProfile.value)
 })
-const profileData = computed<Profile | null>(() => profileStore.getProfile(viewedIdentifier.value))
-const clouds = computed<ProfileCloudItem[]>(() => profileStore.getClouds(viewedIdentifier.value, isOwnProfile.value))
-const receivedLikes = computed(() => isOwnProfile.value ? authStore.user?.received_like_count || 0 : 0)
+const profileData = computed<Profile | null>(() => profileStore.getProfile(viewedUserId.value))
+const clouds = computed<ProfileCloudItem[]>(() => profileStore.getClouds(viewedUserId.value, isOwnProfile.value))
 
 const pageTitle = computed(() => {
   return isOwnProfile.value ? '我的天空日志' : `${profileData.value?.username || '这位用户'}的天空日志`
 })
 
+// const profileSubtitle = computed(() => {
+//   if (isOwnProfile.value) {
+//     return '回看你的云图记录、收集进度和拍摄节奏。'
+//   }
+//   return '公开展示的云图记录会按时间顺序陈列在这里。'
+// })
+
 const totalShots = computed(() => clouds.value.length)
 
 const approvedShots = computed(() => {
   return clouds.value.filter(item => item.status === 'approved').length
 })
 
+const pendingShots = computed(() => {
+  return clouds.value.filter(item => item.status === 'pending').length
+})
+
 const selectedCloudCount = computed(() => selectedCloudIds.value.size)
 
 const cloudActionOptions = computed(() => {
@@ -165,6 +184,44 @@ const activeUploadDays = computed(() => {
   return contributionCells.value.filter(cell => cell.count > 0).length
 })
 
+const currentUploadStreak = computed(() => {
+  let streak = 0
+  const cursor = startOfDay(new Date())
+
+  while (true) {
+    const key = toLocalDayKey(cursor)
+    if ((uploadDayCounts.value.get(key) || 0) <= 0) break
+    streak += 1
+    cursor.setDate(cursor.getDate() - 1)
+  }
+
+  return streak
+})
+
+const longestUploadStreak = computed(() => {
+  let best = 0
+  let current = 0
+  let previousDate: Date | null = null
+
+  for (const cell of contributionCells.value) {
+    if (cell.count <= 0) continue
+
+    const currentDate = startOfDay(new Date(cell.date))
+
+    if (!previousDate) {
+      current = 1
+    } else {
+      const diffDays = Math.round((currentDate.getTime() - previousDate.getTime()) / 86400000)
+      current = diffDays === 1 ? current + 1 : 1
+    }
+
+    if (current > best) best = current
+    previousDate = currentDate
+  }
+
+  return best
+})
+
 function toDayKey(iso: string) {
   const date = new Date(iso)
   return toLocalDayKey(date)
@@ -176,6 +233,10 @@ function toLocalDayKey(date: Date) {
   return `${date.getFullYear()}-${month}-${day}`
 }
 
+function startOfDay(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+}
+
 function formatDate(iso: string | null) {
   if (!iso) return '未知时间'
   return new Date(iso).toLocaleDateString('zh-CN', {
@@ -211,9 +272,7 @@ function formatCoordinate(value: number | null) {
 }
 
 function formatCloudTime(item: ProfileCloudItem) {
-  return item.captured_at
-    ? `拍摄于 ${formatDateTime(item.captured_at)}`
-    : `上传于 ${formatDateTime(item.created_at)}`
+  return formatDateTime(item.captured_at || item.created_at)
 }
 
 function getProfileInitial(profile: Profile | null) {
@@ -263,10 +322,12 @@ function formatDatetimeLocal(iso: string | null) {
 function openEditModal(cloud: ProfileCloudItem) {
   manageError.value = ''
   editInitialValue.value = {
-    cloudCategoryId: cloud.cloud_type_id,
+    cloudCategoryId: cloud.cloud_type_id ?? (cloud.custom_cloud_type ? 'other' : null),
+    customCloudType: cloud.custom_cloud_type || '',
     capturedAt: formatDatetimeLocal(cloud.captured_at),
     latitude: cloud.latitude,
     longitude: cloud.longitude,
+    locationName: cloud.location_name || '',
     description: cloud.description || '',
     isPublic: !cloud.is_hidden,
   }
@@ -284,20 +345,24 @@ function blurCoordinate(value: number): number {
 }
 
 async function submitEditModal(value: CloudEditFormValue) {
-  if (!selectedCloud.value || !viewedIdentifier.value) return
+  if (!selectedCloud.value || !viewedUserId.value) return
 
   if (!value.cloudCategoryId) {
     manageError.value = '请选择云型类别。'
     return
   }
-  const hasLat = typeof value.latitude === 'number' && !Number.isNaN(value.latitude)
-  const hasLng = typeof value.longitude === 'number' && !Number.isNaN(value.longitude)
-  if (!hasLat || !hasLng) {
-    manageError.value = '经纬度为必填项。'
+  if (value.cloudCategoryId === 'other' && !value.customCloudType.trim()) {
+    manageError.value = '请输入自定义云型名称。'
     return
   }
-  if (value.description.trim().length > 128) {
-    manageError.value = '图片描述不能超过 128 个字符。'
+  if (!value.capturedAt) {
+    manageError.value = '请选择拍摄时间。'
+    return
+  }
+  const hasLat = typeof value.latitude === 'number' && !Number.isNaN(value.latitude)
+  const hasLng = typeof value.longitude === 'number' && !Number.isNaN(value.longitude)
+  if (hasLat !== hasLng) {
+    manageError.value = '经纬度必须同时填写。'
     return
   }
 
@@ -305,12 +370,14 @@ async function submitEditModal(value: CloudEditFormValue) {
   manageError.value = ''
 
   try {
-    const updated = await profileStore.updateCloud(viewedIdentifier.value, selectedCloud.value.id, {
-      type_id: value.cloudCategoryId,
-      latitude: blurCoordinate(value.latitude as number),
-      longitude: blurCoordinate(value.longitude as number),
-      description: value.description.trim(),
-      ...(value.capturedAt ? { captured_at: new Date(value.capturedAt).toISOString() } : {}),
+    const updated = await profileStore.updateCloud(viewedUserId.value, selectedCloud.value.id, {
+      cloud_type_id: value.cloudCategoryId === 'other' ? null : value.cloudCategoryId,
+      custom_cloud_type: value.cloudCategoryId === 'other' ? value.customCloudType.trim() : null,
+      latitude: hasLat ? blurCoordinate(value.latitude as number) : null,
+      longitude: hasLng ? blurCoordinate(value.longitude as number) : null,
+      location_name: value.locationName.trim() || null,
+      description: value.description.trim() || null,
+      captured_at: new Date(value.capturedAt).toISOString(),
       is_hidden: !value.isPublic,
     })
     selectedCloud.value = updated
@@ -323,13 +390,13 @@ async function submitEditModal(value: CloudEditFormValue) {
 }
 
 async function toggleSelectedCloudPrivacy() {
-  if (!selectedCloud.value || !viewedIdentifier.value) return
+  if (!selectedCloud.value || !viewedUserId.value) return
 
   manageError.value = ''
   const nextHidden = !selectedCloud.value.is_hidden
 
   try {
-    await profileStore.updateCloudVisibility(viewedIdentifier.value, selectedCloud.value.id, nextHidden)
+    await profileStore.updateCloudVisibility(viewedUserId.value, selectedCloud.value.id, nextHidden)
     selectedCloud.value = { ...selectedCloud.value, is_hidden: nextHidden }
   } catch (error) {
     manageError.value = error instanceof Error ? error.message : '私密状态更新失败'
@@ -337,14 +404,14 @@ async function toggleSelectedCloudPrivacy() {
 }
 
 async function deleteCloudByIds(cloudIds: string[]) {
-  if (!viewedIdentifier.value || !cloudIds.length) return
+  if (!viewedUserId.value || !cloudIds.length) return
   const confirmed = window.confirm(`确定删除 ${cloudIds.length} 张图片吗？删除后无法在页面中恢复。`)
   if (!confirmed) return
 
   manageError.value = ''
 
   try {
-    const deletedCount = await profileStore.deleteClouds(viewedIdentifier.value, cloudIds)
+    const deletedCount = await profileStore.deleteClouds(viewedUserId.value, cloudIds)
     if (selectedCloud.value && cloudIds.includes(selectedCloud.value.id)) {
       selectedCloud.value = null
       closeEditModal()
@@ -371,16 +438,18 @@ async function loadProfilePage(force = false) {
   clearCloudSelection()
   selectionMode.value = false
 
-  const targetIdentifier = viewedIdentifier.value
+  const targetUserId = viewedUserId.value
 
-  if (!targetIdentifier) {
+  if (!targetUserId) {
     return
   }
 
-  await profileStore.fetchProfilePage(targetIdentifier, isOwnProfile.value, force)
+  await profileStore.fetchProfilePage(targetUserId, isOwnProfile.value, force)
 
   if (isOwnProfile.value) {
     await cloudsStore.fetchCloudTypes()
+    await encyclopediaStore.fetchCloudTypes(force)
+    await encyclopediaStore.fetchMyCollection(force)
   }
 }
 
@@ -406,98 +475,77 @@ watch(selectedUploadDate, async newValue => {
   <div class="relative">
     <div class="oc-page-hero">
       <div class="oc-container oc-container--content oc-page-hero__inner">
-        <div
-          v-if="loading"
-          class="oc-page-hero__split"
-        >
-          <NCard class="oc-panel-card h-full border border-slate-200" :bordered="false">
+        <div v-if="loading" class="grid gap-6 lg:grid-cols-[1.25fr_0.95fr]">
+          <NCard class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
             <NSkeleton class="h-6 w-1/3" />
             <NSkeleton class="mt-4 h-10 w-2/3" />
             <NSkeleton class="mt-5 h-4 w-full" :repeat="2" />
           </NCard>
-          <div v-if="isOwnProfile" class="grid grid-cols-2 gap-3 min-[900px]:h-full min-[900px]:grid-rows-2">
-            <NCard v-for="n in 4" :key="n" class="oc-panel-card-soft h-full border border-white/80 bg-white/85 backdrop-blur" :bordered="false">
-              <NSkeleton class="h-3 w-2/3" />
-              <NSkeleton class="mt-3 h-7 w-1/2" />
-            </NCard>
-          </div>
-
-          <NCard v-else class="oc-panel-card-soft h-full border border-white/80 bg-white/85 backdrop-blur" :bordered="false">
+          <NCard class="oc-panel-card-soft border border-white/80 bg-white/85 shadow-sm backdrop-blur" :bordered="false">
             <NSkeleton class="h-5 w-1/3" />
             <NSkeleton class="mt-4 h-8 w-1/2" />
             <NSkeleton class="mt-5 h-3 w-full" />
           </NCard>
         </div>
 
-        <div
-          v-else
-          class="oc-page-hero__split oc-page-hero__split--stretch"
-        >
-          <NCard class="oc-panel-card h-full border border-slate-200 bg-white/90 backdrop-blur" :bordered="false">
-            <div class="flex gap-5">
-              <div
-                class="profile-avatar flex h-20 w-20 shrink-0 items-center justify-center border border-slate-300 bg-[linear-gradient(135deg,#eef9f3_0%,#d9efe3_100%)] text-3xl font-bold text-slate-900"
-              >
-                <img
-                  v-if="profileData?.avatar_id"
-                  :src="profileData.avatar_id"
-                  :alt="profileData.username"
-                  class="h-full w-full object-cover"
-                />
-                <template v-else>
-                  {{ getProfileInitial(profileData) }}
-                </template>
-              </div>
+        <div v-else class="grid gap-6 lg:grid-cols-[1.25fr_0.95fr] lg:items-start">
+          <div class="flex gap-5">
+            <div
+              class="flex h-20 w-20 shrink-0 items-center justify-center border border-slate-300 bg-[linear-gradient(135deg,#eef9f3_0%,#d9efe3_100%)] text-3xl font-bold text-slate-900 shadow-[4px_4px_0_0_rgba(15,23,42,0.08)]"
+            >
+              <img
+                v-if="profileData?.avatar_url"
+                :src="profileData.avatar_url"
+                :alt="profileData.username"
+                class="h-full w-full object-cover"
+              />
+              <template v-else>
+                {{ getProfileInitial(profileData) }}
+              </template>
+            </div>
 
-              <div class="min-w-0">
-                <p class="oc-page-eyebrow">Sky Journal</p>
-                <h1 class="oc-page-title">
-                  {{ pageTitle }}
-                </h1>
-                <div class="mt-3 flex flex-wrap items-center gap-3">
-                  <p class="text-lg font-medium text-slate-700">
-                    @{{ profileData?.username || '未知用户' }}
-                  </p>
-                  <RouterLink v-if="isOwnProfile" to="/profile/settings">
-                    <button
-                      type="button"
-                      class="oc-icon-button oc-icon-button--small"
-                      title="个人资料设置"
-                      aria-label="个人资料设置"
-                    >
-                      <NIcon size="17">
-                        <Settings />
-                      </NIcon>
-                    </button>
-                  </RouterLink>
-                </div>
-                <div class="mt-5 flex flex-wrap items-center gap-3 text-sm text-slate-500">
-                  <span v-if="isOwnProfile">注册于 {{ formatDate(profileData?.created_at || null) }}</span>
-                </div>
+            <div class="min-w-0">
+              <p class="oc-page-eyebrow">Sky Journal</p>
+              <h1 class="oc-page-title">
+                {{ pageTitle }}
+              </h1>
+              <div class="mt-3 flex flex-wrap items-center gap-3">
+                <p class="text-lg font-medium text-slate-700">
+                  @{{ profileData?.username || '未知用户' }}
+                </p>
+                <RouterLink v-if="isOwnProfile" to="/profile/settings">
+                  <button
+                    type="button"
+              class="oc-icon-button oc-icon-button--small"
+                    title="个人资料设置"
+                    aria-label="个人资料设置"
+                  >
+                    <NIcon size="17">
+                      <Settings />
+                    </NIcon>
+                  </button>
+                </RouterLink>
+              </div>
+              <!-- <p class="mt-4 max-w-2xl text-sm leading-7 text-slate-600">
+                {{ profileSubtitle }}
+              </p> -->
+              <div class="mt-5 flex flex-wrap items-center gap-3 text-sm text-slate-500">
+                <span>注册于 {{ formatDate(profileData?.created_at || null) }}</span>
+                <!-- <NTag v-if="isOwnProfile" type="primary" :bordered="false">你的主页</NTag>
+                <NTag v-else :bordered="false">公开展示</NTag> -->
               </div>
             </div>
-          </NCard>
-
-          <div v-if="isOwnProfile" class="grid grid-cols-2 gap-3 min-[900px]:h-full min-[900px]:grid-rows-2">
-            <NCard class="oc-panel-card-soft h-full border border-white/80 bg-white/85 backdrop-blur" :bordered="false">
-              <p class="oc-stat-label">总拍摄数</p>
-              <p class="oc-stat-value">{{ totalShots }}</p>
-            </NCard>
-            <NCard class="oc-panel-card-soft h-full border border-white/80 bg-white/85 backdrop-blur" :bordered="false">
-              <p class="oc-stat-label">最常拍云型</p>
-              <p class="mt-2 truncate text-xl font-bold text-slate-900">{{ mostCommonCloudType.name }}</p>
-            </NCard>
-            <NCard class="oc-panel-card-soft h-full border border-white/80 bg-white/85 backdrop-blur" :bordered="false">
-              <p class="oc-stat-label">拍摄天数</p>
-              <p class="oc-stat-value">{{ shootingDays }}</p>
-            </NCard>
-            <NCard class="oc-panel-card-soft h-full border border-white/80 bg-white/85 backdrop-blur" :bordered="false">
-              <p class="oc-stat-label">被点赞数</p>
-              <p class="oc-stat-value">{{ receivedLikes }}</p>
-            </NCard>
           </div>
 
-          <NCard v-if="!isOwnProfile" class="oc-panel-card-soft h-full border border-white/80 bg-white/85 backdrop-blur" :bordered="false">
+          <EncyclopediaProgressCard
+            v-if="isOwnProfile"
+            :unlocked-count="encyclopediaStore.unlockedCount"
+            :total-count="encyclopediaStore.cloudTypes.length || 10"
+            :percent="encyclopediaStore.unlockPercent"
+            :is-logged-in="true"
+          />
+
+          <NCard v-else class="oc-panel-card-soft border border-white/80 bg-white/85 shadow-sm backdrop-blur" :bordered="false">
             <p class="text-sm text-slate-500">公开贡献</p>
             <p class="mt-3 text-3xl font-bold text-slate-900">{{ approvedShots }}</p>
             <p class="mt-2 text-sm text-slate-500">当前公开可见的云图数量</p>
@@ -529,12 +577,50 @@ watch(selectedUploadDate, async newValue => {
       </NAlert>
 
       <template v-else>
-        <section ref="timelineSectionRef">
+        <div v-if="loading" class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+          <NCard v-for="n in 4" :key="n">
+            <NSkeleton class="h-4 w-1/3" />
+            <NSkeleton class="mt-4 h-8 w-2/3" />
+          </NCard>
+        </div>
+
+        <div v-else class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+          <NCard class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
+            <p class="text-sm text-slate-500">总拍摄数</p>
+            <p class="mt-2 text-3xl font-bold text-slate-900">{{ totalShots }}</p>
+          </NCard>
+
+          <NCard class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
+            <p class="text-sm text-slate-500">最常拍云型</p>
+            <p class="oc-stat-value">{{ mostCommonCloudType.name }}</p>
+            <p class="mt-2 text-sm text-slate-500" v-if="mostCommonCloudType.count">
+              共 {{ mostCommonCloudType.count }} 张
+            </p>
+          </NCard>
+
+          <NCard class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
+            <p class="text-sm text-slate-500">拍摄天数</p>
+            <p class="mt-2 text-3xl font-bold text-slate-900">{{ shootingDays }}</p>
+          </NCard>
+
+          <NCard class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
+            <p class="text-sm text-slate-500">{{ isOwnProfile ? '已通过 / 待审核' : '公开通过数' }}</p>
+            <p class="oc-stat-value">
+              <template v-if="isOwnProfile">{{ approvedShots }} / {{ pendingShots }}</template>
+              <template v-else>{{ approvedShots }}</template>
+            </p>
+          </NCard>
+        </div>
+
+        <section ref="timelineSectionRef" class="mt-8">
           <ContributionHeatmap
             :cells="contributionCells"
             :total-count="totalShots"
             :active-days="activeUploadDays"
+            :current-streak="currentUploadStreak"
+            :best-streak="longestUploadStreak"
             :active-date="selectedUploadDate"
+            :subtitle="isOwnProfile ? '按上传日期统计' : '按公开上传日期统计'"
             :title="isOwnProfile ? '上传活跃度' : '公开活跃度'"
             @select-date="toggleSelectedUploadDate"
           />
@@ -545,7 +631,7 @@ watch(selectedUploadDate, async newValue => {
             <div>
               <h2 class="text-2xl font-bold text-slate-900">天空日志</h2>
               <p class="oc-field-help">
-                按拍摄时间展示；未记录拍摄时间时回退为上传时间。热力图按上传日期计算。
+                按拍摄时间倒序展示，并按月份分组。热力图统计按上传日期计算。
               </p>
             </div>
             <div class="flex items-center gap-3">
@@ -582,12 +668,8 @@ watch(selectedUploadDate, async newValue => {
               >
                 清除筛选
               </NButton>
-              <RouterLink
-                v-if="isOwnProfile"
-                to="/upload"
-                class="oc-panel-button oc-panel-button--sky"
-              >
-                继续上传
+              <RouterLink v-if="isOwnProfile" to="/upload">
+                <NButton secondary strong type="default" class="oc-panel-button oc-panel-button--sky">继续上传</NButton>
               </RouterLink>
             </div>
           </div>
@@ -604,7 +686,7 @@ watch(selectedUploadDate, async newValue => {
             <div v-for="n in 2" :key="n">
               <NSkeleton class="h-6 w-40" />
               <div class="mt-4 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
-                <NCard v-for="m in 3" :key="m" class="oc-panel-card border border-slate-200" :bordered="false">
+                <NCard v-for="m in 3" :key="m" class="oc-panel-card border border-slate-200 shadow-sm" :bordered="false">
                   <NSkeleton class="h-52 w-full" />
                   <NSkeleton class="mt-4 h-5 w-2/3" />
                   <NSkeleton class="mt-3 h-4 w-1/2" />
@@ -626,8 +708,8 @@ watch(selectedUploadDate, async newValue => {
                   :key="item.id"
                   type="button"
                   @click="selectedCloud = item"
-                  class="oc-interactive-card group overflow-hidden border bg-white text-left transition-all hover:-translate-y-1"
-                  :class="selectedUploadDate && toDayKey(item.created_at) === selectedUploadDate ? 'oc-interactive-card--selected' : 'border-slate-200'"
+                class="oc-interactive-card group overflow-hidden border bg-white text-left shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg"
+                  :class="selectedUploadDate && toDayKey(item.created_at) === selectedUploadDate ? 'border-sky-500 shadow-sky-100' : 'border-slate-200'"
                 >
                   <div class="relative">
                     <img
@@ -650,8 +732,8 @@ watch(selectedUploadDate, async newValue => {
                         />
                         选择
                       </label>
-                      <span class="inline-flex border px-3 py-1 text-xs font-medium" :class="rarityChip">
-                        稀有度 {{ item.cloudTypeRarity }}
+                      <span class="inline-flex border px-3 py-1 text-xs font-medium" :class="rarityMeta[item.cloudTypeRarity].chip">
+                        {{ rarityMeta[item.cloudTypeRarity].label }}
                       </span>
                       <span
                         v-if="isOwnProfile"
@@ -676,7 +758,7 @@ watch(selectedUploadDate, async newValue => {
 
                   <div class="p-5">
                     <p class="truncate text-sm font-medium text-slate-900">
-                      纬度 {{ formatCoordinate(item.latitude) }} / 经度 {{ formatCoordinate(item.longitude) }}
+                      {{ item.location_name || '未填写位置名称' }}
                     </p>
                     <p class="mt-3 line-clamp-3 text-sm leading-6 text-slate-500">
                       {{ item.description || '没有留下额外说明。' }}
@@ -688,14 +770,10 @@ watch(selectedUploadDate, async newValue => {
           </div>
 
           <div v-else class="oc-empty-card border border-dashed border-slate-300 bg-white p-10">
-            <NEmpty :description="selectedUploadDate ? '这一天没有上传记录' : (isOwnProfile ? '还没有上传任何云图' : '该用户暂无公开云图')">
+            <NEmpty :description="selectedUploadDate ? '这一天没有上传记录' : (isOwnProfile ? '还没有上传任何云图' : '这位用户还没有公开云图')">
               <template #extra>
-                <RouterLink
-                  v-if="isOwnProfile && !selectedUploadDate"
-                  to="/upload"
-                  class="oc-panel-button oc-panel-button--sky"
-                >
-                  去上传第一张
+                <RouterLink v-if="isOwnProfile && !selectedUploadDate" to="/upload">
+                  <NButton secondary strong type="default" class="oc-panel-button oc-panel-button--sky">去上传第一张</NButton>
                 </RouterLink>
                 <NButton v-else-if="selectedUploadDate" secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" @click="clearSelectedUploadDate">返回全部记录</NButton>
               </template>
@@ -712,9 +790,9 @@ watch(selectedUploadDate, async newValue => {
       :thumbnail-url="selectedCloud.thumbnail_url"
       :image-alt="selectedCloud.cloudTypeName"
       :title="selectedCloud.cloudTypeName"
-      :subtitle="formatCloudTime(selectedCloud)"
-      :badge-label="`稀有度 ${selectedCloud.cloudTypeRarity}`"
-      :badge-class="rarityChip"
+      :subtitle="`拍摄时间：${formatCloudTime(selectedCloud)}`"
+      :badge-label="rarityMeta[selectedCloud.cloudTypeRarity].label"
+      :badge-class="rarityMeta[selectedCloud.cloudTypeRarity].chip"
       @close="selectedCloud = null"
     >
       <div class="grid gap-4 sm:grid-cols-2">
@@ -728,7 +806,7 @@ watch(selectedUploadDate, async newValue => {
         </div>
         <div class="oc-inset-panel">
           <p class="oc-section-label">位置</p>
-          <p class="mt-2 text-sm font-medium text-slate-900">已记录经纬度</p>
+          <p class="mt-2 text-sm font-medium text-slate-900">{{ selectedCloud.location_name || '未填写位置名称' }}</p>
         </div>
         <div class="oc-inset-panel">
           <p class="oc-section-label">模糊化经纬度</p>
@@ -756,6 +834,7 @@ watch(selectedUploadDate, async newValue => {
       <MiniLocationMap
         :latitude="selectedCloud.latitude"
         :longitude="selectedCloud.longitude"
+        :location-name="selectedCloud.location_name"
       />
 
       <template v-if="isOwnProfile" #actions>
@@ -795,9 +874,3 @@ watch(selectedUploadDate, async newValue => {
     />
   </div>
 </template>
-
-<style scoped>
-.profile-avatar {
-  box-shadow: var(--oc-shadow-sm);
-}
-</style>

src/views/system/AuthRequiredView.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { NButton, NIcon } from 'naive-ui'
-import { Lock } from '@vicons/tabler'
+import { NButton } from 'naive-ui'
 import { RouterLink, useRoute } from 'vue-router'
 
 const route = useRoute()
@@ -31,7 +30,7 @@ const description = computed(() => {
 <template>
   <div class="oc-system-page">
     <div class="oc-system-card">
-      <NIcon size="72" class="text-sky-600"><Lock /></NIcon>
+      <div class="text-7xl leading-none">🔐</div>
       <p class="mt-6 text-sm font-medium uppercase tracking-[0.24em] text-sky-600">401 Login Required</p>
       <h1 class="oc-page-title">{{ title }}</h1>
       <p class="oc-page-description mx-auto max-w-xl">

src/views/system/ForbiddenView.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { NButton, NIcon } from 'naive-ui'
-import { HandStop } from '@vicons/tabler'
+import { NButton } from 'naive-ui'
 import { RouterLink } from 'vue-router'
 </script>
 
 <template>
   <div class="oc-system-page">
     <div class="oc-system-card">
-      <NIcon size="72" class="text-rose-600"><HandStop /></NIcon>
+      <div class="text-7xl leading-none">🖐️</div>
       <p class="mt-6 text-sm font-medium uppercase tracking-[0.24em] text-rose-600">403 Forbidden</p>
       <h1 class="oc-page-title">这里不让进</h1>
       <p class="oc-page-description mx-auto max-w-xl">

src/views/system/NotFoundView.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { NButton, NIcon } from 'naive-ui'
-import { Help } from '@vicons/tabler'
+import { NButton } from 'naive-ui'
 import { RouterLink } from 'vue-router'
 </script>
 
 <template>
   <div class="oc-system-page">
     <div class="oc-system-card">
-      <NIcon size="72" class="text-amber-600"><Help /></NIcon>
+      <div class="text-7xl leading-none">🤔</div>
       <p class="mt-6 text-sm font-medium uppercase tracking-[0.24em] text-amber-600">404 Not Found</p>
       <h1 class="oc-page-title">我也没想明白</h1>
       <p class="oc-page-description mx-auto max-w-xl">

src/views/upload/UploadView.vue

@@ -1,19 +1,22 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
-import { NAlert, NButton, NCard, NIcon, NProgress, NResult } from 'naive-ui'
-import { CloudUpload, Map as MapIcon, X } from '@vicons/tabler'
+import { NAlert, NButton, NCard, NProgress, NResult, NTag } from 'naive-ui'
 import { useRouter } from 'vue-router'
 import { useCloudsStore } from '@/stores/clouds'
+import { useAuthStore } from '@/stores/auth'
+import { downloadCloudBadgeCard } from '@/lib/cloudBadges'
 import { useUpload } from '@/composables/useUpload'
 import MapPickerModal from '@/components/cloud/MapPickerModal.vue'
 
 const router = useRouter()
+const authStore = useAuthStore()
 const cloudsStore = useCloudsStore()
 const { items, uploading, overallProgress, currentItemIndex, totalItems, addFiles, removeItem, clearAll, validateAll, uploadAll } = useUpload()
 
 const activeId = ref<string | null>(null)
 const dragOver = ref(false)
 const successMsg = ref(false)
+const unlockedBadges = ref<Awaited<ReturnType<typeof uploadAll>>['unlockedBadges']>([])
 const errorMsg = ref('')
 const fileInput = ref<HTMLInputElement | null>(null)
 const mapPickerOpen = ref(false)
@@ -83,6 +86,10 @@ function confirmMapPicker(payload: { latitude: number; longitude: number }) {
   closeMapPicker()
 }
 
+function clearCoordinates() {
+  updateActiveCoordinates(null, null)
+}
+
 function updateActivePublicState(isPublic: boolean) {
   if (!activeItem.value) return
   activeItem.value.isHidden = !isPublic
@@ -104,17 +111,43 @@ async function handleSubmit() {
 
   const result = await uploadAll()
   if (result.ok) {
+    unlockedBadges.value = result.unlockedBadges
     successMsg.value = true
   } else {
-    errorMsg.value = result.errorMessage || '上传失败，请稍后重试'
+    errorMsg.value = '上传失败，请稍后重试'
   }
 }
 
 function resetAfterSuccess() {
   successMsg.value = false
+  unlockedBadges.value = []
   errorMsg.value = ''
 }
 
+async function saveBadge(badge: NonNullable<typeof unlockedBadges.value[number]>) {
+  await downloadCloudBadgeCard({
+    cloudName: badge.cloudName,
+    cloudNameEn: badge.cloudNameEn,
+    unlockedAt: badge.unlockedAt,
+    username: authStore.profile?.username || authStore.user?.email || 'OpenCloud 用户',
+    rarity: badge.rarity,
+  })
+}
+
+function rarityLabel(rarity: NonNullable<typeof unlockedBadges.value[number]>['rarity']) {
+  if (rarity === 'common') return '常见'
+  if (rarity === 'uncommon') return '少见'
+  return '罕见'
+}
+
+function formatUnlockedAt(iso: string) {
+  return new Date(iso).toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+
 function onLatInput(e: Event) {
   const val = parseFloat((e.target as HTMLInputElement).value)
   if (activeItem.value) {
@@ -134,7 +167,6 @@ function onLngInput(e: Event) {
 }
 
 function formatDatetimeLocal(iso: string): string {
-  if (!iso) return ''
   const d = new Date(iso)
   const pad = (n: number) => String(n).padStart(2, '0')
   return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
@@ -142,8 +174,8 @@ function formatDatetimeLocal(iso: string): string {
 
 function onCapturedAtChange(e: Event) {
   const val = (e.target as HTMLInputElement).value
-  if (activeItem.value) {
-    activeItem.value.capturedAt = val ? new Date(val).toISOString() : ''
+  if (activeItem.value && val) {
+    activeItem.value.capturedAt = new Date(val).toISOString()
     if (activeItem.value.errors.capturedAt) {
       delete activeItem.value.errors.capturedAt
     }
@@ -153,7 +185,9 @@ function onCapturedAtChange(e: Event) {
 function onCategoryChange(e: Event) {
   const val = (e.target as HTMLSelectElement).value
   if (!activeItem.value) return
-  if (val === '') {
+  if (val === 'other') {
+    activeItem.value.cloudCategoryId = 'other'
+  } else if (val === '') {
     activeItem.value.cloudCategoryId = null
   } else {
     activeItem.value.cloudCategoryId = Number(val)
@@ -174,28 +208,55 @@ onUnmounted(() => {
         <p class="oc-page-eyebrow">Cloud Upload</p>
         <h1 class="oc-page-title">上传云图</h1>
         <p class="oc-page-description">
-          批量整理你的云图记录。类别和经纬度必填；拍摄时间可留空，也可以从图片 EXIF 自动读取。
+          批量整理你的云图记录。类别和拍摄时间必填，经纬度既可以手动输入，也可以在迷你地图里点选回填。
         </p>
       </div>
     </section>
 
     <div class="oc-container oc-container--content oc-page-content">
-      <input ref="fileInput" type="file" accept="image/jpeg,image/png,image/webp" multiple class="hidden" @change="handleFileSelect" />
+      <input ref="fileInput" type="file" accept="image/*" multiple class="hidden" @change="handleFileSelect" />
 
     <div v-if="successMsg" class="flex items-center justify-center min-h-[60vh]">
       <div class="w-full max-w-5xl">
         <NResult status="success" title="已提交审核" />
 
+        <div v-if="unlockedBadges.length" class="mt-8 grid gap-5 md:grid-cols-2 xl:grid-cols-3">
+          <NCard
+            v-for="badge in unlockedBadges"
+            :key="badge.cloudTypeId"
+            class="border border-amber-200 bg-[linear-gradient(180deg,#fffbeb_0%,#ffffff_100%)] shadow-sm"
+          >
+            <div class="flex h-16 w-16 items-center justify-center border border-amber-300 bg-amber-400 text-3xl text-white shadow-sm">
+              {{ badge.cloudName.slice(0, 1) }}
+            </div>
+            <div class="mt-5">
+              <div class="flex items-center gap-3">
+                <h3 class="text-2xl font-bold text-slate-900">{{ badge.cloudName }}</h3>
+                <NTag :bordered="false" type="warning">
+                  {{ rarityLabel(badge.rarity) }}
+                </NTag>
+              </div>
+              <p class="mt-1 text-sm text-slate-500">{{ badge.cloudNameEn }}</p>
+              <p class="mt-4 text-sm text-slate-600">解锁时间：{{ formatUnlockedAt(badge.unlockedAt) }}</p>
+            </div>
+
+            <div class="mt-6 flex gap-3">
+              <NButton secondary strong type="default" class="oc-panel-button oc-panel-button--sky flex-1" @click="saveBadge(badge)">保存分享卡片</NButton>
+              <NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral flex-1" @click="router.push(`/encyclopedia/${badge.cloudTypeId}`)">查看详情</NButton>
+            </div>
+          </NCard>
+        </div>
+
         <div class="mt-8 flex flex-wrap items-center justify-center gap-3">
           <NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" @click="resetAfterSuccess">继续上传</NButton>
-          <NButton secondary strong type="default" class="oc-panel-button oc-panel-button--sky" @click="router.push('/encyclopedia')">前往百科</NButton>
+          <NButton secondary strong type="default" class="oc-panel-button oc-panel-button--sky" @click="router.push('/encyclopedia')">前往图鉴</NButton>
           <NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" @click="router.push('/profile')">返回个人主页</NButton>
         </div>
       </div>
     </div>
 
     <template v-else>
-      <div v-if="uploading" class="oc-panel-card mb-6 border border-slate-200 bg-white p-5">
+      <div v-if="uploading" class="mb-6 border border-slate-200 bg-white p-5 shadow-sm">
         <div class="flex items-center justify-between mb-2">
           <span class="text-sm font-medium text-slate-700">正在上传 {{ currentItemIndex }} / {{ totalItems }}...</span>
           <span class="text-sm font-medium text-sky-600">{{ overallProgress }}%</span>
@@ -204,8 +265,8 @@ onUnmounted(() => {
           type="line"
           :show-indicator="false"
           :percentage="overallProgress"
-          color="var(--oc-color-info)"
-          rail-color="var(--oc-color-border)"
+          color="#0ea5e9"
+          rail-color="#dbe4ee"
           :height="10"
         />
       </div>
@@ -216,19 +277,19 @@ onUnmounted(() => {
         @dragleave.prevent="dragOver = false"
         @drop.prevent="handleDrop"
         @click="fileInput?.click()"
-        class="oc-panel-card flex cursor-pointer flex-col items-center justify-center border-2 border-dashed bg-white py-20 transition-colors"
+        class="flex flex-col items-center justify-center border-2 border-dashed py-20 cursor-pointer transition-colors bg-white shadow-sm"
         :class="dragOver ? 'border-sky-400 bg-sky-50' : 'border-slate-300 hover:border-sky-400 hover:bg-slate-50'"
       >
-        <NIcon size="48" class="mb-4 text-sky-600"><CloudUpload /></NIcon>
+        <span class="text-5xl mb-4">☁️</span>
         <p class="mb-1 text-lg font-medium text-slate-700">点击或拖拽图片到此处</p>
-        <p class="text-sm text-slate-400">支持 JPEG、PNG、WebP，单张不超过 20MB，可一次选择多张</p>
+        <p class="text-sm text-slate-400">支持 JPG、PNG 格式，可一次选择多张</p>
       </div>
 
       <template v-else>
-        <div class="flex min-w-0 flex-col gap-6 lg:flex-row">
-          <div class="w-full min-w-0 lg:w-[480px] lg:flex-shrink-0">
+        <div class="flex gap-6">
+          <div class="flex-shrink-0 w-[480px]">
             <div v-if="activeItem" class="mb-3 overflow-hidden border border-slate-900 bg-slate-900">
-              <img :src="activeItem.preview" alt="预览" class="h-64 w-full object-contain sm:h-[360px]" />
+              <img :src="activeItem.preview" alt="预览" class="w-full h-[360px] object-contain" />
             </div>
             <div class="flex gap-2 overflow-x-auto pb-2">
               <div
@@ -246,9 +307,7 @@ onUnmounted(() => {
                   class="oc-icon-button oc-icon-button--danger oc-icon-button--tiny absolute -right-1 -top-1"
                   title="移除图片"
                   aria-label="移除图片"
-                >
-                  <NIcon size="12"><X /></NIcon>
-                </button>
+                >✕</button>
               </div>
               <div
                 @click="fileInput?.click()"
@@ -260,7 +319,7 @@ onUnmounted(() => {
           </div>
 
           <div class="flex-1 min-w-0" v-if="activeItem">
-            <NCard class="oc-panel-card border border-slate-200">
+            <NCard class="border border-slate-200 shadow-sm">
               <div class="space-y-5">
                 <div class="flex items-center justify-between">
                   <h2 class="text-lg font-semibold text-slate-900">图片信息</h2>
@@ -279,16 +338,27 @@ onUnmounted(() => {
                   >
                     <option value="" disabled>请选择</option>
                     <option v-for="ct in cloudsStore.cloudTypes" :key="ct.id" :value="ct.id">
-                      {{ ct.name }}{{ ct.genus ? '（' + ct.genus + '）' : '' }}
+                      {{ ct.name }}（{{ ct.name_en }}）
                     </option>
+                    <option value="other">其他</option>
                   </select>
+                  <div v-if="activeItem.cloudCategoryId === 'other'" class="mt-2">
+                    <input
+                      v-model="activeItem.customCloudType"
+                      type="text"
+                      placeholder="输入云的类型"
+                      @input="activeItem.errors = {}"
+                      class="oc-field-control"
+                    />
+                  </div>
                   <p v-if="activeItem.errors.cloudCategory" class="oc-field-error">{{ activeItem.errors.cloudCategory }}</p>
-                  <p v-if="activeItem.errors.file" class="oc-field-error">{{ activeItem.errors.file }}</p>
                 </div>
 
-                <!-- 拍摄时间 -->
+                <!-- 拍摄时间 * -->
                 <div>
-                  <label class="oc-field-label">拍摄时间</label>
+                  <label class="oc-field-label">
+                    拍摄时间 <span class="oc-field-required">*</span>
+                  </label>
                   <input
                     type="datetime-local"
                     :value="formatDatetimeLocal(activeItem.capturedAt)"
@@ -298,9 +368,19 @@ onUnmounted(() => {
                   <p v-if="activeItem.errors.capturedAt" class="oc-field-error">{{ activeItem.errors.capturedAt }}</p>
                 </div>
 
-                <!-- 经纬度 * -->
+                <!-- 经纬度 -->
                 <div>
-                  <label class="oc-field-label">经纬度 <span class="oc-field-required">*</span></label>
+                  <div class="mb-1 flex items-center justify-between gap-3">
+                    <label class="oc-field-label mb-0">经纬度</label>
+                    <button
+                      v-if="activeItem.latitude !== null || activeItem.longitude !== null"
+                      type="button"
+                      @click="clearCoordinates"
+                      class="oc-text-button oc-text-button--muted text-xs"
+                    >
+                      清空
+                    </button>
+                  </div>
                   <div class="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] gap-2">
                     <div>
                       <input
@@ -332,11 +412,22 @@ onUnmounted(() => {
                         aria-label="地图选点"
                         class="oc-icon-button oc-icon-button--sky"
                       >
-                        <NIcon size="20"><MapIcon /></NIcon>
+                        <span class="text-lg leading-none">🗺️</span>
                       </button>
                     </div>
                   </div>
-                  <p class="mt-1 text-xs text-slate-400">必填，可手动输入，或点击右侧地图图标选择</p>
+                  <p class="mt-1 text-xs text-slate-400">选填，可手动输入，或点击右侧小地图图标选择</p>
+                </div>
+
+                <!-- 位置名称 -->
+                <div>
+                  <label class="oc-field-label">位置名称</label>
+                  <input
+                    v-model="activeItem.locationName"
+                    type="text"
+                    placeholder="如：北京、成都"
+                    class="oc-field-control"
+                  />
                 </div>
 
                 <!-- 图片描述 -->
@@ -345,11 +436,9 @@ onUnmounted(() => {
                   <textarea
                     v-model="activeItem.description"
                     rows="3"
-                    maxlength="128"
                     placeholder="描述一下这张图片..."
                     class="oc-field-control resize-none"
                   ></textarea>
-                  <p v-if="activeItem.errors.description" class="oc-field-error">{{ activeItem.errors.description }}</p>
                 </div>
 
                 <!-- 公开状态 -->
@@ -373,9 +462,9 @@ onUnmounted(() => {
           </div>
         </div>
 
-        <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div class="mt-6 flex items-center justify-between">
           <p class="text-sm text-slate-500">共 {{ items.length }} 张图片</p>
-          <div class="flex flex-wrap gap-3">
+          <div class="flex gap-3">
             <NButton secondary strong type="default" class="oc-panel-button oc-panel-button--neutral" @click="clearAll()" :disabled="uploading">清空</NButton>
             <NButton type="default" secondary strong class="oc-panel-button oc-panel-button--sky" @click="handleSubmit" :disabled="uploading">
               {{ uploading ? '上传中...' : '提交上传' }}