-
46 |
-
47 |
48 | {{item.user}} 49 | {{new Date(item.dateTime)}} 50 |
51 |52 | 消息：{{item.message}} 53 |
54 |
55 |
7 |
8 |
10 |
11 |
12 |
26 |
--------------------------------------------------------------------------------
/Vue3-WebSocket-demo/server/pnpm-lock.yaml:
--------------------------------------------------------------------------------
1 | lockfileVersion: 5.4
2 |
3 | specifiers:
4 | ws: ^8.11.0
5 |
6 | dependencies:
7 | ws: 8.11.0
8 |
9 | packages:
10 |
11 | /ws/8.11.0:
12 | resolution: {integrity: sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==}
13 | engines: {node: '>=10.0.0'}
14 | peerDependencies:
15 | bufferutil: ^4.0.1
16 | utf-8-validate: ^5.0.2
17 | peerDependenciesMeta:
18 | bufferutil:
19 | optional: true
20 | utf-8-validate:
21 | optional: true
22 | dev: false
23 |
--------------------------------------------------------------------------------
/233park-web/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | # Node.js
11 | node_modules
12 | dist
13 | dist-ssr
14 | *.local
15 |
16 | # Editor directories and files
17 | .vscode/*
18 | !.vscode/extensions.json
19 | .idea
20 | .DS_Store
21 | *.suo
22 | *.ntvs*
23 | *.njsproj
24 | *.sln
25 | *.sw?
26 |
27 | # Vite
28 | /dist
29 | dist-ssr
30 | .env.*.local
31 |
32 | # IDE
33 | .idea
34 | .vscode
35 | *.suo
36 | *.ntvs*
37 | *.njsproj
38 | *.sln
39 | *.sw?
40 |
41 | # System Files
42 | .DS_Store
43 | Thumbs.db
44 |
--------------------------------------------------------------------------------
/233park-web/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
3 |
4 |
5 |
6 |
7 |
8 | Header
9 | Main
10 | Footer
11 |
12 |
13 |
14 |
15 |
20 |
23 |
--------------------------------------------------------------------------------
/Vue3-WebSocket-demo/src/assets/main.css:
--------------------------------------------------------------------------------
1 | @import './base.css';
2 |
3 | #app {
4 | max-width: 1280px;
5 | margin: 0 auto;
6 | padding: 2rem;
7 |
8 | font-weight: normal;
9 | }
10 |
11 | a,
12 | .green {
13 | text-decoration: none;
14 | color: hsla(160, 100%, 37%, 1);
15 | transition: 0.4s;
16 | }
17 |
18 | @media (hover: hover) {
19 | a:hover {
20 | background-color: hsla(160, 100%, 37%, 0.2);
21 | }
22 | }
23 |
24 | @media (min-width: 1024px) {
25 | body {
26 | display: flex;
27 | place-items: center;
28 | }
29 |
30 | #app {
31 | display: grid;
32 | grid-template-columns: 1fr 1fr;
33 | padding: 0 2rem;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/topo-web/src/assets/main.css:
--------------------------------------------------------------------------------
1 | @import './base.css';
2 |
3 | #app {
4 | max-width: 1280px;
5 | margin: 0 auto;
6 | padding: 2rem;
7 | font-weight: normal;
8 | }
9 |
10 | a,
11 | .green {
12 | text-decoration: none;
13 | color: hsla(160, 100%, 37%, 1);
14 | transition: 0.4s;
15 | padding: 3px;
16 | }
17 |
18 | @media (hover: hover) {
19 | a:hover {
20 | background-color: hsla(160, 100%, 37%, 0.2);
21 | }
22 | }
23 |
24 | @media (min-width: 1024px) {
25 | body {
26 | display: flex;
27 | place-items: center;
28 | }
29 |
30 | #app {
31 | display: grid;
32 | grid-template-columns: 1fr 1fr;
33 | padding: 0 2rem;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/233park-web/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "233park-web",
3 | "private": true,
4 | "version": "0.0.0",
5 | "homepage": "https://sincerecsl.github.io/Vue.js-Study/233park-web/",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "axios": "^1.9.0",
13 | "mockjs": "^1.1.0",
14 | "vant": "^4.9.19",
15 | "vite-plugin-mock": "^3.0.2",
16 | "vue": "^3.5.13"
17 | },
18 | "devDependencies": {
19 | "@vitejs/plugin-vue": "^5.2.3",
20 | "amfe-flexible": "^2.2.1",
21 | "gh-pages": "^6.3.0",
22 | "postcss-pxtorem": "^6.1.0",
23 | "vite": "^6.3.5"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/my-vue-app/src/store/index.ts:
--------------------------------------------------------------------------------
1 | // store.ts
2 | import { InjectionKey } from 'vue'
3 | import { createStore, useStore as baseUseStore, Store } from 'vuex'
4 | export interface State {
5 | count: number
6 | }
7 |
8 | export const key: InjectionKey
3 |
5 |
6 |
17 |
30 |
--------------------------------------------------------------------------------
/topo-web/src/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | }
15 |
16 | * {
17 | box-sizing: border-box;
18 | }
19 |
20 | body {
21 | margin: 0;
22 | display: flex;
23 | place-items: center;
24 | min-width: 320px;
25 | min-height: 100vh;
26 | }
27 |
28 | #app {
29 | max-width: 1280px;
30 | margin: 0 auto;
31 | padding: 2rem;
32 | text-align: center;
33 | width: 100%;
34 | height: 100vh;
35 | }
36 |
--------------------------------------------------------------------------------
/my-vue-app/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "useDefineForClassFields": true,
5 | "module": "esnext",
6 | "moduleResolution": "node",
7 | "strict": true,
8 | "jsx": "preserve",
9 | "sourceMap": true,
10 | "resolveJsonModule": true,
11 | "esModuleInterop": true,
12 | "skipLibCheck":true,//解决打包报 `vue-tsc --noEmit && vite build` 的错，忽略所有的声明文件（*.d.ts）的类型检查
13 | "lib": ["esnext", "dom"],
14 | "baseUrl": ".",
15 | "paths": {
16 | "@/*": [
17 | "src/*"
18 | ]
19 | }
20 | },
21 | // ts 排除文件
22 | "exclude": ["node_modules"],
23 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
24 | "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 |
--------------------------------------------------------------------------------
/topo-web/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "noEmit": true,
15 | "jsx": "preserve",
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noFallthroughCasesInSwitch": true
22 | },
23 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
24 | "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 |
--------------------------------------------------------------------------------
/my-vue-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "my-vue-app",
3 | "private": true,
4 | "version": "0.0.0",
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "vue-tsc --noEmit && vite build",
8 | "preview": "vite preview"
9 | },
10 | "dependencies": {
11 | "@types/node": "^18.11.17",
12 | "a": "^2.1.2",
13 | "element-plus": "^2.2.27",
14 | "vue": "^3.2.45",
15 | "vue-router": "^4.1.6",
16 | "vuex": "^4.1.0"
17 | },
18 | "devDependencies": {
19 | "@vitejs/plugin-vue": "^4.0.0",
20 | "eslint": "^8.30.0",
21 | "eslint-plugin-vue": "^9.8.0",
22 | "sass": "^1.57.1",
23 | "sass-loader": "^13.2.0",
24 | "typescript": "^4.9.4",
25 | "vite": "^4.0.2",
26 | "vue-eslint-parser": "^9.1.0",
27 | "vue-tsc": "^1.0.16"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/Vue3-WebSocket-demo/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
16 |
17 |
18 |
41 |
--------------------------------------------------------------------------------
/Vue3-WebSocket-demo/src/hooks/websocket.ts:
--------------------------------------------------------------------------------
1 | import { WS_ADDRESS } from "../configs";
2 | export function useWebSocket() {
3 | const ws = new WebSocket(WS_ADDRESS)
4 |
5 | const init = () =>{
6 | bindEvent();
7 | }
8 |
9 | function bindEvent(){
10 | ws.addEventListener('open',handleOpen,false)
11 | ws.addEventListener('close',handleClose,false)
12 | ws.addEventListener('error',handleError,false)
13 | ws.addEventListener('message ',handleMessage,false)
14 | }
15 |
16 | function handleOpen(event:any){
17 | console.log("WebSocket is open now.",event);
18 | }
19 | function handleClose(event:any){
20 | console.log("WebSocket is close now.",event);
21 | }
22 | function handleError(event:any){
23 | console.log("WebSocket is error now.",event);
24 | }
25 | function handleMessage(event:any){
26 | console.log("WebSocket is message now.",event);
27 | }
28 | init();
29 | return ws;
30 | }
31 |
--------------------------------------------------------------------------------
/my-vue-app/src/layout/components/Sidebar/Item.vue:
--------------------------------------------------------------------------------
1 |
9 |
41 |
--------------------------------------------------------------------------------
/Vue3-WebSocket-demo/server/index.js:
--------------------------------------------------------------------------------
1 | const WebSocket = require("ws");
2 | // import { WebSocketServer } from 'ws';
3 | ;((Ws) => {
4 | const server = new Ws.Server({ port: 8000 });
5 | const init = () => {
6 | bindEvent();
7 | };
8 |
9 | function bindEvent() {
10 | server.on('open', handleOpen);
11 | server.on('close', handleClose);
12 | server.on('error', handleError);
13 | server.on('connection', handleConnection);
14 | }
15 |
16 | function handleOpen() {
17 | console.log("WebSocket Open");
18 | }
19 |
20 | function handleClose() {
21 | console.log("WebSocket Close");
22 | }
23 |
24 | function handleError() {
25 | console.log("WebSocket Error");
26 | }
27 |
28 | function handleConnection(ws) {
29 | console.log("WebSocket Connection");
30 | ws.on("message", handleMessage);
31 | }
32 |
33 | function handleMessage(msg) {
34 | console.log("msg");
35 | }
36 |
37 | init();
38 |
39 | })(WebSocket);
40 |
41 |
--------------------------------------------------------------------------------
/my-vue-app/README.md:
--------------------------------------------------------------------------------
1 | # Vue 3 + Typescript + Vite
2 |
3 | This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `
42 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import vue from '@vitejs/plugin-vue'
3 | import { viteMockServe } from 'vite-plugin-mock'
4 | import path from 'path'
5 | import { fileURLToPath } from 'url'
6 |
7 | const __filename = fileURLToPath(import.meta.url)
8 | const __dirname = path.dirname(__filename)
9 |
10 | // https://vitejs.dev/config/
11 | export default defineConfig({
12 | base: '/Vue.js-Study/233park-web/',
13 | plugins: [
14 | vue(),
15 | viteMockServe({
16 | mockPath: 'mock',
17 | supportTs: false,
18 | localEnabled: true,
19 | logger: true,
20 | cors: true,
21 | ignoreFiles: [],
22 | watch: true,
23 | esModule: true,
24 | prodEnabled: true,
25 | injectCode: `
26 | import { setupProdMockServer } from './mock/mockProdServer';
27 | setupProdMockServer();
28 | `,
29 | }),
30 | ],
31 | resolve: {
32 | alias: {
33 | '@': path.resolve(__dirname, './src'),
34 | },
35 | },
36 | server: {
37 | host: '0.0.0.0'
38 | },
39 | build: {
40 | outDir: 'dist',
41 | assetsDir: 'assets',
42 | emptyOutDir: true
43 | }
44 | })
--------------------------------------------------------------------------------
/my-vue-app/src/layout/components/Settings/checkBoxList.js:
--------------------------------------------------------------------------------
1 | export default [{
2 | imageL: require("@/assets/images/dark.svg"),
3 | alt: "dark",
4 | name: "ThemeDark",
5 | },
6 | {
7 | imageL: require("@/assets/images/light.svg"),
8 | alt: "light",
9 | name: "ThemeLight",
10 | },
11 | {
12 | imageL: require("@/assets/images/gray.svg"),
13 | alt: "gray",
14 | name: "ThemeGray",
15 | },
16 | {
17 | imageL: require("@/assets/images/green.svg"),
18 | alt: "green",
19 | name: "ThemeGreen",
20 | },
21 | {
22 | imageL: require("@/assets/images/blue.svg"),
23 | alt: "blue",
24 | name: "ThemeBlue",
25 | },
26 | {
27 | imageL: require("@/assets/images/purple.svg"),
28 | alt: "purple",
29 | name: "ThemePurple",
30 | },
31 | {
32 | imageL: require("@/assets/images/red.svg"),
33 | alt: "red",
34 | name: "ThemeRed",
35 | },
36 | {
37 | imageL: require("@/assets/images/yellow.svg"),
38 | alt: "yellow",
39 | name: "ThemeYellow",
40 | },
41 | {
42 | imageL: require("@/assets/images/orange.svg"),
43 | alt: "orange",
44 | name: "ThemeOrange",
45 | },
46 | ]
--------------------------------------------------------------------------------
/233park-web/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
1 | name: Deploy to GitHub Pages
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 |
8 | workflow_dispatch:
9 |
10 | # 设置权限
11 | permissions:
12 | contents: write
13 | pages: write
14 | id-token: write
15 |
16 | jobs:
17 | build-and-deploy:
18 | runs-on: ubuntu-latest
19 | environment:
20 | name: github-pages
21 | url: ${{ steps.deployment.outputs.page_url }}
22 | steps:
23 | - name: Checkout
24 | uses: actions/checkout@v4
25 |
26 | - name: Setup Node
27 | uses: actions/setup-node@v4
28 | with:
29 | node-version: "18"
30 | cache: 'npm'
31 |
32 | - name: Setup Pages
33 | uses: actions/configure-pages@v4
34 |
35 | - name: Install dependencies
36 | working-directory: ./233park-web
37 | run: npm install
38 |
39 | - name: Build
40 | working-directory: ./233park-web
41 | run: npm run build
42 |
43 | - name: Upload artifact
44 | uses: actions/upload-pages-artifact@v3
45 | with:
46 | path: ./233park-web/dist
47 |
48 | - name: Deploy to GitHub Pages
49 | id: deployment
50 | uses: actions/deploy-pages@v4
--------------------------------------------------------------------------------
/topo-web/eslint.config.ts:
--------------------------------------------------------------------------------
1 | import { globalIgnores } from 'eslint/config'
2 | import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
3 | import pluginVue from 'eslint-plugin-vue'
4 | import pluginVitest from '@vitest/eslint-plugin'
5 | import pluginPlaywright from 'eslint-plugin-playwright'
6 | import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
7 |
8 | // To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
9 | // import { configureVueProject } from '@vue/eslint-config-typescript'
10 | // configureVueProject({ scriptLangs: ['ts', 'tsx'] })
11 | // More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
12 |
13 | export default defineConfigWithVueTs(
14 | {
15 | name: 'app/files-to-lint',
16 | files: ['**/*.{ts,mts,tsx,vue}'],
17 | },
18 |
19 | globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
20 |
21 | pluginVue.configs['flat/essential'],
22 | vueTsConfigs.recommended,
23 |
24 | {
25 | ...pluginVitest.configs.recommended,
26 | files: ['src/**/__tests__/*'],
27 | },
28 |
29 | {
30 | ...pluginPlaywright.configs['flat/recommended'],
31 | files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
32 | },
33 | skipFormatting,
34 | )
35 |
--------------------------------------------------------------------------------
/233park-web/README.md:
--------------------------------------------------------------------------------
1 | # 233乐园社区发现页
2 |
3 | 基于Vue 3 + Vite实现的仿233乐园社区发现页面，实现了上拉加载、下拉刷新和瀑布流布局效果。
4 |
5 | ## 功能特点
6 |
7 | - 上拉加载更多
8 | - 下拉刷新
9 | - 瀑布流布局（双列自适应）
10 | - 视频内容支持播放
11 | - 支持不同数据类型切换（通过URL参数）
12 |
13 | ## 在线体验
14 |
15 | 可以通过GitHub Pages访问此项目：
16 |
17 | 1. 推荐数据（默认）: `https://<你的用户名>.github.io/233Park/`
18 | 2. 游戏圈数据: `https://<你的用户名>.github.io/233Park/?type=game`
19 |
20 | ## 安装和运行
21 |
22 | 1. 安装依赖
23 | ```bash
24 | npm install
25 | ```
26 |
27 | 2. 开发模式运行
28 | ```bash
29 | npm run dev
30 | ```
31 |
32 | 3. 打包
33 | ```bash
34 | npm run build
35 | ```
36 |
37 | ## 部署方式
38 |
39 | 项目已配置GitHub Actions自动部署到GitHub Pages：
40 |
41 | 1. Fork本仓库到你的GitHub账号下
42 | 2. 在仓库设置中启用GitHub Pages，选择GitHub Actions作为源
43 | 3. 推送代码到main分支，GitHub Actions将自动构建并部署
44 |
45 | ## 技术栈
46 |
47 | - Vue 3 (Composition API)
48 | - Vant UI
49 | - Axios
50 | - Mock.js
51 | - PostCSS (移动端适配)
52 |
53 | # Vue 3 + Vite
54 |
55 | This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `
40 |
41 |
--------------------------------------------------------------------------------
/Vue3-WebSocket-demo/src/views/HomeView.vue:
--------------------------------------------------------------------------------
1 |
42 |
43 | {{ msg }}
10 |11 | You’ve successfully created a project with 12 | Vite + 13 | Vue 3. What's next? 14 |
15 |
9 |
10 |
11 |
15 |
16 |
3 |
4 |
13 |
14 |
15 |
87 |
--------------------------------------------------------------------------------
/my-vue-app/src/layout/components/AppMain/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
10 |
12 |
8 |
10 |
3 |
4 |
5 | ![]()
6 |
7 |
8 | ![]()
9 |
10 |
11 |
12 |
13 |
14 |
29 |
30 |
78 |
--------------------------------------------------------------------------------
/Vue3-WebSocket-demo/src/components/icons/IconEcosystem.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
--------------------------------------------------------------------------------
/Vue3-WebSocket-demo/README.md:
--------------------------------------------------------------------------------
1 | # Vue3-WebSocket-demo
2 |
3 | This template should help get you started developing with Vue 3 in Vite.
4 |
5 | ## Recommended IDE Setup
6 |
7 | [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).
8 |
9 | ## Type Support for `.vue` Imports in TS
10 |
11 | TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
12 |
13 | If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
14 |
15 | 1. Disable the built-in TypeScript Extension
16 | 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
17 | 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
18 | 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
19 |
20 | ## Customize configuration
21 |
22 | See [Vite Configuration Reference](https://vitejs.dev/config/).
23 |
24 | ## Project Setup
25 |
26 | ```sh
27 | npm install
28 | ```
29 |
30 | ### Compile and Hot-Reload for Development
31 |
32 | ```sh
33 | npm run dev
34 | ```
35 |
36 | ### Type-Check, Compile and Minify for Production
37 |
38 | ```sh
39 | npm run build
40 | ```
41 |
42 | ### Run Unit Tests with [Vitest](https://vitest.dev/)
43 |
44 | ```sh
45 | npm run test:unit
46 | ```
47 |
48 | ### Lint with [ESLint](https://eslint.org/)
49 |
50 | ```sh
51 | npm run lint
52 | ```
53 |
--------------------------------------------------------------------------------
/233park-web/DEPLOY.md:
--------------------------------------------------------------------------------
1 | # 233乐园项目GitHub Pages部署指南
2 |
3 | 本文档详细说明如何将233乐园项目部署到GitHub Pages以供在线访问。
4 |
5 | ## 前期准备
6 |
7 | 1. 拥有GitHub账号
8 | 2. 安装Git客户端
9 | 3. 本地项目已完成开发
10 |
11 | ## 部署步骤
12 |
13 | ### 1. 创建GitHub仓库
14 |
15 | 1. 登录GitHub账号
16 | 2. 点击右上角"+"图标 → "New repository"
17 | 3. 仓库名称填写"233Park"（或其他名称）
18 | 4. 设置为Public（公开）仓库
19 | 5. 点击"Create repository"创建仓库
20 |
21 | ### 2. 配置项目
22 |
23 | 1. 修改项目的vite.config.js文件，设置base为你的仓库名：
24 | ```js
25 | export default defineConfig({
26 | base: '/233Park/', // 如果仓库名不是233Park，请修改为你的仓库名
27 | // 其他配置...
28 | })
29 | ```
30 |
31 | 2. 修改package.json中的homepage字段：
32 | ```json
33 | {
34 | "homepage": "https://
3 |
10 |
11 |
13 |
14 |
16 |
17 |
18 | 进入聊天室
19 |
20 | Reset
21 |
22 |
23 |
24 |
25 |
74 |
75 |
84 |
--------------------------------------------------------------------------------
/233park-web/src/components/TopNav.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
18 |
19 |
20 |
21 |
52 |
53 |
--------------------------------------------------------------------------------
/my-vue-app/src/components/menu.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
30 |
31 |
32 |
40 |
41 |
--------------------------------------------------------------------------------
/my-vue-app/src/layout/components/Sidebar/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
11 | ![post cover]()
17 |
18 |
19 |
29 | {{ post.title }}
20 |
21 | ![avatar]()
22 |
23 |
28 |
24 |
27 |
3 |
5 |
10 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
66 |
67 |
77 |
--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
1 | name: 部署到GitHub Pages
2 |
3 | on:
4 | push:
5 | branches: [ master, main ]
6 | workflow_dispatch:
7 |
8 | jobs:
9 | build-and-deploy:
10 | runs-on: ubuntu-latest
11 | permissions:
12 | contents: write
13 | steps:
14 | - name: 检出代码
15 | uses: actions/checkout@v3.5.3
16 |
17 | - name: 设置Node.js
18 | uses: actions/setup-node@v3.8.1
19 | with:
20 | node-version: '18'
21 | cache: 'npm'
22 | cache-dependency-path: '233park-web/package-lock.json'
23 |
24 | - name: 安装依赖和构建
25 | working-directory: 233park-web
26 | run: |
27 | npm ci
28 | npm run build
29 | # 确保资源引用正确
30 | sed -i 's|/Vue.js-Study/233park-web/|./|g' dist/index.html
31 |
32 | - name: 准备部署文件
33 | run: |
34 | # 创建根目录重定向页面
35 | cat > redirect.html << EOF
36 |
37 |
38 |
39 |
40 |
41 | 233Park - Vue.js项目
62 |正在跳转到项目页面，如果没有自动跳转，请点击这里。
63 | 64 | 65 | EOF 66 | 67 | # 创建部署目录结构 68 | mkdir -p dist/233park-web 69 | cp -r 233park-web/dist/* dist/233park-web/ 70 | cp redirect.html dist/index.html 71 | touch dist/.nojekyll 72 | 73 | - name: 部署到GitHub Pages 74 | uses: peaceiris/actions-gh-pages@v3 75 | with: 76 | github_token: ${{ secrets.GITHUB_TOKEN }} 77 | publish_dir: ./dist 78 | force_orphan: true -------------------------------------------------------------------------------- /my-vue-app/src/assets/CSS/common.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 7 | abbr, acronym, address, big, cite, 8 | code, 9 | del, 10 | dfn, 11 | em, 12 | img, 13 | ins, 14 | kbd, 15 | q, 16 | s, 17 | samp, 18 | small, 19 | strike, 20 | strong, 21 | sub, 22 | sup, 23 | tt, 24 | var, 25 | b, 26 | u, 27 | i, 28 | center, 29 | dl, 30 | dt, 31 | dd, 32 | ol, 33 | ul, 34 | li, 35 | fieldset, 36 | form, 37 | label, 38 | legend, 39 | table, 40 | caption, 41 | tbody, 42 | tfoot, 43 | thead, 44 | tr, 45 | th, 46 | td, 47 | article, 48 | aside, 49 | canvas, 50 | details, 51 | embed, 52 | figure, 53 | figcaption, 54 | footer, 55 | header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 56 | margin: 0; 57 | padding: 0; 58 | } 59 | 60 | html, 61 | body { 62 | font-size: 12px; 63 | font-family: Microsoft Yahei, Arial, Helvetica, sans-serif; 64 | width: 100%; 65 | height: 100%; 66 | min-width: 1200px; 67 | } 68 | 69 | img { 70 | vertical-align: middle; 71 | } 72 | 73 | 74 | :focus { 75 | outline: none; 76 | } 77 | 78 | table { 79 | border-collapse: collapse; 80 | border-spacing: 0; 81 | } 82 | 83 | ul, 84 | ol, 85 | dd, 86 | dt, 87 | dl, 88 | li { 89 | list-style-type: none; 90 | } 91 | 92 | a { 93 | text-decoration: none; 94 | -webkit-touch-callout: none; 95 | -webkit-user-select: none; 96 | } 97 | 98 | a, 99 | input, 100 | select { 101 | -webkit-tap-highlight-color: transparent; 102 | -webkit-appearance: none; 103 | -moz-appearance: none; 104 | -webkit-border-radius: 0; 105 | outline: none; 106 | } 107 | 108 | .fl { 109 | float: left; 110 | } 111 | 112 | .fr { 113 | float: right; 114 | } 115 | 116 | .clearfix:before, 117 | .clearfix:after { 118 | content: ''; 119 | display: block; 120 | clear: both; 121 | height: 0; 122 | } 123 | 124 | .clearfix { 125 | *zoom: 1; 126 | } 127 | 128 | p, 129 | h1, 130 | h2, 131 | h3, 132 | h4, 133 | h5, 134 | h6, 135 | span, 136 | i, 137 | em { 138 | word-wrap: break-word; 139 | font-style: normal; 140 | font-weight: normal; 141 | } 142 | 143 | .before:before { 144 | content: ''; 145 | display: table; 146 | } 147 | 148 | button { 149 | border: none; 150 | appearance: none; 151 | -webkit-appearance: none; 152 | outline: none; 153 | } 154 | 155 | button::after { 156 | border: none; 157 | appearance: none; 158 | -webkit-appearance: none; 159 | outline: none; 160 | } 161 | 162 | input, 163 | textarea { 164 | //-moz-user-focus: none; 165 | //-moz-user-select: none; 166 | -webkit-appearance: none; 167 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 168 | line-height: normal !important; 169 | outline: none; 170 | border: none; 171 | } 172 | -------------------------------------------------------------------------------- /233park-web/src/App.vue: -------------------------------------------------------------------------------- 1 | 83 | 84 | 85 |
86 |
102 |
103 |
104 |
138 |
--------------------------------------------------------------------------------
/topo-web/playwright.config.ts:
--------------------------------------------------------------------------------
1 | import process from 'node:process'
2 | import { defineConfig, devices } from '@playwright/test'
3 |
4 | /**
5 | * Read environment variables from file.
6 | * https://github.com/motdotla/dotenv
7 | */
8 | // require('dotenv').config();
9 |
10 | /**
11 | * See https://playwright.dev/docs/test-configuration.
12 | */
13 | export default defineConfig({
14 | testDir: './e2e',
15 | /* Maximum time one test can run for. */
16 | timeout: 30 * 1000,
17 | expect: {
18 | /**
19 | * Maximum time expect() should wait for the condition to be met.
20 | * For example in `await expect(locator).toHaveText();`
21 | */
22 | timeout: 5000,
23 | },
24 | /* Fail the build on CI if you accidentally left test.only in the source code. */
25 | forbidOnly: !!process.env.CI,
26 | /* Retry on CI only */
27 | retries: process.env.CI ? 2 : 0,
28 | /* Opt out of parallel tests on CI. */
29 | workers: process.env.CI ? 1 : undefined,
30 | /* Reporter to use. See https://playwright.dev/docs/test-reporters */
31 | reporter: 'html',
32 | /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
33 | use: {
34 | /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
35 | actionTimeout: 0,
36 | /* Base URL to use in actions like `await page.goto('/')`. */
37 | baseURL: process.env.CI ? 'http://localhost:4173' : 'http://localhost:5173',
38 |
39 | /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
40 | trace: 'on-first-retry',
41 |
42 | /* Only on CI systems run the tests headless */
43 | headless: !!process.env.CI,
44 | },
45 |
46 | /* Configure projects for major browsers */
47 | projects: [
48 | {
49 | name: 'chromium',
50 | use: {
51 | ...devices['Desktop Chrome'],
52 | },
53 | },
54 | {
55 | name: 'firefox',
56 | use: {
57 | ...devices['Desktop Firefox'],
58 | },
59 | },
60 | {
61 | name: 'webkit',
62 | use: {
63 | ...devices['Desktop Safari'],
64 | },
65 | },
66 |
67 | /* Test against mobile viewports. */
68 | // {
69 | // name: 'Mobile Chrome',
70 | // use: {
71 | // ...devices['Pixel 5'],
72 | // },
73 | // },
74 | // {
75 | // name: 'Mobile Safari',
76 | // use: {
77 | // ...devices['iPhone 12'],
78 | // },
79 | // },
80 |
81 | /* Test against branded browsers. */
82 | // {
83 | // name: 'Microsoft Edge',
84 | // use: {
85 | // channel: 'msedge',
86 | // },
87 | // },
88 | // {
89 | // name: 'Google Chrome',
90 | // use: {
91 | // channel: 'chrome',
92 | // },
93 | // },
94 | ],
95 |
96 | /* Folder for test artifacts such as screenshots, videos, traces, etc. */
97 | // outputDir: 'test-results/',
98 |
99 | /* Run your local dev server before starting the tests */
100 | webServer: {
101 | /**
102 | * Use the dev server by default for faster feedback loop.
103 | * Use the preview server on CI for more realistic testing.
104 | * Playwright will re-use the local server if there is already a dev-server running.
105 | */
106 | command: process.env.CI ? 'npm run preview' : 'npm run dev',
107 | port: process.env.CI ? 4173 : 5173,
108 | reuseExistingServer: !process.env.CI,
109 | },
110 | })
111 |
--------------------------------------------------------------------------------
/Vue3-WebSocket-demo/src/components/TheWelcome.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
90 |
91 |
97 |
99 |
100 |
101 | 38 | 39 | More instructions are available in
README.md.
40 |
3 |
6 |
7 |
9 |
11 |
14 |
15 |
16 |
17 |
18 |
20 |
21 |
24 |
26 |
27 |
30 |
31 |
32 |
33 |
132 |
--------------------------------------------------------------------------------
/my-vue-app/src/layout/components/Settings/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
51 |
52 |
53 |
123 |
124 |
193 |
--------------------------------------------------------------------------------
/233park-web/mock/discovery.js:
--------------------------------------------------------------------------------
1 | import Mock from 'mockjs'
2 |
3 | // 游戏类型帖子
4 | const gamePostsData = {
5 | code: 0,
6 | data: {
7 | hasMore: true,
8 | list: [
9 | {
10 | id: 1,
11 | title: '[版本前瞻] 手游新版本预告——重置巢穴型，部分恐龙新羽毛',
12 | author: '游戏云',
13 | authorAvatar: 'https://picsum.photos/50/50?random=101',
14 | likes: 10,
15 | cover: 'https://picsum.photos/400/200?random=1',
16 | type: 'image',
17 | tag: '游戏'
18 | },
19 | {
20 | id: 2,
21 | title: '三角洲行动: 全面战场题味性升级, 夺旗, 攻防合集, 来玩',
22 | author: '玩家俱乐部',
23 | authorAvatar: 'https://picsum.photos/50/50?random=102',
24 | likes: 644,
25 | cover: 'https://picsum.photos/400/200?random=2',
26 | type: 'video',
27 | videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
28 | tag: '游戏'
29 | },
30 | {
31 | id: 3,
32 | title: '[推荐地图一瞥花酒楼] 第三期',
33 | author: '我是你的美食家',
34 | authorAvatar: 'https://picsum.photos/50/50?random=103',
35 | likes: 9,
36 | cover: 'https://picsum.photos/400/200?random=3',
37 | type: 'image',
38 | tag: '游戏'
39 | },
40 | {
41 | id: 4,
42 | title: '梅雨沙漠挡不住技巧！用这番垂直上一层楼',
43 | author: '沙漠掘金',
44 | authorAvatar: 'https://picsum.photos/50/50?random=104',
45 | likes: 23,
46 | cover: 'https://picsum.photos/400/200?random=4',
47 | type: 'video',
48 | videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
49 | tag: '游戏'
50 | },
51 | {
52 | id: 5,
53 | title: '阿尔法测试结束，感谢各位玩家的参与和反馈',
54 | author: '开发日志',
55 | authorAvatar: 'https://picsum.photos/50/50?random=105',
56 | likes: 127,
57 | cover: 'https://picsum.photos/400/200?random=5',
58 | type: 'image',
59 | tag: '游戏'
60 | },
61 | {
62 | id: 6,
63 | title: '新手玩家福利：十大必学技巧分享',
64 | author: '游戏导师',
65 | authorAvatar: 'https://picsum.photos/50/50?random=106',
66 | likes: 88,
67 | cover: 'https://picsum.photos/400/200?random=6',
68 | type: 'video',
69 | videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
70 | tag: '游戏'
71 | }
72 | ]
73 | },
74 | message: 'success'
75 | }
76 |
77 | // 推荐类型帖子
78 | const recommendPostsData = {
79 | code: 0,
80 | data: {
81 | hasMore: true,
82 | list: [
83 | {
84 | id: 1,
85 | title: '【共筑家园🏠】黄在猪猪网里的小镇🌈🎈🐖',
86 | author: '小猪警官',
87 | authorAvatar: 'https://picsum.photos/50/50?random=201',
88 | likes: 79,
89 | cover: 'https://picsum.photos/400/200?random=101',
90 | type: 'image',
91 | tag: '推荐'
92 | },
93 | {
94 | id: 2,
95 | title: '夏日限定甜品制作，草莓牛奶冰淇淋',
96 | author: '甜品大师',
97 | authorAvatar: 'https://picsum.photos/50/50?random=202',
98 | likes: 45,
99 | cover: 'https://picsum.photos/400/200?random=102',
100 | type: 'video',
101 | videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
102 | tag: '推荐'
103 | },
104 | {
105 | id: 3,
106 | title: '阿姨，空千斤，天下第一舞',
107 | author: '青空千斤',
108 | authorAvatar: 'https://picsum.photos/50/50?random=203',
109 | likes: 32,
110 | cover: 'https://picsum.photos/400/200?random=103',
111 | type: 'image',
112 | tag: '推荐'
113 | },
114 | {
115 | id: 4,
116 | title: '大橘无情，家猫日常记录',
117 | author: '大橘无情',
118 | authorAvatar: 'https://picsum.photos/50/50?random=204',
119 | likes: 107,
120 | cover: 'https://picsum.photos/400/200?random=104',
121 | type: 'video',
122 | videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
123 | tag: '推荐'
124 | },
125 | {
126 | id: 5,
127 | title: '阿舒，你太美了，菜市场偶遇大明星',
128 | author: '追星少女',
129 | authorAvatar: 'https://picsum.photos/50/50?random=205',
130 | likes: 67,
131 | cover: 'https://picsum.photos/400/200?random=105',
132 | type: 'image',
133 | tag: '推荐'
134 | },
135 | {
136 | id: 6,
137 | title: '手工DIY：旧物改造再利用',
138 | author: '创意无限',
139 | authorAvatar: 'https://picsum.photos/50/50?random=206',
140 | likes: 37,
141 | cover: 'https://picsum.photos/400/200?random=106',
142 | type: 'video',
143 | videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4',
144 | tag: '推荐'
145 | }
146 | ]
147 | },
148 | message: 'success'
149 | }
150 |
151 | // 分页模拟函数
152 | function getPaginatedData(data, page, pageSize) {
153 | const clonedData = JSON.parse(JSON.stringify(data))
154 | const totalItems = clonedData.data.list.length
155 | const start = (page - 1) * pageSize
156 | const end = Math.min(start + pageSize, totalItems)
157 |
158 | // 模拟更多数据
159 | if (end >= totalItems && page < 5) {
160 | // 随机生成更多数据
161 | const moreItems = Mock.mock({
162 | [`list|${pageSize}`]: [{
163 | 'id|+1': totalItems + 1,
164 | 'title': '@ctitle(10, 30)',
165 | 'author': '@cname',
166 | 'authorAvatar': function() {
167 | return `https://picsum.photos/50/50?random=${Mock.Random.integer(300, 1000)}`
168 | },
169 | 'likes|1-1000': 1,
170 | 'cover': function() {
171 | return `https://picsum.photos/400/200?random=${Mock.Random.integer(200, 1000)}`
172 | },
173 | 'type|1': ['image', 'video'],
174 | 'videoUrl': 'https://www.w3schools.com/html/mov_bbb.mp4',
175 | 'tag': data === gamePostsData ? '游戏' : '推荐'
176 | }]
177 | }).list
178 |
179 | clonedData.data.list = clonedData.data.list.concat(moreItems)
180 | clonedData.data.hasMore = page < 4 // 第5页后没有更多数据
181 | } else if (page >= 5) {
182 | clonedData.data.hasMore = false
183 | }
184 |
185 | // 返回分页数据
186 | const result = JSON.parse(JSON.stringify(clonedData))
187 | result.data.list = result.data.list.slice(start, start + pageSize)
188 | return result
189 | }
190 |
191 | const mockConfig = [
192 | {
193 | url: '/api/discovery',
194 | method: 'get',
195 | response: (req) => {
196 | const { type = 'recommend', page = 1, pageSize = 10 } = req.query
197 |
198 | let responseData
199 | if (type === 'game') {
200 | responseData = getPaginatedData(gamePostsData, parseInt(page), parseInt(pageSize))
201 | } else {
202 | responseData = getPaginatedData(recommendPostsData, parseInt(page), parseInt(pageSize))
203 | }
204 |
205 | return responseData
206 | }
207 | }
208 | ]
209 |
210 | export default mockConfig
--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
50 |
5 |
30 |
31 |
6 |
8 | 主题风格设置
7 |
9 |
24 |
11 | ![]()
12 |
23 |
14 |
15 |
20 |
21 |
22 |
25 | 主题颜色
26 |
29 | 系统布局配置
34 | 35 |
36 | 开启 标签页
37 |
39 |
40 |
41 | 显示 Logo
42 |
44 |
45 |
46 | 支持菜单栏横向拖拽
47 |
49 |
3 |
47 |
48 |
49 |
51 |
52 |
54 |
55 |
57 |
58 |
59 | 取 消
60 | 确 定
61 |
62 |
63 |
64 |
65 |
66 |
67 |
247 |
248 |
381 |
--------------------------------------------------------------------------------
/topo-web/src/components/TopologyGraph.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
11 |
24 |
31 |
32 | 布局设置
33 |
34 |
35 | 密码修改
36 |
37 |
38 | 退出登录
39 |
40 |
41 |
42 |
43 |
44 |
45 |
25 | ![]()
26 | {{ sUserName }}
27 |
28 |
29 |
30 |
3 |
4 |
5 |
6 |
7 |
372 |
373 |
391 | [
392 | {
393 | bsCityId:'',
394 | bsDistrictId:'',
395 | bsProjectNeTypeId:'',
396 | },
397 | {
398 | bsCityId:'',
399 | bsDistrictId:'',
400 | bsProjectNeTypeId:'',
401 | },
402 | ]
403 |
--------------------------------------------------------------------------------
/my-vue-app/src/layout/components/TagsView/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
29 |
30 |
31 |
324 |
325 |
401 |
--------------------------------------------------------------------------------