Powerful-517/yys-editor
3
0
Fork 0
mirror of https://github.com/Powerful-517/yys-editor.git synced 2025-06-12 11:28:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: init

Browse Source
This commit is contained in:
zhangqi
2023-12-15 22:06:47 +08:00
commit c62f88622d
21 changed files with 3337 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@

35
README.md Normal file
View File

@ -0,0 +1,35 @@
# vue-project
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```

13
index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

8
jsconfig.json Normal file
View File

@ -0,0 +1,8 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}

2827
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

26
package.json Normal file
View File

@ -0,0 +1,26 @@
{
"name": "vue-project",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
"dependencies": {
"element-plus": "^2.4.3",
"vue": "^3.3.10"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.3",
"@vitejs/plugin-vue": "^4.5.1",
"@vue/eslint-config-prettier": "^8.0.0",
"eslint": "^8.49.0",
"eslint-plugin-vue": "^9.17.0",
"prettier": "^3.0.3",
"vite": "^5.0.5"
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
src/.DS_Store vendored Normal file
View File

Binary file not shown.

9
src/App.vue Normal file
View File

@ -0,0 +1,9 @@
<script setup>
import Yys from './components/Yys.vue'
</script>
<template>
<main>
<Yys />
</main>
</template>

86
src/assets/base.css Normal file
View File

@ -0,0 +1,86 @@
/* color palette from <https://github.com/vuejs/theme> */
:root {
--vt-c-white: #ffffff;
--vt-c-white-soft: #f8f8f8;
--vt-c-white-mute: #f2f2f2;
--vt-c-black: #181818;
--vt-c-black-soft: #222222;
--vt-c-black-mute: #282828;
--vt-c-indigo: #2c3e50;
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
--vt-c-text-light-1: var(--vt-c-indigo);
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
}
/* semantic color variables for this project */
:root {
--color-background: var(--vt-c-white);
--color-background-soft: var(--vt-c-white-soft);
--color-background-mute: var(--vt-c-white-mute);
--color-border: var(--vt-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);
--color-heading: var(--vt-c-text-light-1);
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: var(--vt-c-black);
--color-background-soft: var(--vt-c-black-soft);
--color-background-mute: var(--vt-c-black-mute);
--color-border: var(--vt-c-divider-dark-2);
--color-border-hover: var(--vt-c-divider-dark-1);
--color-heading: var(--vt-c-text-dark-1);
--color-text: var(--vt-c-text-dark-2);
}
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
font-weight: normal;
}
body {
min-height: 100vh;
color: var(--color-text);
background: var(--color-background);
transition:
color 0.5s,
background-color 0.5s;
line-height: 1.6;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Roboto,
Oxygen,
Ubuntu,
Cantarell,
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
sans-serif;
font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

1
src/assets/logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 276 B

35
src/assets/main.css Normal file
View File

@ -0,0 +1,35 @@
@import './base.css';
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
padding: 3px;
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
}
@media (min-width: 1024px) {
body {
display: flex;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}

BIN
src/components/.DS_Store vendored Normal file
View File

Binary file not shown.

80
src/components/HeroProperty.vue Normal file
View File

@ -0,0 +1,80 @@
<template>
<el-dialog
v-model="show"
:visable.sync="show"
title="配置属性"
@cancel="cancel"
>
<span>当前选择侍神：{{current.name}}</span>
<el-form :model="form" label-width="120px">
<el-form-item label="速度">
<el-input v-model="form.speed" />
</el-form-item>
<el-form-item label="天赋">
<el-select v-model="form.region" placeholder="please select your zone">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="Activity form">
<el-input v-model="form.desc" type="textarea" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="confirm">Confirm</el-button>
<el-button @click="cancel">Cancel</el-button>
</el-form-item>
</el-form>
</el-dialog>
</template>
<script>
import propertyData from "../data/property.json";
import { ref } from "vue";
export default {
props: {
currentHero: {
type: Object,
default: {},
},
showProperty: {
type: Boolean,
},
},
data() {
return {
propertyData: propertyData,
form: {
speed: ""
},
current: {},
show: false,
};
},
watch: {
showProperty(newVal, oldVal) {
console.log("=======>>>> ", newVal, oldVal);
this.show = newVal;
},
currentHero(newVal, oldVal) {
console.log("===item====>>>> ", newVal, oldVal);
if (newVal.property != undefined) {
this.form = newVal.property;
}
this.current = newVal;
},
},
methods: {
cancel() {
console.log("cancel====");
this.$emit("closeProperty");
},
confirm() {
console.log("confirm====");
this.$emit("updateProperty", this.form);
},
},
};
</script>

66
src/components/HeroSelect.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<el-dialog v-model="show" :visable.sync="show" title="请选择侍神" @cancel="cancel">
<span>当前选择：{{current.name}}</span>
<li v-for="(item, index) in heroData" :key="index" @click.stop="select(item)">
<div>
<span>{{ item.name }}</span>
</div>
</li>
<template #footer>
<span class="dialog-footer">
<el-button @click.stop="cancel">Cancel</el-button>
<el-button type="primary" @click.stop="confirm"> Confirm </el-button>
</span>
</template>
</el-dialog>
</template>
<script>
import heroData from "../data/hero.json";
import { ref } from "vue";
export default {
props: {
currentHero: {
type: Object,
default: {},
},
showSelectHero: {
type: Boolean,
},
},
data() {
return {
heroData: heroData,
selected: null,
current: {},
show: false,
};
},
watch: {
showSelectHero(newVal, oldVal) {
console.log("=======>>>> ", newVal, oldVal);
this.show = newVal;
},
currentHero(newVal, oldVal) {
console.log("===item====>>>> ", newVal, oldVal);
this.current = newVal;
},
},
methods: {
select(item) {
this.current = item;
},
cancel() {
console.log("cancel====");
this.$emit("closeSelectHero");
},
confirm() {
console.log("confirm====");
this.$emit("updateHero", this.current);
this.current = {};
},
},
};
</script>

99
src/components/Yys.vue Normal file
View File

@ -0,0 +1,99 @@
<template>
<HeroSelect
:showSelectHero="showSelectHero"
:currentHero="currentHero"
@closeSelectHero="closeSelectHero"
@updateHero="updateHero"
/>
<HeroProperty
:showProperty="showProperty"
:currentHero="currentHero"
@closeProperty="closeProperty"
@updateProperty="updateProperty"
/>
<el-row>
<el-col v-for="(item, index) in items" :key="index" :span="8">
<el-card :body-style="{ padding: '0px' }">
<img :src="item.avatar || '111'" class="image" @click="editHero(index, item)" />
<div style="padding: 14px">
<span>{{ item.name || "" }}</span>
<div v-if="item.properties">
<span>已配置属性：</span>
<div v-for="(value, key, index) in item.properties">
<span>{{key}}</span> : <span>{{value || '-'}}</span>
</div>
</div>
<div class="bottom">
<el-button @click="editProperties(index, item)">配置属性</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<div style="margin: 20px">
<span>配置结果</span>
</div>
</template>
<script>
import heroData from "../data/hero.json";
import { ref, reactive, toRefs } from "vue";
import HeroSelect from "./HeroSelect.vue";
import HeroProperty from "./HeroProperty.vue";
export default {
data() {
return {
heroData: heroData,
showSelectHero: false,
showProperty: false,
items: [{}, {}, {}],
index: 0,
currentHero: {},
};
},
components: {
HeroSelect,
HeroProperty,
},
methods: {
closeSelectHero() {
console.log("close select ====");
this.showSelectHero = false;
this.currentHero = {};
},
editHero(index, item) {
console.log("==== edit hero ===", index, item);
this.currentHero = item;
this.showSelectHero = true;
this.index = index;
},
updateHero(hero) {
console.log("parent====> ", hero);
this.showSelectHero = false;
this.items[this.index].name = hero.name;
this.currentHero = {};
},
editProperties(index, item) {
console.log("add properties", index, item);
this.showProperty = true;
this.currentHero = item;
},
closeProperty() {
console.log("close property ===");
this.showProperty = false;
this.currentHero = {};
},
updateProperty(property) {
console.log("parent property====> ", property);
this.showProperty = false;
this.currentHero = {};
this.items[this.index].properties = property;
},
},
};
</script>

22
src/data/hero.json Normal file
View File

@ -0,0 +1,22 @@
[
{
"name": "妖刀姬",
"avatar":"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
},
{
"name": "大狗",
"avatar":"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
},
{
"name": "青灯",
"avatar":"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
},
{
"name": "打火机",
"avatar":"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
},
{
"name": "和尚",
"avatar":"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
}
]

3
src/data/property.json Normal file
View File

@ -0,0 +1,3 @@
{
"speed":[]
}

10
src/main.js Normal file
View File

@ -0,0 +1,10 @@
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

16
vite.config.js Normal file
View File

@ -0,0 +1,16 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})