[feat]:[20251208][新增前端代码工程，vue-ui]
This commit is contained in:
kale
parent
af67f1bbe3
commit
3f2a5226c8
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