Skip to content
GitLab
Commit 646b90d2 authored by 健杭 徐's avatar 健杭 徐
Browse files

yes

parent 06f8c355
Expand all Show whitespace changes
Inline Side-by-side
comment/.gitignore deleted 100644 → 0
View file @ 06f8c355
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
comment/README.md deleted 100644 → 0
View file @ 06f8c355
```
cd comment
npm run dev
```
comment/eslint.config.js deleted 100644 → 0
View file @ 06f8c355
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)
comment/index.html deleted 100644 → 0
View file @ 06f8c355
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="https://pic4.zhimg.com/v2-bf5f58e7b583cd69ac228db9fdff377f_r.jpg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Xanadu's Comment</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
comment/package-lock.json deleted 100644 → 0
View file @ 06f8c355
This diff is collapsed.
comment/package.json deleted 100644 → 0
View file @ 06f8c355
{
"name": "my-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"react": "^19.1.0",
"react-dom": "^19.1.0"
},
"devDependencies": {
"@eslint/js": "^9.25.0",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@vitejs/plugin-react-swc": "^3.9.0",
"eslint": "^9.25.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^16.0.0",
"typescript": "~5.8.3",
"typescript-eslint": "^8.30.1",
"vite": "^6.3.5"
}
}
comment/src/App.tsx deleted 100644 → 0
View file @ 06f8c355
function AddComment({name, profilePhoto}:{name: string, profilePhoto:string}) {
if ((document.getElementById('textInput') as HTMLInputElement).value !== '') {
if (name === '') {
name = '小黑子'
}
const NewCommentPart = document.createElement('div')
const UserPhoto = document.createElement('img')
UserPhoto.className = 'comment-avatar'
UserPhoto.src = profilePhoto
UserPhoto.alt = name
UserPhoto.style.width = '30px'
UserPhoto.style.height = '30px'
UserPhoto.style.borderRadius = '50%'
NewCommentPart.appendChild(UserPhoto)
const UserCommentContent = document.createElement('div')
UserCommentContent.className = 'comment-content'
const UserName = document.createElement('span')
UserName.textContent = name
UserName.className = 'comment-meta'
UserCommentContent.appendChild(UserName)
const textInput = document.getElementById('textInput') as HTMLInputElement
const UserComment = document.createElement('p')
UserComment.textContent = textInput.value
UserComment.style.marginLeft = '10px'
textInput.value = '';
(document.getElementById('nameInput') as HTMLInputElement).value = '';
UserCommentContent.appendChild(UserComment)
const DeleteButtonArea = document.createElement('div')
DeleteButtonArea.className = 'comment-delete'
const DeleteButton = document.createElement('button')
DeleteButton.textContent = 'Delete'
DeleteButton.id = 'deleteButton'
DeleteButton.onclick = () => {
const commentItem = DeleteButton.closest('.comment-item')
if (commentItem) {
commentItem.remove()
}
}
DeleteButtonArea.appendChild(DeleteButton)
UserCommentContent.appendChild(DeleteButtonArea)
const CommentList = document.getElementById('commentlist') as HTMLUListElement
const NewComment = document.createElement('li')
NewComment.className = 'comment-item'
NewComment.style.listStyle = 'none'
NewComment.appendChild(NewCommentPart)
CommentList.appendChild(NewComment)
NewCommentPart.appendChild(UserCommentContent)
const Comment = document.getElementById('comment') as HTMLUListElement
Comment.appendChild(NewCommentPart)
}
else {
alert('textInput is null')
}
}
export default AddComment
\ No newline at end of file
comment/src/index.css deleted 100644 → 0
View file @ 06f8c355
:root {
/* Enhanced color palette */
--primary-color: #6366f1;
--primary-hover: #4f46e5;
--primary-light: #a5b4fc;
--secondary-color: #06b6d4;
--accent-color: #f59e0b;
--success-color: #10b981;
/* Text colors */
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #94a3b8;
/* Background colors */
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-accent: #f1f5f9;
--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
/* Border and shadows */
--border-color: #e2e8f0;
--border-radius: 16px;
--border-radius-sm: 8px;
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
--shadow-md: 0 4px 16px rgba(15, 23, 42, 0.1);
--shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.12);
--shadow-xl: 0 20px 64px rgba(15, 23, 42, 0.15);
/* Transitions */
--transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Global styles */
* {
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg-secondary);
background-image:
radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
min-height: 100vh;
margin: 0;
padding: 0;
line-height: 1.6;
color: var(--text-primary);
}
/* Header styling */
h1 {
background: var(--bg-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin: 2rem 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
animation: fadeInDown 0.8s ease-out;
}
h3 {
color: var(--text-secondary);
font-size: 1.5rem;
font-weight: 600;
text-align: center;
margin: 1.5rem 0;
position: relative;
}
h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--bg-gradient);
border-radius: 2px;
}
/* Input area styling */
.inputarea {
background: var(--bg-primary);
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-lg);
width: min(95%, 700px);
margin: 2rem auto;
border: 1px solid var(--border-color);
position: relative;
backdrop-filter: blur(10px);
animation: slideInUp 0.6s ease-out;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.inputarea::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--bg-gradient);
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.inputarea::after {
content: '';
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 6px;
background: linear-gradient(90deg, transparent, var(--primary-light), transparent);
opacity: 0.4;
border-radius: 3px;
}
/* Profile section in input area */
.inputarea > div:first-child {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.inputarea img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--primary-light);
box-shadow: var(--shadow-md);
transition: var(--transition-normal);
}
.inputarea img:hover {
transform: scale(1.05);
border-color: var(--primary-color);
}
/* Input field styling */
.inputarea input {
width: 100%;
padding: 1rem 1.25rem;
border: 2px solid var(--border-color);
border-radius: var(--border-radius-sm);
font-size: 1rem;
font-family: inherit;
transition: var(--transition-normal);
background: var(--bg-secondary);
outline: none;
resize: none;
}
.inputarea input::placeholder {
color: var(--text-muted);
font-style: italic;
}
.inputarea input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
background: var(--bg-primary);
transform: translateY(-1px);
}
/* Submit button styling */
#submitButton {
background: var(--bg-gradient);
color: white;
padding: 0.875rem 2rem;
border: none;
border-radius: var(--border-radius-sm);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: var(--transition-normal);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
position: relative;
overflow: hidden;
text-transform: uppercase;
letter-spacing: 0.5px;
align-self: flex-start;
}
#submitButton::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: var(--transition-normal);
}
#submitButton:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
#submitButton:hover::before {
left: 100%;
}
#submitButton:active {
transform: translateY(0);
}
/* Comment list container */
.comment {
width: min(95%, 700px);
margin: 0 auto 2rem;
}
#commentlist {
padding: 0;
margin: 0;
list-style: none;
}
/* Individual comment item styling */
.comment-item {
background: var(--bg-primary);
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-md);
margin-bottom: 1.5rem;
position: relative;
transition: var(--transition-normal);
border-left: 4px solid var(--primary-light);
animation: fadeInLeft 0.5s ease-out;
}
.comment-item:hover {
transform: translateY(-3px) translateX(5px);
box-shadow: var(--shadow-xl);
border-left-color: var(--primary-color);
}
.comment-item::before {
content: '';
position: absolute;
top: 1.5rem;
left: -2px;
width: 4px;
height: 24px;
background: var(--accent-color);
border-radius: 2px;
opacity: 0;
transition: var(--transition-normal);
}
.comment-item:hover::before {
opacity: 1;
}
/* Comment content layout */
.comment-item > div {
display: flex;
gap: 1rem;
align-items: flex-start;
}
/* Comment avatar */
.comment-avatar {
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
object-fit: cover;
border: 2px solid var(--primary-light) !important;
box-shadow: var(--shadow-sm) !important;
transition: var(--transition-normal) !important;
flex-shrink: 0;
}
.comment-item:hover .comment-avatar {
transform: scale(1.1);
border-color: var(--primary-color) !important;
}
/* Comment content area */
.comment-content {
flex: 1;
margin-left: 0 !important;
}
/* Comment meta (username) */
.comment-meta {
color: var(--text-secondary) !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
margin-bottom: 0.5rem !important;
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
}
.comment-meta::after {
content: '•';
color: var(--text-muted);
font-size: 0.75rem;
}
/* Comment text */
.comment-content p {
color: var(--text-primary) !important;
margin: 0 !important;
line-height: 1.7 !important;
padding: 1rem !important;
background: var(--bg-accent) !important;
border-radius: var(--border-radius-sm) !important;
position: relative !important;
border: 1px solid var(--border-color);
margin-left: 0 !important;
}
.comment-content p::before {
content: '' !important;
position: absolute !important;
left: -6px !important;
top: 1rem !important;
width: 0 !important;
height: 0 !important;
border-style: solid !important;
border-width: 6px 6px 6px 0 !important;
border-color: transparent var(--bg-accent) transparent transparent !important;
}
#deleteButton {
background: transparent;
color: var(--text-muted);
border: none;
cursor: pointer;
font-size: 0.875rem;
font-weight: 600;
transition: var(--transition-normal);
}
/* Animations */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
:root {
--text-primary: #f1f5f9;
--text-secondary: #cbd5e1;
--text-muted: #64748b;
--bg-primary: #1e293b;
--bg-secondary: #0f172a;
--bg-accent: #334155;
--border-color: #475569;
--bg-gradient: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
}
body {
background-image:
radial-gradient(circle at 25% 25%, rgba(79, 70, 229, 0.1) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
}
.inputarea input {
background: var(--bg-accent);
}
.inputarea input:focus {
background: var(--bg-primary);
}
}
/* Responsive design */
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
.inputarea {
padding: 1.5rem;
margin: 1rem auto;
width: min(95%, 100%);
}
.comment {
width: min(95%, 100%);
}
.comment-item {
padding: 1rem;
}
.comment-item > div {
flex-direction: column;
gap: 0.75rem;
}
.comment-avatar {
align-self: flex-start;
}
}
/* Scrollbar styling */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--primary-light);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-color);
}
\ No newline at end of file
comment/src/main.tsx deleted 100644 → 0
View file @ 06f8c355
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import AddComment from './App.tsx'
import './index.css'
const profilePhoto:string = 'https://pic4.zhimg.com/v2-bf5f58e7b583cd69ac228db9fdff377f_r.jpg'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<div>
<h1 style={{textAlign: 'center'}}>Welcome To Xanadu`s Comment</h1>
</div>
<Input_Area />
<div className='comment'>
<div>
<h3 style={{textAlign: 'center'}}>
All Comment
</h3>
</div>
<ul id='commentlist'></ul>
</div>
</StrictMode>
)
function Input_Area() {
return (
<div className='inputarea'>
<img src={profilePhoto} alt={'小黑子'}
style={{width: '40px', height: '40px', borderRadius: '50%'}} />
<input type="text" placeholder="Please enter your name" id="nameInput" />
<input type="text" placeholder="Please follow the Community Guidelines" id="textInput" onKeyUpCapture={
(e) => {
const name:string = (document.getElementById('nameInput') as HTMLInputElement).value;
if (e.key === 'Enter') {
AddComment({name, profilePhoto});
}
}
}/>
<button
id="submitButton"
onClick={() => AddComment({
name: (document.getElementById('nameInput') as HTMLInputElement).value,
profilePhoto: profilePhoto
})}
>
Submit
</button>
</div>
)
}
// Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
\ No newline at end of file
comment/src/object.ts deleted 100644 → 0
View file @ 06f8c355
class girlFriend {
name:string;
age:number;
character:string[];
height:number;
weight:number;
constructor(name:string, age:number, character:string[], height:number, weight:number) {
this.name = name;
this.age = age;
this.character = character;
this.height = height;
this.weight = weight;
}
}
const MyGirlFriend = new girlFriend("小红", 18, ["温柔", "善良"], 160, 50);
console.log(MyGirlFriend);
\ No newline at end of file
comment/src/vite-env.d.ts deleted 100644 → 0
View file @ 06f8c355
/// <reference types="vite/client" />
comment/tsconfig.app.json deleted 100644 → 0
View file @ 06f8c355
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}
comment/tsconfig.json deleted 100644 → 0
View file @ 06f8c355
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}
comment/tsconfig.node.json deleted 100644 → 0
View file @ 06f8c355
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}
comment/vite.config.ts deleted 100644 → 0
View file @ 06f8c355
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment