diff --git a/app/admin/controller/Post.php b/app/admin/controller/Post.php
index ddecf77..2f364ca 100644
--- a/app/admin/controller/Post.php
+++ b/app/admin/controller/Post.php
@@ -348,4 +348,208 @@ class Post extends Common
 
         return download($mardkown, $model_post->title . '.md', true);
     }
+
+    /**
+     * 手机图片排版操作页
+     */
+    public function phoneImage($id)
+    {
+        $model_post = ModelPost::find($id);
+        if (empty($model_post)) {
+            $this->error('文章不存在');
+        }
+        View::assign('post', $model_post);
+        return View::fetch();
+    }
+
+    /**
+     * 输出管理列表页
+     */
+    public function postOutputList($id)
+    {
+        $model_post = ModelPost::find($id);
+        if (empty($model_post)) {
+            $this->error('文章不存在');
+        }
+        $output_list = \app\model\PostOutput::where('post_id', $id)
+            ->order('id', 'desc')
+            ->paginate(10);
+        View::assign('post', $model_post);
+        View::assign('list', $output_list);
+        return View::fetch('post_output/index');
+    }
+
+    /**
+     * 保存输出记录
+     */
+    public function savePostOutput()
+    {
+        $data = json_decode(file_get_contents('php://input'), true);
+        if (empty($data['post_id'])) {
+            return json(['code' => 500, 'msg' => '缺少文章ID']);
+        }
+
+        $post = ModelPost::find($data['post_id']);
+        if (empty($post)) {
+            return json(['code' => 500, 'msg' => '文章不存在']);
+        }
+
+        $config = $data['config'] ?? [];
+        $pages = $data['pages'] ?? [];
+
+        $admin_id = session('admin_id') ?? 0;
+
+        $phoneImage = new \app\common\tools\PhoneImage();
+
+        $output = $phoneImage->createOutput((int) $data['post_id'], $config, (int) $admin_id);
+
+        foreach ($pages as $index => $pageData) {
+            $phoneImage->savePageImage($output->id, $index + 1, $pageData);
+        }
+
+        $phoneImage->completeOutput($output->id, count($pages));
+
+        return json(['code' => 0, 'msg' => '保存成功', 'data' => ['output_id' => $output->id]]);
+    }
+
+    /**
+     * 删除输出记录
+     */
+    public function deletePostOutput()
+    {
+        $id = $this->request->param('id', 0);
+        if (empty($id)) {
+            return json(['code' => 500, 'msg' => '缺少ID']);
+        }
+
+        $phoneImage = new \app\common\tools\PhoneImage();
+        $phoneImage->deleteOutput((int) $id);
+
+        return json(['code' => 0, 'msg' => '删除成功']);
+    }
+
+    /**
+     * 重新生成（用相同配置）
+     */
+    public function regeneratePostOutput()
+    {
+        $id = $this->request->param('id', 0);
+        if (empty($id)) {
+            return json(['code' => 500, 'msg' => '缺少ID']);
+        }
+
+        $output = \app\model\PostOutput::find($id);
+        if (empty($output)) {
+            return json(['code' => 500, 'msg' => '输出记录不存在']);
+        }
+
+        $phoneImage = new \app\common\tools\PhoneImage();
+        $phoneImage->deleteOutput((int) $id);
+
+        return json(['code' => 0, 'msg' => '请重新排版', 'data' => ['config' => $output->config]]);
+    }
+
+    /**
+     * 下载ZIP
+     */
+    public function downloadPostOutputZip($id)
+    {
+        $phoneImage = new \app\common\tools\PhoneImage();
+        try {
+            $zipPath = $phoneImage->createZip((int) $id);
+            $output = \app\model\PostOutput::find($id);
+            if (empty($output)) {
+                throw new \Exception('输出记录不存在');
+            }
+            $post = ModelPost::find($output->post_id);
+            $fileName = ($post ? $post->title : 'output') . '_phone_image_' . date('Ymd') . '.zip';
+
+            // 请求结束后清理临时ZIP文件
+            $tempFile = $zipPath;
+            register_shutdown_function(function () use ($tempFile) {
+                if (file_exists($tempFile)) {
+                    @unlink($tempFile);
+                }
+            });
+
+            return download($zipPath, $fileName);
+        } catch (\Exception $e) {
+            $this->error($e->getMessage());
+        }
+    }
+
+    /**
+     * 获取输出文件列表(AJAX)
+     */
+    public function getOutputFiles()
+    {
+        $outputId = $this->request->param('output_id', 0);
+
+        if (empty($outputId)) {
+            return json(['code' => 500, 'msg' => '缺少输出ID']);
+        }
+
+        $output = \app\model\PostOutput::find((int) $outputId);
+        if (empty($output)) {
+            return json(['code' => 500, 'msg' => '输出记录不存在']);
+        }
+
+        $files = \app\model\PostOutputFile::getByOutput((int) $outputId);
+
+        $result = [];
+        foreach ($files as $file) {
+            $result[] = [
+                'id' => $file->id,
+                'page' => $file->page,
+                'file_url' => $file->file_url,
+                'file_size' => $file->file_size,
+                'width' => $file->width,
+                'height' => $file->height,
+            ];
+        }
+
+        return json(['code' => 0, 'data' => $result]);
+    }
+
+    /**
+     * AI智能排版推荐.
+     */
+    public function aiRecommend()
+    {
+        $postId = $this->request->post('post_id', 0);
+        $post = ModelPost::find($postId);
+        if (empty($post)) {
+            return json(['code' => 500, 'msg' => '文章不存在']);
+        }
+
+        $advisor = new \app\common\tools\AiLayoutAdvisor();
+        $result = $advisor->analyzeAndRecommend($post);
+
+        if ($result['success']) {
+            return json(['code' => 0, 'data' => $result['data']]);
+        }
+
+        return json(['code' => 500, 'msg' => $result['msg']]);
+    }
+
+    /**
+     * AI内容优化.
+     */
+    public function aiOptimizeContent()
+    {
+        $postId = $this->request->post('post_id', 0);
+        $post = ModelPost::find($postId);
+        if (empty($post)) {
+            return json(['code' => 500, 'msg' => '文章不存在']);
+        }
+
+        $advisor = new \app\common\tools\AiLayoutAdvisor();
+        $result = $advisor->optimizeContent($post);
+
+        if ($result['success']) {
+            return json(['code' => 0, 'data' => $result['data']]);
+        }
+
+        return json(['code' => 500, 'msg' => $result['msg']]);
+    }
 }
diff --git a/app/admin/controller/System.php b/app/admin/controller/System.php
index 30e54a5..e1574e0 100644
--- a/app/admin/controller/System.php
+++ b/app/admin/controller/System.php
@@ -96,4 +96,91 @@ class System extends Common
 
       return $this->success('清楚成功');
     }
+
+    /**
+     * AI 设置页面.
+     */
+    public function ai()
+    {
+        return View::fetch();
+    }
+
+    /**
+     * 同步 models.dev 数据.
+     */
+    public function syncModelsDev()
+    {
+        $sync = new \app\common\tools\ai\ModelsDevSync();
+        try {
+            $result = $sync->syncProviders();
+            $count = count($result['providers'] ?? []);
+            return json(['code' => 0, 'msg' => "同步成功, 共{$count}个供应商", 'data' => $result]);
+        } catch (\Exception $e) {
+            return json(['code' => 500, 'msg' => '同步失败: ' . $e->getMessage()]);
+        }
+    }
+
+    /**
+     * 测试AI渠道连接.
+     */
+    public function testAiChannel()
+    {
+        $providerId = $this->request->param('provider_id', '');
+        if (empty($providerId)) {
+            return json(['code' => 500, 'msg' => '缺少供应商ID']);
+        }
+        $manager = new \app\common\tools\ai\AiChannelManager();
+        $provider = $manager->getProvider($providerId);
+        if (!$provider) {
+            return json(['code' => 500, 'msg' => '供应商未配置或缺少API Key']);
+        }
+        $ok = $provider->testConnection();
+        return json(['code' => $ok ? 0 : 500, 'msg' => $ok ? '连接成功' : '连接失败,请检查配置']);
+    }
+
+    /**
+     * 获取指定供应商的模型列表.
+     */
+    public function getModelsByProvider()
+    {
+        $providerId = $this->request->param('provider_id', '');
+        $sync = new \app\common\tools\ai\ModelsDevSync();
+        $models = $sync->getModelsByProvider($providerId);
+        return json(['code' => 0, 'data' => $models]);
+    }
+
+    /**
+     * 获取 models.dev 缓存状态.
+     */
+    public function getAiCacheStatus()
+    {
+        $sync = new \app\common\tools\ai\ModelsDevSync();
+        $status = $sync->getCacheStatus();
+        return json(['code' => 0, 'data' => $status]);
+    }
+
+    /**
+     * 保存AI渠道配置.
+     */
+    public function saveAiChannel()
+    {
+        $data = $this->request->post();
+        $manager = new \app\common\tools\ai\AiChannelManager();
+        $ok = $manager->saveChannelConfig($data);
+        return json(['code' => $ok ? 0 : 500, 'msg' => $ok ? '保存成功' : '保存失败']);
+    }
+
+    /**
+     * 删除AI渠道配置.
+     */
+    public function deleteAiChannel()
+    {
+        $providerId = $this->request->param('provider_id', '');
+        if (empty($providerId)) {
+            return json(['code' => 500, 'msg' => '缺少供应商ID']);
+        }
+        $manager = new \app\common\tools\ai\AiChannelManager();
+        $ok = $manager->deleteChannelConfig($providerId);
+        return json(['code' => $ok ? 0 : 500, 'msg' => $ok ? '删除成功' : '删除失败']);
+    }
 }
diff --git a/app/common/tools/AiLayoutAdvisor.php b/app/common/tools/AiLayoutAdvisor.php
new file mode 100644
index 0000000..1f89587
--- /dev/null
+++ b/app/common/tools/AiLayoutAdvisor.php
@@ -0,0 +1,87 @@
+<?php
+
+namespace app\common\tools;
+
+use app\common\tools\ai\AiChannelManager;
+use app\model\Post;
+
+/**
+ * AI 智能排版顾问.
+ *
+ * 分析文章内容并推荐排版配置，或优化内容以适配手机图片排版.
+ */
+class AiLayoutAdvisor
+{
+    /**
+     * 分析文章并推荐排版配置.
+     *
+     * @param Post $post 文章模型
+     *
+     * @return array ['success'=>bool, 'data'=>..., 'msg'=>...]
+     */
+    public function analyzeAndRecommend(Post $post): array
+    {
+        try {
+            $manager = new AiChannelManager();
+            $provider = $manager->getDefaultProvider();
+
+            if (!$provider) {
+                return ['success' => false, 'msg' => 'AI 功能暂不可用，请检查后台 AI 设置'];
+            }
+
+            $systemPrompt = "你是一位专业的手机图文排版设计师。根据文章内容，推荐最适合的排版配置。"
+                . "你必须返回JSON格式：{\"template\":\"minimal|magazine|mixed\",\"font\":\"source-han-sans|alibaba-puhuiti|lxgw-wenkai\","
+                . "\"font_size\":14,\"reason\":\"推荐理由\"}"
+                . "模板特点：minimal=白底黑字留白多适合长文，magazine=装饰线首字下沉适合正式文章，mixed=图文穿插适合图片多的文章。"
+                . "字体特点：source-han-sans=思源黑体通用，alibaba-puhuiti=阿里巴巴普惠体现代感，lxgw-wenkai=霞鹜文楷文艺感。";
+
+            $contentPreview = mb_substr(strip_tags($post->content_html ?? ''), 0, 500);
+            $imageCount = substr_count($post->content_html ?? '', '<img');
+
+            $userPrompt = "文章标题：{$post->title}\n"
+                . '摘要：' . ($post->desc ?? '无') . "\n"
+                . "正文前500字：{$contentPreview}\n"
+                . "图片数量：{$imageCount}\n"
+                . '分类：' . ($post->category_name ?? '未分类');
+
+            $result = $provider->chatJson($systemPrompt, $userPrompt);
+
+            return ['success' => true, 'data' => $result];
+        } catch (\Exception $e) {
+            return ['success' => false, 'msg' => 'AI 分析失败: ' . $e->getMessage()];
+        }
+    }
+
+    /**
+     * 优化内容以适配手机图片排版.
+     *
+     * @param Post $post 文章模型
+     *
+     * @return array ['success'=>bool, 'data'=>..., 'msg'=>...]
+     */
+    public function optimizeContent(Post $post): array
+    {
+        try {
+            $manager = new AiChannelManager();
+            $provider = $manager->getDefaultProvider();
+
+            if (!$provider) {
+                return ['success' => false, 'msg' => 'AI 功能暂不可用，请检查后台 AI 设置'];
+            }
+
+            $systemPrompt = "你是一位专业的内容编辑。优化以下文章内容，使其更适合在手机图片上展示。"
+                . "要求：1.标题更简短有力 2.段落精简(每段不超过100字) 3.提炼3-5个要点"
+                . "返回JSON：{\"optimized_title\":\"标题\",\"optimized_paragraphs\":[\"段落1\",\"段落2\"],\"summary_points\":[\"要点1\",\"要点2\"]}";
+
+            $content = mb_substr(strip_tags($post->content_html ?? ''), 0, 1000);
+
+            $userPrompt = "文章标题：{$post->title}\n原文内容：{$content}";
+
+            $result = $provider->chatJson($systemPrompt, $userPrompt);
+
+            return ['success' => true, 'data' => $result];
+        } catch (\Exception $e) {
+            return ['success' => false, 'msg' => 'AI 内容优化失败: ' . $e->getMessage()];
+        }
+    }
+}
diff --git a/app/common/tools/PhoneImage.php b/app/common/tools/PhoneImage.php
new file mode 100644
index 0000000..37711c7
--- /dev/null
+++ b/app/common/tools/PhoneImage.php
@@ -0,0 +1,215 @@
+<?php
+
+namespace app\common\tools;
+
+use app\model\Post;
+use app\model\PostOutput;
+use app\model\PostOutputFile;
+use think\facade\App;
+
+class PhoneImage implements PostOutputManagerInterface
+{
+    /**
+     * 返回配置字段定义
+     */
+    public function getConfigFields(): array
+    {
+        return [
+            'template' => ['type' => 'select', 'options' => ['minimal', 'magazine', 'mixed'], 'default' => 'minimal'],
+            'size' => ['type' => 'select', 'options' => ['xiaohongshu', 'douyin'], 'default' => 'xiaohongshu'],
+            'font' => ['type' => 'select', 'options' => ['source-han-sans', 'alibaba-puhuiti', 'lxgw-wenkai'], 'default' => 'source-han-sans'],
+            'font_size' => ['type' => 'number', 'default' => 14, 'min' => 10, 'max' => 24],
+            'watermark' => ['type' => 'text', 'default' => ''],
+        ];
+    }
+
+    /**
+     * 验证配置合法性
+     */
+    public function validateConfig(array $config): bool
+    {
+        $fields = $this->getConfigFields();
+
+        if (isset($config['template']) && !in_array($config['template'], $fields['template']['options'])) {
+            return false;
+        }
+        if (isset($config['size']) && !in_array($config['size'], $fields['size']['options'])) {
+            return false;
+        }
+        if (isset($config['font']) && !in_array($config['font'], $fields['font']['options'])) {
+            return false;
+        }
+        if (isset($config['font_size'])) {
+            $size = intval($config['font_size']);
+            if ($size < $fields['font_size']['min'] || $size > $fields['font_size']['max']) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    /**
+     * 执行输出处理 - 服务端接收base64数据，保存文件，创建记录
+     * 注意：HTML渲染在前端完成(html2canvas)，服务端只做文件保存和记录创建
+     */
+    public function process(Post $post, array $config): array
+    {
+        return [];
+    }
+
+    /**
+     * 返回预览HTML - 预览在前端完成，服务端返回空
+     */
+    public function getPreview(Post $post, array $config): string
+    {
+        return '';
+    }
+
+    /**
+     * 保存单页图片
+     * @param int $outputId 输出记录ID
+     * @param int $page 页码(从1开始)
+     * @param string $imageData base64编码的图片数据
+     * @return PostOutputFile|false
+     */
+    public function savePageImage(int $outputId, int $page, string $imageData)
+    {
+        $imageData = str_replace('data:image/jpeg;base64,', '', $imageData);
+        $imageData = str_replace('data:image/png;base64,', '', $imageData);
+        $imageData = str_replace(' ', '+', $imageData);
+        $decoded = base64_decode($imageData);
+
+        if ($decoded === false) {
+            return false;
+        }
+
+        $dateDir = date('Ymd');
+        $relativeDir = '/upload/post_output/' . $dateDir;
+        $fileName = $outputId . '_' . $page . '.jpg';
+        $relativePath = $relativeDir . '/' . $fileName;
+        $fullDir = App::getRootPath() . '/public' . $relativeDir;
+        $fullPath = $fullDir . '/' . $fileName;
+
+        if (!is_dir($fullDir)) {
+            mkdir($fullDir, 0777, true);
+        }
+
+        file_put_contents($fullPath, $decoded);
+
+        $imageInfo = getimagesize($fullPath);
+        $width = $imageInfo[0] ?? 0;
+        $height = $imageInfo[1] ?? 0;
+
+        $fileRecord = PostOutputFile::create([
+            'output_id' => $outputId,
+            'page' => $page,
+            'file_path' => $relativePath,
+            'file_url' => $relativePath,
+            'file_size' => strlen($decoded),
+            'width' => $width,
+            'height' => $height,
+        ]);
+
+        return $fileRecord;
+    }
+
+    /**
+     * 打包某条输出记录的所有图片为ZIP
+     * @param int $outputId
+     * @return string ZIP文件路径
+     * @throws \Exception
+     */
+    public function createZip(int $outputId): string
+    {
+        $output = PostOutput::find($outputId);
+        if (!$output) {
+            throw new \Exception('输出记录不存在');
+        }
+
+        $files = PostOutputFile::where('output_id', $outputId)
+            ->order('page', 'asc')
+            ->select();
+
+        if ($files->isEmpty()) {
+            throw new \Exception('没有可下载的文件');
+        }
+
+        $tempDir = App::getRuntimePath() . 'temp';
+        if (!is_dir($tempDir)) {
+            mkdir($tempDir, 0777, true);
+        }
+
+        $zipFileName = 'post_output_' . $outputId . '.zip';
+        $zipPath = $tempDir . '/' . $zipFileName;
+
+        $zip = new \ZipArchive();
+        if ($zip->open($zipPath, \ZipArchive::CREATE | \ZipArchive::OVERWRITE) !== true) {
+            throw new \Exception('无法创建ZIP文件');
+        }
+
+        foreach ($files as $file) {
+            $filePath = App::getRootPath() . '/public' . $file->file_path;
+            if (file_exists($filePath)) {
+                $pageName = str_pad((string) $file->page, 2, '0', STR_PAD_LEFT) . '.jpg';
+                $zip->addFile($filePath, $pageName);
+            }
+        }
+
+        $zip->close();
+
+        return $zipPath;
+    }
+
+    /**
+     * 删除输出记录及所有关联文件
+     * @param int $outputId
+     * @return bool
+     */
+    public function deleteOutput(int $outputId): bool
+    {
+        $files = PostOutputFile::where('output_id', $outputId)->select();
+
+        foreach ($files as $file) {
+            $filePath = App::getRootPath() . '/public' . $file->file_path;
+            if (file_exists($filePath)) {
+                @unlink($filePath);
+            }
+        }
+
+        PostOutputFile::where('output_id', $outputId)->delete();
+        PostOutput::destroy($outputId);
+
+        return true;
+    }
+
+    /**
+     * 创建输出记录
+     * @param int $postId 文章ID
+     * @param array $config 配置
+     * @param int $adminId 管理员ID
+     * @return PostOutput
+     */
+    public function createOutput(int $postId, array $config, int $adminId): PostOutput
+    {
+        return PostOutput::create([
+            'post_id' => $postId,
+            'output_type' => 'phone_image',
+            'config' => $config,
+            'status' => PostOutput::STATUS_PROCESSING,
+            'page_count' => 0,
+            'admin_id' => $adminId,
+        ]);
+    }
+
+    /**
+     * 完成输出记录 - 更新状态和页数
+     */
+    public function completeOutput(int $outputId, int $pageCount): bool
+    {
+        return PostOutput::where('id', $outputId)->update([
+            'status' => PostOutput::STATUS_COMPLETED,
+            'page_count' => $pageCount,
+        ]) > 0;
+    }
+}
diff --git a/app/common/tools/PostOutputManagerInterface.php b/app/common/tools/PostOutputManagerInterface.php
new file mode 100644
index 0000000..ef7676a
--- /dev/null
+++ b/app/common/tools/PostOutputManagerInterface.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace app\common\tools;
+
+use app\model\Post;
+
+interface PostOutputManagerInterface
+{
+    /**
+     * 返回该输出类型需要的配置字段定义
+     */
+    public function getConfigFields(): array;
+
+    /**
+     * 验证配置合法性
+     */
+    public function validateConfig(array $config): bool;
+
+    /**
+     * 执行输出处理，返回文件信息数组
+     */
+    public function process(Post $post, array $config): array;
+
+    /**
+     * 返回预览HTML
+     */
+    public function getPreview(Post $post, array $config): string;
+}
diff --git a/app/common/tools/ai/AiChannelManager.php b/app/common/tools/ai/AiChannelManager.php
new file mode 100644
index 0000000..a17bc0c
--- /dev/null
+++ b/app/common/tools/ai/AiChannelManager.php
@@ -0,0 +1,186 @@
+<?php
+
+namespace app\common\tools\ai;
+
+use app\common\tools\ai\provider\OpenAiCompatibleAdapter;
+
+/**
+ * AI 渠道管理器.
+ *
+ * 管理多个AI供应商的配置、连接和调用.
+ */
+class AiChannelManager
+{
+    /**
+     * @var array 已注册的供应商适配器实例
+     */
+    protected $providers = [];
+
+    /**
+     * 获取默认供应商的适配器实例.
+     *
+     * @return AiProviderInterface|null
+     */
+    public function getDefaultProvider(): ?AiProviderInterface
+    {
+        $defaultId = get_system_config('ai_default_provider', '');
+
+        if (empty($defaultId)) {
+            return null;
+        }
+
+        return $this->getProvider($defaultId);
+    }
+
+    /**
+     * 获取指定供应商的适配器实例.
+     *
+     * @param string $providerId 供应商标识
+     *
+     * @return AiProviderInterface|null
+     */
+    public function getProvider(string $providerId): ?AiProviderInterface
+    {
+        if (isset($this->providers[$providerId])) {
+            return $this->providers[$providerId];
+        }
+
+        $apiKey = get_system_config("ai_provider_{$providerId}_key", '');
+        if (empty($apiKey)) {
+            return null;
+        }
+
+        $provider = new OpenAiCompatibleAdapter($providerId);
+        $this->providers[$providerId] = $provider;
+
+        return $provider;
+    }
+
+    /**
+     * 获取所有已配置(有API Key)的供应商列表.
+     *
+     * @return array
+     */
+    public function getAvailableProviders(): array
+    {
+        $sync = new ModelsDevSync();
+        $allProviders = $sync->getProviders();
+
+        $available = [];
+        foreach ($allProviders as $id => $provider) {
+            $apiKey = get_system_config("ai_provider_{$id}_key", '');
+            if (!empty($apiKey)) {
+                $provider['configured'] = true;
+                $provider['base_url'] = get_system_config("ai_provider_{$id}_base_url", $provider['api_base_url'] ?? '');
+                $available[$id] = $provider;
+            }
+        }
+
+        // 检查不在models.dev中但已手动配置的供应商
+        $allConfig = get_system_config();
+        if (is_array($allConfig)) {
+            foreach ($allConfig as $key => $value) {
+                if (preg_match('/^ai_provider_([a-z0-9_]+)_key$/', $key, $matches)) {
+                    $customId = $matches[1];
+                    if (!empty($value) && !isset($available[$customId])) {
+                        $available[$customId] = [
+                            'id' => $customId,
+                            'name' => ucfirst(str_replace('_', ' ', $customId)),
+                            'configured' => true,
+                            'base_url' => get_system_config("ai_provider_{$customId}_base_url", ''),
+                        ];
+                    }
+                }
+            }
+        }
+
+        return $available;
+    }
+
+    /**
+     * 保存供应商配置.
+     *
+     * @param array $data 配置数据,格式:
+     *                    [
+     *                      'provider_id' => 'zhipu',
+     *                      'key' => 'api_key_value',
+     *                      'base_url' => 'https://open.bigmodel.cn/api/paas/v4',
+     *                    ]
+     *
+     * @return bool
+     */
+    public function saveChannelConfig(array $data): bool
+    {
+        $providerId = $data['provider_id'] ?? '';
+        if (empty($providerId)) {
+            return false;
+        }
+
+        $configs = [
+            "ai_provider_{$providerId}_key" => $data['key'] ?? '',
+            "ai_provider_{$providerId}_base_url" => $data['base_url'] ?? '',
+        ];
+
+        if (isset($data['is_default']) && $data['is_default']) {
+            $configs['ai_default_provider'] = $providerId;
+        }
+
+        if (isset($data['default_model'])) {
+            $configs['ai_default_model'] = $data['default_model'];
+        }
+
+        return $this->saveConfigs($configs);
+    }
+
+    /**
+     * 删除供应商配置.
+     *
+     * @param string $providerId 供应商标识
+     *
+     * @return bool
+     */
+    public function deleteChannelConfig(string $providerId): bool
+    {
+        $configs = [
+            "ai_provider_{$providerId}_key" => '',
+            "ai_provider_{$providerId}_base_url" => '',
+        ];
+
+        // 如果删除的是默认供应商,清除默认设置
+        $defaultProvider = get_system_config('ai_default_provider', '');
+        if ($defaultProvider === $providerId) {
+            $configs['ai_default_provider'] = '';
+        }
+
+        return $this->saveConfigs($configs);
+    }
+
+    /**
+     * 批量保存配置到SystemConfig.
+     *
+     * @param array $configs 键值对配置
+     *
+     * @return bool
+     */
+    protected function saveConfigs(array $configs): bool
+    {
+        $list = \app\model\SystemConfig::column('value', 'name');
+
+        foreach ($configs as $key => $value) {
+            if (isset($list[$key])) {
+                \app\model\SystemConfig::where('name', $key)->update(['value' => $value]);
+            } else {
+                $model = new \app\model\SystemConfig();
+                $model->name = $key;
+                $model->value = $value;
+                $model->save();
+            }
+
+            $list[$key] = $value;
+        }
+
+        \think\facade\Cache::set('system_config', $list);
+
+        return true;
+    }
+}
diff --git a/app/common/tools/ai/AiProviderInterface.php b/app/common/tools/ai/AiProviderInterface.php
new file mode 100644
index 0000000..aa59fc3
--- /dev/null
+++ b/app/common/tools/ai/AiProviderInterface.php
@@ -0,0 +1,52 @@
+<?php
+
+namespace app\common\tools\ai;
+
+/**
+ * AI 供应商接口.
+ */
+interface AiProviderInterface
+{
+    /**
+     * 发送聊天请求.
+     *
+     * @param string $systemPrompt 系统提示词
+     * @param string $userPrompt   用户消息
+     * @param array  $options      额外选项(model, temperature, max_tokens等)
+     *
+     * @return string AI回复内容
+     */
+    public function chat(string $systemPrompt, string $userPrompt, array $options = []): string;
+
+    /**
+     * 发送聊天请求并返回JSON解析后的数组.
+     *
+     * @param string $systemPrompt 系统提示词
+     * @param string $userPrompt   用户消息
+     * @param array  $options      额外选项
+     *
+     * @return array 解析后的JSON数组
+     */
+    public function chatJson(string $systemPrompt, string $userPrompt, array $options = []): array;
+
+    /**
+     * 获取供应商名称.
+     *
+     * @return string
+     */
+    public function getProviderName(): string;
+
+    /**
+     * 获取供应商支持的模型列表.
+     *
+     * @return array
+     */
+    public function getModels(): array;
+
+    /**
+     * 测试连接是否可用.
+     *
+     * @return bool
+     */
+    public function testConnection(): bool;
+}
diff --git a/app/common/tools/ai/ModelsDevSync.php b/app/common/tools/ai/ModelsDevSync.php
new file mode 100644
index 0000000..ac769e6
--- /dev/null
+++ b/app/common/tools/ai/ModelsDevSync.php
@@ -0,0 +1,237 @@
+<?php
+
+namespace app\common\tools\ai;
+
+/**
+ * models.dev 数据同步与缓存.
+ *
+ * 从 https://models.dev/api.json 获取AI模型供应商和模型目录数据,
+ * 缓存到 runtime/ai/models_dev_cache.json, 有效期24小时.
+ */
+class ModelsDevSync
+{
+    /**
+     * @var string models.dev API地址
+     */
+    protected $apiUrl = 'https://models.dev/api.json';
+
+    /**
+     * @var string 缓存文件路径
+     */
+    protected $cachePath;
+
+    /**
+     * @var int 缓存有效期(秒), 默认24小时
+     */
+    protected $cacheTtl = 86400;
+
+    public function __construct()
+    {
+        $this->cachePath = app()->getRuntimePath() . 'ai' . DIRECTORY_SEPARATOR . 'models_dev_cache.json';
+    }
+
+    /**
+     * 同步供应商数据到本地缓存.
+     *
+     * @return array 同步结果统计
+     *
+     * @throws \Exception
+     */
+    public function syncProviders(): array
+    {
+        $data = $this->fetchApi();
+
+        if ($data === false) {
+            throw new \Exception('无法连接 models.dev API');
+        }
+
+        $parsed = $this->parseApiData($data);
+
+        $this->writeCache($parsed);
+
+        return $parsed;
+    }
+
+    /**
+     * 获取所有供应商列表.
+     *
+     * @return array
+     */
+    public function getProviders(): array
+    {
+        $cache = $this->readCache();
+        if ($cache === null) {
+            return [];
+        }
+
+        return $cache['providers'] ?? [];
+    }
+
+    /**
+     * 获取指定供应商的模型列表.
+     *
+     * @param string $providerId 供应商标识
+     *
+     * @return array
+     */
+    public function getModelsByProvider(string $providerId): array
+    {
+        $cache = $this->readCache();
+        if ($cache === null) {
+            return [];
+        }
+
+        $models = $cache['models'][$providerId] ?? [];
+
+        return $models;
+    }
+
+    /**
+     * 获取缓存状态信息.
+     *
+     * @return array
+     */
+    public function getCacheStatus(): array
+    {
+        $exists = file_exists($this->cachePath);
+        $mtime = $exists ? filemtime($this->cachePath) : 0;
+        $expired = ($mtime + $this->cacheTtl) < time();
+
+        return [
+            'exists' => $exists,
+            'last_sync' => $mtime > 0 ? date('Y-m-d H:i:s', $mtime) : '从未同步',
+            'expired' => $expired,
+            'provider_count' => count($this->getProviders()),
+        ];
+    }
+
+    /**
+     * 从API获取原始数据.
+     *
+     * @return string|false
+     */
+    protected function fetchApi()
+    {
+        $ch = curl_init();
+        curl_setopt($ch, CURLOPT_URL, $this->apiUrl);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
+        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+        curl_setopt($ch, CURLOPT_TIMEOUT, 30);
+        curl_setopt($ch, CURLOPT_HTTPHEADER, [
+            'Accept: application/json',
+        ]);
+
+        $response = curl_exec($ch);
+        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        curl_close($ch);
+
+        if ($httpCode !== 200 || $response === false) {
+            return false;
+        }
+
+        return $response;
+    }
+
+    /**
+     * 解析API数据为统一格式.
+     *
+     * @param string $raw JSON原始数据
+     *
+     * @return array
+     */
+    protected function parseApiData(string $raw): array
+    {
+        $data = json_decode($raw, true);
+        if (!is_array($data)) {
+            return ['providers' => [], 'models' => []];
+        }
+
+        $providers = [];
+        $models = [];
+
+        foreach ($data as $providerId => $providerData) {
+            if (!is_array($providerData)) {
+                continue;
+            }
+
+            $provider = [
+                'id' => $providerId,
+                'name' => $providerData['name'] ?? ucfirst($providerId),
+                'url' => $providerData['url'] ?? '',
+                'docs_url' => $providerData['docs_url'] ?? '',
+            ];
+
+            // 提取API基础地址(如果有)
+            if (isset($providerData['api_base_url'])) {
+                $provider['api_base_url'] = $providerData['api_base_url'];
+            }
+
+            $providers[$providerId] = $provider;
+
+            // 提取模型列表
+            $providerModels = [];
+            if (isset($providerData['models']) && is_array($providerData['models'])) {
+                foreach ($providerData['models'] as $modelId => $modelData) {
+                    $model = [
+                        'id' => $modelId,
+                        'name' => $modelData['name'] ?? $modelId,
+                        'description' => $modelData['description'] ?? '',
+                    ];
+
+                    if (isset($modelData['context_length'])) {
+                        $model['context_length'] = (int) $modelData['context_length'];
+                    }
+                    if (isset($modelData['pricing'])) {
+                        $model['pricing'] = $modelData['pricing'];
+                    }
+
+                    $providerModels[] = $model;
+                }
+            }
+
+            $models[$providerId] = $providerModels;
+        }
+
+        return [
+            'providers' => $providers,
+            'models' => $models,
+        ];
+    }
+
+    /**
+     * 写入缓存文件.
+     *
+     * @param array $data 缓存数据
+     */
+    protected function writeCache(array $data): void
+    {
+        $dir = dirname($this->cachePath);
+        if (!is_dir($dir)) {
+            mkdir($dir, 0755, true);
+        }
+
+        file_put_contents($this->cachePath, json_encode($data, JSON_UNESCAPED_UNICODE));
+    }
+
+    /**
+     * 读取缓存文件(支持过期降级).
+     *
+     * @return array|null
+     */
+    protected function readCache(): ?array
+    {
+        if (!file_exists($this->cachePath)) {
+            return null;
+        }
+
+        $content = file_get_contents($this->cachePath);
+        $data = json_decode($content, true);
+
+        if (!is_array($data)) {
+            return null;
+        }
+
+        return $data;
+    }
+}
diff --git a/app/common/tools/ai/provider/OpenAiCompatibleAdapter.php b/app/common/tools/ai/provider/OpenAiCompatibleAdapter.php
new file mode 100644
index 0000000..11dd9d1
--- /dev/null
+++ b/app/common/tools/ai/provider/OpenAiCompatibleAdapter.php
@@ -0,0 +1,228 @@
+<?php
+
+namespace app\common\tools\ai\provider;
+
+use app\common\tools\ai\AiProviderInterface;
+
+/**
+ * OpenAI 兼容适配器.
+ *
+ * 适用于所有兼容 OpenAI API 格式的供应商:
+ * OpenAI / Zhipu / DeepSeek / Moonshot / Qwen / etc.
+ */
+class OpenAiCompatibleAdapter implements AiProviderInterface
+{
+    /**
+     * @var string 供应商标识(如 zhipu, deepseek)
+     */
+    protected $providerId;
+
+    /**
+     * @var string 供应商显示名称
+     */
+    protected $providerName;
+
+    /**
+     * @param string $providerId   供应商标识
+     * @param string $providerName 显示名称(可选)
+     */
+    public function __construct(string $providerId, string $providerName = '')
+    {
+        $this->providerId = $providerId;
+        $this->providerName = $providerName ?: ucfirst($providerId);
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function chat(string $systemPrompt, string $userPrompt, array $options = []): string
+    {
+        $apiKey = get_system_config("ai_provider_{$this->providerId}_key", '');
+        $baseUrl = get_system_config("ai_provider_{$this->providerId}_base_url", 'https://api.openai.com/v1');
+        $model = $options['model'] ?? get_system_config('ai_default_model', 'gpt-3.5-turbo');
+
+        $url = rtrim($baseUrl, '/') . '/chat/completions';
+        $data = [
+            'model' => $model,
+            'messages' => [
+                ['role' => 'system', 'content' => $systemPrompt],
+                ['role' => 'user', 'content' => $userPrompt],
+            ],
+        ];
+
+        if (isset($options['temperature'])) {
+            $data['temperature'] = (float) $options['temperature'];
+        }
+        if (isset($options['max_tokens'])) {
+            $data['max_tokens'] = (int) $options['max_tokens'];
+        }
+
+        $response = $this->httpPost($url, $data, [
+            'Authorization: Bearer ' . $apiKey,
+            'Content-Type: application/json',
+        ]);
+
+        if ($response === false) {
+            return '';
+        }
+
+        $result = json_decode($response, true);
+        if (!$result || isset($result['error'])) {
+            return '';
+        }
+
+        return $result['choices'][0]['message']['content'] ?? '';
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function chatJson(string $systemPrompt, string $userPrompt, array $options = []): array
+    {
+        $jsonInstruction = "\n\n请严格按照JSON格式返回结果，不要包含任何其他文字说明。";
+        $content = $this->chat($systemPrompt . $jsonInstruction, $userPrompt, $options);
+
+        if (empty($content)) {
+            return [];
+        }
+
+        // 尝试提取JSON内容(可能包裹在markdown代码块中)
+        if (preg_match('/```(?:json)?\s*([\s\S]*?)```/', $content, $matches)) {
+            $content = $matches[1];
+        }
+
+        $decoded = json_decode(trim($content), true);
+
+        return is_array($decoded) ? $decoded : [];
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function getProviderName(): string
+    {
+        return $this->providerName;
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function getModels(): array
+    {
+        $apiKey = get_system_config("ai_provider_{$this->providerId}_key", '');
+        $baseUrl = get_system_config("ai_provider_{$this->providerId}_base_url", 'https://api.openai.com/v1');
+
+        if (empty($apiKey)) {
+            return [];
+        }
+
+        $url = rtrim($baseUrl, '/') . '/models';
+        $response = $this->httpGet($url, [
+            'Authorization: Bearer ' . $apiKey,
+        ]);
+
+        if ($response === false) {
+            return [];
+        }
+
+        $result = json_decode($response, true);
+        if (!$result || !isset($result['data'])) {
+            return [];
+        }
+
+        $models = [];
+        foreach ($result['data'] as $model) {
+            $models[] = [
+                'id' => $model['id'] ?? '',
+                'name' => $model['id'] ?? '',
+                'owned_by' => $model['owned_by'] ?? '',
+            ];
+        }
+
+        return $models;
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function testConnection(): bool
+    {
+        $apiKey = get_system_config("ai_provider_{$this->providerId}_key", '');
+        if (empty($apiKey)) {
+            return false;
+        }
+
+        try {
+            $result = $this->chat(
+                'You are a test assistant.',
+                'Reply with exactly: OK',
+                ['max_tokens' => 5]
+            );
+
+            return !empty($result);
+        } catch (\Exception $e) {
+            return false;
+        }
+    }
+
+    /**
+     * HTTP POST 请求.
+     *
+     * @param string $url     请求地址
+     * @param array  $data    请求数据
+     * @param array  $headers 请求头
+     *
+     * @return string|false
+     */
+    protected function httpPost(string $url, array $data, array $headers = [])
+    {
+        $ch = curl_init();
+        curl_setopt($ch, CURLOPT_URL, $url);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
+        curl_setopt($ch, CURLOPT_POST, 1);
+        curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
+        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
+        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+        curl_setopt($ch, CURLOPT_TIMEOUT, 60);
+
+        $response = curl_exec($ch);
+        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        curl_close($ch);
+
+        if ($httpCode >= 400) {
+            return false;
+        }
+
+        return $response;
+    }
+
+    /**
+     * HTTP GET 请求.
+     *
+     * @param string $url     请求地址
+     * @param array  $headers 请求头
+     *
+     * @return string|false
+     */
+    protected function httpGet(string $url, array $headers = [])
+    {
+        $ch = curl_init();
+        curl_setopt($ch, CURLOPT_URL, $url);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
+        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
+        curl_setopt($ch, CURLOPT_TIMEOUT, 30);
+
+        $response = curl_exec($ch);
+        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+        curl_close($ch);
+
+        if ($httpCode >= 400) {
+            return false;
+        }
+
+        return $response;
+    }
+}
diff --git a/app/model/PostOutput.php b/app/model/PostOutput.php
new file mode 100644
index 0000000..b9bace2
--- /dev/null
+++ b/app/model/PostOutput.php
@@ -0,0 +1,62 @@
+<?php
+
+declare(strict_types=1);
+
+namespace app\model;
+
+use app\common\model\Base;
+use think\model\concern\SoftDelete;
+
+class PostOutput extends Base
+{
+    use SoftDelete;
+
+    protected $defaultSoftDelete = 0;
+
+    protected $name = 'post_output';
+
+    protected $json = ['config'];
+
+    public const STATUS_PROCESSING = 0;
+    public const STATUS_COMPLETED = 1;
+    public const STATUS_FAILED = 2;
+
+    public static $statusList = [
+        0 => '生成中',
+        1 => '已完成',
+        2 => '失败',
+    ];
+
+    public static $autoClearCache = [];
+
+    public function post()
+    {
+        return $this->belongsTo(Post::class, 'post_id');
+    }
+
+    public function files()
+    {
+        return $this->hasMany(PostOutputFile::class, 'output_id');
+    }
+
+    public function getStatusTextAttr()
+    {
+        return self::$statusList[$this->getData('status')] ?? '未知';
+    }
+
+    public function getOutputTypeTextAttr()
+    {
+        $types = config('output_type');
+        $type = $this->getData('output_type');
+
+        return $types[$type]['name'] ?? $type;
+    }
+
+    public static function getByPostAndType(int $postId, string $type)
+    {
+        return static::where('post_id', $postId)
+            ->where('output_type', $type)
+            ->order('id', 'desc')
+            ->select();
+    }
+}
diff --git a/app/model/PostOutputFile.php b/app/model/PostOutputFile.php
new file mode 100644
index 0000000..245fbf6
--- /dev/null
+++ b/app/model/PostOutputFile.php
@@ -0,0 +1,26 @@
+<?php
+
+declare(strict_types=1);
+
+namespace app\model;
+
+use app\common\model\Base;
+
+class PostOutputFile extends Base
+{
+    protected $name = 'post_output_file';
+
+    public static $autoClearCache = [];
+
+    public function output()
+    {
+        return $this->belongsTo(PostOutput::class, 'output_id');
+    }
+
+    public static function getByOutput(int $outputId)
+    {
+        return static::where('output_id', $outputId)
+            ->order('page', 'asc')
+            ->select();
+    }
+}
diff --git a/config/output_type.php b/config/output_type.php
new file mode 100644
index 0000000..0f354d5
--- /dev/null
+++ b/config/output_type.php
@@ -0,0 +1,19 @@
+<?php
+
+return [
+    'phone_image' => [
+        'name' => '手机图片排版',
+        'handler' => \app\common\tools\PhoneImage::class,
+        'description' => '将文章排版为手机尺寸图片，适合小红书/抖音等平台',
+        'templates' => ['minimal', 'magazine', 'mixed'],
+        'sizes' => [
+            'xiaohongshu' => ['name' => '小红书', 'width' => 1080, 'height' => 1440],
+            'douyin' => ['name' => '抖音', 'width' => 1080, 'height' => 1920],
+        ],
+        'fonts' => [
+            'source-han-sans' => ['name' => '思源黑体', 'file' => 'SourceHanSans-Normal.otf'],
+            'alibaba-puhuiti' => ['name' => '阿里巴巴普惠体', 'file' => 'AlibabaPuHuiTi-3-Regular.ttf'],
+            'lxgw-wenkai' => ['name' => '霞鹜文楷', 'file' => 'LXGWWenKai-Regular.ttf'],
+        ],
+    ],
+];
diff --git a/database/migrations/20260501000000_create_table_post_output.php b/database/migrations/20260501000000_create_table_post_output.php
new file mode 100644
index 0000000..1c5b02d
--- /dev/null
+++ b/database/migrations/20260501000000_create_table_post_output.php
@@ -0,0 +1,37 @@
+<?php
+
+use app\common\ColumnFormat;
+use think\migration\Migrator;
+use think\migration\db\Column;
+
+class CreateTablePostOutput extends Migrator
+{
+    public function change()
+    {
+        $table = $this->table('post_output', ['comment' => '文章输出任务']);
+        $table->addColumn(ColumnFormat::integer('post_id')->setComment('文章ID'));
+        $table->addColumn(ColumnFormat::stringShort('output_type')->setComment('输出类型'));
+        $table->addColumn(Column::make('config', 'text')->setComment('配置'));
+        $table->addColumn(ColumnFormat::integerTypeStatus('status')->setComment('状态,0:待处理,1:处理中,2:完成,3:失败'));
+        $table->addColumn(ColumnFormat::integer('page_count')->setComment('页数'));
+        $table->addColumn(ColumnFormat::integer('admin_id')->setComment('管理员ID'));
+        $table->addColumn(ColumnFormat::timestamp('create_time'));
+        $table->addColumn(ColumnFormat::timestamp('update_time'));
+        $table->addColumn(ColumnFormat::timestamp('delete_time'));
+        $table->addIndex('post_id');
+        $table->addIndex('status');
+        $table->create();
+
+        $tableFile = $this->table('post_output_file', ['comment' => '文章输出文件']);
+        $tableFile->addColumn(ColumnFormat::integer('output_id')->setComment('输出任务ID'));
+        $tableFile->addColumn(ColumnFormat::integer('page')->setComment('页码'));
+        $tableFile->addColumn(ColumnFormat::stringLong('file_path')->setComment('文件路径'));
+        $tableFile->addColumn(ColumnFormat::stringLong('file_url')->setComment('文件URL'));
+        $tableFile->addColumn(ColumnFormat::integer('file_size')->setComment('文件大小'));
+        $tableFile->addColumn(ColumnFormat::integer('width')->setComment('宽度'));
+        $tableFile->addColumn(ColumnFormat::integer('height')->setComment('高度'));
+        $tableFile->addColumn(ColumnFormat::timestamp('create_time'));
+        $tableFile->addIndex('output_id');
+        $tableFile->create();
+    }
+}
diff --git a/public/static/css/phone-image-fonts.css b/public/static/css/phone-image-fonts.css
new file mode 100644
index 0000000..d9cc2e5
--- /dev/null
+++ b/public/static/css/phone-image-fonts.css
@@ -0,0 +1,23 @@
+@font-face {
+    font-family: 'AlibabaPuHuiTi';
+    src: url('/source/font/AlibabaPuHuiTi-3-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'AlibabaPuHuiTi';
+    src: url('/source/font/AlibabaPuHuiTi-3-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'LXGWWenKai';
+    src: url('/source/font/LXGWWenKai-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
diff --git a/public/static/css/phone-image-templates.css b/public/static/css/phone-image-templates.css
new file mode 100644
index 0000000..ccc7ca9
--- /dev/null
+++ b/public/static/css/phone-image-templates.css
@@ -0,0 +1,694 @@
+/* ============================================
+   Phone Image Template System
+   用于生成手机端分享图片的CSS框架
+   渲染宽度540px, html2canvas scale=2 输出1080px
+   注意: 仅使用html2canvas兼容的CSS属性
+   支持: flexbox, border-radius, box-shadow, background-color,
+         font, padding, margin, border, position(relative/absolute/fixed)
+   不支持: transform, filter, clip-path, backdrop-filter,
+           CSS grid, object-fit, position:sticky, CSS animations
+   ============================================ */
+
+/* --- CSS Custom Properties --- */
+:root {
+    /* 字号 */
+    --pi-font-size-base: 14px;
+    --pi-font-size-title: 24px;
+    --pi-font-size-subtitle: 16px;
+    --pi-font-size-small: 12px;
+    /* 行高 */
+    --pi-line-height: 1.8;
+    /* 间距 */
+    --pi-spacing: 20px;
+    --pi-spacing-sm: 10px;
+    --pi-spacing-lg: 30px;
+    /* 颜色 */
+    --pi-color-text: #333333;
+    --pi-color-text-light: #666666;
+    --pi-color-text-lighter: #999999;
+    --pi-color-bg: #ffffff;
+    --pi-color-accent: #1890ff;
+    --pi-color-border: #eeeeee;
+    /* 字体 */
+    --pi-font-family: 'Source Han Sans', 'SourceHanSans-Normal', sans-serif;
+}
+
+/* ============================================
+   Base Container
+   固定540px宽度的最外层容器
+   ============================================ */
+.phone-image-container {
+    width: 540px;
+    background: var(--pi-color-bg);
+    color: var(--pi-color-text);
+    font-family: var(--pi-font-family);
+    font-size: var(--pi-font-size-base);
+    line-height: var(--pi-line-height);
+    overflow: hidden;
+    position: relative;
+}
+
+/* ============================================
+   Page Container
+   每一页的容器, 尺寸由 size class 控制
+   ============================================ */
+.phone-image-page {
+    overflow: hidden;
+    box-sizing: border-box;
+    position: relative;
+}
+
+/* ============================================
+   Size Variants
+   两种主流手机图片尺寸
+   ============================================ */
+
+/* 小红书尺寸 540x720 (输出1080x1440) */
+.size-xiaohongshu .phone-image-page {
+    width: 540px;
+    height: 720px;
+}
+
+/* 抖音尺寸 540x960 (输出1080x1920) */
+.size-douyin .phone-image-page {
+    width: 540px;
+    height: 960px;
+}
+
+/* ============================================
+   Page Type Variants
+   三种页面类型: 封面页/内容页/总结页
+   ============================================ */
+
+/* --- 封面页/首页 --- */
+.page-cover {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: var(--pi-spacing-lg);
+    text-align: center;
+}
+
+.page-cover .cover-title {
+    font-size: 32px;
+    font-weight: bold;
+    line-height: 1.4;
+    margin-bottom: var(--pi-spacing);
+    color: var(--pi-color-text);
+    word-break: break-word;
+}
+
+.page-cover .cover-subtitle {
+    font-size: var(--pi-font-size-subtitle);
+    color: var(--pi-color-text-light);
+    margin-bottom: var(--pi-spacing);
+}
+
+.page-cover .cover-image {
+    width: 100%;
+    margin-bottom: var(--pi-spacing);
+}
+
+.page-cover .cover-meta {
+    font-size: var(--pi-font-size-small);
+    color: var(--pi-color-text-lighter);
+    margin-top: var(--pi-spacing-sm);
+}
+
+/* --- 内容页 --- */
+.page-body {
+    display: flex;
+    flex-direction: column;
+    padding: var(--pi-spacing);
+}
+
+/* 内容页 - 页头区域 */
+.page-header {
+    padding-bottom: var(--pi-spacing-sm);
+    margin-bottom: var(--pi-spacing);
+    border-bottom: 1px solid var(--pi-color-border);
+}
+
+.page-header .page-title {
+    font-size: var(--pi-font-size-title);
+    font-weight: bold;
+    line-height: 1.4;
+    color: var(--pi-color-text);
+    word-break: break-word;
+}
+
+.page-header .page-subtitle {
+    font-size: var(--pi-font-size-subtitle);
+    color: var(--pi-color-text-light);
+    margin-top: var(--pi-spacing-sm);
+}
+
+/* 内容页 - 正文区域 */
+.page-content {
+    flex: 1;
+    overflow: hidden;
+    word-break: break-word;
+}
+
+.page-content p {
+    margin-bottom: var(--pi-spacing-sm);
+    text-indent: 2em;
+}
+
+.page-content h2 {
+    font-size: 20px;
+    font-weight: bold;
+    margin-top: var(--pi-spacing);
+    margin-bottom: var(--pi-spacing-sm);
+}
+
+.page-content h3 {
+    font-size: var(--pi-font-size-subtitle);
+    font-weight: bold;
+    margin-top: var(--pi-spacing-sm);
+    margin-bottom: var(--pi-spacing-sm);
+}
+
+.page-content blockquote {
+    border-left: 3px solid var(--pi-color-accent);
+    padding-left: var(--pi-spacing-sm);
+    margin: var(--pi-spacing-sm) 0;
+    color: var(--pi-color-text-light);
+    font-style: italic;
+}
+
+.page-content ul,
+.page-content ol {
+    padding-left: var(--pi-spacing);
+    margin-bottom: var(--pi-spacing-sm);
+}
+
+.page-content li {
+    margin-bottom: 5px;
+}
+
+/* 内容页 - 页脚区域 */
+.page-footer {
+    padding-top: var(--pi-spacing-sm);
+    margin-top: var(--pi-spacing-sm);
+    border-top: 1px solid var(--pi-color-border);
+    font-size: var(--pi-font-size-small);
+    color: var(--pi-color-text-lighter);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+/* --- 总结页/尾页 --- */
+.page-summary {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: var(--pi-spacing-lg);
+    text-align: center;
+}
+
+.page-summary .summary-title {
+    font-size: var(--pi-font-size-title);
+    font-weight: bold;
+    margin-bottom: var(--pi-spacing);
+    color: var(--pi-color-text);
+}
+
+.page-summary .summary-text {
+    font-size: var(--pi-font-size-subtitle);
+    color: var(--pi-color-text-light);
+    margin-bottom: var(--pi-spacing);
+    line-height: 1.6;
+}
+
+.page-summary .summary-qr {
+    margin-bottom: var(--pi-spacing-sm);
+}
+
+.page-summary .summary-footer {
+    font-size: var(--pi-font-size-small);
+    color: var(--pi-color-text-lighter);
+}
+
+/* ============================================
+   Font Variants
+   三种可选字体
+   ============================================ */
+.font-source-han-sans {
+    --pi-font-family: 'Source Han Sans', 'SourceHanSans-Normal', sans-serif;
+}
+
+.font-alibaba-puhuiti {
+    --pi-font-family: 'AlibabaPuHuiTi', sans-serif;
+}
+
+.font-lxgw-wenkai {
+    --pi-font-family: 'LXGWWenKai', cursive;
+}
+
+/* ============================================
+   Article Images
+   文章内图片样式
+   ============================================ */
+
+/* 行内图片, 有边距 */
+.article-image {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: var(--pi-spacing) 0;
+}
+
+/* 全宽图片, 无边距 */
+.article-image-full {
+    width: 100%;
+    height: auto;
+    display: block;
+    margin: 0;
+}
+
+/* ============================================
+   Page Number
+   页码指示器
+   ============================================ */
+.page-number {
+    position: absolute;
+    bottom: 10px;
+    right: 15px;
+    font-size: var(--pi-font-size-small);
+    color: var(--pi-color-text-lighter);
+}
+
+/* ============================================
+   Template Namespaces
+   三个模板命名空间, 基础结构样式
+   后续Task 8-10会填充详细样式
+   ============================================ */
+
+/* --- 简约文字卡片模板 --- */
+.tpl-minimal {
+    /* 基础结构: 白底黑字, 大量留白, 现代简约风格 */
+}
+
+/* 封面页 - 居中大标题 + 副标题 + 日期 */
+.tpl-minimal .page-cover .cover-title {
+    font-size: 28px;
+    font-weight: normal;
+    letter-spacing: 2px;
+    line-height: 1.5;
+}
+
+.tpl-minimal .page-cover .cover-subtitle {
+    font-weight: normal;
+    letter-spacing: 1px;
+    color: #999;
+}
+
+.tpl-minimal .page-cover .cover-meta {
+    letter-spacing: 1px;
+}
+
+/* 内容页 - 页头区域 */
+.tpl-minimal .page-header {
+    border-bottom: none;
+    padding-bottom: 0;
+    margin-bottom: 20px;
+}
+
+.tpl-minimal .page-header .page-title {
+    font-size: 20px;
+    font-weight: normal;
+    letter-spacing: 1px;
+    color: #666;
+}
+
+/* 内容页 - 正文区域: 宽行高(2.0), 大段落间距, 首行缩进2em */
+.tpl-minimal .page-content {
+    line-height: 2.0;
+}
+
+.tpl-minimal .page-content p {
+    text-indent: 2em;
+    margin-bottom: 16px;
+    color: #333;
+}
+
+.tpl-minimal .page-content h2 {
+    font-weight: normal;
+    font-size: 18px;
+    letter-spacing: 1px;
+    margin-top: 24px;
+    margin-bottom: 12px;
+    color: #333;
+}
+
+.tpl-minimal .page-content h3 {
+    font-weight: normal;
+    font-size: 16px;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    color: #555;
+}
+
+.tpl-minimal .page-content blockquote {
+    border-left: 1px solid #ccc;
+    font-style: normal;
+    color: #888;
+    padding-left: 15px;
+}
+
+.tpl-minimal .page-content .article-image {
+    border-radius: 4px;
+}
+
+.tpl-minimal .page-content .article-image-full {
+    border-radius: 0;
+}
+
+/* 内容页 - 页脚区域: 小号版权 + 页码, 细线分隔 */
+.tpl-minimal .page-footer {
+    border-top: none;
+    padding-top: 0;
+    font-size: 11px;
+    color: #bbb;
+}
+
+/* 总结页/尾页 */
+.tpl-minimal .page-summary .summary-title {
+    font-weight: normal;
+    letter-spacing: 2px;
+    font-size: 22px;
+}
+
+.tpl-minimal .page-summary .summary-text {
+    color: #aaa;
+    font-weight: normal;
+}
+
+.tpl-minimal .page-summary .summary-footer {
+    color: #ccc;
+}
+
+/* --- 杂志模板 - 完整样式 --- */
+.tpl-magazine .page-cover {
+    padding: 0;
+    justify-content: flex-end;
+    padding-bottom: 40px;
+    position: relative;
+}
+
+.tpl-magazine .page-cover::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: #1890ff;
+}
+
+.tpl-magazine .page-cover .cover-title {
+    font-size: 26px;
+    font-weight: bold;
+    line-height: 1.4;
+    letter-spacing: 1px;
+    position: relative;
+    padding-bottom: 15px;
+}
+
+.tpl-magazine .page-cover .cover-subtitle {
+    font-weight: normal;
+    color: #666;
+    letter-spacing: 0.5px;
+}
+
+.tpl-magazine .page-cover .cover-meta {
+    position: relative;
+    padding: 8px 12px;
+    background: #f5f5f5;
+    border-radius: 2px;
+}
+
+.tpl-magazine .page-header {
+    border-bottom: 2px solid #1890ff;
+    padding-bottom: 10px;
+    margin-bottom: 15px;
+}
+
+.tpl-magazine .page-header .page-title {
+    font-size: 22px;
+    font-weight: bold;
+    letter-spacing: 0.5px;
+}
+
+.tpl-magazine .page-content {
+    line-height: 1.8;
+}
+
+.tpl-magazine .page-content p {
+    margin-bottom: 14px;
+    text-indent: 2em;
+    color: #333;
+}
+
+.tpl-magazine .page-content p:first-child {
+    text-indent: 0;
+}
+
+.tpl-magazine .page-content p:first-child::first-letter {
+    font-size: 3.2em;
+    font-weight: bold;
+    float: left;
+    line-height: 1;
+    margin-right: 8px;
+    margin-top: 4px;
+    color: #1890ff;
+}
+
+.tpl-magazine .page-content h2 {
+    font-size: 20px;
+    font-weight: bold;
+    margin-top: 22px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    border-left: 3px solid #1890ff;
+}
+
+.tpl-magazine .page-content h3 {
+    font-size: 17px;
+    font-weight: bold;
+    margin-top: 16px;
+    margin-bottom: 8px;
+    color: #1890ff;
+}
+
+.tpl-magazine .page-content blockquote {
+    border-left: 4px solid #1890ff;
+    background: #f8f9fa;
+    padding: 12px 15px;
+    margin: 12px 0;
+    font-style: normal;
+    color: #555;
+    border-radius: 0 4px 4px 0;
+}
+
+.tpl-magazine .page-content .article-image {
+    border-radius: 2px;
+}
+
+.tpl-magazine .page-footer {
+    border-top: 2px solid #1890ff;
+    padding-top: 8px;
+    color: #1890ff;
+    font-weight: bold;
+}
+
+.tpl-magazine .page-summary {
+    background: #f8f9fa;
+}
+
+.tpl-magazine .page-summary .summary-title {
+    color: #1890ff;
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.tpl-magazine .page-summary .summary-text {
+    color: #666;
+}
+
+.tpl-magazine .page-summary .summary-footer {
+    border-top: 1px solid #ddd;
+    padding-top: 15px;
+    color: #999;
+}
+
+/* --- 图文混排模板 - 完整样式 --- */
+.tpl-mixed {
+    /* 基础结构: 图文混排 */
+}
+
+/* 封面页: 图片背景 + 底部文字叠加 */
+.tpl-mixed .page-cover {
+    justify-content: flex-end;
+    padding: 0;
+    padding-bottom: 30px;
+    position: relative;
+}
+
+.tpl-mixed .page-cover .cover-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.tpl-mixed .page-cover .cover-title {
+    position: relative;
+    z-index: 2;
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 1.4;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 15px 20px;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: left;
+}
+
+.tpl-mixed .page-cover .cover-subtitle {
+    position: relative;
+    z-index: 2;
+    color: #eee;
+    background: rgba(0, 0, 0, 0.3);
+    padding: 8px 20px;
+    width: 100%;
+    box-sizing: border-box;
+    text-align: left;
+    margin-bottom: 0;
+}
+
+.tpl-mixed .page-cover .cover-meta {
+    position: relative;
+    z-index: 2;
+    color: #ccc;
+    padding: 5px 20px;
+    background: rgba(0, 0, 0, 0.3);
+    width: 100%;
+    box-sizing: border-box;
+    text-align: left;
+}
+
+/* 无封面图时的降级样式 */
+.tpl-mixed .page-cover.no-cover-image {
+    justify-content: center;
+    background: #333;
+}
+
+.tpl-mixed .page-cover.no-cover-image .cover-title {
+    text-align: center;
+    background: none;
+    font-size: 26px;
+}
+
+.tpl-mixed .page-cover.no-cover-image .cover-subtitle {
+    text-align: center;
+    background: none;
+}
+
+.tpl-mixed .page-cover.no-cover-image .cover-meta {
+    text-align: center;
+    background: none;
+}
+
+/* 内容页头部 */
+.tpl-mixed .page-header {
+    border-bottom: 2px solid #333;
+    padding-bottom: 8px;
+}
+
+.tpl-mixed .page-header .page-title {
+    font-size: 20px;
+    font-weight: bold;
+}
+
+/* 内容页正文 */
+.tpl-mixed .page-content {
+    line-height: 1.8;
+}
+
+.tpl-mixed .page-content p {
+    margin-bottom: 12px;
+    text-indent: 2em;
+    color: #333;
+}
+
+.tpl-mixed .page-content h2 {
+    font-size: 19px;
+    font-weight: bold;
+    margin-top: 18px;
+    margin-bottom: 8px;
+    padding: 6px 12px;
+    background: #f0f0f0;
+    border-left: 4px solid #333;
+}
+
+.tpl-mixed .page-content h3 {
+    font-size: 16px;
+    font-weight: bold;
+    margin-top: 14px;
+    margin-bottom: 6px;
+    color: #555;
+}
+
+.tpl-mixed .page-content blockquote {
+    border-left: 3px solid #333;
+    background: #f8f8f8;
+    padding: 10px 15px;
+    font-style: normal;
+    color: #666;
+}
+
+.tpl-mixed .page-content .article-image {
+    border-radius: 0;
+    margin: 15px 0;
+}
+
+.tpl-mixed .page-content .article-image-full {
+    margin: 0 -20px;
+    max-width: none;
+    width: 540px;
+}
+
+/* 内容页底部 */
+.tpl-mixed .page-footer {
+    border-top: 1px solid #333;
+    color: #333;
+    font-weight: bold;
+}
+
+/* 总结页 */
+.tpl-mixed .page-summary {
+    background: #f5f5f5;
+}
+
+.tpl-mixed .page-summary .summary-title {
+    font-size: 28px;
+    font-weight: bold;
+    color: #333;
+}
+
+.tpl-mixed .page-summary .summary-text {
+    color: #666;
+}
+
+.tpl-mixed .page-summary .summary-footer {
+    color: #999;
+    border-top: 1px solid #ddd;
+    padding-top: 15px;
+}
diff --git a/public/static/js/phone-image.js b/public/static/js/phone-image.js
new file mode 100644
index 0000000..e9e8ff4
--- /dev/null
+++ b/public/static/js/phone-image.js
@@ -0,0 +1,736 @@
+/**
+ * PhoneImageEngine - 手机图片排版引擎
+ *
+ * 将文章HTML内容自动分页并渲染为手机尺寸图片
+ * 依赖: jQuery, html2canvas (项目已有)
+ *
+ * 渲染宽度540px, html2canvas scale=2 输出1080px
+ * 小红书: 540x720 (输出1080x1440)
+ * 抖音: 540x960 (输出1080x1920)
+ */
+var PhoneImageEngine = (function () {
+
+    // ===== 配置 =====
+    var config = {
+        template: 'minimal',
+        size: 'xiaohongshu',
+        font: 'source-han-sans',
+        fontSize: 14,
+        watermark: '',
+        // 尺寸映射 (渲染尺寸, 实际输出是2倍)
+        sizes: {
+            xiaohongshu: { width: 540, height: 720 },
+            douyin: { width: 540, height: 960 }
+        },
+        // 字体映射
+        fonts: {
+            'source-han-sans': "'Source Han Sans', 'SourceHanSans-Normal', sans-serif",
+            'alibaba-puhuiti': "'AlibabaPuHuiTi', sans-serif",
+            'lxgw-wenkai': "'LXGWWenKai', cursive"
+        },
+        // 页面内容边距
+        contentPadding: 20
+    };
+
+    // ===== 文章数据 =====
+    var postData = {
+        id: 0,
+        title: '',
+        desc: '',
+        content_html: '',
+        poster: '',
+        author_name: '',
+        create_time: '',
+        category_name: ''
+    };
+
+    // ===== 分页结果 =====
+    var pages = [];
+
+    // ===== DOM引用 =====
+    var $container = null;
+
+    /**
+     * 初始化引擎
+     * @param {Object} options - {postId, title, desc, contentHtml, poster, authorName, createTime, categoryName}
+     * @param {Object} userConfig - {template, size, font, fontSize, watermark}
+     */
+    function init(options, userConfig) {
+        postData.id = options.postId || 0;
+        postData.title = options.title || '';
+        postData.desc = options.desc || '';
+        postData.content_html = options.contentHtml || '';
+        postData.poster = options.poster || '';
+        postData.author_name = options.authorName || '';
+        postData.create_time = options.createTime || '';
+        postData.category_name = options.categoryName || '';
+
+        if (userConfig) {
+            $.extend(config, userConfig);
+        }
+
+        $container = $('#phone-image-container');
+    }
+
+    /**
+     * 渲染排版预览 - 生成分页后的HTML
+     * @returns {Array} 页面数组，每项是 { type, html, pageNum }
+     */
+    function render() {
+        pages = [];
+        var sizeConfig = config.sizes[config.size] || config.sizes.xiaohongshu;
+        var pageHeight = sizeConfig.height;
+        var contentAreaHeight = pageHeight - (config.contentPadding * 2);
+
+        // 内容预处理
+        var cleanHtml = preprocessContent(postData.content_html);
+
+        // 解析为块级元素
+        var blocks = parseHtmlToBlocks(cleanHtml);
+
+        // 生成封面页
+        pages.push(generateCoverPage(sizeConfig));
+
+        // 内容分页
+        var contentPages = paginateContent(blocks, contentAreaHeight, sizeConfig);
+        pages = pages.concat(contentPages);
+
+        // 生成尾页
+        pages.push(generateSummaryPage(sizeConfig, pages.length));
+
+        // 渲染到DOM
+        renderToDOM(sizeConfig);
+
+        return pages;
+    }
+
+    /**
+     * 预处理HTML内容
+     */
+    function preprocessContent(html) {
+        if (!html) return '';
+        html = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '');
+        html = html.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '');
+        // 清除空段落
+        html = html.replace(/<p[^>]*>\s*<\/p>/gi, '');
+        return html;
+    }
+
+    /**
+     * 将HTML解析为块级元素数组
+     * 每个块: { type, html, estimatedHeight }
+     */
+    function parseHtmlToBlocks(html) {
+        var blocks = [];
+        if (!html) return blocks;
+
+        var $temp = $('<div>').html(html);
+        var children = $temp.children();
+
+        if (children.length === 0) {
+            // 纯文本内容，按段落分割
+            var text = $temp.text().trim();
+            if (text) {
+                var paragraphs = text.split(/\n\s*\n|\n/);
+                for (var i = 0; i < paragraphs.length; i++) {
+                    var p = paragraphs[i].trim();
+                    if (p) {
+                        blocks.push({
+                            type: 'p',
+                            html: '<p>' + p + '</p>',
+                            estimatedHeight: estimateTextHeight(p, config.fontSize)
+                        });
+                    }
+                }
+            }
+            return blocks;
+        }
+
+        children.each(function () {
+            var $el = $(this);
+            var tagName = $el.prop('tagName').toLowerCase();
+            var block = {
+                type: tagName,
+                html: $el[0].outerHTML
+            };
+
+            switch (tagName) {
+                case 'h1':
+                case 'h2':
+                case 'h3':
+                case 'h4':
+                case 'h5':
+                case 'h6':
+                    block.estimatedHeight = estimateHeadingHeight(tagName, $el.text());
+                    break;
+                case 'img':
+                    block.estimatedHeight = estimateImageHeight($el);
+                    block.$img = $el;
+                    break;
+                case 'ul':
+                case 'ol':
+                    block.estimatedHeight = estimateListHeight($el);
+                    break;
+                case 'blockquote':
+                    block.estimatedHeight = estimateBlockquoteHeight($el);
+                    break;
+                case 'p':
+                default:
+                    block.type = 'p';
+                    block.estimatedHeight = estimateTextHeight($el.text(), config.fontSize);
+                    break;
+            }
+
+            blocks.push(block);
+        });
+
+        return blocks;
+    }
+
+    // ===== 高度估算 =====
+
+    /**
+     * 获取内容区可用宽度 (540 - 40px padding)
+     */
+    function getContentWidth() {
+        return 500;
+    }
+
+    /**
+     * 估算文本高度
+     * @param {string} text
+     * @param {number} fontSize
+     * @returns {number} px
+     */
+    function estimateTextHeight(text, fontSize) {
+        var charCount = text.length;
+        if (charCount === 0) return 0;
+        var charsPerLine = Math.floor(getContentWidth() / (fontSize * 1.0));
+        if (charsPerLine < 1) charsPerLine = 1;
+        var lines = Math.ceil(charCount / charsPerLine);
+        return lines * fontSize * 1.8 + 10; // 1.8行高 + 10px段落间距
+    }
+
+    /**
+     * 估算标题高度
+     */
+    function estimateHeadingHeight(tag, text) {
+        var sizeMap = { h1: 28, h2: 24, h3: 20, h4: 18, h5: 16, h6: 14 };
+        var hSize = sizeMap[tag] || 20;
+        var charsPerLine = Math.floor(getContentWidth() / (hSize * 1.0));
+        if (charsPerLine < 1) charsPerLine = 1;
+        var lines = Math.ceil(text.length / charsPerLine);
+        return lines * hSize * 1.4 + 20; // heading行高1.4 + 20px上下间距
+    }
+
+    /**
+     * 估算图片高度
+     * 默认按内容区宽度的60%估算
+     */
+    function estimateImageHeight($img) {
+        var w = parseInt($img.attr('width'), 10);
+        var h = parseInt($img.attr('height'), 10);
+        if (w > 0 && h > 0) {
+            // 按比例缩放到内容宽度
+            var ratio = getContentWidth() / w;
+            return Math.round(h * ratio) + 10;
+        }
+        // 无尺寸信息时默认300px
+        return 310;
+    }
+
+    /**
+     * 估算列表高度
+     */
+    function estimateListHeight($list) {
+        var items = $list.find('li').length;
+        return items * (config.fontSize * 1.8 + 5) + 15;
+    }
+
+    /**
+     * 估算引用块高度
+     */
+    function estimateBlockquoteHeight($bq) {
+        var text = $bq.text();
+        return estimateTextHeight(text, config.fontSize) + 10;
+    }
+
+    // ===== 分页核心算法 =====
+
+    /**
+     * 将块级元素按高度累加，超过可用高度时分页
+     * 支持超大块拆分（超长文本拆成多段）
+     */
+    function paginateContent(blocks, contentAreaHeight, sizeConfig) {
+        var contentPages = [];
+        var currentPageBlocks = [];
+        var currentHeight = 0;
+        var pageNumber = 1;
+
+        for (var i = 0; i < blocks.length; i++) {
+            var block = blocks[i];
+
+            // 超大块处理：单个块超过整页高度时需要拆分
+            if (block.estimatedHeight > contentAreaHeight) {
+                // 先把当前页已有的内容推出去
+                if (currentPageBlocks.length > 0) {
+                    contentPages.push(generateContentPage(
+                        currentPageBlocks, pageNumber, sizeConfig, false
+                    ));
+                    currentPageBlocks = [];
+                    currentHeight = 0;
+                    pageNumber++;
+                }
+
+                // 尝试拆分超大块
+                var splitBlocks = splitOversizedBlock(block, contentAreaHeight);
+                for (var s = 0; s < splitBlocks.length; s++) {
+                    var sb = splitBlocks[s];
+                    if (currentHeight + sb.estimatedHeight > contentAreaHeight && currentPageBlocks.length > 0) {
+                        contentPages.push(generateContentPage(
+                            currentPageBlocks, pageNumber, sizeConfig, false
+                        ));
+                        currentPageBlocks = [];
+                        currentHeight = 0;
+                        pageNumber++;
+                    }
+                    currentPageBlocks.push(sb);
+                    currentHeight += sb.estimatedHeight;
+                }
+                continue;
+            }
+
+            // 正常块：判断是否需要换页
+            if (currentHeight + block.estimatedHeight > contentAreaHeight && currentPageBlocks.length > 0) {
+                contentPages.push(generateContentPage(
+                    currentPageBlocks, pageNumber, sizeConfig, false
+                ));
+                currentPageBlocks = [];
+                currentHeight = 0;
+                pageNumber++;
+            }
+
+            currentPageBlocks.push(block);
+            currentHeight += block.estimatedHeight;
+        }
+
+        // 最后一页
+        if (currentPageBlocks.length > 0) {
+            contentPages.push(generateContentPage(
+                currentPageBlocks, pageNumber, sizeConfig, true
+            ));
+        }
+
+        return contentPages;
+    }
+
+    /**
+     * 拆分超大块（超长段落文本拆成多段）
+     * @param {Object} block - 块级元素
+     * @param {number} pageHeight - 可用内容高度
+     * @returns {Array} 拆分后的块数组
+     */
+    function splitOversizedBlock(block, pageHeight) {
+        // 图片块不拆分，保留原样（会被截断但保持完整）
+        if (block.type === 'img') {
+            return [block];
+        }
+
+        // 文本类块：按句子拆分
+        var text = '';
+        var wrapperTag = 'p';
+        if (block.type === 'blockquote') {
+            text = $(block.html).text();
+            wrapperTag = 'blockquote';
+        } else {
+            text = $(block.html).text();
+        }
+
+        if (!text || text.length === 0) {
+            return [block];
+        }
+
+        // 按句子拆分：句号、问号、叹号、换行
+        var sentences = text.split(/(?<=[。！？\n])/);
+        if (sentences.length <= 1) {
+            // 无法按句子拆分，按固定字符数拆分
+            sentences = [];
+            var chunkSize = Math.floor(getContentWidth() / config.fontSize) *
+                Math.floor(pageHeight / (config.fontSize * 1.8));
+            if (chunkSize < 10) chunkSize = 10;
+            for (var ci = 0; ci < text.length; ci += chunkSize) {
+                sentences.push(text.substring(ci, ci + chunkSize));
+            }
+        }
+
+        var result = [];
+        for (var j = 0; j < sentences.length; j++) {
+            var s = sentences[j].trim();
+            if (!s) continue;
+            var h = estimateTextHeight(s, config.fontSize);
+            result.push({
+                type: wrapperTag === 'blockquote' ? 'blockquote' : 'p',
+                html: '<' + wrapperTag + '>' + s + '</' + wrapperTag + '>',
+                estimatedHeight: h
+            });
+        }
+
+        return result.length > 0 ? result : [block];
+    }
+
+    // ===== 页面HTML生成 =====
+
+    /**
+     * 生成封面页HTML
+     */
+    function generateCoverPage(sizeConfig) {
+        var html = '<div class="phone-image-page page-cover" style="width:' +
+            sizeConfig.width + 'px;height:' + sizeConfig.height + 'px;">';
+
+        if (postData.poster) {
+            html += '<img class="cover-image" src="' + postData.poster + '" alt="">';
+        }
+
+        html += '<div class="cover-title">' + escapeHtml(postData.title) + '</div>';
+
+        if (postData.desc) {
+            html += '<div class="cover-subtitle">' + escapeHtml(postData.desc) + '</div>';
+        }
+
+        html += '<div class="cover-meta">';
+        if (postData.category_name) {
+            html += escapeHtml(postData.category_name) + ' | ';
+        }
+        if (postData.author_name) {
+            html += escapeHtml(postData.author_name) + ' | ';
+        }
+        if (postData.create_time) {
+            html += postData.create_time;
+        }
+        html += '</div>';
+        html += '</div>';
+
+        return { type: 'cover', html: html };
+    }
+
+    /**
+     * 生成内容页HTML
+     */
+    function generateContentPage(blocks, pageNum, sizeConfig, isLast) {
+        var html = '<div class="phone-image-page page-body" style="width:' +
+            sizeConfig.width + 'px;height:' + sizeConfig.height + 'px;">';
+
+        // 页头（仅首页内容页显示标题）
+        if (pageNum === 1) {
+            html += '<div class="page-header">';
+            html += '<div class="page-title">' + escapeHtml(postData.title) + '</div>';
+            html += '</div>';
+        }
+
+        // 正文内容区
+        html += '<div class="page-content">';
+        for (var i = 0; i < blocks.length; i++) {
+            html += blocks[i].html;
+        }
+        html += '</div>';
+
+        // 页脚
+        html += '<div class="page-footer">';
+        html += '<span>' + escapeHtml(postData.author_name || '') + '</span>';
+        html += '<span>' + pageNum + '</span>';
+        html += '</div>';
+
+        html += '</div>';
+        return { type: 'content', html: html, pageNum: pageNum };
+    }
+
+    /**
+     * 生成尾页/总结页HTML
+     */
+    function generateSummaryPage(sizeConfig, totalPages) {
+        var html = '<div class="phone-image-page page-summary" style="width:' +
+            sizeConfig.width + 'px;height:' + sizeConfig.height + 'px;">';
+        html += '<div class="summary-title">感谢阅读</div>';
+        html += '<div class="summary-text">' + escapeHtml(postData.title) + '</div>';
+
+        if (postData.desc) {
+            html += '<div class="summary-text" style="font-size:12px;">' + escapeHtml(postData.desc) + '</div>';
+        }
+
+        html += '<div class="summary-footer">';
+        html += '共 ' + totalPages + ' 页';
+        if (postData.author_name) {
+            html += ' | ' + escapeHtml(postData.author_name);
+        }
+        html += '</div>';
+        html += '</div>';
+
+        return { type: 'summary', html: html };
+    }
+
+    // ===== DOM渲染 =====
+
+    /**
+     * 渲染分页结果到DOM
+     */
+    function renderToDOM(sizeConfig) {
+        if (!$container || !$container.length) return;
+
+        var containerClasses = [
+            'phone-image-container',
+            'tpl-' + config.template,
+            'size-' + config.size,
+            'font-' + config.font
+        ];
+
+        $container.attr('class', containerClasses.join(' '));
+        $container.css({
+            'font-family': config.fonts[config.font] || config.fonts['source-han-sans'],
+            'font-size': config.fontSize + 'px'
+        });
+
+        $container.empty();
+        for (var i = 0; i < pages.length; i++) {
+            $container.append(pages[i].html);
+        }
+    }
+
+    // ===== 图片生成 =====
+
+    /**
+     * 逐页截图生成图片
+     * @param {Function} [onProgress] 进度回调 function(currentIndex, totalPages, canvas)
+     * @returns {Promise} jQuery Deferred, resolves with array of canvas objects
+     */
+    function generateImages(onProgress) {
+        var deferred = $.Deferred();
+        var canvases = [];
+        var $pages = $container.find('.phone-image-page');
+
+        if ($pages.length === 0) {
+            deferred.reject('没有可渲染的页面');
+            return deferred.promise();
+        }
+
+        var index = 0;
+        var total = $pages.length;
+
+        function captureNext() {
+            if (index >= total) {
+                if (onProgress) onProgress(total, total, null);
+                deferred.resolve(canvases);
+                return;
+            }
+
+            var $page = $($pages[index]);
+
+            html2canvas($page[0], {
+                scale: 2,
+                useCORS: true,
+                backgroundColor: '#ffffff',
+                width: $page.outerWidth(),
+                height: $page.outerHeight(),
+                logging: false
+            }).then(function (canvas) {
+                canvases.push(canvas);
+                index++;
+                if (onProgress) onProgress(index, total, canvas);
+                captureNext();
+            }).catch(function (err) {
+                deferred.reject('截图失败(第' + (index + 1) + '页): ' + err);
+            });
+        }
+
+        if (onProgress) onProgress(0, total, null);
+        captureNext();
+        return deferred.promise();
+    }
+
+    /**
+     * 将canvas转为base64并保存到服务端
+     * @param {number} postId 文章ID
+     * @param {Object} saveConfig 配置信息
+     * @param {Function} [onProgress] 生成进度回调 function(current, total, canvas)
+     * @returns {Promise} jQuery Deferred
+     */
+    function saveImages(postId, saveConfig, onProgress) {
+        var deferred = $.Deferred();
+
+        generateImages(onProgress).then(function (canvases) {
+            var pagesData = [];
+            for (var i = 0; i < canvases.length; i++) {
+                pagesData.push(canvases[i].toDataURL('image/jpeg', 0.92));
+            }
+
+            $.ajax({
+                url: '/index.php/admin/post/savePostOutput',
+                type: 'POST',
+                data: JSON.stringify({
+                    post_id: postId,
+                    output_type: 'phone_image',
+                    config: saveConfig || config,
+                    pages: pagesData
+                }),
+                contentType: 'application/json',
+                success: function (result) {
+                    if (result.code === 0) {
+                        deferred.resolve(result.data);
+                    } else {
+                        deferred.reject(result.msg || '保存失败');
+                    }
+                },
+                error: function (xhr) {
+                    deferred.reject('网络错误: ' + xhr.statusText);
+                }
+            });
+        }).catch(function (err) {
+            deferred.reject(err);
+        });
+
+        return deferred.promise();
+    }
+
+    /**
+     * 将生成的canvas数组显示为缩略图
+     * @param {Array} canvases canvas对象数组
+     * @param {string} containerSelector 容器选择器
+     */
+    function showGeneratedThumbnails(canvases, containerSelector) {
+        var $container = $(containerSelector);
+        $container.empty();
+
+        for (var i = 0; i < canvases.length; i++) {
+            var thumb = canvases[i].toDataURL('image/jpeg', 0.5);
+            var $item = $('<div class="phone-thumb-item" data-index="' + i + '">' +
+                '<img src="' + thumb + '" alt="第' + (i + 1) + '页">' +
+                '<span class="phone-thumb-page">' + (i + 1) + '</span>' +
+                '</div>');
+            $container.append($item);
+        }
+    }
+
+    // ===== 配置切换 =====
+
+    /**
+     * 切换模板
+     */
+    function switchTemplate(name) {
+        config.template = name;
+        if ($container) {
+            $container.removeClass('tpl-minimal tpl-magazine tpl-mixed').addClass('tpl-' + name);
+        }
+    }
+
+    /**
+     * 切换尺寸
+     */
+    function switchSize(name) {
+        config.size = name;
+    }
+
+    /**
+     * 切换字体
+     */
+    function switchFont(name) {
+        config.font = name;
+        if ($container) {
+            $container.removeClass('font-source-han-sans font-alibaba-puhuiti font-lxgw-wenkai').addClass('font-' + name);
+            $container.css('font-family', config.fonts[name] || config.fonts['source-han-sans']);
+        }
+    }
+
+    // ===== 工具方法 =====
+
+    /**
+     * HTML转义
+     */
+    function escapeHtml(text) {
+        if (!text) return '';
+        var div = document.createElement('div');
+        div.appendChild(document.createTextNode(text));
+        return div.innerHTML;
+    }
+
+    /**
+     * 获取当前配置
+     */
+    function getConfig() {
+        return $.extend({}, config);
+    }
+
+    /**
+     * 获取分页结果
+     */
+    function getPages() {
+        return pages.slice();
+    }
+
+    // ===== AI 智能排版 =====
+
+    /**
+     * 应用AI推荐配置
+     */
+    function applyAiRecommendation(recommendation) {
+        if (recommendation.template) {
+            switchTemplate(recommendation.template);
+            $('.template-btn').removeClass('active');
+            $('.template-btn[data-template="' + recommendation.template + '"]').addClass('active');
+            $('[name="size"]').val(config.size);
+        }
+        if (recommendation.font) {
+            switchFont(recommendation.font);
+            $('[name="font"]').val(recommendation.font);
+        }
+        if (recommendation.font_size) {
+            config.fontSize = parseInt(recommendation.font_size);
+            $('[name="fontSize"]').val(config.fontSize);
+            $('#fontSizeValue').text(config.fontSize + 'px');
+        }
+    }
+
+    /**
+     * 应用AI优化内容（替换预览用的内容）
+     */
+    var originalContentHtml = '';
+    function applyAiContent(optimizedContent) {
+        if (!originalContentHtml) {
+            originalContentHtml = postData.content_html;
+        }
+        if (optimizedContent.optimized_paragraphs) {
+            var newHtml = '';
+            for (var i = 0; i < optimizedContent.optimized_paragraphs.length; i++) {
+                newHtml += '<p>' + optimizedContent.optimized_paragraphs[i] + '</p>';
+            }
+            postData.content_html = newHtml;
+            postData.title = optimizedContent.optimized_title || postData.title;
+        }
+    }
+
+    /**
+     * 恢复原始内容
+     */
+    function restoreOriginalContent() {
+        if (originalContentHtml) {
+            postData.content_html = originalContentHtml;
+            originalContentHtml = '';
+        }
+    }
+
+    // ===== 公开API =====
+    return {
+        init: init,
+        render: render,
+        paginate: render,
+        generateImages: generateImages,
+        saveImages: saveImages,
+        showGeneratedThumbnails: showGeneratedThumbnails,
+        switchTemplate: switchTemplate,
+        switchSize: switchSize,
+        switchFont: switchFont,
+        getConfig: getConfig,
+        getPages: getPages,
+        applyAiRecommendation: applyAiRecommendation,
+        applyAiContent: applyAiContent,
+        restoreOriginalContent: restoreOriginalContent
+    };
+})();
diff --git a/source/font/AlibabaPuHuiTi-3-Bold.ttf b/source/font/AlibabaPuHuiTi-3-Bold.ttf
new file mode 100644
index 0000000..7edd4e5
Binary files /dev/null and b/source/font/AlibabaPuHuiTi-3-Bold.ttf differ
diff --git a/source/font/AlibabaPuHuiTi-3-Regular.ttf b/source/font/AlibabaPuHuiTi-3-Regular.ttf
new file mode 100644
index 0000000..a6eaf36
Binary files /dev/null and b/source/font/AlibabaPuHuiTi-3-Regular.ttf differ
diff --git a/source/font/LXGWWenKai-Regular.ttf b/source/font/LXGWWenKai-Regular.ttf
new file mode 100644
index 0000000..eb61629
Binary files /dev/null and b/source/font/LXGWWenKai-Regular.ttf differ
diff --git a/view/admin/common/left_system.html b/view/admin/common/left_system.html
index 0903d58..92433dc 100644
--- a/view/admin/common/left_system.html
+++ b/view/admin/common/left_system.html
@@ -67,5 +67,10 @@
         <a class="" href="{:url('admin/System/clearCache')}">清空缓存</a>
       </li>
     </ul>
+    <ul class="layui-nav layui-nav-tree" lay-filter="test">
+      <li class="layui-nav-item layui-nav-itemed left-nav-item" data-name="ai">
+        <a class="" href="{:url('admin/System/ai')}">AI 设置</a>
+      </li>
+    </ul>
   </div>
 </div>
diff --git a/view/admin/post/index.html b/view/admin/post/index.html
index fd128dd..6bac408 100644
--- a/view/admin/post/index.html
+++ b/view/admin/post/index.html
@@ -76,6 +76,7 @@
                                         <a class="layui-btn layui-btn-sm" target="_blank" href="{$vo.read_url}">查看</a>
                                         <a class="layui-btn layui-btn-sm" href="{:url('edit',['id'=>$vo.id,'type'=>$Request.param.type])}">设置</a>
                                         <a class="layui-btn layui-btn-sm" href="{:url('editContent',['id'=>$vo.id,'type'=>$Request.param.type])}">编辑</a>
+                                        <a class="layui-btn layui-btn-sm layui-btn-normal" href="{:url('post/postOutputList',['id'=>$vo.id])}"><i class="layui-icon layui-icon-picture"></i> 排版</a>
                                         <a class="layui-btn layui-btn-sm" target="_blank" href="{:url('output',['id'=>$vo.id,'type'=>$Request.param.type])}">导出</a>
                                         <div class="layui-btn layui-btn-sm delete">删除</div>
                                     </div>
diff --git a/view/admin/post/phone_image.html b/view/admin/post/phone_image.html
new file mode 100644
index 0000000..a4f2fd7
--- /dev/null
+++ b/view/admin/post/phone_image.html
@@ -0,0 +1,426 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{$post.title} - 手机图片排版</title>
+    <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
+    <link rel="stylesheet" href="/static/css/phone-image-templates.css">
+    <link rel="stylesheet" href="/static/css/phone-image-fonts.css">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            background: #f2f2f2;
+        }
+
+        .page-header {
+            background: #fff;
+            padding: 15px 20px;
+            border-bottom: 1px solid #e8e8e8;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .page-header h3 {
+            margin: 0;
+            font-size: 18px;
+        }
+
+        .main-layout {
+            display: flex;
+            height: calc(100vh - 60px);
+        }
+
+        .toolbar {
+            width: 260px;
+            background: #fff;
+            border-right: 1px solid #e8e8e8;
+            padding: 15px;
+            overflow-y: auto;
+        }
+
+        .preview-area {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+        }
+
+        .toolbar .layui-form-label {
+            width: 60px;
+            padding: 6px 8px;
+            font-size: 13px;
+        }
+
+        .toolbar .layui-input-block {
+            margin-left: 70px;
+        }
+
+        .toolbar .layui-form-item {
+            margin-bottom: 12px;
+        }
+
+        .template-btn-group {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 10px;
+        }
+
+        .template-btn {
+            flex: 1;
+            padding: 8px;
+            text-align: center;
+            border: 2px solid #e8e8e8;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 12px;
+            background: #fff;
+        }
+
+        .template-btn.active {
+            border-color: #1890ff;
+            color: #1890ff;
+        }
+
+        .template-btn:hover {
+            border-color: #1890ff;
+        }
+
+        .action-btns {
+            margin-top: 15px;
+        }
+
+        .action-btns .layui-btn {
+            width: 100%;
+            margin-bottom: 8px;
+        }
+
+        .phone-frame {
+            background: #fff;
+            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            overflow: hidden;
+        }
+
+        .preview-nav {
+            text-align: center;
+            margin-top: 10px;
+        }
+
+        .preview-nav span {
+            margin: 0 10px;
+            cursor: pointer;
+            color: #1890ff;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- 隐藏div存放文章HTML内容，供JS读取 -->
+    <div id="post-content-html" style="display:none;">{$post->content_html|raw}</div>
+
+    <div class="page-header">
+        <div>
+            <a href="{:url('post/index')}" class="layui-btn layui-btn-sm layui-btn-primary"><i
+                    class="layui-icon layui-icon-return"></i> 返回列表</a>
+            <a href="{:url('post/postOutputList',['id'=>$post.id])}" class="layui-btn layui-btn-sm">输出管理</a>
+        </div>
+        <h3>{$post.title}</h3>
+    </div>
+
+    <div class="main-layout">
+        <!-- 左侧工具栏 -->
+        <div class="toolbar">
+            <div class="layui-form" lay-filter="phoneImageForm">
+                <div class="layui-form-item">
+                    <label class="layui-form-label">模板</label>
+                    <div class="layui-input-block">
+                        <div class="template-btn-group">
+                            <div class="template-btn active" data-template="minimal">简约</div>
+                            <div class="template-btn" data-template="magazine">杂志</div>
+                            <div class="template-btn" data-template="mixed">图文</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="layui-form-item">
+                    <label class="layui-form-label">尺寸</label>
+                    <div class="layui-input-block">
+                        <select name="size" lay-filter="size">
+                            <option value="xiaohongshu">小红书 (1080x1440)</option>
+                            <option value="douyin">抖音 (1080x1920)</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="layui-form-item">
+                    <label class="layui-form-label">字体</label>
+                    <div class="layui-input-block">
+                        <select name="font" lay-filter="font">
+                            <option value="source-han-sans">思源黑体</option>
+                            <option value="alibaba-puhuiti">阿里巴巴普惠体</option>
+                            <option value="lxgw-wenkai">霞鹜文楷</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="layui-form-item">
+                    <label class="layui-form-label">字号</label>
+                    <div class="layui-input-block">
+                        <input type="range" name="fontSize" min="10" max="24" value="14" lay-filter="fontSize"
+                            style="width:100%;">
+                        <span id="fontSizeValue">14px</span>
+                    </div>
+                </div>
+
+                <div class="layui-form-item">
+                    <label class="layui-form-label">水印</label>
+                    <div class="layui-input-block">
+                        <input type="text" name="watermark" placeholder="可选水印文字" class="layui-input">
+                    </div>
+                </div>
+
+                <!-- AI 智能排版 -->
+                <div style="margin-top: 15px; margin-bottom: 10px; padding-top: 10px; border-top: 1px solid #e8e8e8;">
+                    <label class="layui-form-label" style="font-size: 13px; color: #1890ff;">AI 助手</label>
+                    <div class="layui-input-block" style="margin-top: 5px;">
+                        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="btn-ai-recommend" style="width: 100%; margin-bottom: 5px;">
+                            <i class="layui-icon layui-icon-magic"></i> AI 智能排版
+                        </button>
+                        <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" id="btn-ai-optimize" style="width: 100%;">
+                            <i class="layui-icon layui-icon-edit"></i> AI 优化内容
+                        </button>
+                    </div>
+                </div>
+                <div id="ai-reason" style="display:none; margin: 10px 0; padding: 8px 12px; background: #f0f7ff; border-radius: 4px; font-size: 12px; color: #666; line-height: 1.6;"></div>
+                <div id="ai-content-panel" style="display:none; margin: 10px 0; padding: 10px; background: #fffbe6; border: 1px solid #ffe58f; border-radius: 4px; font-size: 12px;">
+                    <div style="font-weight: bold; margin-bottom: 5px;">AI 内容优化建议</div>
+                    <div id="ai-optimized-title" style="margin-bottom: 5px;"></div>
+                    <div id="ai-summary-points" style="margin-bottom: 8px;"></div>
+                    <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" id="btn-apply-ai">应用优化</button>
+                    <button type="button" class="layui-btn layui-btn-xs layui-btn-primary" id="btn-keep-original">保持原文</button>
+                </div>
+
+                <div class="action-btns">
+                    <button type="button" class="layui-btn" id="btn-preview"><i
+                            class="layui-icon layui-icon-refresh"></i> 预览排版</button>
+                    <button type="button" class="layui-btn layui-btn-normal" id="btn-generate"><i
+                            class="layui-icon layui-icon-picture"></i> 生成并保存</button>
+                    <button type="button" class="layui-btn layui-btn-warm" id="btn-download"><i
+                            class="layui-icon layui-icon-download-circle"></i> 打包下载</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- 右侧预览区 -->
+        <div class="preview-area">
+            <div>
+                <div class="phone-frame">
+                    <div id="phone-image-container"
+                        class="phone-image-container tpl-minimal size-xiaohongshu font-source-han-sans">
+                    </div>
+                </div>
+                <div class="preview-nav">
+                    <span id="prev-page"><i class="layui-icon layui-icon-left"></i> 上一页</span>
+                    <span id="page-info">第 1 页 / 共 0 页</span>
+                    <span id="next-page">下一页 <i class="layui-icon layui-icon-right"></i></span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="/static/lib/jquery/jquery-3.4.1.min.js"></script>
+    <script src="/static/lib/layui/layui.js"></script>
+    <script src="/static/lib/html2canvas/html2canvas.js"></script>
+    <script src="/static/js/phone-image.js"></script>
+    <script>
+        layui.use(['form', 'layer'], function () {
+            var form = layui.form;
+            var layer = layui.layer;
+
+            var lastOutputId = null;
+            var downloadBaseUrl = '{:url("post/downloadPostOutputZip", ["id" => 0])}';
+
+            var postData = {
+                postId: {$post.id},
+                title: '{$post.title|raw}',
+                desc: '{$post.desc|default=""}',
+                contentHtml: $('#post-content-html').html(),
+                poster: '{$post.poster|default=""}',
+                authorName: '{$post.author_name|default=""}',
+                createTime: '{$post.create_time_text|default=""}',
+                categoryName: ''
+            };
+
+            // 初始化引擎
+            PhoneImageEngine.init(postData, {
+                template: 'minimal',
+                size: 'xiaohongshu',
+                font: 'source-han-sans',
+                fontSize: 14
+            });
+
+            // 模板切换
+            $('.template-btn').click(function () {
+                $('.template-btn').removeClass('active');
+                $(this).addClass('active');
+                PhoneImageEngine.switchTemplate($(this).data('template'));
+                doRender();
+            });
+
+            // 尺寸切换
+            form.on('select(size)', function (data) {
+                PhoneImageEngine.switchSize(data.value);
+                doRender();
+            });
+
+            // 字体切换
+            form.on('select(font)', function (data) {
+                PhoneImageEngine.switchFont(data.value);
+                doRender();
+            });
+
+            // 字号调整
+            $('[name="fontSize"]').on('input', function () {
+                $('#fontSizeValue').text($(this).val() + 'px');
+            });
+
+            // 预览
+            $('#btn-preview').click(function () {
+                doRender();
+            });
+
+            function doRender() {
+                var fontSize = parseInt($('[name="fontSize"]').val()) || 14;
+                PhoneImageEngine.init(postData, {
+                    template: $('.template-btn.active').data('template'),
+                    size: $('[name="size"]').val(),
+                    font: $('[name="font"]').val(),
+                    fontSize: fontSize
+                });
+                var pages = PhoneImageEngine.render();
+                layer.msg('排版完成，共 ' + pages.length + ' 页');
+            }
+
+            // 生成并保存
+            $('#btn-generate').click(function () {
+                var btn = $(this);
+                btn.prop('disabled', true).text('生成中...');
+                layer.msg('正在生成图片，请稍候...');
+
+                PhoneImageEngine.saveImages(postData.postId, {
+                    template: $('.template-btn.active').data('template'),
+                    size: $('[name="size"]').val(),
+                    font: $('[name="font"]').val(),
+                    fontSize: parseInt($('[name="fontSize"]').val()) || 14,
+                    watermark: $('[name="watermark"]').val()
+                }).then(function (data) {
+                    if (data.output_id) {
+                        lastOutputId = data.output_id;
+                    }
+                    layer.msg('保存成功！');
+                    btn.prop('disabled', false).html('<i class="layui-icon layui-icon-picture"></i> 生成并保存');
+                }).catch(function (err) {
+                    layer.msg('保存失败: ' + err);
+                    btn.prop('disabled', false).html('<i class="layui-icon layui-icon-picture"></i> 生成并保存');
+                });
+            });
+
+            // 打包下载
+            $('#btn-download').click(function () {
+                if (!lastOutputId) {
+                    layer.msg('请先生成并保存图片');
+                    return;
+                }
+                var url = downloadBaseUrl.replace('/0/', '/' + lastOutputId + '/');
+                window.open(url);
+            });
+
+            // ===== AI 智能排版 =====
+
+            // AI智能排版推荐
+            $('#btn-ai-recommend').click(function () {
+                var btn = $(this);
+                btn.prop('disabled', true).text('AI 分析中...');
+                $.post('{:url("post/aiRecommend")}', { post_id: postData.postId }, function (res) {
+                    btn.prop('disabled', false).html('<i class="layui-icon layui-icon-magic"></i> AI 智能排版');
+                    if (res.code === 0) {
+                        PhoneImageEngine.applyAiRecommendation(res.data);
+                        if (res.data.reason) {
+                            $('#ai-reason').html('AI 推荐理由: ' + escapeHtmlSimple(res.data.reason)).show();
+                        }
+                        doRender();
+                        layer.msg('AI 排版推荐已应用');
+                    } else {
+                        layer.msg(res.msg || 'AI 分析失败');
+                    }
+                }).fail(function () {
+                    btn.prop('disabled', false).html('<i class="layui-icon layui-icon-magic"></i> AI 智能排版');
+                    layer.msg('网络错误');
+                });
+            });
+
+            // AI优化内容
+            $('#btn-ai-optimize').click(function () {
+                var btn = $(this);
+                btn.prop('disabled', true).text('AI 优化中...');
+                $.post('{:url("post/aiOptimizeContent")}', { post_id: postData.postId }, function (res) {
+                    btn.prop('disabled', false).html('<i class="layui-icon layui-icon-edit"></i> AI 优化内容');
+                    if (res.code === 0) {
+                        var data = res.data;
+                        var titleHtml = '<b>原标题:</b> ' + escapeHtmlSimple(postData.title);
+                        if (data.optimized_title) {
+                            titleHtml += '<br><b>优化标题:</b> ' + escapeHtmlSimple(data.optimized_title);
+                        }
+                        $('#ai-optimized-title').html(titleHtml);
+                        if (data.summary_points) {
+                            var points = '<b>要点:</b><br>';
+                            for (var i = 0; i < data.summary_points.length; i++) {
+                                points += (i + 1) + '. ' + escapeHtmlSimple(data.summary_points[i]) + '<br>';
+                            }
+                            $('#ai-summary-points').html(points);
+                        }
+                        $('#ai-content-panel').data('aiData', data).show();
+                    } else {
+                        layer.msg(res.msg || 'AI 优化失败');
+                    }
+                }).fail(function () {
+                    btn.prop('disabled', false).html('<i class="layui-icon layui-icon-edit"></i> AI 优化内容');
+                    layer.msg('网络错误');
+                });
+            });
+
+            // 应用AI优化
+            $('#btn-apply-ai').click(function () {
+                var aiData = $('#ai-content-panel').data('aiData');
+                if (aiData) {
+                    PhoneImageEngine.applyAiContent(aiData);
+                    doRender();
+                    $('#ai-content-panel').hide();
+                    layer.msg('已应用 AI 优化内容');
+                }
+            });
+
+            // 保持原文
+            $('#btn-keep-original').click(function () {
+                PhoneImageEngine.restoreOriginalContent();
+                doRender();
+                $('#ai-content-panel').hide();
+                layer.msg('已恢复原文');
+            });
+
+            function escapeHtmlSimple(text) {
+                if (!text) return '';
+                return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            }
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/view/admin/post/post_output/index.html b/view/admin/post/post_output/index.html
new file mode 100644
index 0000000..d64ecac
--- /dev/null
+++ b/view/admin/post/post_output/index.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>{$post.title} - 输出管理</title>
+    {include file="common/_require"}
+</head>
+
+<body class="layui-layout-body">
+
+    <div class="layui-layout layui-layout-admin">
+        {include file="common/_header"}
+        {include file="common/left_post"}
+
+        <div class="layui-body">
+            <div style="padding:15px">
+                <div class="main-header">
+                    <span class="layui-breadcrumb">
+                        <a>首页</a>
+                        <a href="{:url('post/index')}">内容管理</a>
+                        <a><cite>输出管理 - {$post.title}</cite></a>
+                    </span>
+                </div>
+
+                <div class="main-container">
+                    <div>
+                        <a href="{:url('post/phoneImage',['id'=>$post.id])}" class="layui-btn">
+                            <i class="layui-icon layui-icon-add-1"></i> 新建排版
+                        </a>
+                        <a href="{:url('post/index')}" class="layui-btn layui-btn-primary">
+                            <i class="layui-icon layui-icon-return"></i> 返回列表
+                        </a>
+                    </div>
+                </div>
+
+                <div>
+                    <table class="layui-table" lay-skin="line">
+                        <thead>
+                            <tr>
+                                <th>ID</th>
+                                <th>类型</th>
+                                <th>尺寸</th>
+                                <th>页数</th>
+                                <th>状态</th>
+                                <th>创建时间</th>
+                                <th>图片</th>
+                                <th>操作</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {volist name='list' id='vo'}
+                            <tr class="item" data-id="{$vo.id}">
+                                <td>{$vo.id}</td>
+                                <td>{$vo.output_type_text}</td>
+                                <td>
+                                    {if $vo.config && $vo.config.size}
+                                        {if $vo.config.size == 'xiaohongshu'}小红书{/if}
+                                        {if $vo.config.size == 'douyin'}抖音{/if}
+                                    {else/}
+                                        -
+                                    {/if}
+                                </td>
+                                <td>{$vo.page_count}</td>
+                                <td>{$vo.status_text}</td>
+                                <td>{$vo.create_time}</td>
+                                <td>
+                                    <button type="button" class="layui-btn layui-btn-xs btn-view-images"
+                                        data-output-id="{$vo.id}">
+                                        <i class="layui-icon layui-icon-picture"></i> 查看图片
+                                    </button>
+                                </td>
+                                <td>
+                                    <div class="layui-btn-container">
+                                        <a class="layui-btn layui-btn-xs layui-btn-warm"
+                                            href="{:url('post/downloadPostOutputZip',['id'=>$vo.id])}">
+                                            <i class="layui-icon layui-icon-download-circle"></i> 下载ZIP
+                                        </a>
+                                        <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn-delete-output"
+                                            data-output-id="{$vo.id}">
+                                            <i class="layui-icon layui-icon-delete"></i> 删除
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                            {/volist}
+                            {if condition="count($list) == 0"}
+                            <tr>
+                                <td colspan="8">暂无输出记录，点击"新建排版"创建</td>
+                            </tr>
+                            {/if}
+                        </tbody>
+                    </table>
+                    <div>
+                        {$list|raw}
+                    </div>
+                </div>
+
+                <!-- 图片预览弹窗容器 -->
+                <div id="image-preview-panel" style="display:none; margin-top:15px; padding:15px; background:#fff; border:1px solid #e8e8e8; border-radius:4px;">
+                    <div style="margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;">
+                        <strong>图片预览</strong>
+                        <button type="button" class="layui-btn layui-btn-xs layui-btn-primary" id="btn-close-preview">
+                            <i class="layui-icon layui-icon-close"></i> 关闭
+                        </button>
+                    </div>
+                    <div id="image-preview-list" style="display:flex; flex-wrap:wrap; gap:10px;"></div>
+                </div>
+            </div>
+        </div>
+        {include file="common/_footer"}
+    </div>
+
+    <script>
+        // 查看图片
+        $('.btn-view-images').click(function () {
+            var outputId = $(this).data('output-id');
+            var $panel = $('#image-preview-panel');
+            var $list = $('#image-preview-list');
+
+            $list.html('<div style="padding:20px;">加载中...</div>');
+            $panel.show();
+
+            $.get('{:url("post/getOutputFiles")}', { output_id: outputId }, function (res) {
+                if (res.code !== 0) {
+                    $list.html('<div style="color:red;">' + (res.msg || '加载失败') + '</div>');
+                    return;
+                }
+                if (!res.data || res.data.length === 0) {
+                    $list.html('<div style="color:#999;">暂无图片</div>');
+                    return;
+                }
+                var html = '';
+                for (var i = 0; i < res.data.length; i++) {
+                    var f = res.data[i];
+                    html += '<div style="width:120px; text-align:center;">';
+                    html += '<img src="' + f.file_url + '" style="max-width:120px; max-height:200px; border:1px solid #eee; border-radius:4px;" alt="第' + f.page + '页">';
+                    html += '<div style="font-size:12px; color:#999; margin-top:4px;">第' + f.page + '页</div>';
+                    html += '</div>';
+                }
+                $list.html(html);
+            }).fail(function () {
+                $list.html('<div style="color:red;">网络错误</div>');
+            });
+        });
+
+        // 关闭预览
+        $('#btn-close-preview').click(function () {
+            $('#image-preview-panel').hide();
+        });
+
+        // 删除输出
+        $('.btn-delete-output').click(function () {
+            var btn = $(this);
+            var outputId = btn.data('output-id');
+            layer.confirm('确定要删除该输出记录吗？图片文件将一并删除。', function () {
+                $.get('{:url("post/deletePostOutput")}', { id: outputId }, function (res) {
+                    if (res.code === 0) {
+                        layer.msg('删除成功');
+                        btn.parents('.item').remove();
+                        $('#image-preview-panel').hide();
+                    } else {
+                        layer.msg(res.msg || '删除失败');
+                    }
+                }).fail(function () {
+                    layer.msg('网络错误');
+                });
+            });
+        });
+    </script>
+</body>
+
+</html>
diff --git a/view/admin/post_output/index.html b/view/admin/post_output/index.html
new file mode 100644
index 0000000..4193e87
--- /dev/null
+++ b/view/admin/post_output/index.html
@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{$post.title} - 输出管理</title>
+    <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
+    <style>
+        .output-thumb-row {
+            display: none;
+        }
+        .output-thumb-row.show {
+            display: table-row;
+        }
+        .output-thumbs {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            padding: 10px 0;
+        }
+        .output-thumb-item {
+            position: relative;
+            width: 80px;
+            height: 107px;
+            border: 1px solid #e6e6e6;
+            border-radius: 4px;
+            overflow: hidden;
+            cursor: pointer;
+            transition: border-color 0.2s;
+        }
+        .output-thumb-item:hover {
+            border-color: #1e9fff;
+        }
+        .output-thumb-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .output-thumb-item .thumb-page-num {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.5);
+            color: #fff;
+            text-align: center;
+            font-size: 11px;
+            line-height: 18px;
+        }
+        .output-thumbs-loading {
+            padding: 20px;
+            text-align: center;
+            color: #999;
+        }
+        .btn-view-images {
+            cursor: pointer;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="layui-fluid">
+        <div class="layui-card">
+            <div class="layui-card-header">
+                <a href="{:url('post/index')}" class="layui-btn layui-btn-sm layui-btn-primary"><i
+                        class="layui-icon layui-icon-return"></i> 返回</a>
+                <a href="{:url('post/phoneImage',['id'=>$post.id])}" class="layui-btn layui-btn-sm"><i
+                        class="layui-icon layui-icon-add-1"></i> 新建排版</a>
+                <span style="margin-left: 15px;">文章: {$post.title}</span>
+            </div>
+            <div class="layui-card-body">
+                <table class="layui-table" lay-skin="line">
+                    <colgroup>
+                        <col width="100">
+                        <col width="200">
+                        <col width="80">
+                        <col width="80">
+                        <col width="160">
+                        <col width="100">
+                        <col>
+                    </colgroup>
+                    <thead>
+                        <tr>
+                            <th>ID</th>
+                            <th>输出类型</th>
+                            <th>状态</th>
+                            <th>图片数</th>
+                            <th>创建时间</th>
+                            <th>操作人</th>
+                            <th>操作</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {volist name="list" id="vo"}
+                        <tr>
+                            <td>{$vo.id}</td>
+                            <td>{$vo.output_type_text}</td>
+                            <td>{$vo.status_text}</td>
+                            <td>{$vo.page_count}</td>
+                            <td>{$vo.create_time|date='Y-m-d H:i'}</td>
+                            <td>Admin</td>
+                            <td>
+                                <button class="layui-btn layui-btn-xs btn-view-images" data-id="{$vo.id}"
+                                    data-page-count="{$vo.page_count}">查看图片</button>
+                                <a href="{:url('post/downloadPostOutputZip',['id'=>$vo.id])}"
+                                    class="layui-btn layui-btn-xs layui-btn-normal">下载ZIP</a>
+                                <button class="layui-btn layui-btn-xs layui-btn-warm btn-regenerate"
+                                    data-id="{$vo.id}">重新生成</button>
+                                <button class="layui-btn layui-btn-xs layui-btn-danger btn-delete"
+                                    data-id="{$vo.id}">删除</button>
+                            </td>
+                        </tr>
+                        <tr class="output-thumb-row" id="thumbs-row-{$vo.id}">
+                            <td colspan="7">
+                                <div class="output-thumbs-loading">
+                                    <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
+                                    加载中...
+                                </div>
+                                <div class="output-thumbs" id="thumbs-{$vo.id}" style="display:none;"></div>
+                            </td>
+                        </tr>
+                        {/volist}
+                    </tbody>
+                </table>
+                <div class="layui-page">{$list|raw}</div>
+            </div>
+        </div>
+    </div>
+
+    <script src="/static/lib/jquery/jquery-3.4.1.min.js"></script>
+    <script src="/static/lib/layui/layui.js"></script>
+    <script>
+        layui.use(['layer'], function () {
+            var layer = layui.layer;
+
+            // 查看图片 - 展开/收起缩略图
+            $(document).on('click', '.btn-view-images', function () {
+                var $btn = $(this);
+                var outputId = $btn.data('id');
+                var pageCount = parseInt($btn.data('page-count'), 10) || 0;
+                var $thumbRow = $('#thumbs-row-' + outputId);
+                var $thumbContainer = $('#thumbs-' + outputId);
+
+                // 切换显示
+                if ($thumbRow.hasClass('show')) {
+                    $thumbRow.removeClass('show');
+                    $btn.text('查看图片');
+                    return;
+                }
+
+                // 如果已加载过图片，直接显示
+                if ($thumbContainer.children('.output-thumb-item').length > 0) {
+                    $thumbRow.addClass('show');
+                    $btn.text('收起图片');
+                    return;
+                }
+
+                // 无图片数据
+                if (pageCount === 0) {
+                    layer.msg('该输出暂无图片');
+                    return;
+                }
+
+                // 加载图片列表
+                $thumbRow.addClass('show');
+                $btn.text('收起图片');
+                $thumbContainer.siblings('.output-thumbs-loading').show();
+                $thumbContainer.hide();
+
+                $.getJSON('/index.php/admin/post/getOutputFiles', { output_id: outputId }, function (res) {
+                    $thumbContainer.siblings('.output-thumbs-loading').hide();
+
+                    if (res.code !== 0 || !res.data || res.data.length === 0) {
+                        $thumbContainer.html('<div style="color:#999;padding:10px;">暂无图片文件</div>').show();
+                        return;
+                    }
+
+                    $thumbContainer.empty();
+                    for (var i = 0; i < res.data.length; i++) {
+                        var file = res.data[i];
+                        var $item = $('<div class="output-thumb-item" data-full="' + file.file_url + '">' +
+                            '<img src="' + file.file_url + '" alt="第' + file.page + '页">' +
+                            '<div class="thumb-page-num">第' + file.page + '页</div>' +
+                            '</div>');
+                        $thumbContainer.append($item);
+                    }
+                    $thumbContainer.show();
+                }).fail(function () {
+                    $thumbContainer.siblings('.output-thumbs-loading').hide();
+                    $thumbContainer.html('<div style="color:#FF5722;padding:10px;">加载失败，请重试</div>').show();
+                });
+            });
+
+            // 点击缩略图查看大图
+            $(document).on('click', '.output-thumb-item', function () {
+                var imgUrl = $(this).data('full');
+                if (!imgUrl) return;
+
+                var pageText = $(this).find('.thumb-page-num').text() || '';
+
+                layer.open({
+                    type: 1,
+                    title: pageText,
+                    area: ['auto', '90%'],
+                    maxWidth: 600,
+                    shadeClose: true,
+                    content: '<div style="text-align:center;padding:10px;background:#f2f2f2;">' +
+                        '<img src="' + imgUrl + '" style="max-width:100%;height:auto;" alt="' + pageText + '">' +
+                        '</div>'
+                });
+            });
+
+            // 删除
+            $(document).on('click', '.btn-delete', function () {
+                var id = $(this).data('id');
+                var $btn = $(this);
+                layer.confirm('确定删除该输出记录？图片文件将一并删除。', function (index) {
+                    $btn.prop('disabled', true).addClass('layui-btn-disabled');
+                    $.post('{:url("post/deletePostOutput")}', { id: id }, function (res) {
+                        if (res.code === 0) {
+                            layer.msg('删除成功', { icon: 1 });
+                            setTimeout(function () { location.reload(); }, 1000);
+                        } else {
+                            layer.msg(res.msg || '删除失败', { icon: 2 });
+                            $btn.prop('disabled', false).removeClass('layui-btn-disabled');
+                        }
+                    }).fail(function () {
+                        layer.msg('网络错误', { icon: 2 });
+                        $btn.prop('disabled', false).removeClass('layui-btn-disabled');
+                    });
+                    layer.close(index);
+                });
+            });
+
+            // 重新生成
+            $(document).on('click', '.btn-regenerate', function () {
+                var id = $(this).data('id');
+                var $btn = $(this);
+                layer.confirm('重新生成将删除当前输出记录，确定继续？', function (index) {
+                    $btn.prop('disabled', true).addClass('layui-btn-disabled');
+                    $.post('{:url("post/regeneratePostOutput")}', { id: id }, function (res) {
+                        if (res.code === 0) {
+                            layer.msg('正在跳转...', { icon: 1 });
+                            setTimeout(function () {
+                                location.href = '{:url("post/phoneImage",["id"=>$post.id])}';
+                            }, 500);
+                        } else {
+                            layer.msg(res.msg || '操作失败', { icon: 2 });
+                            $btn.prop('disabled', false).removeClass('layui-btn-disabled');
+                        }
+                    }).fail(function () {
+                        layer.msg('网络错误', { icon: 2 });
+                        $btn.prop('disabled', false).removeClass('layui-btn-disabled');
+                    });
+                    layer.close(index);
+                });
+            });
+        });
+    </script>
+</body>
+
+</html>
diff --git a/view/admin/system/ai.html b/view/admin/system/ai.html
new file mode 100644
index 0000000..7137784
--- /dev/null
+++ b/view/admin/system/ai.html
@@ -0,0 +1,648 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>AI 设置</title>
+  {include file="common/_require"}
+
+  <script>
+    var currentHeaderNavItem = 'System';
+    var currentLeftNavItem = 'ai';
+  </script>
+  <style>
+    .layui-form-pane .layui-form-label {
+      width: 120px;
+    }
+    .layui-form-pane .layui-input-block {
+      margin-left: 120px;
+    }
+    .ai-card {
+      background: #fff;
+      border: 1px solid #e6e6e6;
+      border-radius: 4px;
+      margin-bottom: 15px;
+    }
+    .ai-card-header {
+      padding: 10px 15px;
+      border-bottom: 1px solid #e6e6e6;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: #f8f8f8;
+    }
+    .ai-card-header h3 {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 600;
+    }
+    .ai-card-body {
+      padding: 15px;
+    }
+    .ai-badge {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 3px;
+      font-size: 12px;
+      color: #fff;
+    }
+    .ai-badge-success { background: #5FB878; }
+    .ai-badge-danger { background: #FF5722; }
+    .ai-badge-warn { background: #FFB800; }
+    .ai-provider-list {
+      max-height: 400px;
+      overflow-y: auto;
+    }
+    .ai-provider-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 0;
+      border-bottom: 1px solid #f0f0f0;
+    }
+    .ai-provider-item:last-child {
+      border-bottom: none;
+    }
+    .ai-provider-info {
+      flex: 1;
+    }
+    .ai-provider-name {
+      font-weight: 600;
+      font-size: 14px;
+    }
+    .ai-provider-id {
+      color: #999;
+      font-size: 12px;
+      margin-left: 8px;
+    }
+    .ai-provider-actions {
+      display: flex;
+      gap: 5px;
+    }
+    .ai-sync-status {
+      padding: 10px 0;
+      color: #666;
+      font-size: 13px;
+    }
+  </style>
+</head>
+
+<body class="layui-layout-body">
+
+  <div class="layui-layout layui-layout-admin">
+    {include file="common/_header"}
+
+    {include file="common/left_system"}
+
+    <div class="layui-body">
+      <div style="padding:15px">
+        <div class="main-header">
+          <span class="layui-breadcrumb">
+            <a>首页</a>
+            <a><cite>AI 设置</cite></a>
+          </span>
+        </div>
+        <div class="main-container">
+
+          <div class="layui-row layui-col-space15">
+
+            <!-- 左侧: 渠道管理 -->
+            <div class="layui-col-md8">
+
+              <!-- 已配置的渠道 -->
+              <div class="ai-card">
+                <div class="ai-card-header">
+                  <h3>已配置的渠道</h3>
+                  <button class="layui-btn layui-btn-sm" id="btn-add-channel">
+                    <i class="layui-icon layui-icon-add-1"></i> 添加渠道
+                  </button>
+                </div>
+                <div class="ai-card-body">
+                  <div class="ai-provider-list" id="channel-list">
+                    <div style="text-align:center;color:#999;padding:20px;">加载中...</div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 默认设置 -->
+              <div class="ai-card">
+                <div class="ai-card-header">
+                  <h3>默认设置</h3>
+                </div>
+                <div class="ai-card-body">
+                  <form class="layui-form layui-form-pane" action="{:url('admin/System/update')}" method="post" lay-filter="default-settings">
+                    <div class="layui-form-item">
+                      <div class="layui-form-label">默认供应商</div>
+                      <div class="layui-input-block">
+                        <select name="ai_default_provider" id="sel-default-provider" lay-filter="default-provider">
+                          <option value="">请选择</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div class="layui-form-item">
+                      <div class="layui-form-label">默认模型</div>
+                      <div class="layui-input-block">
+                        <input type="text" name="ai_default_model" id="inp-default-model"
+                          value="{:get_system_config('ai_default_model', '')}"
+                          placeholder="如 gpt-3.5-turbo, glm-4-flash" class="layui-input">
+                      </div>
+                    </div>
+                    <div class="layui-form-item">
+                      <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="save-defaults">保存默认设置</button>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            </div>
+
+            <!-- 右侧: 同步与缓存 -->
+            <div class="layui-col-md4">
+
+              <!-- 模型目录同步 -->
+              <div class="ai-card">
+                <div class="ai-card-header">
+                  <h3>模型目录同步</h3>
+                </div>
+                <div class="ai-card-body">
+                  <div class="ai-sync-status" id="sync-status">
+                    加载中...
+                  </div>
+                  <button class="layui-btn layui-btn-fluid" id="btn-sync">
+                    <i class="layui-icon layui-icon-refresh"></i> 从 models.dev 同步
+                  </button>
+                </div>
+              </div>
+
+              <!-- 从模型目录添加渠道 -->
+              <div class="ai-card">
+                <div class="ai-card-header">
+                  <h3>从模型目录添加</h3>
+                </div>
+                <div class="ai-card-body">
+                  <form class="layui-form" lay-filter="catalog-add">
+                    <div class="layui-form-item">
+                      <select name="catalog_provider" id="sel-catalog-provider" lay-filter="catalog-provider" lay-search>
+                        <option value="">搜索并选择供应商...</option>
+                      </select>
+                    </div>
+                    <div id="catalog-provider-info" style="display:none;margin-bottom:10px;">
+                      <p style="font-size:12px;color:#999;" id="catalog-provider-desc"></p>
+                    </div>
+                    <div class="layui-form-item" id="catalog-models-wrap" style="display:none;">
+                      <select name="catalog_model" id="sel-catalog-model" lay-filter="catalog-model">
+                        <option value="">选择默认模型(可选)</option>
+                      </select>
+                    </div>
+                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="catalog-add-submit">快速添加此渠道</button>
+                  </form>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    {include file="common/_footer"}
+  </div>
+
+  <!-- 添加/编辑渠道弹窗模板 -->
+  <script type="text/html" id="tpl-channel-form">
+    <form class="layui-form layui-form-pane" lay-filter="channel-form" style="padding:20px;">
+      <input type="hidden" name="edit_mode" value="">
+      <div class="layui-form-item">
+        <div class="layui-form-label">供应商标识</div>
+        <div class="layui-input-block">
+          <input type="text" name="provider_id" placeholder="英文标识,如 zhipu, deepseek" class="layui-input" lay-verify="required">
+        </div>
+      </div>
+      <div class="layui-form-item">
+        <div class="layui-form-label">API Key</div>
+        <div class="layui-input-block">
+          <input type="password" name="key" placeholder="输入API密钥" class="layui-input" lay-verify="required">
+        </div>
+      </div>
+      <div class="layui-form-item">
+        <div class="layui-form-label">API 地址</div>
+        <div class="layui-input-block">
+          <input type="text" name="base_url" placeholder="如 https://api.openai.com/v1" class="layui-input">
+        </div>
+      </div>
+      <div class="layui-form-item">
+        <div class="layui-form-label">设为默认</div>
+        <div class="layui-input-block">
+          <input type="checkbox" name="is_default" lay-skin="switch" lay-text="是|否">
+        </div>
+      </div>
+      <div class="layui-form-item" style="text-align:center;">
+        <button class="layui-btn" lay-submit lay-filter="channel-form-submit">保存</button>
+        <button type="button" class="layui-btn layui-btn-primary" id="btn-test-channel">测试连接</button>
+      </div>
+    </form>
+  </script>
+
+  <script>
+    layui.use(['layer', 'form', 'element'], function () {
+      var layer = layui.layer;
+      var form = layui.form;
+      var $ = layui.$;
+
+      var cacheProviders = {};
+
+      // 加载渠道列表
+      function loadChannels() {
+        $.ajax({
+          url: '{:url("admin/System/getAiCacheStatus")}',
+          dataType: 'json',
+          success: function (res) {
+            if (res.code === 0) {
+              var status = res.data;
+              $('#sync-status').html(
+                '缓存状态: ' + (status.exists ? '<span class="ai-badge ai-badge-success">存在</span>' : '<span class="ai-badge ai-badge-danger">无缓存</span>') +
+                '<br>上次同步: ' + status.last_sync +
+                (status.expired ? ' <span class="ai-badge ai-badge-warn">已过期</span>' : '') +
+                '<br>供应商数: ' + status.provider_count
+              );
+              if (status.provider_count > 0) {
+                loadProviderList();
+              } else {
+                $('#channel-list').html('<div style="text-align:center;color:#999;padding:20px;">暂无数据,请先同步模型目录或手动添加渠道</div>');
+              }
+            }
+          }
+        });
+      }
+
+      // 加载已配置的渠道列表
+      function loadProviderList() {
+        // 获取所有 system_config 中 ai_provider_ 开头的配置
+        var channels = [];
+
+        // 读取页面内嵌的已配置渠道数据(通过模板变量)
+        {:php}
+        $allConfig = get_system_config();
+        $defaultProvider = get_system_config('ai_default_provider', '');
+        $configured = [];
+        if (is_array($allConfig)) {
+            foreach ($allConfig as $key => $value) {
+                if (preg_match('/^ai_provider_([a-z0-9_]+)_key$/', $key, $m)) {
+                    if (!empty($value)) {
+                        $pid = $m[1];
+                        $configured[] = [
+                            'id' => $pid,
+                            'name' => ucfirst(str_replace('_', ' ', $pid)),
+                            'base_url' => get_system_config("ai_provider_{$pid}_base_url", ''),
+                            'is_default' => ($defaultProvider === $pid),
+                        ];
+                    }
+                }
+            }
+        }
+        {/php}
+
+        var configuredChannels = {:json_encode($configured)};
+
+        var html = '';
+        if (configuredChannels.length === 0) {
+          html = '<div style="text-align:center;color:#999;padding:20px;">暂无已配置的渠道</div>';
+        } else {
+          for (var i = 0; i < configuredChannels.length; i++) {
+            var ch = configuredChannels[i];
+            html += '<div class="ai-provider-item">';
+            html += '  <div class="ai-provider-info">';
+            html += '    <span class="ai-provider-name">' + ch.name + '</span>';
+            html += '    <span class="ai-provider-id">' + ch.id + '</span>';
+            if (ch.is_default) {
+              html += '    <span class="ai-badge ai-badge-success" style="margin-left:5px;">默认</span>';
+            }
+            html += '    <br><span style="font-size:12px;color:#999;">' + (ch.base_url || '默认地址') + '</span>';
+            html += '  </div>';
+            html += '  <div class="ai-provider-actions">';
+            html += '    <button class="layui-btn layui-btn-xs" onclick="testChannel(\'' + ch.id + '\')">测试</button>';
+            html += '    <button class="layui-btn layui-btn-xs layui-btn-normal" onclick="editChannel(\'' + ch.id + '\')">编辑</button>';
+            html += '    <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteChannel(\'' + ch.id + '\')">删除</button>';
+            html += '  </div>';
+            html += '</div>';
+          }
+        }
+
+        $('#channel-list').html(html);
+
+        // 更新默认供应商下拉
+        updateDefaultProviderSelect(configuredChannels);
+        updateCatalogProviders(configuredChannels);
+      }
+
+      // 更新默认供应商下拉
+      function updateDefaultProviderSelect(channels) {
+        var sel = $('#sel-default-provider');
+        var currentDefault = '{:get_system_config("ai_default_provider", "")}';
+        sel.html('<option value="">请选择</option>');
+        for (var i = 0; i < channels.length; i++) {
+          sel.append('<option value="' + channels[i].id + '"' + (channels[i].id === currentDefault ? ' selected' : '') + '>' + channels[i].name + '</option>');
+        }
+        form.render('select');
+      }
+
+      // 更新模型目录供应商下拉
+      function updateCatalogProviders(configured) {
+        var configuredIds = {};
+        for (var i = 0; i < configured.length; i++) {
+          configuredIds[configured[i].id] = true;
+        }
+
+        $.ajax({
+          url: '{:url("admin/System/syncModelsDev")}',
+          type: 'get',
+          dataType: 'json',
+          success: function (res) {
+            if (res.code === 0 && res.data && res.data.providers) {
+              cacheProviders = res.data.providers;
+              var sel = $('#sel-catalog-provider');
+              sel.html('<option value="">搜索并选择供应商...</option>');
+              var keys = Object.keys(res.data.providers).sort();
+              for (var i = 0; i < keys.length; i++) {
+                var p = res.data.providers[keys[i]];
+                var suffix = configuredIds[p.id] ? ' (已配置)' : '';
+                sel.append('<option value="' + p.id + '">' + p.name + ' (' + p.id + ')' + suffix + '</option>');
+              }
+              form.render('select');
+            }
+          }
+        });
+      }
+
+      // 同步 models.dev
+      $('#btn-sync').on('click', function () {
+        var btn = $(this);
+        btn.prop('disabled', true).html('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i> 同步中...');
+        $.ajax({
+          url: '{:url("admin/System/syncModelsDev")}',
+          type: 'post',
+          dataType: 'json',
+          success: function (res) {
+            btn.prop('disabled', false).html('<i class="layui-icon layui-icon-refresh"></i> 从 models.dev 同步');
+            if (res.code === 0) {
+              layer.msg(res.msg, { icon: 1 });
+              loadChannels();
+            } else {
+              layer.msg(res.msg, { icon: 2 });
+            }
+          },
+          error: function () {
+            btn.prop('disabled', false).html('<i class="layui-icon layui-icon-refresh"></i> 从 models.dev 同步');
+            layer.msg('网络错误', { icon: 2 });
+          }
+        });
+      });
+
+      // 添加渠道弹窗
+      $('#btn-add-channel').on('click', function () {
+        showChannelForm('add', {});
+      });
+
+      // 显示渠道表单弹窗
+      function showChannelForm(mode, data) {
+        var html = $('#tpl-channel-form').html();
+        var title = mode === 'add' ? '添加渠道' : '编辑渠道 - ' + (data.name || data.provider_id);
+
+        layer.open({
+          type: 1,
+          title: title,
+          area: ['500px', '380px'],
+          content: html,
+          success: function (layero, index) {
+            form.render(null, 'channel-form');
+            if (mode === 'edit') {
+              layero.find('input[name="provider_id"]').val(data.provider_id || '').prop('readonly', true);
+              layero.find('input[name="key"]').val(data.key || '');
+              layero.find('input[name="base_url"]').val(data.base_url || '');
+              layero.find('input[name="edit_mode"]').val('edit');
+            }
+
+            // 测试连接
+            layero.find('#btn-test-channel').on('click', function () {
+              var pid = layero.find('input[name="provider_id"]').val();
+              if (!pid) {
+                layer.msg('请填写供应商标识', { icon: 2 });
+                return;
+              }
+              layer.msg('测试中...', { icon: 16, time: 0, shade: 0.3 });
+              $.ajax({
+                url: '{:url("admin/System/testAiChannel")}',
+                data: { provider_id: pid },
+                dataType: 'json',
+                success: function (res) {
+                  layer.closeAll('msg');
+                  layer.msg(res.msg, { icon: res.code === 0 ? 1 : 2 });
+                },
+                error: function () {
+                  layer.closeAll('msg');
+                  layer.msg('网络错误', { icon: 2 });
+                }
+              });
+            });
+
+            // 提交表单
+            form.on('submit(channel-form-submit)', function (obj) {
+              var formData = obj.field;
+              if (formData.edit_mode === 'edit') {
+                formData.provider_id = data.provider_id;
+              }
+              $.ajax({
+                url: '{:url("admin/System/saveAiChannel")}',
+                type: 'post',
+                data: formData,
+                dataType: 'json',
+                success: function (res) {
+                  if (res.code === 0) {
+                    layer.close(index);
+                    layer.msg(res.msg, { icon: 1 });
+                    setTimeout(function () { location.reload(); }, 500);
+                  } else {
+                    layer.msg(res.msg, { icon: 2 });
+                  }
+                }
+              });
+              return false;
+            });
+          }
+        });
+      }
+
+      // 测试渠道
+      window.testChannel = function (providerId) {
+        layer.msg('测试中...', { icon: 16, time: 0, shade: 0.3 });
+        $.ajax({
+          url: '{:url("admin/System/testAiChannel")}',
+          data: { provider_id: providerId },
+          dataType: 'json',
+          success: function (res) {
+            layer.closeAll('msg');
+            layer.msg(res.msg, { icon: res.code === 0 ? 1 : 2 });
+          },
+          error: function () {
+            layer.closeAll('msg');
+            layer.msg('网络错误', { icon: 2 });
+          }
+        });
+      };
+
+      // 编辑渠道
+      window.editChannel = function (providerId) {
+        {:php}
+        echo 'var providerConfigs = {};';
+        if (is_array($allConfig)) {
+            foreach ($configured as $ch) {
+                $pid = $ch['id'];
+                echo "providerConfigs['{$pid}'] = " . json_encode([
+                    'provider_id' => $pid,
+                    'name' => $ch['name'],
+                    'key' => get_system_config("ai_provider_{$pid}_key", ''),
+                    'base_url' => get_system_config("ai_provider_{$pid}_base_url", ''),
+                ]) . ';';
+            }
+        }
+        {/php}
+
+        var data = providerConfigs[providerId];
+        if (data) {
+          showChannelForm('edit', data);
+        }
+      };
+
+      // 删除渠道
+      window.deleteChannel = function (providerId) {
+        layer.confirm('确定删除渠道 "' + providerId + '" 的配置?', { icon: 3, title: '确认' }, function (index) {
+          $.ajax({
+            url: '{:url("admin/System/deleteAiChannel")}',
+            data: { provider_id: providerId },
+            dataType: 'json',
+            success: function (res) {
+              if (res.code === 0) {
+                layer.close(index);
+                layer.msg(res.msg, { icon: 1 });
+                setTimeout(function () { location.reload(); }, 500);
+              } else {
+                layer.msg(res.msg, { icon: 2 });
+              }
+            }
+          });
+        });
+      };
+
+      // 模型目录选择供应商
+      form.on('select(catalog-provider)', function (obj) {
+        var pid = obj.value;
+        if (pid && cacheProviders[pid]) {
+          var p = cacheProviders[pid];
+          $('#catalog-provider-desc').text((p.url ? '官网: ' + p.url : '') + (p.api_base_url ? ' | API: ' + p.api_base_url : ''));
+          $('#catalog-provider-info').show();
+
+          // 加载该供应商的模型列表
+          $.ajax({
+            url: '{:url("admin/System/getModelsByProvider")}',
+            data: { provider_id: pid },
+            dataType: 'json',
+            success: function (res) {
+              if (res.code === 0 && res.data && res.data.length > 0) {
+                var sel = $('#sel-catalog-model');
+                sel.html('<option value="">选择默认模型(可选)</option>');
+                for (var i = 0; i < res.data.length; i++) {
+                  var m = res.data[i];
+                  sel.append('<option value="' + m.id + '">' + m.name + ' (' + m.id + ')</option>');
+                }
+                $('#catalog-models-wrap').show();
+                form.render('select');
+              } else {
+                $('#catalog-models-wrap').hide();
+              }
+            }
+          });
+
+          // 自动填充 API 地址
+          if (p.api_base_url) {
+            // 保存到临时变量
+            window._catalogBaseUrl = p.api_base_url;
+          }
+        } else {
+          $('#catalog-provider-info').hide();
+          $('#catalog-models-wrap').hide();
+          window._catalogBaseUrl = '';
+        }
+      });
+
+      // 从目录添加渠道提交
+      form.on('submit(catalog-add-submit)', function (obj) {
+        var formData = obj.field;
+        if (!formData.catalog_provider) {
+          layer.msg('请选择供应商', { icon: 2 });
+          return false;
+        }
+        var saveData = {
+          provider_id: formData.catalog_provider,
+          key: '',  // 弹窗输入
+          base_url: window._catalogBaseUrl || '',
+          default_model: formData.catalog_model || '',
+          is_default: false
+        };
+
+        // 弹出输入API Key的窗口
+        layer.prompt({
+          formType: 1,
+          title: '输入 <b>' + formData.catalog_provider + '</b> 的 API Key',
+          area: ['400px', '120px']
+        }, function (value, index, elem) {
+          saveData.key = value;
+          $.ajax({
+            url: '{:url("admin/System/saveAiChannel")}',
+            type: 'post',
+            data: saveData,
+            dataType: 'json',
+            success: function (res) {
+              layer.close(index);
+              if (res.code === 0) {
+                layer.msg(res.msg, { icon: 1 });
+                setTimeout(function () { location.reload(); }, 500);
+              } else {
+                layer.msg(res.msg, { icon: 2 });
+              }
+            }
+          });
+        });
+
+        return false;
+      });
+
+      // 保存默认设置
+      form.on('submit(save-defaults)', function (obj) {
+        $.ajax({
+          url: '{:url("admin/System/update")}',
+          type: 'post',
+          data: obj.field,
+          dataType: 'json',
+          success: function (res) {
+            if (res.code === 0) {
+              layer.msg('保存成功', { icon: 1 });
+            } else {
+              layer.msg(res.msg || '保存失败', { icon: 2 });
+            }
+          },
+          error: function () {
+            layer.msg('网络错误', { icon: 2 });
+          }
+        });
+        return false;
+      });
+
+      // 初始加载
+      loadChannels();
+    });
+  </script>
+</body>
+
+</html>