Merge pull request 'yinzy_dev' (#35) from yinzy_dev into main
Reviewed-on: #35
This commit is contained in:
commit
bcdf49f72e
49
.drone.yml
49
.drone.yml
@ -17,6 +17,8 @@ workspace:
|
|||||||
volumes:
|
volumes:
|
||||||
- name: maven-cache
|
- name: maven-cache
|
||||||
path: /localcache/maven/repository
|
path: /localcache/maven/repository
|
||||||
|
- name: node-cache
|
||||||
|
path: /localcache/node_modules
|
||||||
|
|
||||||
clone:
|
clone:
|
||||||
depth: 0
|
depth: 0
|
||||||
@ -53,6 +55,19 @@ steps:
|
|||||||
- mvn -s ~/.m2/settings.xml clean test package
|
- mvn -s ~/.m2/settings.xml clean test package
|
||||||
- ls -lah target/*.jar || (echo "JAR file not found!" && exit 1)
|
- ls -lah target/*.jar || (echo "JAR file not found!" && exit 1)
|
||||||
|
|
||||||
|
- name: frontend-build
|
||||||
|
image: registry.cn-beijing.aliyuncs.com/yinzy/node:20.11-alpine3.19
|
||||||
|
pull: false
|
||||||
|
volumes:
|
||||||
|
- name: node-cache
|
||||||
|
path: /localcache/node_modules
|
||||||
|
commands:
|
||||||
|
- cd vue-ui
|
||||||
|
- npm config set cache /localcache/node_modules/.npm
|
||||||
|
- npm ci --registry=https://registry.npmmirror.com
|
||||||
|
- npm run build
|
||||||
|
- ls -lah dist
|
||||||
|
|
||||||
# 如需其他检查步骤，可在这里继续追加
|
# 如需其他检查步骤，可在这里继续追加
|
||||||
- name: summary
|
- name: summary
|
||||||
image: alpine
|
image: alpine
|
||||||
@ -86,6 +101,8 @@ volumes:
|
|||||||
path: /var/run/docker.sock
|
path: /var/run/docker.sock
|
||||||
- name: jar-cache
|
- name: jar-cache
|
||||||
path: /localcache
|
path: /localcache
|
||||||
|
- name: node-cache
|
||||||
|
path: /localcache/node_modules
|
||||||
|
|
||||||
clone:
|
clone:
|
||||||
depth: 0
|
depth: 0
|
||||||
@ -93,6 +110,23 @@ clone:
|
|||||||
pull: false
|
pull: false
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
|
- name: frontend-build
|
||||||
|
image: node:20
|
||||||
|
pull: false
|
||||||
|
volumes:
|
||||||
|
- name: node-cache
|
||||||
|
path: /localcache/node_modules
|
||||||
|
- name: jar-cache # 复用已有 /localcache，用于暂存 dist.zip
|
||||||
|
path: /localcache
|
||||||
|
commands:
|
||||||
|
- cd vue-ui
|
||||||
|
- npm config set cache /localcache/node_modules/.npm
|
||||||
|
- npm ci --registry=https://registry.npmmirror.com
|
||||||
|
- npm run build
|
||||||
|
- cd dist && zip -r ../dist.zip . && cd ..
|
||||||
|
- mkdir -p /localcache/${DRONE_REPO_NAME}
|
||||||
|
- cp dist.zip /localcache/${DRONE_REPO_NAME}/dist-${DRONE_TAG}.zip
|
||||||
|
|
||||||
- name: java-build
|
- name: java-build
|
||||||
image: registry.cn-beijing.aliyuncs.com/yinzy/maven:3.9-eclipse-temurin-8
|
image: registry.cn-beijing.aliyuncs.com/yinzy/maven:3.9-eclipse-temurin-8
|
||||||
pull: false
|
pull: false
|
||||||
@ -134,6 +168,20 @@ steps:
|
|||||||
echo "⚠️ No JAR file found to backup"
|
echo "⚠️ No JAR file found to backup"
|
||||||
fi
|
fi
|
||||||
|
|
||||||
|
- name: frontend_docker_build
|
||||||
|
image: docker:latest
|
||||||
|
pull: false
|
||||||
|
volumes:
|
||||||
|
- name: docker_sock
|
||||||
|
path: /var/run/docker.sock
|
||||||
|
commands:
|
||||||
|
- docker info
|
||||||
|
- docker build -t ${DRONE_REPO_NAME}-frontend:latest -f vue-ui/Dockerfile vue-ui
|
||||||
|
- docker tag ${DRONE_REPO_NAME}-frontend:latest ${DRONE_REPO_NAME}-frontend:${DRONE_COMMIT_SHA:0:8}
|
||||||
|
- docker images ${DRONE_REPO_NAME}-frontend
|
||||||
|
depends_on:
|
||||||
|
- frontend-build
|
||||||
|
|
||||||
- name: docker_build
|
- name: docker_build
|
||||||
image: docker:latest
|
image: docker:latest
|
||||||
pull: false
|
pull: false
|
||||||
@ -169,6 +217,7 @@ steps:
|
|||||||
from_secret: gitea_base_url
|
from_secret: gitea_base_url
|
||||||
files:
|
files:
|
||||||
- /localcache/${DRONE_REPO_NAME}/*.jar
|
- /localcache/${DRONE_REPO_NAME}/*.jar
|
||||||
|
- /localcache/${DRONE_REPO_NAME}/dist-${DRONE_TAG}.zip
|
||||||
title: Release ${DRONE_TAG}
|
title: Release ${DRONE_TAG}
|
||||||
note: |
|
note: |
|
||||||
Release ${DRONE_TAG}
|
Release ${DRONE_TAG}
|
||||||
|
|||||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -26,3 +26,6 @@ replay_pid*
|
|||||||
|
|
||||||
/drone-test.iml
|
/drone-test.iml
|
||||||
/.idea/
|
/.idea/
|
||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
/.vscode/
|
||||||
|
|||||||
28
vue-ui/Dockerfile
Normal file
28
vue-ui/Dockerfile
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
# 前端构建阶段
|
||||||
|
FROM registry.cn-beijing.aliyuncs.com/yinzy/node:20.11-alpine3.19 AS builder
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# 先复制依赖声明，利用缓存
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
# 使用国内镜像源并安装依赖
|
||||||
|
RUN npm config set registry https://registry.npmmirror.com \
|
||||||
|
&& npm ci --no-audit --no-fund
|
||||||
|
|
||||||
|
# 复制源码并构建
|
||||||
|
COPY . .
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# 运行阶段，使用独立 nginx 镜像
|
||||||
|
FROM registry.cn-beijing.aliyuncs.com/yinzy/nginx:latest AS runtime
|
||||||
|
|
||||||
|
# 清理默认页面
|
||||||
|
WORKDIR /usr/share/nginx/html
|
||||||
|
RUN rm -rf ./*
|
||||||
|
|
||||||
|
# 拷贝构建产物
|
||||||
|
COPY --from=builder /app/dist .
|
||||||
|
|
||||||
|
EXPOSE 80
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
12
vue-ui/index.html
Normal file
12
vue-ui/index.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vue UI Demo</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1162
vue-ui/package-lock.json
generated
Normal file
1162
vue-ui/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
18
vue-ui/package.json
Normal file
18
vue-ui/package.json
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"name": "vue-ui",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.4.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.0.0",
|
||||||
|
"vite": "^5.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
89
vue-ui/src/App.vue
Normal file
89
vue-ui/src/App.vue
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
<template>
|
||||||
|
<main class="page">
|
||||||
|
<header class="hero">
|
||||||
|
<p class="eyebrow">Vue 3 + Vite</p>
|
||||||
|
<h1>快速上手示例</h1>
|
||||||
|
<p class="sub">
|
||||||
|
左边计数器，右边简单待办。直接改这里即可开始玩。
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="grid">
|
||||||
|
<article class="card">
|
||||||
|
<header class="card__title">
|
||||||
|
<h2>计数器</h2>
|
||||||
|
<span class="tag">可组合</span>
|
||||||
|
</header>
|
||||||
|
<p class="value">{{ count }}</p>
|
||||||
|
<div class="actions">
|
||||||
|
<button class="ghost" @click="change(-1)">-1</button>
|
||||||
|
<button class="primary" @click="change(1)">+1</button>
|
||||||
|
<button class="ghost" @click="reset">重置</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="card">
|
||||||
|
<header class="card__title">
|
||||||
|
<h2>待办清单</h2>
|
||||||
|
<span class="tag success">示例</span>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<form class="todo__form" @submit.prevent="addTodo">
|
||||||
|
<input
|
||||||
|
v-model="draft"
|
||||||
|
type="text"
|
||||||
|
placeholder="输入要做的事..."
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
<button class="primary" type="submit">添加</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<ul class="todo__list" v-if="todos.length">
|
||||||
|
<li v-for="item in todos" :key="item.id">
|
||||||
|
<label>
|
||||||
|
<input v-model="item.done" type="checkbox" />
|
||||||
|
<span :class="{ done: item.done }">{{ item.text }}</span>
|
||||||
|
</label>
|
||||||
|
<button class="ghost small" type="button" @click="removeTodo(item.id)">
|
||||||
|
删除
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p v-else class="empty">暂无任务，添加一个吧！</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const count = ref(1);
|
||||||
|
const change = (delta) => {
|
||||||
|
count.value += delta;
|
||||||
|
};
|
||||||
|
const reset = () => {
|
||||||
|
count.value = 1;
|
||||||
|
};
|
||||||
|
|
||||||
|
const draft = ref('');
|
||||||
|
const todos = ref([
|
||||||
|
{ id: 1, text: '试着勾选或删除我', done: false },
|
||||||
|
{ id: 2, text: '在右上角编辑样式', done: true },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const addTodo = () => {
|
||||||
|
const text = draft.value.trim();
|
||||||
|
if (!text) return;
|
||||||
|
todos.value.push({
|
||||||
|
id: Date.now(),
|
||||||
|
text,
|
||||||
|
done: false,
|
||||||
|
});
|
||||||
|
draft.value = '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeTodo = (id) => {
|
||||||
|
todos.value = todos.value.filter((item) => item.id !== id);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
196
vue-ui/src/assets/main.css
Normal file
196
vue-ui/src/assets/main.css
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
:root {
|
||||||
|
font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system,
|
||||||
|
BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
|
color: #0f172a;
|
||||||
|
background-color: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: radial-gradient(circle at top right, #e0f2fe, #f8fafc 45%),
|
||||||
|
radial-gradient(circle at 20% 20%, #f1f5f9, #f8fafc 45%);
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
max-width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 48px 20px 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background-color: #e0f2fe;
|
||||||
|
color: #0284c7;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 12px 0 8px;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub {
|
||||||
|
margin: 0;
|
||||||
|
color: #475569;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: #e2e8f0;
|
||||||
|
color: #475569;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag.success {
|
||||||
|
background-color: #dcfce7;
|
||||||
|
color: #16a34a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 800;
|
||||||
|
margin: 0 0 16px;
|
||||||
|
color: #0f172a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.1s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:active {
|
||||||
|
transform: translateY(1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
button.primary {
|
||||||
|
background: linear-gradient(135deg, #22c55e, #16a34a);
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 8px 20px rgba(22, 163, 74, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
button.ghost {
|
||||||
|
background: #f1f5f9;
|
||||||
|
color: #0f172a;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.small {
|
||||||
|
padding: 6px 10px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo__form {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo__form input {
|
||||||
|
padding: 12px 14px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo__list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo__list li {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo__list label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
color: #0f172a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.todo__list input[type='checkbox'] {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.done {
|
||||||
|
text-decoration: line-through;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
margin: 0;
|
||||||
|
color: #94a3b8;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.page {
|
||||||
|
padding: 32px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
5
vue-ui/src/main.js
Normal file
5
vue-ui/src/main.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from 'vue';
|
||||||
|
import App from './App.vue';
|
||||||
|
import './assets/main.css';
|
||||||
|
|
||||||
|
createApp(App).mount('#app');
|
||||||
10
vue-ui/vite.config.js
Normal file
10
vue-ui/vite.config.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import vue from '@vitejs/plugin-vue';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
server: {
|
||||||
|
port: 5173,
|
||||||
|
open: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user