ci: docker尝试

.github/workflows/docker.yml

@@ -0,0 +1,25 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm test

Dockerfile

@@ -0,0 +1,37 @@
+# 使用 Node.js 官方镜像作为构建环境
+FROM node:alpine as builder
+
+# 设置工作目录
+WORKDIR /app
+
+# 复制 package.json 和 package-lock.json (或 yarn.lock)
+COPY package*.json ./
+# 如果使用yarn，并有yarn.lock文件，也可以复制
+# COPY package.json yarn.lock ./
+
+# 安装项目依赖
+RUN npm install
+# 如果使用 yarn，可以用 RUN yarn install 代替
+
+# 复制项目文件到工作目录
+COPY . .
+
+# 构建应用
+RUN npm run build
+
+# 使用 Node.js 镜像运行应用
+FROM node:alpine
+
+# 设置工作目录
+WORKDIR /app
+
+# 只复制构建产出和package.json到新的镜像中
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+
+# 暴露端口
+EXPOSE 3000
+
+# 启动 Next.js 应用
+CMD ["npm", "start"]

app/globals.css

@@ -110,6 +110,14 @@
   /* 可以添加其他样式来美化组件，如背景色、阴影等 */
 }
 
+#editor {
+  /* width: calc(100vw - 20px); */
+  min-height: 250px;
+  max-height: 400px;
+  overflow-y: auto;
+  border: 1px solid #ccc;
+}
+
 /* 适配手机样式 */
 @media (max-width: 768px) {
   #editor {

components/QuillEditor.tsx

@@ -361,7 +361,7 @@ const QEditor = () => {
   }
 
   return (
-    <div>
+    <div className="flex   flex-col ">
       <div id="Qtoolbar" className="space-y-2 flex justify-between">
         <textarea
           value={userInput}
@@ -381,6 +381,7 @@ const QEditor = () => {
         >
           Paper2AI
         </button>
+        {/* 论文网站 */}
         <select
           value={selectedSource}
           onChange={(e) => setSelectedSource(e.target.value)}
@@ -389,8 +390,8 @@ const QEditor = () => {
           <option value="arxiv">arxiv</option>
           <option value="semanticScholar">semantic scholar</option>
           <option value="pubmed">pubmed</option>
-          {/* 其他来源网站 */}
         </select>
+        {/* AI模型 */}
         <select
           value={selectedModel}
           onChange={(e) => setSelectedModel(e.target.value)}
@@ -399,7 +400,6 @@ const QEditor = () => {
           <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
           <option value="gpt-4">gpt-4</option>
           <option value="deepseek-chat">deepseek-chat</option>
-          {/* 其他来源网站 */}
         </select>
         <button
           onClick={() => formatTextInEditor(quill)} // 假设 updateIndex 是处理更新操作的函数
@@ -409,17 +409,7 @@ const QEditor = () => {
         </button>
       </div>
       <div>
-        <div
-          id="editor"
-          style={{
-            width: "calc(100vw - 20px)", // 屏幕宽度减去 100px
-            minHeight: "250px", // 注意驼峰命名法
-            maxHeight: "500px",
-            overflowY: "auto", // overflow-y -> overflowY
-            border: "1px solid #ccc",
-            padding: "10px",
-          }}
-        ></div>
+        <div id="editor"></div>
         <ReferenceList editor={quill} />
         <ExportDocx editor={quill} />
       </div>

components/Settings.tsx

@@ -53,7 +53,11 @@ const Settings = () => {
       <br />
       <div className="flex justify-end mt-4 mr-4">
         <Link href="/" aria-label="Settings">
-          <FontAwesomeIcon icon={faArrowLeft} size="2x" />
+          <FontAwesomeIcon
+            icon={faArrowLeft}
+            size="2x"
+            className="icon-hover"
+          />
         </Link>
       </div>
       {/* 配置选择器 */}