refactor(component): 重构组件模板与样式结构

将公共样式提取至public.css，优化组件模板结构
添加图片资源与组件模板同步脚本
调整组件样式与布局，统一风格

js/save.js

@@ -0,0 +1,71 @@
+const fs = require("fs");
+const path = require("path");
+
+// 配置需要监听的文件列表：键为 txt 文件路径，值为对应的 js 文件路径
+const watchList = {
+    // 监听 item-bottom.txt，同步到 item-bottom.js
+    "../component/item-bottom/item-bottom.txt": "../component/item-bottom/item-bottom.js",
+    // 监听 item-forum.txt，同步到 item-forum.js
+    "../component/item-forum/item-forum.txt": "../component/item-forum/item-forum.js",
+    // 监听 item-head.txt，同步到 item-head.js
+    "../component/item-head/item-head.txt": "../component/item-head/item-head.js",
+    // 监听 item-offer.txt，同步到 item-offer.js
+    "../component/item-offer/item-offer.txt": "../component/item-offer/item-offer.js",
+    // 监听 item-summary.txt，同步到 item-summary.js
+    "../component/item-summary/item-summary.txt": "../component/item-summary/item-summary.js",
+    // 监听 item-vote.txt，同步到 item-vote.js
+    "../component/item-vote/item-vote.txt": "../component/item-vote/item-vote.js",
+    // 可添加更多文件（格式：'txt路径': 'js路径'）
+    // './component/other/other.txt': './component/other/other.js',
+};
+
+// 检查所有文件是否存在
+Object.entries(watchList).forEach(([txtPath, jsPath]) => {
+    const resolvedTxt = path.resolve(__dirname, txtPath);
+    const resolvedJs = path.resolve(__dirname, jsPath);
+    if (!fs.existsSync(resolvedTxt)) {
+        console.error(`错误：文件不存在 - ${resolvedTxt}`);
+        process.exit(1);
+    }
+    if (!fs.existsSync(resolvedJs)) {
+        console.error(`错误：文件不存在 - ${resolvedJs}`);
+        process.exit(1);
+    }
+});
+
+// 同步逻辑：将 txtContent 替换到对应 js 的 template 中
+function syncContent(txtPath, jsPath) {
+    try {
+        const txtContent = fs.readFileSync(txtPath, "utf8")?.replace(/[\n\r]/g, '');
+        let jsContent = fs.readFileSync(jsPath, "utf8");
+
+        // 匹配 template: `...` 结构，替换反引号内的内容
+        const templateRegex = /(template:\s*)(`[^`]*`)/;
+        if (templateRegex.test(jsContent)) {
+            jsContent = jsContent.replace(templateRegex, `$1\`${txtContent}\``);
+            fs.writeFileSync(jsPath, jsContent, "utf8");
+            console.log(`✅ 同步成功：${path.basename(txtPath)} → ${path.basename(jsPath)}`);
+        } else {
+            console.error(`❌ 格式错误：${path.basename(jsPath)} 中未找到 template: \`...\``);
+        }
+    } catch (err) {
+        console.error(`❌ 同步失败：${err.message}`);
+    }
+}
+
+// 为每个文件添加监听
+Object.entries(watchList).forEach(([txtPath, jsPath]) => {
+    const resolvedTxt = path.resolve(__dirname, txtPath);
+    const resolvedJs = path.resolve(__dirname, jsPath);
+
+    fs.watch(resolvedTxt, (eventType) => {
+        if (eventType === "change") {
+            console.log(`\n检测到 ${path.basename(resolvedTxt)} 保存，开始同步...`);
+            syncContent(resolvedTxt, resolvedJs);
+        }
+    });
+
+    console.log(`开始监听：${resolvedTxt}`);
+});
+
+console.log("\n服务启动成功，所有文件修改后将自动同步 🚀");

js/sectionIndex.js

@@ -1,5 +1,5 @@
 const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue;
-import { MyComponent } from "../component/item-forum/item-forum.js";
+import { itemForum } from "../component/item-forum/item-forum.js";
 
 const appSectionIndex = createApp({
     setup() {
@@ -8,5 +8,5 @@ const appSectionIndex = createApp({
         return { signInAlreadyState };
     },
 });
-appSectionIndex.component("MyComponent", MyComponent);
+appSectionIndex.component("item-forum", itemForum);
 appSectionIndex.mount("#sectionIndex");