Skip to content

Commit 9aa41f0

Browse files
wxh06wxh06
committed
feat(admin): Badge edit demo
1 parent 25354d1 commit 9aa41f0

File tree

8 files changed

+1033
-27
lines changed

8 files changed

+1033
-27
lines changed

‎admin/env.d.ts

+55
Original file line numberDiff line numberDiff line change
@@ -1 +1,56 @@
11
/// <reference types="vite/client" />
2+
3+
declare module "xncolorpicker/src/xncolorpicker" {
4+
declare namespace XNColorPicker {
5+
interface Single {
6+
color: {
7+
hex: string;
8+
hsla: string;
9+
hslav: [string, string, string, string];
10+
rgba: string;
11+
rgbav: [string, string, string, string];
12+
};
13+
colorType: "single";
14+
}
15+
interface Gradient<colorType, angleType> {
16+
color: {
17+
arry: {
18+
angle: angleType;
19+
colors: { color: string; per: number }[];
20+
type: colorType;
21+
};
22+
str: string;
23+
};
24+
colorType: colorType;
25+
}
26+
type Color =
27+
| Single
28+
| Gradient<"linear-gradient", string>
29+
| Gradient<"radial-gradient", number>;
30+
}
31+
class XNColorPicker {
32+
constructor(options: {
33+
color?: string;
34+
selector: string;
35+
showprecolor?: boolean;
36+
prevcolors?: string[] | null;
37+
showhistorycolor?: boolean;
38+
historycolornum?: number;
39+
format?: "rgba" | "hex" | "hsla";
40+
showPalette?: boolean;
41+
show?: boolean;
42+
lang?: "en" | "cn";
43+
colorTypeOption?: string;
44+
canMove?: boolean;
45+
alwaysShow?: boolean;
46+
autoConfirm?: boolean;
47+
hideInputer?: boolean;
48+
hideCancelButton?: boolean;
49+
hideConfirmButton?: boolean;
50+
onCancel?: (color: XNColorPicker.Color) => void;
51+
onChange?: (color: XNColorPicker.Color) => void;
52+
onConfirm?: (color: XNColorPicker.Color) => void;
53+
});
54+
}
55+
export default XNColorPicker;
56+
}

‎admin/package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,12 @@
1111
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
1212
},
1313
"dependencies": {
14+
"@popperjs/core": "^2.11.5",
15+
"bootstrap": "5.2.0-beta1",
1416
"pinia": "^2.0.14",
1517
"vue": "^3.2.37",
16-
"vue-router": "^4.0.16"
18+
"vue-router": "^4.0.16",
19+
"xncolorpicker": "github:fanaiai/xncolorpicker"
1720
},
1821
"devDependencies": {
1922
"@rushstack/eslint-patch": "^1.1.3",
@@ -29,6 +32,7 @@
2932
"jsdom": "^19.0.0",
3033
"npm-run-all": "^4.1.5",
3134
"prettier": "^2.6.2",
35+
"sass": "^1.52.3",
3236
"typescript": "~4.7.3",
3337
"vite": "^2.9.12",
3438
"vitest": "^0.13.1",

‎admin/src/App.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@ import HelloWorld from "@/components/HelloWorld.vue";
1717
<HelloWorld msg="You did it!" />
1818

1919
<nav>
20-
<RouterLink to="/">Home</RouterLink>
21-
<RouterLink to="/about">About</RouterLink>
20+
<RouterLink :to="{ name: 'home' }">Home</RouterLink>
21+
<RouterLink :to="{ name: 'about' }">About</RouterLink>
22+
<RouterLink :to="{ name: 'badge' }">Badge</RouterLink>
2223
</nav>
2324
</div>
2425
</header>

‎admin/src/router/index.ts

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { createRouter, createWebHistory } from "vue-router";
22
import HomeView from "../views/HomeView.vue";
3+
import BadgeView from "@/views/BadgeView.vue";
34

45
const router = createRouter({
56
history: createWebHistory(import.meta.env.BASE_URL),
@@ -17,6 +18,11 @@ const router = createRouter({
1718
// which is lazy-loaded when the route is visited.
1819
component: () => import("../views/AboutView.vue"),
1920
},
21+
{
22+
path: "/badge",
23+
name: "badge",
24+
component: BadgeView,
25+
},
2026
],
2127
});
2228

‎admin/src/views/BadgeView.vue

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<script lang="ts">
2+
import { defineComponent } from "vue";
3+
import XNColorPicker from "xncolorpicker/src/xncolorpicker";
4+
5+
export default defineComponent({
6+
data: () => ({
7+
text: "",
8+
fontColor: "#563d7c",
9+
backgroundColor: "mediumturquoise",
10+
}),
11+
methods: {
12+
getColor: (color: XNColorPicker.Color) =>
13+
color.colorType === "single" ? color.color.hex : color.color.str,
14+
setBackgroundColor(color: XNColorPicker.Color) {
15+
this.backgroundColor = this.getColor(color);
16+
},
17+
},
18+
mounted() {
19+
new XNColorPicker({
20+
color: this.backgroundColor,
21+
selector: "#colorpicker",
22+
onCancel: this.setBackgroundColor,
23+
onChange: this.setBackgroundColor,
24+
onConfirm: this.setBackgroundColor,
25+
});
26+
},
27+
});
28+
</script>
29+
30+
<template>
31+
<form class="mt-3">
32+
<div class="mb-3">
33+
<label for="badgeText" class="form-label">Text</label>
34+
<input
35+
type="text"
36+
class="form-control w-auto"
37+
id="badgeText"
38+
placeholder="badge"
39+
aria-describedby="badgeTextHelpInline"
40+
:value="text"
41+
/>
42+
<span id="badgeTextHelpInline" class="form-text">
43+
Must be 0-16 characters long.
44+
</span>
45+
</div>
46+
<div class="row">
47+
<div class="col-6">
48+
<label for="badgeFontColor" class="form-label">Font color</label>
49+
<input
50+
type="color"
51+
class="form-control form-control-color"
52+
id="badgeFontColor"
53+
title="Choose your color"
54+
:value="fontColor"
55+
/>
56+
</div>
57+
<div class="col-6">
58+
<label class="form-label">Background color</label>
59+
<div id="colorpicker" class="form-control form-control-color"></div>
60+
</div>
61+
</div>
62+
</form>
63+
</template>
64+
65+
<style lang="scss" scoped>
66+
@import "bootstrap/scss/functions";
67+
68+
@import "bootstrap/scss/variables";
69+
70+
@import "bootstrap/scss/maps";
71+
@import "bootstrap/scss/mixins";
72+
@import "bootstrap/scss/root";
73+
74+
@import "bootstrap/scss/utilities";
75+
@import "bootstrap/scss/reboot";
76+
@import "bootstrap/scss/grid";
77+
@import "bootstrap/scss/forms";
78+
79+
@import "bootstrap/scss/utilities/api";
80+
</style>
81+
82+
<style scoped>
83+
#colorpicker {
84+
height: 3rem;
85+
}
86+
</style>
87+
88+
<style>
89+
.fcolorpicker-curbox {
90+
height: 100%;
91+
width: 100%;
92+
}
93+
</style>

‎ecosystem.config.js renamed to ‎ecosystem.config.cjs

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ module.exports = {
33
{
44
name: "exlg",
55
script: "./dist/index.js",
6-
watch: true,
6+
watch: ["dist"],
77
env: {
8-
PORT: 3000,
8+
PORT: 3432,
99
NODE_ENV: "development",
1010
},
1111
env_production: {

‎package.json

+7-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,13 @@
66
"repository": "https://github.com/extend-luogu/exlg-backend.git",
77
"author": "汪心禾 <[email protected]>",
88
"license": "MIT",
9-
"private": false,
9+
"private": true,
1010
"scripts": {
11+
"admin:dev": "cd admin && npm-run-all dev",
1112
"build": "tsc",
13+
"dev": "run-p dev:watch admin:dev",
14+
"dev:start": "pm2-dev ecosystem.config.cjs",
15+
"dev:watch": "npm-run-all build -p 'build --watch --preserveWatchOutput' dev:start",
1216
"lint": "eslint --ext js,mjs,cjs,ts,vue .",
1317
"prepare": "husky install",
1418
"start": "node .",
@@ -36,6 +40,8 @@
3640
"husky": "^8.0.1",
3741
"jest": "^27.5.1",
3842
"lint-staged": "^13.0.1",
43+
"npm-run-all": "^4.1.5",
44+
"pm2": "^5.2.0",
3945
"prettier": "^2.6.2",
4046
"supertest": "^6.2.3",
4147
"ts-jest": "^27.1.5",

0 commit comments

Comments
 (0)